@extends('admin.layout.master')
@section('content')
@section('calender', 'active')
@section('title', 'Calender')

<style>
    #calendar-container {
        max-width: 1100px;
        margin: 20px auto;
    }

    #calendar {
        background: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    }

</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Calendar Container -->
    <div id="calendar-container">
        <div id="calendar"></div>
    </div>
</div>

<!-- Modal for Adding Event -->
<!-- Booking Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="eventModalLabel">Create or Update Booking</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="eventForm">
                    <input type="hidden" class="form-control" id="vendor_id" value="{{ $vendor_id }}">
                    <input type="hidden" id="booking_id" value="">
                    <div class="mb-3">
                        <label for="client_id" class="form-label">Client</label>
                        <select class="form-control" id="client_id" required>
                            <option value="">Select Client</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="service_id" class="form-label">Service</label>
                        <select class="form-control" id="service_id" required>
                            <option value="">Select Service</option>
                            @foreach($services as $service)
                                <option value="{{ $service->id }}">{{ $service->service_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="business_id" class="form-label">Business</label>
                        <select class="form-control" id="business_id" required>
                            <option value="">Select Business</option>
                            @foreach($businesses as $business)
                                <option value="{{ $business->id }}">{{ $business->business_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="date" class="form-label">Date</label>
                        <input type="date" class="form-control" id="date" readonly required>
                    </div>

                    <div class="mb-3">
                        <label for="start_time" class="form-label">Start Time</label>
                        <select class="form-control" id="start_time" required>
                            <option value="">Select Start Time</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="end_time" class="form-label">End Time</label>
                        <select class="form-control" id="end_time" required>
                            <option value="">Select End Time</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="payment" class="form-label">Billable Amount</label>
                        <input type="hidden" class="form-control" id="billing_payment">
                        <input type="text" class="form-control" id="payment" readonly required>
                    </div>

                    <div class="mb-3">
                        <label for="total_payment" class="form-label">Final Amount</label>
                        <input type="number" class="form-control" id="total_payment" required>
                    </div>

                    <button type="submit" class="btn btn-primary" style="float: right">Save Booking</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
    <script>
        function fetchAvailableSlots() {
            var bookingId = $('#booking_id').val();
            var serviceId = $('#service_id').val();
            var vendorId = $('#vendor_id').val();
            var createdDate = $('#date').val();

            if (serviceId && createdDate) {
                $.ajax({
                    url: `{{ route("admin.fetch.service.details") }}`,
                    type: 'GET',
                    data: {
                        booking_id: bookingId,
                        service_id: serviceId,
                        vendor_id: vendorId,
                        created_date: createdDate
                    },
                    success: function (response) {
                        if (response.status) {
                            $('#payment').val(response.billable_amount);
                            $('#billing_payment').val(response.billable_amount);

                            var slots = response.slots;
                            var uniqueTimes = [];

                            $('#start_time').empty().append(
                                '<option value="">Select Start Time</option>');
                            $('#end_time').empty().append(
                                '<option value="">Select End Time</option>');

                            if (slots.length > 0) {
                                slots.forEach(slot => {
                                    uniqueTimes = slot
                                        .time_slots; // Get all available times
                                });

                                uniqueTimes.forEach(time => {
                                    console.log('Option:', time);
                                    $('#start_time').append(
                                        '<option value="' +
                                        time + '">' + time + '</option>'
                                    );
                                });

                                let selectedStart = $('#start_time').data(
                                    'selected');
                                if (selectedStart) {
                                    $('#start_time').val(selectedStart).trigger(
                                        'change'); // triggers end_time population
                                    $('#start_time').removeData(
                                        'selected'); // clear it
                                }

                                // Delay to ensure end_time dropdown is updated
                                setTimeout(() => {
                                    let selectedEnd = $('#end_time').data(
                                        'selected');
                                    if (selectedEnd) {
                                        $('#end_time').val(selectedEnd);
                                        $('#end_time').removeData(
                                            'selected');
                                    }
                                }, 200);

                            } else {
                                $('#start_time').append(
                                    '<option value="">No slots available</option>'
                                );
                            }
                        }
                    }
                });
            }
        }

        // function parseTime(timeStr) {
        //     let [time, modifier] = timeStr.split(' ');
        //     let [hours, minutes] = time.split(':').map(Number);

        //     if (modifier === 'PM' && hours < 12) hours += 12;
        //     if (modifier === 'AM' && hours === 12) hours = 0;

        //     return new Date(0, 0, 0, hours, minutes);
        // }
        function parseTime(timeStr) {
            const [time, modifier] = timeStr.split(' ');
            let [hours, minutes] = time.split(':').map(Number);

            if (modifier === 'PM' && hours !== 12) {
                hours += 12;
            }
            if (modifier === 'AM' && hours === 12) {
                hours = 0;
            }

            const date = new Date();
            date.setHours(hours, minutes, 0, 0);
            return date;
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var today = new Date().toISOString().split("T")[0]; // Get today's date
            var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridDay,timeGridWeek,dayGridMonth'
                },
                selectable: true,
                events: "{{ route('admin.fetch.calender', ['vendor_id' => $vendor_id]) }}", // Fetch stored events from backend
                select: function (info) {
                    var selectedDate = info.startStr.split("T")[0];
                    var selectedTime = info.startStr.split("T")[1].substring(0,
                        5); // Extract HH:MM format

                    if (selectedDate < today) {
                        alert('You cannot select a past date!');
                    } else {
                        $('#client_id').val('');
                        $('#business_id').val('');
                        $('#booking_id').val('');
                        $('#payment').val('');
                        $('#total_payment').val('');
                        $('#service_id').val('');
                        $('#end_time').val('');
                        $('#start_time').val('');

                        $('#date').val(selectedDate);
                        $('#start_time').val(selectedTime);
                        eventModal.show();
                    }
                },
                eventClick: function (info) {
                    const event = info.event;
                    const start = new Date(event.start);
                    const end = new Date(event.end);
                    const formattedStart = start.toLocaleTimeString([], {
                        hour: 'numeric',
                        minute: '2-digit',
                        hour12: true
                    }).trim();
                    const formattedEnd = end.toLocaleTimeString([], {
                        hour: 'numeric',
                        minute: '2-digit',
                        hour12: true
                    }).trim();

                    $('#start_time').data('selected', formattedStart);
                    $('#end_time').data('selected', formattedEnd);

                    console.log(formattedStart)
                    console.log(formattedEnd)
                    $('#booking_id').val(event.id); // assumes event has ID set
                    $('#client_id').val(event.extendedProps.client_id);
                    $('#service_id').val(event.extendedProps.service_id);
                    $('#business_id').val(event.extendedProps.business_id);
                    $('#date').val(event.startStr.split("T")[0]);
                    // $('#start_time').val(formattedStart);
                    // $('#end_time').val(formattedEnd);
                    $('#payment').val(event.extendedProps.payment);
                    $('#total_payment').val(event.extendedProps.total_payment);
                    fetchAvailableSlots();
                    eventModal.show();
                },
            });

            calendar.render();

            // Handle form submission
            document.getElementById('eventForm').addEventListener('submit', function (e) {
                e.preventDefault();
                var bookingId = document.getElementById('booking_id').value;
                var method = bookingId ? 'PUT' : 'POST';
                var url = bookingId ?
                    "{{ url('admin/update/calender') }}/" + bookingId :
                    "{{ route('admin.store.calender') }}";

                var formData = {
                    _token: "{{ csrf_token() }}",
                    vendor_id: document.getElementById('vendor_id').value,
                    client_id: document.getElementById('client_id').value,
                    service_id: document.getElementById('service_id').value,
                    business_id: document.getElementById('business_id').value,
                    date: document.getElementById('date').value,
                    start_time: document.getElementById('start_time').value,
                    end_time: document.getElementById('end_time').value,
                    payment: document.getElementById('payment').value,
                    total_payment: document.getElementById('total_payment').value
                };

                // Store booking via AJAX
                $.ajax({
                    url: url,
                    type: method,
                    data: formData,
                    success: function (response) {
                        if (response.status) {
                            // Remove the old event if updating
                            if (bookingId) {
                                var existingEvent = calendar.getEventById(bookingId);
                                if (existingEvent) existingEvent.remove();
                            }

                            // Add new or updated event
                            calendar.addEvent({
                                id: response.id, // returned from backend
                                title: "Booking for " + document.getElementById(
                                        'client_id').options[document
                                        .getElementById('client_id').selectedIndex]
                                    .text,
                                start: formData.date + 'T' + formData.start_time,
                                end: formData.date + 'T' + formData.end_time,
                                extendedProps: {
                                    client_id: formData.client_id,
                                    service_id: formData.service_id,
                                    business_id: formData.business_id,
                                    payment: formData.payment,
                                    total_payment: formData.total_payment,
                                }
                            });

                            $('#eventForm')[0].reset();
                            $('#booking_id').val('');
                            eventModal.hide();
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function () {
                        alert("Error occurred while saving the booking.");
                    }
                });
            });
        });

    </script>

    <script>
        $(document).ready(function () {
            $('#service_id, #date').off('change').on('change', fetchAvailableSlots);
            // Start Time Change Event
            $('#start_time').change(function () {
                $('#payment').val($('#billing_payment').val());
                var selectedTime = $(this).val();
                $('#end_time').empty().append('<option value="">Select End Time</option>');

                if (selectedTime) {
                    var startTimeIndex = $('#start_time option:selected').index();

                    $('#start_time option').each(function (index) {
                        if (index > startTimeIndex) {
                            var timeValue = $(this).val();
                            $('#end_time').append('<option value="' + timeValue + '">' +
                                timeValue + '</option>');
                        }
                    });
                }
            });

            // End Time Change Event
            // $('#end_time').change(function () {
            //     let payment = $('#billing_payment').val();
            //     let selectedStartTime = $('#start_time').val();
            //     let selectedEndTime = $(this).val();
            //     if (selectedEndTime && selectedStartTime) {
            //         let start = parseTime(selectedStartTime);
            //         let end = parseTime(selectedEndTime);

            //         let diffMs = end - start;
            //         let diffHours = diffMs / (1000 * 60 * 60);

            //         if (diffHours > 0) {
            //             let total = diffHours * payment;
            //             $('#payment').val(total);
            //             console.log(total)
            //         } else {
            //             $('#payment').val('Invalid time range');
            //             console.log('axzcxz')
            //         }
            //     }
            // });
            $('#end_time').change(function () {
                let payment = parseFloat($('#billing_payment').val());
                let selectedStartTime = $('#start_time').val();
                let selectedEndTime = $(this).val();

                if (selectedEndTime && selectedStartTime) {
                    let start = parseTime(selectedStartTime);
                    let end = parseTime(selectedEndTime);

                    // If end time is less than start, assume next day
                    if (end <= start) {
                        end.setDate(end.getDate() + 1);
                    }

                    let diffMs = end - start;
                    let diffHours = diffMs / (1000 * 60 * 60);

                    if (diffHours > 0) {
                        let total = diffHours * payment;
                        $('#payment').val(total.toFixed(2));
                        console.log(total);
                    } else {
                        $('#payment').val('Invalid time range');
                        console.log('Invalid time range');
                    }
                }
            });
        });

    </script>
@endpush