@extends('admin.layouts.app')
@section('contentSection')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div><i class="fa fa-calendar"></i> Calender
                    </div>
                </div>
                {{--                <div class="card-header">--}}
                {{--                    <div class="row">--}}
                {{--                        <div class="col-md-3 form-group">--}}
                {{--                            <i class="fa fa-filter"></i> Filters--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                    <form id="appointmentSearchFrom">--}}
                {{--                        <div class="row">--}}
                {{--                            <div class="col-md-3 form-group">--}}
                {{--                                <label class="control-label">Type</label>--}}
                {{--                                <select name="type_search" class="form-control">--}}
                {{--                                    <option value="">Select Type</option>--}}
                {{--                                    <option value="1">General Appointment</option>--}}
                {{--                                    <option value="2">Accompanied Viewing</option>--}}
                {{--                                    <option value="3">Valuation</option>--}}
                {{--                                    <option value="4">Unaccompanied Viewing</option>--}}
                {{--                                </select>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                        <br>--}}
                {{--                        <div class="row">--}}
                {{--                            <div class="col-md-12 text-right">--}}
                {{--                                <button class="btn btn-primary">Search</button>--}}
                {{--                                <button type="reset" id="appointmentSearchFormReset" class="btn btn-primary">Reset--}}
                {{--                                </button>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    </form>--}}
                {{--                </div>--}}
                <div class="card-body">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Appointment Details</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>
@endsection
@section('pageSpecificScripts')
    <script src="{{asset('back_assets/assets/plugins/fullcalendar/js/moment.js')}}"></script>
    <script src="{{asset('back_assets/assets/plugins/fullcalendar/js/fullcalendar.min.js')}}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // First verify the element exists
            const calendarEl = document.getElementById('calendar');
            if (!calendarEl) {
                console.error('Calendar element not found');
                return;
            }

            // Initialize with new API
            const calendar = new FullCalendar.Calendar(calendarEl, {
                eventClick: function (info) {
                    // info.event contains the clicked event
                    const event = info.event;
                    // Create modal content
                    const modalContent = `
                        <p><strong>Title:</strong> ${event.title}</p>
                        <p><strong>Start:</strong> ${event.extendedProps.start_dt}</p>
                        <p><strong>End:</strong> ${event.extendedProps.end_dt}</p>
                        <p><strong>Location:</strong> ${event.extendedProps.location}</p>
                      `;
                    $('#eventModal .modal-body').html(modalContent);
                    $('#eventModal').modal('show');
                    info.jsEvent.preventDefault();
                },
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                initialDate: '{{\Carbon\Carbon::now()->toDateString()}}',
                navLinks: true,
                selectable: false,
                selectMirror: false,
                select: function (arg) {
                    const title = prompt('Event Title:');
                    if (title) {
                        calendar.addEvent({
                            title: title,
                            start: arg.start,
                            end: arg.end,
                            allDay: arg.allDay
                        });
                    }
                    calendar.unselect();
                },
                editable: true,
                dayMaxEvents: true,
                events: [
                    @foreach(auth()->user()->appointments()->get() as $event)
                        {
                            id: '{{ $event->id }}',
                            title: '{{ addslashes($event->title) }}',
                            start: '{{ \Carbon\Carbon::parse($event->start)->toDateString() }}',
                            extendedProps: {
                                description: `{!! addslashes($event->description) !!}`,
                                start_dt: '{{ \Carbon\Carbon::parse($event->start)->format('F j, Y, g:i a') }}',
                                end_dt: '{{ \Carbon\Carbon::parse($event->start)->format('F j, Y, g:i a') }}',
                                location: '{{ $event->location }}',
                                // Any other custom fields
                            }
                        },
                    @endforeach
                ]
            });
            calendar.render();
        });
    </script>
@endsection