@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: 25%; 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 active"><div class="step-circle">3</div><div class="step-label">Personal Data</div></div>
                        <div class="step-bubble"><div class="step-circle">4</div><div class="step-label">Sensitive Data</div></div>
                        <div class="step-bubble"><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="stepThreeRegistrationForm" 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">PERSONAL DATA CLASSIFICATION</h4>
                            <button type="button" id="addPersonalDataGroupBtn" class="btn btn-sm btn-outline-success fw-bold px-3 py-2 rounded-3 shadow-sm">
                                <i class="fa fa-plus-circle me-1"></i> Add Category
                            </button>
                        </div>

                        @php 
                            $personalDataMatrix = [];
                            if (isset($registration) && $registration->personal_data_matrix) {
                                // If already auto-cast to an array by Eloquent, use it directly. Otherwise, manually decode.
                                $personalDataMatrix = is_array($registration->personal_data_matrix) 
                                    ? $registration->personal_data_matrix 
                                    : json_decode($registration->personal_data_matrix, true);
                            }
                        @endphp

                        <div id="personalDataDynamicContainer">
                            @if(is_array($personalDataMatrix) && count($personalDataMatrix) > 0)
                                @foreach($personalDataMatrix as $index => $item)
                                    <div class="card border rounded-3 p-4 mb-3 bg-light position-relative personal-data-group-node">
                                        <div class="row g-3">
                                            <div class="col-12">
                                                <label class="form-label small fw-bold text-dark">Category of Data Subjects <span class="text-danger">*</span></label>
                                                <input type="text" name="data_cat[]" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $item['category'] ?? '' }}" placeholder="e.g. Employees, Clients, Students, Patients">
                                                <div class="invalid-feedback-custom"></div>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label small fw-bold text-dark">Description of Personal Data <span class="text-danger">*</span></label>
                                                <textarea name="data_description[]" class="form-control p-2.5 rounded-3 shadow-sm" rows="2" placeholder="e.g. Names, Identification numbers, Location data, Contact info">{{ $item['description'] ?? '' }}</textarea>
                                                <div class="invalid-feedback-custom"></div>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label small fw-bold text-dark">Purpose of Processing <span class="text-danger">*</span></label>
                                                <textarea name="data_purpose[]" class="form-control p-2.5 rounded-3 shadow-sm" rows="2" placeholder="e.g. Invoicing, Payroll administration, Provision of medical services">{{ $item['purpose'] ?? '' }}</textarea>
                                                <div class="invalid-feedback-custom"></div>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-end mt-3 {{ $index === 0 ? 'd-none' : '' }} dynamic-remove-wrapper">
                                            <button type="button" class="btn btn-sm btn-outline-danger remove-data-node-btn px-4 fw-bold rounded-2 shadow-sm">
                                                <i class="fa fa-trash-alt me-1"></i> Delete Category
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="card border rounded-3 p-4 mb-3 bg-light position-relative personal-data-group-node">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label small fw-bold text-dark">Category of Data Subjects <span class="text-danger">*</span></label>
                                            <input type="text" name="data_cat[]" class="form-control p-2.5 rounded-3 shadow-sm" placeholder="e.g. Employees, Clients, Students, Patients">
                                            <div class="invalid-feedback-custom"></div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small fw-bold text-dark">Description of Personal Data <span class="text-danger">*</span></label>
                                            <textarea name="data_description[]" class="form-control p-2.5 rounded-3 shadow-sm" rows="2" placeholder="e.g. Names, Identification numbers, Location data, Contact info"></textarea>
                                            <div class="invalid-feedback-custom"></div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small fw-bold text-dark">Purpose of Processing <span class="text-danger">*</span></label>
                                            <textarea name="data_purpose[]" class="form-control p-2.5 rounded-3 shadow-sm" rows="2" placeholder="e.g. Invoicing, Payroll administration, Provision of medical services"></textarea>
                                            <div class="invalid-feedback-custom"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end mt-3 d-none dynamic-remove-wrapper">
                                        <button type="button" class="btn btn-sm btn-outline-danger remove-data-node-btn px-4 fw-bold rounded-2 shadow-sm">
                                            <i class="fa fa-trash-alt me-1"></i> Delete Category
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                            <a href="{{ route('registration.step', ['step' => 2]) }}" 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 2
                            </a>
                            <button type="submit" id="submitStepThreeBtn" 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>
// Dynamic Field Block Addition Execution Flow
document.getElementById('addPersonalDataGroupBtn').addEventListener('click', function() {
    let container = document.getElementById('personalDataDynamicContainer');
    let baseNode = container.querySelector('.personal-data-group-node').cloneNode(true);
    
    baseNode.querySelectorAll('input, textarea').forEach(field => { field.value = ''; field.classList.remove('is-invalid-custom'); });
    baseNode.querySelectorAll('.invalid-feedback-custom').forEach(fb => fb.innerHTML = '');
    
    let removeWrapper = baseNode.querySelector('.dynamic-remove-wrapper');
    if (removeWrapper) removeWrapper.classList.remove('d-none');
    
    container.appendChild(baseNode);
});

// Dynamic Field Block Removal Pipeline Execution Flow
document.getElementById('personalDataDynamicContainer').addEventListener('click', function(e) {
    if (e.target.closest('.remove-data-node-btn')) {
        let activeNodes = document.querySelectorAll('.personal-data-group-node');
        if (activeNodes.length > 1) {
            e.target.closest('.personal-data-group-node').remove();
        }
    }
});

// AJAX Core Async Submit Pipeline Definition Rules Handler
document.getElementById('stepThreeRegistrationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    let btn = document.getElementById('submitStepThreeBtn');
    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.step3.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>';
            
            // Loop through nested input errors and map them directly into the relevant index panel
            for (const [key, messages] of Object.entries(data.errors)) {
                let keyParts = key.split('.');
                if (keyParts.length === 2) {
                    let fieldName = keyParts[0]; 
                    let index = parseInt(keyParts[1]); 
                    
                    let targetNodes = document.querySelectorAll('.personal-data-group-node');
                    if (targetNodes[index]) {
                        let field = targetNodes[index].querySelector(`[name="${fieldName}[]"]`);
                        if (field) {
                            field.classList.add('is-invalid-custom');
                            let feedbackBox = field.nextElementSibling;
                            if (feedbackBox) {
                                feedbackBox.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 => {
        btn.disabled = false;
        btn.innerHTML = 'Save & Continue <i class="fa fa-arrow-right ms-2"></i>';
        console.error("Pipeline Communication Error Exception:", err);
    });
});
</script>