
<?php $__env->startSection('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-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>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('pageSpecificScripts'); ?>
    <script src="<?php echo e(asset('back_assets/assets/plugins/fullcalendar/js/moment.js')); ?>"></script>
    <script src="<?php echo e(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: '<?php echo e(\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: [
                    <?php $__currentLoopData = auth()->user()->appointments()->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $event): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        {
                            id: '<?php echo e($event->id); ?>',
                            title: '<?php echo e(addslashes($event->title)); ?>',
                            start: '<?php echo e(\Carbon\Carbon::parse($event->start)->toDateString()); ?>',
                            extendedProps: {
                                description: `<?php echo addslashes($event->description); ?>`,
                                start_dt: '<?php echo e(\Carbon\Carbon::parse($event->start)->format('F j, Y, g:i a')); ?>',
                                end_dt: '<?php echo e(\Carbon\Carbon::parse($event->start)->format('F j, Y, g:i a')); ?>',
                                location: '<?php echo e($event->location); ?>',
                                // Any other custom fields
                            }
                        },
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                ]
            });
            calendar.render();
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH E:\xampp\htdocs\propco\resources\views/admin/calender/calender.blade.php ENDPATH**/ ?>