@include('partials.navbar')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700&display=swap');
    body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; }
    
    .step-timeline { display: flex; justify-content: space-between; position: relative; margin-bottom: 2.5rem; }
    .step-timeline::before { content: ''; position: absolute; top: 20px; left: 0; width: 100%; height: 4px; background-color: #e9ecef; z-index: 1; }
    .step-timeline-progress { position: absolute; top: 20px; left: 0; width: 50%; height: 4px; background-color: #2E3191; z-index: 2; }
    .step-bubble { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; flex: 1; }
    .step-circle { width: 44px; height: 44px; border-radius: 50%; background-color: #fff; border: 4px solid #e9ecef; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6c757d; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .step-bubble.completed .step-circle { background-color: #2E3191; border-color: #2E3191; color: #fff; }
    .step-bubble.active .step-circle { border-color: #2E3191; color: #2E3191; transform: scale(1.1); box-shadow: 0 4px 10px rgba(46,49,145,0.2); }
    .step-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; color: #6c757d; text-align: center; max-width: 90px; }
    .step-bubble.active .step-label { color: #2E3191; }

    @keyframes fieldShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
    .is-invalid-custom { border-color: #dc3545 !important; background-color: #fff8f8 !important; animation: fieldShake 0.4s ease-in-out; }
    .invalid-feedback-custom { color: #dc3545; font-size: 11px; font-weight: 600; margin-top: 4px; display: block; }
    
    .toggle-card { border: 1px solid #e9ecef; transition: all 0.3s ease; }
    .toggle-card:hover { border-color: #2E3191; }
    .form-check-input:checked { background-color: #2E3191; border-color: #2E3191; }
    .style-pointer { cursor: pointer; }
</style>

<main class="bg-light py-5 min-vh-100">
    <div class="container">
        
        <div class="d-flex flex-wrap justify-content-between align-items-center border-bottom pb-3 mb-4">
            <div>
                <h2 class="fw-bold text-dark mb-1" style="font-family: 'Montserrat', sans-serif;">Registration Workspace</h2>
                <p class="text-muted small mb-0">Active Token: <strong class="text-primary">{{ $resumeCode }}</strong></p>
            </div>
            <div class="mt-3 mt-sm-0">
                <span class="badge bg-dark px-3 py-2 fs-6 rounded-3">Role Profile: {{ strtoupper($registration->data_handler_role ?? 'HANDLER') }}</span>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-xl-11">
                <div class="card border-0 shadow-sm rounded-4 p-4 p-lg-5 bg-white">

                    <div class="step-timeline d-none d-md-flex">
                        <div class="step-timeline-progress"></div>
                        <div class="step-bubble completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Verification</div></div>
                        <div class="step-bubble completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Basic Details</div></div>
                        <div class="step-bubble completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Personal Data</div></div>
                        <div class="step-bubble completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Sensitive Data</div></div>
                        <div class="step-bubble active"><div class="step-circle">5</div><div class="step-label">Transfer</div></div>
                        <div class="step-bubble"><div class="step-circle">6</div><div class="step-label">Measures</div></div>
                        <div class="step-bubble"><div class="step-circle">7</div><div class="step-label">Turnover</div></div>
                        <div class="step-bubble"><div class="step-circle">8</div><div class="step-label">Overview</div></div>
                        <div class="step-bubble"><div class="step-circle">9</div><div class="step-label">Credentials</div></div>
                    </div>

                    <form id="stepFiveRegistrationForm" autocomplete="off">
                        @csrf
                        
                        <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-4">
                            <h4 class="fw-bold text-dark mb-0">CROSS-BORDER DATA TRANSFERS</h4>
                        </div>

                        <div class="card toggle-card rounded-3 p-4 mb-4 bg-light shadow-sm">
                            <div class="text-center">
                                <label class="form-label small fw-bold text-dark d-block mb-3 fs-6">Does your organization transfer or transmit personal data outside of the country?</label>
                                <div class="d-flex justify-content-center gap-5">
                                    <div class="form-check">
                                        <input class="form-check-input transfer-toggle-trigger style-pointer" type="radio" name="transfers_data_outside" id="transfer_yes" value="yes" 
                                            {{ (isset($registration) && $registration->transfers_data_outside === 'yes') ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold text-dark style-pointer" for="transfer_yes">
                                            <i class="fa fa-check-circle text-success me-1"></i> Yes, we do
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input transfer-toggle-trigger style-pointer" type="radio" name="transfers_data_outside" id="transfer_no" value="no" 
                                            {{ (!isset($registration) || $registration->transfers_data_outside !== 'yes') ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold text-dark style-pointer" for="transfer_no">
                                            <i class="fa fa-times-circle text-secondary me-1"></i> No, we do not
                                        </label>
                                    </div>
                                </div>
                                <div class="invalid-feedback-custom id-error-transfers_data_outside"></div>
                            </div>
                        </div>

                        <div id="transferInputFieldsWrapper" style="{{ (isset($registration) && $registration->transfers_data_outside === 'yes') ? '' : 'display: none;' }}">
                            
                            <div class="card border rounded-3 p-4 mb-3 bg-light">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label small fw-bold text-dark">Destination Country / Countries <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               name="transfer_countries" 
                                               class="form-control p-2.5 rounded-3 shadow-sm transfer-matrix-input text-dark" 
                                               value="{{ $registration->transfer_countries ?? '' }}" 
                                               placeholder="e.g. Kenya, United States, United Arab Emirates, South Africa">
                                        <div class="invalid-feedback-custom id-error-transfer_countries"></div>
                                        <span class="text-muted extra-small d-block mt-1" style="font-size: 11px;">List all individual sovereign territories where external cloud hosting databases or recipient third-party vendors reside.</span>
                                    </div>
                                    
                                    <div class="col-12 mt-4">
                                        <label class="form-label small fw-bold text-dark">Transfer Safeguards & Legal Conditions Applied <span class="text-danger">*</span></label>
                                        <textarea name="transfer_safeguards" 
                                                  class="form-control p-2.5 rounded-3 shadow-sm transfer-matrix-input text-dark" 
                                                  rows="3" 
                                                  placeholder="e.g. Bound by Standard Contractual Clauses (SCCs), explicitly authorized by data subject consent agreements, or relying on adequacy findings...">{{ $registration->transfer_safeguards ?? '' }}</textarea>
                                        <div class="invalid-feedback-custom id-error-transfer_safeguards"></div>
                                        <span class="text-muted extra-small d-block mt-1" style="font-size: 11px;">Describe the binding legal instruments, administrative protections, or structural compliance exclusions protecting the data categories during foreign transit.</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                            <a href="{{ route('registration.step', ['step' => 4]) }}" class="btn btn-light border px-4 py-2 rounded-3 text-secondary fw-semibold">
                                <i class="fa fa-arrow-left me-2"></i> Back to Step 4
                            </a>
                            <button type="submit" id="submitStepFiveBtn" class="btn text-white fw-bold px-5 py-2 rounded-3 border-0 shadow" style="background-color: #2E3191;">
                                Save & Continue <i class="fa fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const transferTriggers = document.querySelectorAll('.transfer-toggle-trigger');
    const inputWrapper = document.getElementById('transferInputFieldsWrapper');
    const inputFields = document.querySelectorAll('.transfer-matrix-input');

    // Dynamic Visibility Selection Toggles 
    transferTriggers.forEach(radio => {
        radio.addEventListener('change', function () {
            if (this.value === 'yes') {
                inputWrapper.style.display = 'block';
            } else {
                inputWrapper.style.display = 'none';
                inputFields.forEach(input => {
                    input.value = '';
                    input.classList.remove('is-invalid-custom');
                });
                document.querySelectorAll('.invalid-feedback-custom').forEach(fb => fb.innerHTML = '');
            }
        });
    });

    // AJAX Async Form Submit Pipeline Stream Handler
    document.getElementById('stepFiveRegistrationForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        let btn = document.getElementById('submitStepFiveBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i> Processing...';

        document.querySelectorAll('.is-invalid-custom').forEach(el => el.classList.remove('is-invalid-custom'));
        document.querySelectorAll('.invalid-feedback-custom').forEach(el => el.innerHTML = '');

        let formData = new FormData(this);

        fetch("{{ route('registration.step5.store') }}", {
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                window.location.href = data.redirect;
            } else {
                btn.disabled = false;
                btn.innerHTML = 'Save & Continue <i class="fa fa-arrow-right ms-2"></i>';
                
                // Route backend verification errors directly over the respective DOM fields
                for (const [key, messages] of Object.entries(data.errors)) {
                    let targetInput = document.querySelector(`[name="${key}"]`);
                    if (targetInput) {
                        targetInput.classList.add('is-invalid-custom');
                    }
                    
                    let targetErrorBox = document.querySelector(`.id-error-${key}`);
                    if (targetErrorBox) {
                        targetErrorBox.innerHTML = `<i class="fa fa-exclamation-circle me-1"></i> ${messages[0]}`;
                    }
                }
                
                // Smooth view scroll focal tracking adjustment
                let firstError = document.querySelector('.is-invalid-custom');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                } else {
                    let textError = document.querySelector('.invalid-feedback-custom:not(:empty)');
                    if (textError) textError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = 'Save & Continue <i class="fa fa-arrow-right ms-2"></i>';
            console.error("Pipeline Communication Error Exception:", err);
        });
    });
});
</script>