{{-- resources/views/auth/auth.blade.php --}}
@extends('layouts.public')

@section('title', 'Booking | ' . config('app.name'))
@push('styles')
    <style>
        /* 🔹 Custom CSS for the photo box */
        .passport-upload-box {
            width: 100%; /* ~4x3.5cm in screen units */
            height: 120px;
            border: 2px dashed #9ca3af; /* Tailwind gray-400 equivalent */
            border-radius: 4px;
            background-color: #f9fafb; /* Tailwind gray-50 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: border-color 0.2s, background-color 0.2s;
        }

        .passport-upload-box:hover {
            border-color: #3b82f6; /* Tailwind blue-500 */
            background-color: #eff6ff; /* blue-50 */
        }

        .passport-upload-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .passport-upload-box .placeholder {
            color: #9ca3af;
            font-size: 12px;
            text-align: center;
        }

        .passport-upload-box input[type="file"] {
            display: none;
        }

        .passport-upload-box.active {
            border-style: solid;
            border-color: #3b82f6;
        }
    </style>
    <style>
        /* Fade-in & Hover Bounce Animation */
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fade-in 0.8s ease-out;
        }

        /* Smooth jump-like hover effect */
        .hover\\:-translate-y-2:hover {
            transform: translateY(-8px) scale(1.02);
            transition: all 0.4s ease;
        }

        /* Optional floating animation when hovered */
        .hover\\:shadow-2xl:hover {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
    </style>
@endpush
@section('content')
    <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-100 via-purple-100 to-white py-10 px-4">

        {{-- Main Animated Booking Card --}}
        <div class="w-full max-w-6xl bg-white rounded-2xl shadow-xl p-10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl animate-fade-in">

            {{-- Header --}}
            <div class="flex flex-col items-center mb-8">
                <img src="{{ asset('logo.png') }}" alt="Logo" class="h-10 w-10 mb-3 animate-pulse">
                <h1 class="text-3xl font-bold text-indigo-600">Create My Booking</h1>
                <p class="text-xs text-gray-500 mt-1">Book your event tickets and upload your attachments easily.</p>
            </div>

            {{-- Booking Form --}}
            <form id="memberBookingForm" class="space-y-8 px-4 sm:px-6 lg:px-8">
                @csrf

                {{-- Group Info --}}
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">Group Information</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label for="group_member_no" class="block text-xs font-medium text-gray-700">Group Member No</label>
                            <input type="text" id="group_member_no" name="group_member_no"
                                   placeholder="Group Member No"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="zone_district_country" class="block text-xs font-medium text-gray-700">Lives in (Zone/District/Country)</label>
                            <input type="text" id="zone_district_country" name="zone_district_country"
                                   placeholder="Lives in (Zone/District/Country)"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="tshirt_size" class="block text-xs font-medium text-gray-700">Size of your T-shirt</label>
                            <input type="text" id="tshirt_size" name="tshirt_size"
                                   placeholder="Size of your T-shirt"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                    </div>
                </div>

                {{-- Personal Info --}}
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">Personal Information</h3>

                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
                        <div class="lg:col-span-10 space-y-4">
                            <div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
                                <div class="sm:col-span-8">
                                    <label for="full_name" class="block text-xs font-medium text-gray-700">Full Name</label>
                                    <input type="text" id="full_name" name="full_name" placeholder="Full Name"
                                           class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                                </div>
                                <div class="sm:col-span-4">
                                    <label for="gender" class="block text-xs font-medium text-gray-700">Gender</label>
                                    <select id="gender" name="gender"
                                            class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                                        <option value="">Select</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
                                <div class="sm:col-span-6">
                                    <label for="mobile_no" class="block text-xs font-medium text-gray-700">Mobile No</label>
                                    <input type="text" id="mobile_no" name="mobile_no" placeholder="Mobile No"
                                           class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                                </div>
                                <div class="sm:col-span-6">
                                    <label for="email" class="block text-xs font-medium text-gray-700">Email</label>
                                    <input type="email" id="email" name="email" placeholder="Email"
                                           class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
                                <div class="sm:col-span-6">
                                    <label for="spouse_name" class="block text-xs font-medium text-gray-700">Spouse's Name</label>
                                    <input type="text" id="spouse_name" name="spouse_name" placeholder="Spouse's Name"
                                           class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                                </div>
                                <div class="sm:col-span-6">
                                    <label for="blood_group" class="block text-xs font-medium text-gray-700">Blood Group</label>
                                    <select id="blood_group" name="blood_group"
                                            class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                                        <option value="">Select</option>
                                        <option value="A+">A+</option>
                                        <option value="A-">A-</option>
                                        <option value="B+">B+</option>
                                        <option value="B-">B-</option>
                                        <option value="AB+">AB+</option>
                                        <option value="AB-">AB-</option>
                                        <option value="O+">O+</option>
                                        <option value="O-">O-</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="lg:col-span-2">
                            <label class="block text-xs font-medium text-gray-700 mb-1">Member Photo</label>
                            <div id="passportBox" class="passport-upload-box">
                                <img id="passportPreview" src="" alt="Passport Photo Preview">
                                <span class="placeholder" id="placeholderText">Click to Upload</span>
                                <input type="file" id="passportInput" name="passport_photo" accept="image/*">
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-1 mt-4">
                        <div>
                            <label for="spouse_name" class="block text-xs font-medium text-gray-700">Spouse's Name</label>
                            <input type="text" id="spouse_name" name="spouse_name" placeholder="Spouse's Name"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="date_of_birth" class="block text-xs font-medium text-gray-700">Date of Birth</label>
                            <input type="date" id="date_of_birth" name="date_of_birth"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="date_of_anniversary" class="block text-xs font-medium text-gray-700">Date of Anniversary</label>
                            <input type="date" id="date_of_anniversary" name="date_of_anniversary"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
                        <div>
                            <label for="facebook_id" class="block text-xs font-medium text-gray-700">Facebook ID</label>
                            <input type="text" id="facebook_id" name="facebook_id" placeholder="Facebook ID"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="profession" class="block text-xs font-medium text-gray-700">Profession</label>
                            <input type="text" id="profession" name="profession" placeholder="Profession"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="designation" class="block text-xs font-medium text-gray-700">Designation</label>
                            <input type="text" id="designation" name="designation" placeholder="Designation"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                    </div>

                    <div class="mt-4">
                        <label for="business_office_address" class="block text-xs font-medium text-gray-700">Business/Office Address</label>
                        <input type="text" id="business_office_address" name="business_office_address"
                               placeholder="Business/Office Address"
                               class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                    </div>

                    <div class="mt-4">
                        <label for="permanent_address" class="block text-xs font-medium text-gray-700">Permanent Address</label>
                        <input type="text" id="permanent_address" name="permanent_address"
                               placeholder="Permanent Address"
                               class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                    </div>

                    <div class="mt-4">
                        <label for="present_address" class="block text-xs font-medium text-gray-700">Present Address</label>
                        <input type="text" id="present_address" name="present_address" placeholder="Present Address"
                               class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                    </div>
                </div>

                {{-- School Info --}}
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">School Information</h3>
                    <div>
                        <label for="ssc_school_name" class="block text-xs font-medium text-gray-700">Passed SSC
                            School Name</label>
                        <input type="text" id="ssc_school_name" name="ssc_school_name"
                               placeholder="Passed SSC School Name"
                               class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                    </div>

                    <div class="grid grid-cols-3 gap-2">
                        <div>
                            <label for="division" class="block text-xs font-medium text-gray-700">Division</label>
                            <input type="text" id="division" name="division" placeholder="Division"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="district" class="block text-xs font-medium text-gray-700">District</label>
                            <input type="text" id="district" name="district" placeholder="District"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="police_station" class="block text-xs font-medium text-gray-700">Police
                                Station</label>
                            <input type="text" id="police_station" name="police_station"
                                   placeholder="Police Station"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                    </div>
                </div>

                {{-- Event Info --}}
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">Event Information</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label for="event_id" class="block text-xs font-medium text-gray-700 mb-1">Event</label>
                            <select id="event_id" name="event_id"
                                    class="w-full px-3 py-2 text-xs border rounded-lg focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select Event</option>
                            </select>
                        </div>
                        <div>
                            <label for="payment_status" class="block text-xs font-medium text-gray-700 mb-1">Payment Status</label>
                            <select id="payment_status" name="payment_status"
                                    class="w-full px-3 py-2 text-xs border rounded-lg focus:ring-2 focus:ring-indigo-500">
                                <option value="pending">Pending</option>
                                <option value="paid">Paid</option>
                            </select>
                        </div>
                        <div>
                            <label for="total_amount" class="block text-xs font-medium text-gray-700 mb-1">Total Amount</label>
                            <input type="text" id="total_amount" name="total_amount" readonly
                                   class="w-full px-3 py-2 text-xs border rounded-lg bg-gray-100">
                        </div>
                    </div>
                </div>

                {{-- Booking Details --}}
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200 overflow-x-auto">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">Booking Details</h3>
                    <table class="w-full text-xs border border-gray-200 rounded overflow-hidden">
                        <thead class="bg-indigo-100 text-gray-800">
                        <tr>
                            <th class="p-2 border">Ticket</th>
                            <th class="p-2 border">Quantity</th>
                            <th class="p-2 border">Price</th>
                            <th class="p-2 border">Action</th>
                        </tr>
                        </thead>
                        <tbody id="bookingDetailsContainer"></tbody>
                        <tfoot class="bg-gray-100">
                        <tr>
                            <td></td>
                            <td class="p-2 text-sm">Total Qty: <span id="total_qty">0</span></td>
                            <td class="p-2 text-sm">Total: <span id="total_price">0.00</span> TK</td>
                            <td></td>
                        </tr>
                        </tfoot>
                    </table>
                    <button type="button" id="addDetailRow"
                            class="mt-3 px-4 py-1.5 bg-indigo-500 text-white rounded hover:bg-indigo-600 text-xs transition-all">
                        Add Ticket
                    </button>
                </div>

                {{-- Attachments --}}
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200 overflow-x-auto">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">Attachments</h3>
                    <table class="w-full text-xs border border-gray-200 rounded overflow-hidden">
                        <thead class="bg-indigo-100 text-gray-800">
                        <tr>
                            <th class="p-2 border">Attachment Type</th>
                            <th class="p-2 border">Upload File</th>
                            <th class="p-2 border">File Name</th>
                            <th class="p-2 border">Action</th>
                        </tr>
                        </thead>
                        <tbody id="attachmentsContainer"></tbody>
                    </table>
                    <button type="button" id="addAttachmentRow"
                            class="mt-3 px-4 py-1.5 bg-indigo-500 text-white rounded hover:bg-indigo-600 text-xs transition-all">
                        Add Attachment
                    </button>
                </div>

                {{-- Submit Button --}}
                <div class="pt-4">
                    <button type="submit"
                            class="w-full px-4 py-2 text-sm bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:from-indigo-600 hover:to-purple-700 shadow-md transition-all">
                        Submit Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            let detailIndex = 0;

            // Load Events
            function loadEvents() {
                $.get('{{ route("events.select") }}', function (res) {
                    if (res.success) {
                        let options = '<option value="">Select Event</option>';
                        res.data.forEach(event => {
                            options += `<option value="${event.event_id}">${event.title}</option>`;
                        });
                        $('#event_id').html(options);
                    }
                });
            }

            loadEvents();

            // Add Booking Row
            function addRow() {
                detailIndex++;
                let row = $(`
            <tr>
                <td><select name="details[${detailIndex}][ticket_id]" class="ticket-select w-full px-3 py-2 text-xs border rounded-lg focus:ring-2 focus:ring-indigo-500"><option value="">Select Ticket</option></select></td>
                <td><input type="number" name="details[${detailIndex}][quantity]" min="1" value="1" class="qty-input w-full px-3 py-2 text-xs border rounded-lg bg-gray-100"></td>
                <td><input type="text" class="ticket-price w-full px-3 py-2 text-xs border rounded-lg bg-gray-100 bg-gray-100" readonly></td>
                <td><button type="button" class="remove-row text-red-600 hover:text-red-900 text-xs">Remove</button></td>
            </tr>
        `);
                $('#bookingDetailsContainer').append(row);
                let eventId = $('#event_id').val();
                if (eventId) loadTickets(row, eventId);
            }

            addRow();

            // Load Tickets
            function loadTickets(row, eventId) {
                $.get('/events/' + eventId + '/tickets', function (res) {
                    if (res.success) {
                        let options = '<option value="">Select Ticket</option>';
                        res.data.forEach(ticket => {
                            options += `<option value="${ticket.ticket_id}" data-price="${ticket.price}">${ticket.ticket_type} - ${ticket.price} TK</option>`;
                        });
                        row.find('.ticket-select').html(options);
                    }
                });
            }

            // Calculate Totals
            function calculateTotal() {
                let totalQty = 0;
                let totalPrice = 0;
                $('#bookingDetailsContainer tr').each(function () {
                    let qty = parseInt($(this).find('.qty-input').val()) || 0;
                    let subtotal = parseFloat($(this).find('.ticket-price').val()) || 0;
                    totalQty += qty;
                    totalPrice += subtotal;
                });
                $('#total_qty').text(totalQty);
                $('#total_price').text(totalPrice.toFixed(2));
                $('#total_amount').val(totalPrice.toFixed(2));
            }

            // Events
            $('#event_id').on('change', function () {
                let eventId = $(this).val();
                if (!eventId) return;
                $('#bookingDetailsContainer tr').each(function () {
                    loadTickets($(this), eventId);
                });
                calculateTotal();
            });

            $('#addDetailRow').on('click', addRow);
            $(document).on('change', '.ticket-select', function () {
                let row = $(this).closest('tr');
                let price = parseFloat($(this).find('option:selected').data('price')) || 0;
                let qty = parseInt(row.find('.qty-input').val()) || 1;
                row.find('.ticket-price').val((price * qty).toFixed(2));
                calculateTotal();
            });
            $(document).on('input', '.qty-input', calculateTotal);
            $(document).on('click', '.remove-row', function () {
                $(this).closest('tr').remove();
                calculateTotal();
            });

            // Attachments
            let attachmentCount = 0;
            $('#addAttachmentRow').on('click', function () {
                attachmentCount++;
                let row = `
        <tr id="attachmentRow${attachmentCount}">
            <td class="p-1 border">
                <select name="attachment_type[]" class="attachment_type w-full px-3 py-2 text-xs border rounded-lg focus:ring-2 focus:ring-indigo-500">
                    <option value="">Select Type</option>
                    <option value="NID">NID</option>
                    <option value="Passport">Passport</option>
                    <option value="Picture">Picture</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td class="p-1 border"><input type="file" name="attachment_file[]" accept=".pdf,image/*" class="w-full px-3 py-2 text-xs border rounded-lg bg-gray-100"></td>
            <td class="p-1 border"><input type="text" name="attachment_name[]" class="w-full px-3 py-2 text-xs border rounded-lg bg-gray-100" placeholder="File Name"></td>
            <td class="p-1 border text-center"><button type="button" onclick="$('#attachmentRow${attachmentCount}').remove();" class="text-red-600 hover:text-red-900 text-xs">Remove</button></td>
        </tr>`;
                $('#attachmentsContainer').append(row);
            });

            // Submit
            $('#memberBookingForm').on('submit', function (e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Submitting...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                // 1️⃣ Collect ticket details
                let tickets = [];
                $('#bookingDetailsContainer tr').each(function () {
                    let ticket_id = $(this).find('.ticket-select').val();
                    let quantity = parseInt($(this).find('.qty-input').val()) || 0;
                    let price = parseFloat($(this).find('.ticket-select option:selected').data('price')) || 0;
                    if (ticket_id && quantity > 0) {
                        tickets.push({ ticket_id, quantity, price });
                    }
                });

                if (tickets.length === 0) {
                    Swal.close();
                    Swal.fire('Validation Error', 'Please add at least one ticket.', 'warning');
                    return;
                }

                // 2️⃣ Build FormData for new_user + tickets + attachments
                let formData = new FormData();
                formData.append('_token', $('input[name="_token"]').val());
                formData.append('event_id', $('#event_id').val());
                formData.append('payment_status', $('#payment_status').val());
                formData.append('total_amount', $('#total_amount').val());

                // 🧍‍♂️ New User Data (grouped under new_user)
                let fields = [
                    'full_name', 'gender', 'mobile_no', 'email',
                    'group_member_no', 'zone_district_country', 'tshirt_size',
                    'spouse_name', 'date_of_birth', 'date_of_anniversary', 'blood_group',
                    'number_of_children', 'facebook_id', 'profession', 'designation',
                    'business_office_address', 'permanent_address', 'present_address',
                    'ssc_school_name', 'division', 'district', 'police_station'
                ];
                fields.forEach(f => formData.append(`new_user[${f}]`, $(`#${f}`).val() || ''));

                // 🖼️ Passport photo (as new_user.passport_photo)
                const passportFile = $('#passportInput')[0].files[0];
                if (passportFile) {
                    formData.append('new_user[passport_photo]', passportFile);
                }

                // 🎫 Ticket details
                tickets.forEach((t, i) => {
                    formData.append(`tickets[${i}][ticket_id]`, t.ticket_id);
                    formData.append(`tickets[${i}][quantity]`, t.quantity);
                    formData.append(`tickets[${i}][price]`, t.price);
                });

                // 📎 Attachments
                $('#attachmentsContainer tr').each(function (index) {
                    let type = $(this).find('.attachment_type').val();
                    let name = $(this).find('input[name="attachment_name[]"]').val();
                    let fileInput = $(this).find('input[type="file"]')[0];
                    if (fileInput && fileInput.files.length > 0) {
                        formData.append(`attachments[${index}][type]`, type || '');
                        formData.append(`attachments[${index}][name]`, name || '');
                        formData.append(`attachments[${index}][file]`, fileInput.files[0]);
                    }
                });

                // 3️⃣ AJAX Submit
                $.ajax({
                    url: "{{ route('bookings.store') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        Swal.close();
                        if (res.success) {
                            Swal.fire('Success', res.message, 'success').then(() => {
                                window.location.href = "/bookings/" + res.booking_id;
                            });
                        } else {
                            Swal.fire('Error', res.message || 'Unknown error', 'error');
                        }
                    },
                    error: function (xhr) {
                        Swal.close();
                        Swal.fire('Error', xhr.responseJSON?.message || 'Something went wrong', 'error');
                    }
                });
            });
        });
    </script>
    <script>
        const passportBox = document.getElementById('passportBox');
        const passportInput = document.getElementById('passportInput');
        const passportPreview = document.getElementById('passportPreview');
        const placeholderText = document.getElementById('placeholderText');

        // When user clicks the box, open file selector
        passportBox.addEventListener('click', () => {
            passportInput.click();
        });

        // When a file is selected, show the preview
        passportInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    passportPreview.src = e.target.result;
                    passportPreview.style.display = 'block';
                    placeholderText.style.display = 'none';
                    passportBox.classList.add('active');
                };
                reader.readAsDataURL(file);
            } else {
                passportPreview.src = '';
                passportPreview.style.display = 'none';
                placeholderText.style.display = 'block';
                passportBox.classList.remove('active');
            }
        });
    </script>
@endpush