@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: 62.5%; 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; }
</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 completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Transfer</div></div>
                        <div class="step-bubble active"><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="stepSixRegistrationForm" 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">TECHNICAL AND ORGANIZATIONAL SECURITY MEASURES</h4>
                        </div>

                        <div class="card border rounded-3 p-4 mb-3 bg-light">
                            <div class="row g-4">
                                <div class="col-12">
                                    <label class="form-label small fw-bold text-dark fs-6 mb-1">1. Technical Security Measures <span class="text-danger">*</span></label>
                                    <p class="text-muted extra-small mb-2" style="font-size: 12px; line-height: 1.4;">
                                        Describe the hardware, software, and physical security configurations protecting personal data repositories from unauthorized exploitation or data leaks.
                                    </p>
                                    <textarea name="technical_measures" 
                                              class="form-control p-3 rounded-3 shadow-sm text-dark" 
                                              rows="4" 
                                              placeholder="e.g. End-to-end data encryption (AES-256) at rest and in transit, multi-factor authentication (MFA) protocols across all internal servers, automated firewalls, daily encrypted offsite backups, and physical biometric entry restrictions at data centers...">{{ $registration->technical_measures ?? '' }}</textarea>
                                    <div class="invalid-feedback-custom id-error-technical_measures"></div>
                                </div>
                                
                                <div class="col-12 mt-4">
                                    <label class="form-label small fw-bold text-dark fs-6 mb-1">2. Organizational Security Measures <span class="text-danger">*</span></label>
                                    <p class="text-muted extra-small mb-2" style="font-size: 12px; line-height: 1.4;">
                                        Outline internal administration standards, personnel rules, frameworks, and compliance audit policies enforced across teams handling personal data records.
                                    </p>
                                    <textarea name="organizational_measures" 
                                              class="form-control p-3 rounded-3 shadow-sm text-dark" 
                                              rows="4" 
                                              placeholder="e.g. Mandatory annual data protection training for all employees, signed non-disclosure agreements (NDAs) built into employment contracts, strict role-based access control (RBAC) policies, structured data breach response procedures, and regular third-party compliance privacy audits...">{{ $registration->organizational_measures ?? '' }}</textarea>
                                    <div class="invalid-feedback-custom id-error-organizational_measures"></div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                            <a href="{{ route('registration.step', ['step' => 5]) }}" 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 5
                            </a>
                            <button type="submit" id="submitStepSixBtn" 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 () {
    
    // AJAX Async Form Submit Pipeline Stream Handler
    document.getElementById('stepSixRegistrationForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        let btn = document.getElementById('submitStepSixBtn');
        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.step6.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' });
                }
            }
        })
        .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>