@extends('admin.layouts.dashboard')
@section('title', 'Bookings')
@section('content')
<style>
    .content {
        width: 100%;
        margin-top: 5px;
    }
</style>
<section class="content">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h3 class="main-heading mb-0">Bookings</h3>
            <div class="d-flex gap-2">
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        
        <div class="card mb-3">
            <div class="card-body py-2">
                <div class="row g-2 align-items-end">
                    <div class="col-md-4 col-sm-12">
                        <label class="form-label mb-1 small text-muted">Search</label>
                        <input type="text" id="bookingSearch" class="form-control form-control-sm"
                               value="{{ request('search') }}"
                               placeholder="ID, name, email, phone, or service">
                    </div>
                    <div class="col-md-3 col-6">
                        <label class="form-label mb-1 small text-muted">From Date</label>
                        <input type="date" id="bookingDateFrom" class="form-control form-control-sm"
                               value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-3 col-6">
                        <label class="form-label mb-1 small text-muted">To Date</label>
                        <input type="date" id="bookingDateTo" class="form-control form-control-sm"
                               value="{{ request('date_to') }}">
                    </div>
                    <div class="col-md-2 col-12 d-flex gap-2">
                        <button type="button" id="bookingFilterBtn" class="btn btn-secondary btn-sm">Filter</button>
                        @if(request()->filled('search') || request()->filled('date_from') || request()->filled('date_to'))
                            <a href="{{ route('admin.appointment') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs" id="bookingTabs">
            <li class="nav-item">
                <a class="nav-link active" id="activeBookingsTab" href="#activeBookings" data-bs-toggle="tab">Active Bookings</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="cancelledBookingsTab" href="#cancelledBookings" data-bs-toggle="tab">Cancelled Bookings</a>
            </li>
        </ul>
        
        <div class="tab-content">
            <!-- Active Bookings Tab -->
            <div class="tab-pane fade show active" id="activeBookings">
                <div class="mb-3" id="activeBookingData">
                    @include('admin.appointment._active_bookings')
                </div>
            </div>
            
            <!-- Cancelled Bookings Tab -->
            <div class="tab-pane fade" id="cancelledBookings">
                <div class="mb-3" id="cancelledBookingData">
                    @include('admin.appointment._cancelled_bookings', ['cancelledAppointments' => $cancelledAppointments])
                </div>
            </div>
        </div>
</section>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        document.body.addEventListener('click', (event) => {
            if(event.target.classList.contains('view-appointment-detail')){
                const target = event.target;
                const targetModal = target.getAttribute('data-target');

                console.log(targetModal);
                let modal = $(targetModal); // Select the modal

                if (modal.length) {
                    modal.modal('show'); // Show modal if it exists
                } else {
                    console.warn('Modal not found:', targetModal);
                }
            }


            // Hide modal when clicking outside or on a close button
            if (event.target.classList.contains('modal') || event.target.classList.contains('close-modal')) {
                $(event.target).closest('.modal').modal('hide');
            }

            if (event.target.hasAttribute('data-dismiss') && event.target.getAttribute('data-dismiss') === 'modal') {
                $(event.target).closest('.modal').modal('hide');
            }

            if (event.target.parentElement.hasAttribute('data-dismiss') && event.target.parentElement.getAttribute('data-dismiss') === 'modal') {
                $(event.target).closest('.modal').modal('hide');
            }

        })
    });
   $(document).ready(function () {
    // Check and set active tab from localStorage after page load
    var activeTab = localStorage.getItem('activeTab') || '#activeBookings'; // Default to activeBookings if no tab is stored
    $(activeTab).addClass('active');
    $('a[href="' + activeTab + '"]').tab('show');

    // Store the active tab when the user switches tabs
    $('#bookingTabs a').on('click', function (e) {
        var activeTab = $(this).attr('href');
        localStorage.setItem('activeTab', activeTab);
    });

    function getBookingFilters(page) {
        return {
            search: appliedFilters.search,
            date_from: appliedFilters.date_from,
            date_to: appliedFilters.date_to,
            activeTab: $('.nav-tabs .active').attr('href').replace('#', ''),
            page: page || 1
        };
    }

    var appliedFilters = {
        search: @json(request('search', '')),
        date_from: @json(request('date_from', '')),
        date_to: @json(request('date_to', ''))
    };

    function loadBookings(page) {
        var activeTab = $('.nav-tabs .active').attr('href');

        $.ajax({
            type: 'GET',
            url: '{{ url("admin/booking/search") }}',
            data: getBookingFilters(page),
            success: function (data) {
                if (activeTab === '#activeBookings') {
                    $('#activeBookingData').html(data);
                } else {
                    $('#cancelledBookingData').html(data);
                }
            },
            error: function () {
                alert('Error fetching data');
            }
        });
    }

    $('#bookingFilterBtn').on('click', function () {
        appliedFilters = {
            search: $('#bookingSearch').val(),
            date_from: $('#bookingDateFrom').val(),
            date_to: $('#bookingDateTo').val()
        };
        loadBookings(1);
    });

    $('#bookingTabs a').on('shown.bs.tab', function () {
        if (appliedFilters.search || appliedFilters.date_from || appliedFilters.date_to) {
            loadBookings(1);
        }
    });

    // Cancel booking and reload the page without resetting the active tab
    $(document).on('click', '.cancelBookingBtn', function () {
        if(confirm('Are you sure you want to cancel the appointment?') === false){
            return;
        }

        var bookingId = $(this).data('id');
        $.ajax({
            type: 'POST',
            url: '{{ url("admin/booking/cancel") }}',
            data: {
                _token: '{{ csrf_token() }}',
                booking_id: bookingId
            },
            success: function (response) {
                if (response.success) {
                    alert(response.message);
                    // Reload only the cancelled bookings table without affecting the tab
                    if ($('.nav-tabs .active').attr('href') === '#cancelledBookings') {
                        $('#cancelledBookingData').load(location.href + " #cancelledBookingData");
                    } else {
                        location.reload();
                    }
                } else {
                    alert(response.message);
                }
            },
            error: function () {
                alert('Error while cancelling the booking');
            }
        });
    });

    // Prevent tab change on pagination click and handle for both Active and Cancelled bookings
    $(document).on('click', '.pagination a', function (e) {
        e.preventDefault();
        const page = $(this).attr('href').split('page=')[1];
        loadBookings(page);
    });
});
   $(document).ready(function () {
       // Global event handler for dynamically injected modal triggers
       // $(document).on('click', '[data-toggle="modal"]', function (e) {
       //     e.preventDefault();
       //
       //
       // });
       //
       // // Optional: Handle modal cleanup on close
       // $(document).on('hidden.bs.modal', '.modal', function () {
       //     $(this).remove(); // Remove modal from DOM if needed
       // });
   });

</script>
@endpush
@endsection