@extends('layouts.app')

@section('title', 'Booking Create')

@section('content')
    <div class="bg-white p-4 rounded shadow mb-6">
        <h3 class="text-lg font-semibold mb-4">Create New Booking</h3>

        <form id="createBookingForm">
            @csrf

            {{-- User Type Section --}}
            <div class="p-4 mb-4 border rounded">
                <h4 class="font-semibold text-sm mb-3">User Type</h4>
                <div class="flex items-center space-x-2">
                    <span class="text-xs">Existing User</span>
                    <button type="button" id="userToggle"
                            class="relative inline-flex items-center h-5 w-12 rounded-full transition-colors duration-300 focus:outline-none bg-blue-500"
                            aria-pressed="true">
                        <span class="sr-only">Toggle User Type</span>
                        <span
                            class="toggle-circle absolute left-0 top-0 h-5 w-5 bg-white border border-gray-300 rounded-full shadow transform transition-transform duration-300"></span>
                    </button>
                    <span class="text-xs">New User</span>
                </div>

                {{-- Existing User --}}
                <div id="existingUserDiv" class="mt-3">
                    <label for="user_id" class="block text-xs font-medium text-gray-700">Select User</label>
                    <select id="user_id" name="user_id" placeholder="Select User"
                            class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        <option value="">Select User</option>
                        @foreach($users as $user)
                            <option value="{{ $user->user_id }}">{{ $user->full_name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- New User --}}
                <div id="newUserDiv" class="hidden mt-3 space-y-4">
                    <h5 class="font-semibold text-sm mb-2">Group Information</h5>
                    <div class="grid grid-cols-3 gap-2">
                        <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>

                    <h5 class="font-semibold text-sm mb-2">Personal Information</h5>
                    <div class="grid grid-cols-12 gap-2">
                        <div class="col-span-10">
                            <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="col-span-2">
                            <label for="gender" class="block text-xs font-medium text-gray-700">Gender</label>
                            <select id="gender" name="gender" placeholder="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-2 gap-2">
                        <div>
                            <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>
                            <label for="email" class="block text-xs font-medium text-gray-700">Email Address</label>
                            <input type="email" id="email" name="email" placeholder="Email Address"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                    </div>

                    <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 class="grid grid-cols-4 gap-2">
                        <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" placeholder="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"
                                   placeholder="Date of Anniversary"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="blood_group" class="block text-xs font-medium text-gray-700">Blood Group</label>
                            <input type="text" id="blood_group" name="blood_group" placeholder="Blood Group"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                        <div>
                            <label for="number_of_children" class="block text-xs font-medium text-gray-700">Number Of
                                Children</label>
                            <input type="number" id="number_of_children" name="number_of_children"
                                   placeholder="Number Of Children"
                                   class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-2">
                        <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>
                        <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>
                        <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>
                        <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>

                    <h5 class="font-semibold text-sm mb-2">School Information</h5>
                    <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>
            </div>

            {{-- Event Information --}}
            <div class="p-4 mb-4 border rounded">
                <h4 class="font-semibold text-sm mb-3">Event Information</h4>
                <div>
                    <label for="event_id" class="block text-xs font-medium text-gray-700">Event</label>
                    <select id="event_id" name="event_id" placeholder="Event"
                            class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        <option value="">Select Event</option>
                    </select>
                </div>

                <div>
                    <label for="payment_status" class="block text-xs font-medium text-gray-700">Payment Status</label>
                    <select id="payment_status" name="payment_status" placeholder="Payment Status"
                            class="mt-1 block w-full px-2 py-1 text-xs border rounded">
                        <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">Total Amount</label>
                    <input type="text" id="total_amount" name="total_amount" placeholder="Total Amount" readonly
                           class="mt-1 block w-full px-2 py-1 text-xs border rounded bg-gray-100">
                </div>
            </div>

            {{-- Booking Details --}}
            <div class="p-4 mb-4 border rounded">
                <h4 class="font-semibold text-sm mb-2">Booking Details</h4>
                <table class="w-full text-xs border border-gray-300">
                    <thead class="bg-gray-100">
                    <tr>
                        <th class="p-1 border">Ticket</th>
                        <th class="p-1 border">Quantity</th>
                        <th class="p-1 border">Price</th>
                        <th class="p-1 border">Action</th>
                    </tr>
                    </thead>
                    <tbody id="bookingDetailsContainer">
                    </tbody>

                    <tfoot>
                    <tr>
                        <td></td>
                        <td><span>Total Quantity: <span id="total_qty">0</span></span></td>
                        <td><span>Total Price: <span id="total_price">0.00</span> TK</span></td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
                <button type="button" id="addDetailRow" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded">Add
                    Ticket
                </button>
            </div>
            {{-- Attachments --}}
            <div class="p-4 mb-4 border rounded">
                <h4 class="font-semibold text-sm mb-2">Attachments</h4>
                <table class="w-full text-xs border border-gray-300">
                    <thead class="bg-gray-100">
                    <tr>
                        <th class="p-1 border">Attachment Type</th>
                        <th class="p-1 border">Upload File</th>
                        <th class="p-1 border">File Name</th>
                        <th class="p-1 border">Action</th>
                    </tr>
                    </thead>
                    <tbody id="attachmentsContainer">
                    <!-- Dynamic rows will be added here -->
                    </tbody>
                </table>
                <button type="button" id="addAttachmentRow" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded">
                    Add Attachment
                </button>
            </div>

            <button type="submit" class="px-3 py-1 bg-green-500 text-white rounded">Create Booking</button>
        </form>
    </div>

@endsection

@push('scripts')
    <script>
        // ============ Attachments Handling ============
        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-1 py-0.5 border rounded text-xs">
                    <option value="">Select Type</option>
                    <option value="BirthCertificate">Birth Certificate</option>
                    <option value="NID">NID</option>
                    <option value="Passport">Passport</option>
                    <option value="DrivingLicence">Driving Licence</option>
                    <option value="Picture">Picture</option>
                    <option value="MarkSheet">Mark Sheet</option>
                    <option value="Certificate">Certificate</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 text-xs">
            </td>
            <td class="p-1 border">
                <input type="text" name="attachment_name[]" class="w-full px-1 py-0.5 border rounded text-xs" placeholder="File Name">
            </td>
            <td class="p-1 border text-center">
                <button type="button" onclick="removeAttachmentRow(${attachmentCount})" class="text-red-600 hover:text-red-900 text-xs">Remove</button>
            </td>
        </tr>`;
            $('#attachmentsContainer').append(row);
        });

        function removeAttachmentRow(id) {
            $(`#attachmentRow${id}`).remove();
        }
    </script>

    <script>
        // ============ User Toggle ============
        $(document).ready(function () {
            let isExisting = true; // default: Existing User

            $('#userToggle').click(function () {
                isExisting = !isExisting;

                // Animate toggle circle
                if (isExisting) {
                    $('.toggle-circle').removeClass('translate-x-6').addClass('translate-x-0');
                    $(this).removeClass('bg-green-500').addClass('bg-blue-500');
                } else {
                    $('.toggle-circle').removeClass('translate-x-0').addClass('translate-x-6');
                    $(this).removeClass('bg-blue-500').addClass('bg-green-500');
                }

                // Toggle form sections
                $('#existingUserDiv').toggle(isExisting);
                $('#newUserDiv').toggle(!isExisting);
            });
        });
    </script>

    <script>
        // ============ Booking Details & Form Submission ============
        $(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();

            // Load tickets for an event
            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);
                    }
                });
            }

            // Add booking row
            function addRow() {
                detailIndex++;
                let row = $(`
                <tr>
                    <td><select name="details[${detailIndex}][ticket_id]" class="ticket-select block w-full border rounded px-1 py-0.5"><option value="">Select Ticket</option></select></td>
                    <td><input type="number" name="details[${detailIndex}][quantity]" min="1" value="1" class="qty-input w-full border rounded px-1 py-0.5"></td>
                    <td><input type="text" class="ticket-price block w-full border rounded px-1 py-0.5 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();

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

            // Ticket select
            $(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));

                $(this).prop('disabled', true);

                // Auto add next row
                let lastRow = $('#bookingDetailsContainer tr:last');
                if (lastRow.find('.ticket-select').val() !== '') addRow();

                calculateTotal();
            });

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

            // Remove row
            $(document).on('click', '.remove-row', function () {
                $(this).closest('tr').remove();
                calculateTotal();
            });

            // 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));
            }

            // ============ FORM SUBMIT ============
            $('#createBookingForm').on('submit', function (e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Creating booking...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                let isNewUser = !$('#existingUserDiv').is(':visible');
                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});
                    }
                });

                // Basic validation
                if (isNewUser) {
                    let required = ['#full_name', '#gender', '#mobile_no', '#email'];
                    for (let field of required) {
                        if (!$(field).val()) {
                            Swal.close();
                            Swal.fire('Validation Error', 'Please fill all required new user fields.', 'warning');
                            return;
                        }
                    }
                } else if (!$('#user_id').val()) {
                    Swal.close();
                    Swal.fire('Validation Error', 'Please select an existing user.', 'warning');
                    return;
                }

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

                // Build FormData
                let formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('event_id', $('#event_id').val());
                formData.append('payment_status', $('#payment_status').val());
                formData.append('total_amount', $('#total_amount').val());

                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 (i) {
                    let type = $(this).find('select[name="attachment_type[]"]').val();
                    let file = $(this).find('input[name="attachment_file[]"]')[0].files[0];
                    let name = $(this).find('input[name="attachment_name[]"]').val();
                    if (type && file) {
                        formData.append(`attachments[${i}][type]`, type);
                        formData.append(`attachments[${i}][name]`, name || file.name);
                        formData.append(`attachments[${i}][file]`, file);
                    }
                });

                if (isNewUser) {
                    formData.append('is_new_user', 1);
                    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() || ''));
                } else {
                    formData.append('user_id', $('#user_id').val());
                }

                // 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 = "{{ route('bookings.index') }}";
                            });
                        } else {
                            Swal.fire('Error', res.message || 'Unknown error', 'error');
                        }
                    },
                    error: function (xhr) {
                        Swal.close();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let msg = Object.values(errors).map(arr => arr[0]).join('<br>');
                            Swal.fire('Validation Error', msg, 'warning');
                        } else {
                            Swal.fire('Error', 'Something went wrong', 'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush