@extends('layout.layout')
{{-- <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" /> --}}
{{-- <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /> --}}
<style>
    #calendar {
        max-width: 100%;
        margin: 0 auto;
    }

    .fc-toolbar-title {
        font-size: 1.5rem !important;
        font-weight: bold !important;
    }

    .fc-button {
        border: none !important;
        border-radius: 4px !important;
        padding: 4px 10px !important;
        margin: 4px 5px !important;
    }

    .fc-button-primary:not(:disabled):hover {
        background-color: #0056b3 !important;
    }

    .fc .fc-view-harness-active>.fc-view {
        position: static !important;
    }

    .fc .fc-daygrid-event-harness {
        overflow: hidden;
    }

    .swal-table {
        width: 100%;
        border-collapse: collapse;
        margin: 10px 0;
        font-size: 14px;
    }

    .swal-table th,
    .swal-table td {
        padding: 8px;
        text-align: left;
    }

    .swal-table th {
        font-weight: bold;
        width: 40%;
    }

    .swal-table td {}

    .swal-table tr:nth-child(even) td {}

    .swal-table a {
        color: #007bff;
        text-decoration: none;
    }

    .swal-table a:hover {
        text-decoration: underline;
    }

    #swal2-title {
        font-weight: bold;
        font-size: 1.5rem !important;
    }

    div:where(.swal2-container).swal2-center>.swal2-popup {
        grid-column: 2;
        grid-row: 2;
        place-self: center center;
        width: 60%;
    }
</style>

@section('content')
    {{-- <div class="mb-3">
        <div class="d-flex flex-wrap align-items-center gap-2 justify-content-center mb-3">


            @if ($tracks->count() > 1)
                <a href="{{ route('calendar', ['search' => request('search')]) }}"
class="btn btn-sm btn-filter {{ request('type') ? 'btn-outline-secondary' : 'btn-secondary' }}"
data-type="">
All
</a>

@foreach ($products as $product)
<a href="{{ route('calendar', ['type' => $product->name_en, 'search' => request('search')]) }}"
    class="btn btn-sm btn-filter {{ request('type') == $product->name_en ? 'btn-secondary' : 'btn-outline-secondary' }}"
    data-type="{{ $product->name_en }}">
    {{ $product->name_en }}
</a>
@endforeach

@foreach ($tracks as $product)
<a href="{{ route('calendar', ['type' => $product->name_en, 'search' => request('search')]) }}"
    class="btn btn-sm btn-filter {{ request('type') == $product->name_en ? 'btn-secondary' : 'btn-outline-secondary' }}"
    data-type="{{ $product->name_en }}">
    {{ $product->name_en }}
</a>
@endforeach
@endif
</div>
</div> --}}

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="mb-3 d-flex justify-content-end">
                        <div class="mb-3 d-flex gap-2 justify-content-end">
                            <a href="{{ route('requests.create', ['type' => 'gift_call']) }}" class="btn btn-primary"
                                style="margin-right: 10px !important;">
                                <i class="fas fa-gift me-1"></i> Request Gift Call
                            </a>
                        </div>
                        <div class="mb-3 d-flex gap-2 justify-content-end">
                            <a href="{{ route('requests.create', ['type' => 'english_club']) }}" class="btn btn-primary"
                                style="margin-right: 10px !important;">
                                <i class="fas fa-gift me-1"></i> Join English Club
                            </a>
                        </div>
                        <div class="mb-3 d-flex gap-2 justify-content-end">
                            <a href="{{ route('requests.create', ['type' => 'new_session']) }}" class="btn btn-primary"
                                style="margin-right: 10px !important;">
                                <i class="fas fa-gift me-1"></i> Schedule New Session
                            </a>
                        </div>
                        <form action="{{ route('calendar') }}" method="GET" id="filterForm" class="d-inline-block">
                            <input type="hidden" name="search" value="{{ request('search') }}">

                            <select name="type" class="form-select" id="filterSelect"
                                onchange="document.getElementById('filterForm').submit();">
                                <option value="" {{ request('type') ? '' : 'selected' }}>All</option>

                                {{-- Products --}}
                                @foreach ($products as $product)
                                    <option value="{{ $product->name_en }}"
                                        {{ request('type') == $product->name_en ? 'selected' : '' }}>
                                        {{ $product->name_en }}
                                    </option>
                                @endforeach

                                {{-- Tracks --}}
                                @foreach ($tracks as $track)
                                    <option value="{{ $track->name_en }}"
                                        {{ request('type') == $track->name_en ? 'selected' : '' }}>
                                        {{ $track->name_en }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </div>
                    <div id="calendar">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Event Details Modal -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: fit-content;">

            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">Event Details</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="eventModalBody">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Optional: SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // Flatpickr setup
    function getDatePicker(receiveID) {
        flatpickr(receiveID, {
            enableTime: true,
            dateFormat: "d/m/Y H:i",
        });
    }

    getDatePicker("#startDate");
    getDatePicker("#endDate");
    getDatePicker("#editstartDate");
    getDatePicker("#editendDate");




    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');

        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            buttonText: {
                today: 'Today',
                month: 'Month',
                week: 'Week',
                day: 'Day',
                list: 'List'
            },
            events: function(fetchInfo, successCallback, failureCallback) {
                const type = new URLSearchParams(window.location.search).get('type') || '';
                const search = new URLSearchParams(window.location.search).get('search') || '';
                $.ajax({
                    url: '/calendar/events',
                    method: 'GET',
                    data: {
                        type: type,
                        search: search
                    },
                    success: function(data) {
                        successCallback(data.events);
                    },
                    error: function(error) {
                        failureCallback(error);
                    }
                });
            },
            eventClick: function(info) {
                const props = info.event.extendedProps;
                let trackLabel = 'Track:';
                let categoryLabel = 'Category:';
                let url = '/course/';
                if (props.schedule_type !== 'track') {
                    trackLabel = 'Product:';
                    categoryLabel = 'Category Product:';
                    url = '/course/';
                }
                // Swal.fire({
                //     html: `
                //     <table class="table table-bordered table-sm table-bordered-table sm-table mb-0 text-center">
                //         <thead>
                //             <tr>
                //                 <th class="text-center">Start</th>
                //                 <th class="text-center">End</th>
                //                 <th class="text-center">Schedule Type</th>
                //                 <th class="text-center">${trackLabel}</th>
                //             </tr>
                //         </thead>
                //         <tbody>
                //             <tr>
                //                 <td>${info.event.start.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})}</td>
                //                 <td>${info.event.end ? info.event.end.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : ''}</td>
                //                 <td>${props.schedule_type}</td>
                //                 <td>${props.track_id || ''}</td>
                //             </tr>
                //         </tbody>
                //     </table>
                // `
                // });

                const htmlContent = `
                        <table class="table table-bordered table-sm table bordered-table sm-table mb-0 text-center">
                            <thead>
                                <tr>
                               
                                    <th class="text-center">Start</th>
                                    <th class="text-center">End</th>
                                    <th class="text-center">Staff</th>
                                    <th class="text-center">Admin</th>
                                    <th class="text-center">${categoryLabel}</th>
                                 <th class="text-center">${trackLabel}</th>
                                 <th class="text-center">Track Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>${info.event.start.toLocaleTimeString([], {hour: '2-digit',minute: '2-digit'})}</td>
                                    <td>${info.event.end ? info.event.end.toLocaleTimeString([], {hour: '2-digit',minute: '2-digit'}) : ''}</td>
                                    <td>${props.staff || ''}</td>
                                    <td>${props.adminNames || ''}</td>
                                     <td>${props.category_id || ''}</td>
                                     <td>${props.track_id || ''}</td>                               
                                     <td>${props.track_type || ''}</td>   
                                </tr>
                            </tbody>
                        </table>
                    `;

                document.getElementById('eventModalBody').innerHTML = htmlContent;

                const myModal = new bootstrap.Modal(document.getElementById('eventModal'));
                myModal.show();
            },
            // dateClick: function(info) {
            //     const clickedDate = info.date;
            //     const dayName = clickedDate.toLocaleDateString('en-GB', {
            //         weekday: 'long'
            //     });
            //     const fullDate = clickedDate.toLocaleDateString('en-GB');
            //     Swal.fire({
            //         title: 'Selected Date',
            //         html: `
            //         <div style="line-height: 1.6;">
            //             <strong>Day:</strong> ${dayName}<br>
            //             <strong>Date:</strong> ${fullDate}<br>
            //         </div>
            //     `,
            //         icon: 'info',
            //         confirmButtonText: 'Close'
            //     });
            // },
            eventContent: function(arg) {
                const start = arg.event.start;
                const end = arg.event.end;

                const startTime = start ?
                    start.toLocaleTimeString([], {
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true
                    }) :
                    '';

                const title = `${arg.event._def.extendedProps.track_id || ''} ${startTime}`;
                const color = arg.event._def.ui.borderColor || 'blue';

                return {
                    html: `<p style="color:${color}">${title}</p>`
                };
            },
        });
        document.querySelectorAll('.btn-filter').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const type = this.getAttribute('data-type') || '';
                const search = new URLSearchParams(window.location.search).get('search') || '';
                const newUrl = new URL(window.location);
                if (type) {
                    newUrl.searchParams.set('type', type);
                } else {
                    newUrl.searchParams.delete('type');
                }
                window.history.pushState({}, '', newUrl);
                calendar.getEvents().forEach(event => event.remove());
                calendar.refetchEvents();
                document.querySelectorAll('.btn-filter').forEach(btn => {
                    btn.classList.remove('btn-secondary');
                    btn.classList.add('btn-outline-secondary');
                });
                this.classList.remove('btn-outline-secondary');
                this.classList.add('btn-secondary');
            });
        });
        calendar.render();
    });
</script>