@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: 12.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 active"><div class="step-circle">2</div><div class="step-label">Basic Details</div></div>
                        <div class="step-bubble"><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="stepTwoRegistrationForm" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        <h4 class="fw-bold text-dark mb-1 text-center border-bottom pb-2">BASIC DETAILS</h4>

                        <div class="row g-3 mt-2">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Institution/Individual Name <span class="text-danger">*</span></label>
                                <input type="text" name="org_legal_name" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->org_legal_name ?? $registration->rep_institution }}" placeholder="Company/Institution Name">
                                <div class="invalid-feedback-custom" id="err_org_legal_name"></div>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Postal Address <span class="text-danger">*</span></label>
                                <input type="text" name="postal_address" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->postal_address }}" placeholder="Postal Address">
                                <div class="invalid-feedback-custom" id="err_postal_address"></div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Country <span class="text-danger">*</span></label>
                                <select name="country" class="form-select p-2.5 rounded-3 shadow-sm">
                                    <option value="Somalia" selected>Somalia</option>
                                </select>
                                <div class="invalid-feedback-custom" id="err_country"></div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Location State / Region <span class="text-danger">*</span></label>
                                <input type="text" name="county_location" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->county_location }}" placeholder="e.g. Banaadir, Galmudug, Puntland">
                                <div class="invalid-feedback-custom" id="err_county_location"></div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Telephone Number</label>
                                <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                    <span class="input-group-text bg-white text-muted small" style="font-size: 13px;">(+252)</span>
                                    <input type="tel" name="org_telephone" class="form-control p-2.5" value="{{ $registration->org_telephone }}" placeholder="Telephone Number">
                                </div>
                                <div class="invalid-feedback-custom" id="err_org_telephone"></div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Legal Establishment <span class="text-danger">*</span></label>
                                <select name="legal_establishment" class="form-select p-2.5 rounded-3 shadow-sm">
                                    <option value="" disabled {{ !$registration->legal_establishment ? 'selected' : '' }}>Select establishment</option>
                                    <option value="limited_company" {{ $registration->legal_establishment == 'limited_company' ? 'selected' : '' }}>Private Limited Company</option>
                                    <option value="partnership" {{ $registration->legal_establishment == 'partnership' ? 'selected' : '' }}>Partnership</option>
                                    <option value="sole_proprietorship" {{ $registration->legal_establishment == 'sole_proprietorship' ? 'selected' : '' }}>Sole Proprietorship</option>
                                    <option value="statutory_body" {{ $registration->legal_establishment == 'statutory_body' ? 'selected' : '' }}>Statutory Body</option>
                                </select>
                                <div class="invalid-feedback-custom" id="err_legal_establishment"></div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Sector <span class="text-danger">*</span></label>
                                <select name="sector" class="form-select p-2.5 rounded-3 shadow-sm">
                                    <option value="" disabled {{ !$registration->sector ? 'selected' : '' }}>Select your sector</option>
                                    <option value="finance" {{ $registration->sector == 'finance' ? 'selected' : '' }}>Finance & Banking</option>
                                    <option value="telecom" {{ $registration->sector == 'telecom' ? 'selected' : '' }}>Telecommunications</option>
                                    <option value="healthcare" {{ $registration->sector == 'healthcare' ? 'selected' : '' }}>Healthcare</option>
                                </select>
                                <div class="invalid-feedback-custom" id="err_sector"></div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-dark">Sub Sector <span class="text-danger">*</span></label>
                                <select name="sub_sector" class="form-select p-2.5 rounded-3 shadow-sm">
                                    <option value="" disabled {{ !$registration->sub_sector ? 'selected' : '' }}>Select sub sector</option>
                                    <option value="finance" {{ $registration->sub_sector == 'finance' ? 'selected' : '' }}>Finance & Banking</option>
                                    <option value="telecom" {{ $registration->sub_sector == 'telecom' ? 'selected' : '' }}>Telecommunications</option>
                                </select>
                                <div class="invalid-feedback-custom" id="err_sub_sector"></div>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label small fw-bold text-dark">Establishment Document (PDF Format) <span class="text-danger">*</span></label>
                                <input type="file" name="org_docs" class="form-control p-2.5 rounded-3 shadow-sm" accept=".pdf">
                                @if($registration->org_docs_path)
                                    <span class="text-success d-block mt-1 small fw-medium"><i class="fa fa-file-pdf"></i> An incorporation file exists in the database. Uploading a new file replaces it.</span>
                                @endif
                                <div class="invalid-feedback-custom" id="err_org_docs"></div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-dark">Street <span class="text-danger">*</span></label>
                                <input type="text" name="street" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->street }}" placeholder="Street">
                                <div class="invalid-feedback-custom" id="err_street"></div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-dark">Building <span class="text-danger">*</span></label>
                                <input type="text" name="building" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->building }}" placeholder="Building">
                                <div class="invalid-feedback-custom" id="err_building"></div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small fw-bold text-dark">Office Number <span class="text-danger">*</span></label>
                                <input type="text" name="office_number" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->office_number }}" placeholder="Office Number">
                                <div class="invalid-feedback-custom" id="err_office_number"></div>
                            </div>
                        </div>

                        <div class="mt-5 pt-4 border-top text-center">
                            <h5 class="fw-bold text-danger mb-1">Data Protection Officer</h5>
                            <p class="text-primary small mb-4">Provide details mapping to your organization's compliance officer.</p>

                            <div class="row g-3 text-start">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-dark">Name of the Officer <span class="text-danger">*</span></label>
                                    <input type="text" name="dpo_name" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->dpo_name ?? $registration->rep_name }}" placeholder="Name of the officer">
                                    <div class="invalid-feedback-custom" id="err_dpo_name"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-dark">Email Address of the Officer <span class="text-danger">*</span></label>
                                    <input type="email" name="dpo_email" class="form-control p-2.5 rounded-3 shadow-sm" value="{{ $registration->dpo_email ?? $registration->rep_email }}" placeholder="Email address of the officer">
                                    <div class="invalid-feedback-custom" id="err_dpo_email"></div>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label small fw-bold text-dark">Phone Number of the Officer</label>
                                    <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                        <span class="input-group-text bg-white text-muted small" style="font-size: 13px;">(+252)</span>
                                        <input type="tel" name="dpo_phone" class="form-control p-2.5" value="{{ $registration->dpo_phone ?? $registration->rep_phone }}" placeholder="7XXX...">
                                    </div>
                                    <div class="invalid-feedback-custom" id="err_dpo_phone"></div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                            <a href="{{ route('registration.step', ['step' => 1]) }}" 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 1
                            </a>
                            <button type="submit" id="submitStepTwoBtn" 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.getElementById('stepTwoRegistrationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    let btn = document.getElementById('submitStepTwoBtn');
    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.step2.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>';
            
            for (const [key, messages] of Object.entries(data.errors)) {
                let field = document.querySelector(`[name="${key}"]`);
                if (field) field.classList.add('is-invalid-custom');
                
                let feedbackNode = document.getElementById(`err_${key}`);
                if (feedbackNode) feedbackNode.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 Error:", err);
    });
});
</script>