{{-- registration step 9 credentials workspace layout --}}
@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; }
    /* Progress bar advanced across the timeline space to reflect completion up through step 9 */
    .step-timeline-progress { position: absolute; top: 20px; left: 0; width: 100%; 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; }
    
    .requirement-item { font-size: 12px; font-weight: 500; transition: all 0.2s; }
</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;">Workspace Account Security</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">

                    <!-- STEP TIMELINE METRICS (UPDATED FOR STEP 9 ACTIVE STATE) -->
                    <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 completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Measures</div></div>
                        <div class="step-bubble completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Turnover</div></div>
                        <div class="step-bubble completed"><div class="step-circle"><i class="fa fa-check"></i></div><div class="step-label">Overview</div></div>
                        <div class="step-bubble active"><div class="step-circle">9</div><div class="step-label">Credentials</div></div>
                    </div>

                    <!-- FORM CONTAINER ENTRY -->
                    <form id="stepNineRegistrationForm" 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">CONFIGURE PORTAL IDENTITY CREDENTIALS</h4>
                        </div>

                        <p class="text-muted small mb-4">Establish cryptographic account protection rules to safely authenticate, update, and review your tracking profile within the compliance data registry engine dashboards.</p>

                        <div class="card border rounded-3 p-4 mb-4 bg-white shadow-sm">
                            <h5 class="fw-bold text-dark fs-6 border-bottom pb-2 mb-3"><i class="fa fa-key text-secondary me-2"></i>Workspace Access Accessor</h5>
                            <p class="text-muted extra-small mb-3" style="font-size: 12px;">Configure password complexity parameters down below to protect your active workspace registry record profile transaction systems.</p>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-dark" for="portalPassword">Declare Workspace Access Password <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light text-secondary"><i class="fa fa-lock"></i></span>
                                        <input type="password" name="portal_password" id="portalPassword" class="form-control p-2.5 text-dark" placeholder="••••••••">
                                        <button class="btn btn-outline-secondary" type="button" onclick="toggleFieldMask('portalPassword')"><i class="fa fa-eye"></i></button>
                                    </div>
                                    <div class="invalid-feedback-custom id-error-portal_password"></div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-dark" for="portalPasswordConfirm">Confirm Portal Input Access Password <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light text-secondary"><i class="fa fa-lock"></i></span>
                                        <input type="password" name="portal_password_confirmation" id="portalPasswordConfirm" class="form-control p-2.5 text-dark" placeholder="••••••••">
                                        <button class="btn btn-outline-secondary" type="button" onclick="toggleFieldMask('portalPasswordConfirm')"><i class="fa fa-eye"></i></button>
                                    </div>
                                    <div class="invalid-feedback-custom id-error-portal_password_confirmation"></div>
                                </div>
                            </div>

                            <div class="p-3 border rounded-3 bg-light mt-4">
                                <div class="fw-bold text-secondary mb-2" style="font-size:11px; letter-spacing:0.5px; text-transform: uppercase;">Portal Complexity Integrity Rules Vector Matrix:</div>
                                <div class="row g-2">
                                    <div class="col-md-4 requirement-item text-muted" id="req-length"><i class="fa fa-circle-notch me-2"></i>Min 8 Character Count</div>
                                    <div class="col-md-4 requirement-item text-muted" id="req-upper"><i class="fa fa-circle-notch me-2"></i>Uppercase Characters [A-Z]</div>
                                    <div class="col-md-4 requirement-item text-muted" id="req-lower"><i class="fa fa-circle-notch me-2"></i>Lowercase Characters [a-z]</div>
                                    <div class="col-md-4 requirement-item text-muted" id="req-number"><i class="fa fa-circle-notch me-2"></i>Numeric Digit Interventions [0-9]</div>
                                    <div class="col-md-4 requirement-item text-muted" id="req-special"><i class="fa fa-circle-notch me-2"></i>Symbols Unique Match [!@#$%^&*]</div>
                                    <div class="col-md-4 requirement-item text-muted" id="req-match"><i class="fa fa-circle-notch me-2"></i>Confirmation String Match</div>
                                </div>
                            </div>
                        </div>

                        <!-- NAVIGATION FOOTER BLOCK -->
                        <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                            <a href="{{ route('registration.step', ['step' => 8]) }}" 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 8
                            </a>
                            <button type="submit" id="submitStepNineBtn" class="btn text-white fw-bold px-5 py-2 rounded-3 border-0 shadow" style="background-color: #2E3191;" disabled>
                                Secure Credentials & Lock Profile <i class="fa fa-arrow-right ms-2"></i>
                            </button>
                        </div>
                    </form>

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

<script>
// 1. Password Field Visibility Toggle
function toggleFieldMask(fieldId) {
    const el = document.getElementById(fieldId);
    el.type = (el.type === 'password') ? 'text' : 'password';
}

document.addEventListener('DOMContentLoaded', function () {
    const pass = document.getElementById('portalPassword');
    const confirm = document.getElementById('portalPasswordConfirm');
    const nextBtn = document.getElementById('submitStepNineBtn');

    // 2. Realtime Alphanumeric Regex Complexity Tracker Pipeline
    const evaluateComplexityMatrix = () => {
        const val = pass.value;
        const conf = confirm.value;

        const requirements = {
            'req-length': val.length >= 8,
            'req-upper': /[A-Z]/.test(val),
            'req-lower': /[a-z]/.test(val),
            'req-number': /\d/.test(val),
            'req-special': /[!@#$%^&*(),.?":{}|<>]/.test(val),
            'req-match': val === conf && val !== ""
        };

        let matrixPassed = true;
        for (const [id, isValid] of Object.entries(requirements)) {
            const targetDOM = document.getElementById(id);
            if (!targetDOM) continue;
            
            if (isValid) {
                targetDOM.className = "col-md-4 requirement-item text-success fw-bold";
                targetDOM.innerHTML = '<i class="fa fa-check-circle me-2"></i>' + targetDOM.innerText.replace(/^[•\s\W\D]*/, '');
            } else {
                targetDOM.className = "col-md-4 requirement-item text-muted";
                // Restore static template structure layout placeholder icon elements
                targetDOM.innerHTML = '<i class="fa fa-circle-notch me-2"></i>' + targetDOM.innerText.replace(/^[•\s\W\D]*/, '');
                matrixPassed = false;
            }
        }
        
        // Toggle the final button only if credential complexity requirements are met
        nextBtn.disabled = !matrixPassed;
    };

    pass.addEventListener('input', evaluateComplexityMatrix);
    confirm.addEventListener('input', evaluateComplexityMatrix);

    // 3. AJAX Submission Lifecycle Pipeline
    document.getElementById('stepNineRegistrationForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        nextBtn.disabled = true;
        nextBtn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i> Generating Invoice Ledger...';

        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.step9.store') }}", {
            method: "POST",
            headers: { 
                "X-Requested-With": "XMLHttpRequest",
                "Accept": "application/json"
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // Route parameters point straight to Step 10 Checkout components
                window.location.href = "{{ route('registration.step', ['step' => 10]) }}";
            } else {
                nextBtn.disabled = false;
                evaluateComplexityMatrix();
                nextBtn.innerHTML = 'Secure Credentials & Lock Profile <i class="fa fa-arrow-right ms-2"></i>';
                
                if (data.errors) {
                    for (const [key, messages] of Object.entries(data.errors)) {
                        let fieldInput = document.querySelector(`[name="${key}"]`);
                        if (fieldInput) fieldInput.classList.add('is-invalid-custom');
                        
                        let errorContainer = document.querySelector(`.id-error-${key}`);
                        if (errorContainer) {
                            errorContainer.innerHTML = `<i class="fa fa-exclamation-circle me-1"></i> ${messages[0]}`;
                        }
                    }
                    let firstError = document.querySelector('.is-invalid-custom');
                    if (firstError) firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        })
        .catch(err => {
            nextBtn.disabled = false;
            evaluateComplexityMatrix();
            nextBtn.innerHTML = 'Secure Credentials & Lock Profile <i class="fa fa-arrow-right ms-2"></i>';
            console.error("Pipeline communication exception fault structural block:", err);
        });
    });
});
</script>