@extends('layouts.app')

@section('title', 'Conference Registration - MTPGA')

@section('content')
<div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
    <div class="bg-slate-50 border-b border-slate-200 p-6 text-center">
        <h2 class="text-2xl font-bold text-brand-navy">Mountain Top Prayer Global Assembly</h2>
        <p class="text-slate-500 text-sm mt-1">Complete registration to receive your personalized QR Pass</p>
    </div>

    <!-- Alert Container for Form Notifications -->
    <div id="alert-container" class="hidden mx-6 mt-6 p-4 rounded-lg text-sm font-semibold"></div>

    <form id="registrationForm" class="p-6 sm:p-8 space-y-8">
        @csrf

        <!-- SECTION 1: Personal Details -->
        <div class="space-y-6">
            <h3 class="text-lg font-bold text-brand-navy border-b pb-2 flex items-center gap-2">
                <i class="fa-solid fa-user text-brand-gold"></i> Personal Details
            </h3>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Title</label>
                    <select name="title" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                        <option value="">— Select —</option>
                        <option value="Bishop">Bishop</option>
                        <option value="Rev">Rev.</option>
                         <option value="Apostle">Apostle</option>
                        <option value="Pastor">Pastor</option>
                        <option value="Evang">Evang.</option>
                        <option value="Mr">Mr.</option>
                        <option value="Mrs">Mrs.</option>
                        <option value="Bro">Bro.</option>
                        <option value="Sis">Sis.</option>
                        <option value="Ms">Ms.</option>
                        <option value="Dr">Dr.</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">First Name *</label>
                    <input type="text" name="first_name" required placeholder="First name" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Last Name *</label>
                    <input type="text" name="last_name" required placeholder="Last name" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Email Address *</label>
                    <input type="email" name="email" required placeholder="name@domain.com" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Gender *</label>
                    <select name="gender" required class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                        <option value="">— Select Gender —</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Country *</label>
                    <select id="countrySelect" name="country" required class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                        <option value="Nigeria" selected>Nigeria</option>
                        <option value="United States">United States</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="Ghana">Ghana</option>
                        <option value="Canada">Canada</option>
                        <option value="Other">Other International</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Phone Number *</label>
                    <input type="tel" name="phone" required placeholder="+234 800 000 0000" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                </div>
            </div>

            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" id="is_whatsapp" name="is_whatsapp" value="1" class="w-4 h-4 text-brand-gold rounded border-slate-300">
                <label for="is_whatsapp" class="text-xs text-slate-700 font-medium">This number is on WhatsApp — send event updates here</label>
            </div>

            <div>
                <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">City & State</label>
                <input type="text" name="city_state" placeholder="e.g. Lagos, Lagos State" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
            </div>
        </div>

        <!-- SECTION 2: Pass Type Selector -->
        <div class="space-y-4 pt-4 border-t">
            <h3 class="text-lg font-bold text-brand-navy flex items-center gap-2">
                <i class="fa-solid fa-ticket text-brand-gold"></i> Pass Type *
            </h3>
            <input type="hidden" name="pass_type" id="selectedPassType" value="general" required>

            <div class="grid grid-cols-1 gap-3">
                <div class="pass-card border-2 border-brand-gold bg-amber-50/40 rounded-xl p-4 flex items-center justify-between cursor-pointer transition-all hover:shadow-md" data-pass="general">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-brand-gold font-bold text-lg">
                            <i class="fa-solid fa-suitcase-medical"></i>
                        </div>
                        <div>
                            <p class="font-bold text-slate-900">General Admission</p>
                            <p class="text-xs text-slate-500">Open seating · All sessions</p>
                        </div>
                    </div>
                    <div class="pass-radio w-5 h-5 rounded-full border-2 border-brand-gold flex items-center justify-center">
                        <div class="dot w-2.5 h-2.5 rounded-full bg-brand-gold"></div>
                    </div>
                </div>

                <div class="pass-card border-2 border-slate-200 bg-white rounded-xl p-4 flex items-center justify-between cursor-pointer transition-all hover:border-slate-300" data-pass="international">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold text-lg">
                            <i class="fa-solid fa-star"></i>
                        </div>
                        <div>
                            <p class="font-bold text-slate-900">International Delegate</p>
                            <p class="text-xs text-slate-500">For attendees joining from outside Nigeria</p>
                        </div>
                    </div>
                    <div class="pass-radio w-5 h-5 rounded-full border-2 border-slate-300 flex items-center justify-center">
                        <div class="dot w-2.5 h-2.5 rounded-full bg-transparent"></div>
                    </div>
                </div>

                <!-- <div class="pass-card border-2 border-slate-200 bg-white rounded-xl p-4 flex items-center justify-between cursor-pointer transition-all hover:border-slate-300" data-pass="virtual">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 font-bold text-lg">
                            <i class="fa-solid fa-tv"></i>
                        </div>
                        <div>
                            <p class="font-bold text-slate-900">Online / Virtual Pass</p>
                            <p class="text-xs text-slate-500">Watch live from anywhere</p>
                        </div>
                    </div>
                    <div class="pass-radio w-5 h-5 rounded-full border-2 border-slate-300 flex items-center justify-center">
                        <div class="dot w-2.5 h-2.5 rounded-full bg-transparent"></div>
                    </div>
                </div> -->
            </div>
        </div>

        <!-- SECTION 3: Conference Schedule -->
        <!-- <div class="space-y-4 pt-4 border-t">
            <h3 class="text-lg font-bold text-brand-navy flex items-center gap-2">
                <i class="fa-solid fa-calendar-days text-brand-gold"></i> Conference Schedule
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <label class="flex items-center gap-2 border p-3 rounded-lg bg-slate-50 cursor-pointer hover:bg-slate-100">
                    <input type="checkbox" name="attending_days[]" value="Day 1" checked class="w-4 h-4 text-brand-gold rounded">
                    <span class="text-sm font-medium">Day 1</span>
                </label>
                <label class="flex items-center gap-2 border p-3 rounded-lg bg-slate-50 cursor-pointer hover:bg-slate-100">
                    <input type="checkbox" name="attending_days[]" value="Day 2" checked class="w-4 h-4 text-brand-gold rounded">
                    <span class="text-sm font-medium">Day 2</span>
                </label>
                <label class="flex items-center gap-2 border p-3 rounded-lg bg-slate-50 cursor-pointer hover:bg-slate-100">
                    <input type="checkbox" name="attending_days[]" value="Day 3" checked class="w-4 h-4 text-brand-gold rounded">
                    <span class="text-sm font-medium">Day 3</span>
                </label>
            </div>
        </div> -->

        <!-- SECTION 4: Volunteer Option -->
        <!-- <div class="space-y-4 pt-4 border-t">
            <div class="flex items-center gap-2">
                <input type="checkbox" id="is_volunteer" name="is_volunteer" value="1" class="w-4 h-4 text-brand-gold rounded border-slate-300">
                <label for="is_volunteer" class="text-sm font-bold text-brand-navy">I want to volunteer during the program</label>
            </div>
            <div id="volunteer_dept_container" class="hidden pt-2">
                <label class="block text-xs font-semibold uppercase text-slate-600 mb-1">Preferred Volunteer Department</label>
                <select name="volunteer_department" class="w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-brand-gold focus:outline-none">
                    <option value="Ushering">Ushering & Protocol</option>
                    <option value="Security">Security & Traffic Control</option>
                    <option value="Medical">Medical Response Team</option>
                    <option value="Media">Media & Technical</option>
                    <option value="Sanitation">Sanitation & Logistics</option>
                </select>
            </div>
        </div> -->

        <!-- Submit Button -->
        <button type="submit" id="submitBtn" class="w-full bg-brand-gold hover:bg-amber-600 text-white font-bold py-3.5 px-6 rounded-xl shadow-lg transition-all flex items-center justify-center gap-2">
            <i class="fa-solid fa-qrcode"></i> Complete Registration & Get Pass
        </button>
    </form>
</div>
@endsection

@section('modals')
<!-- Pass Dynamic Modal -->
<div id="passModal" class="fixed inset-0 bg-slate-900/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-sm w-full p-6 text-center shadow-2xl relative border-2 border-brand-gold">
        <button id="closeModal" class="absolute top-3 right-3 text-slate-400 hover:text-slate-600 text-xl font-bold">&times;</button>
        <span class="text-xs font-bold uppercase tracking-wider text-brand-gold bg-amber-50 px-3 py-1 rounded-full border border-amber-200">Registration Confirmed</span>
        
        <h3 class="text-xl font-extrabold text-brand-navy mt-3" id="modalMemberName">Attendee Name</h3>
        <p class="text-xs text-slate-500" id="modalRegCode">MTPGA-2026-00000</p>

        <div class="my-5 flex justify-center bg-slate-50 p-4 rounded-xl border border-slate-200">
            <div id="qrcode"></div>
        </div>

        <p class="text-xs text-slate-600 mb-4">Present this QR Code pass at the gate for fast check-in access.</p>
        
        <div class="flex gap-2">
            <button onclick="window.print()" class="flex-1 bg-slate-800 text-white py-2 rounded-lg text-xs font-bold hover:bg-slate-900">
                <i class="fa-solid fa-print"></i> Print Pass
            </button>
            <button id="closeModalBtn" class="flex-1 bg-slate-200 text-slate-800 py-2 rounded-lg text-xs font-bold hover:bg-slate-300">Close</button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    $(document).ready(function() {
        // Pass Card Selection
        $('.pass-card').on('click', function() {
            var selectedPass = $(this).data('pass');
            $('#selectedPassType').val(selectedPass);

            $('.pass-card').removeClass('border-brand-gold bg-amber-50/40').addClass('border-slate-200 bg-white');
            $('.pass-radio').removeClass('border-brand-gold').addClass('border-slate-300');
            $('.pass-radio .dot').removeClass('bg-brand-gold').addClass('bg-transparent');

            $(this).removeClass('border-slate-200 bg-white').addClass('border-brand-gold bg-amber-50/40');
            $(this).find('.pass-radio').removeClass('border-slate-300').addClass('border-brand-gold');
            $(this).find('.pass-radio .dot').removeClass('bg-transparent').addClass('bg-brand-gold');
        });

        // Auto-switch Pass Type if International country is selected
        $('#countrySelect').on('change', function() {
            if ($(this).val() !== 'Nigeria') {
                $('.pass-card[data-pass="international"]').trigger('click');
            }
        });

        // Toggle Volunteer options
        $('#is_volunteer').on('change', function() {
            $('#volunteer_dept_container').toggleClass('hidden', !$(this).is(':checked'));
        });

        // AJAX Form Submission
        $('#registrationForm').on('submit', function(e) {
            e.preventDefault();
            var $btn = $('#submitBtn');
            $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin"></i> Processing...');
            $('#alert-container').addClass('hidden').removeClass('bg-red-100 text-red-700 bg-green-100 text-green-700');

            $.ajax({
                url: "{{ route('register.store') }}",
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        $('#registrationForm')[0].reset();
                        $('#modalMemberName').text(response.data.full_name);
                        $('#modalRegCode').text('REG CODE: ' + response.data.registration_code);
                        
                        $('#qrcode').empty();
                        new QRCode(document.getElementById("qrcode"), {
                            text: response.data.registration_code,
                            width: 160,
                            height: 160
                        });

                        $('#passModal').removeClass('hidden');
                    }
                },
                error: function(xhr) {
                    var msg = 'An error occurred. Please check your inputs.';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        msg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    $('#alert-container').html(msg).addClass('bg-red-100 text-red-700').removeClass('hidden');
                },
                complete: function() {
                    $btn.prop('disabled', false).html('<i class="fa-solid fa-qrcode"></i> Complete Registration & Get Pass');
                }
            });
        });

        $('#closeModal, #closeModalBtn').on('click', function() {
            $('#passModal').addClass('hidden');
        });
    });
</script>
@endpush