@extends('admin.layouts.admin')

<script src='{{ asset('admin/js/fullcalendar-global.min.js') }}'></script>

@section('content')
    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item" aria-current="page">
                                    <a href="{{ route('admin.appointments') }}">Appointments</a>
                                </li>
                                <li class="breadcrumb-item" aria-current="page">Calender</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h2 class="mb-0">Calendar</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12 col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            $(document).ready(function() {
                var calendarEl = document.getElementById('calendar');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    events: '{{ route("admin.get-appointments") }}', // Route to fetch appointments from Laravel
                    eventContent: function(info) {
                        let x = info.event.extendedProps;
                        var appointmentId = x.appointmentId;
                        let statusIcon = '';

                        if (x.status == 'P') {
                            statusIcon = '<i class="fa fa-clock"></i>';
                        } else if (x.status == 'C') {
                            statusIcon = '<i class="fa fa-times"></i>';
                        }  else if (x.status == 'S') {
                            statusIcon = '<i class="fa fa-check"></i>';
                        }

                        return {
                            html: x.from_time.substring(0, 5) + ' - ' + x.to_time.substring(0, 5) + ' &nbsp;&nbsp; ' + x.service_name +
                                '<br>' +
                                x.first_name + ' ' + x.last_name +
                                '<div class="border-top mt-1 pt-1">' +
                                '<i class="fa fa-user"></i> &nbsp' + x.fn + ' ' + x.ln + ' &nbsp ' + statusIcon +
                                '</div>'
                        };
                    },
                    eventClick: function(info) {
                        let url = "{{ route('admin.appointment-details', ['appointment' => 'arg1']) }}";
                        url = url.replace('arg1', info.event.extendedProps.appointmentId);
                        window.location.href = url;
                    },
                    dateClick: function(info) {
                        let url = "{{ route('admin.new-appointment', ['date' => 'arg1']) }}";
                        url = url.replace('arg1', info.dateStr);
                        window.location.href = url;
                    },
                    datesSet: function() {
                        // Load additional data if needed
                    },
                });

                calendar.render();
            })
        </script>
    @endpush
@endsection