@extends('backoffice.doctor.layout')

@section('content')
   <div class="iq-card">
        <div class="iq-card-header d-flex justify-content-between">
            <div class="iq-header-title">
                <h4 class="card-title">Plannings</h4>
            </div>
            <div class="iq-card-header-toolbar d-flex align-items-center">
                <a href="#add-planning-modal" data-target="#add-planning-modal" data-toggle="modal" class="btn btn-primary"><i class="ri-add-line mr-2"></i>Ajouter</a>
            </div>
        </div>
        <div class="iq-card-body">
            <div id='calendar'></div>
        </div>
    </div>

@include('backoffice.doctor.includes.add-planning-modal')
@include('backoffice.doctor.includes.update-planning-modal')
@endsection

@section('scripts')
    <!-- Full calendar -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.0.3/index.global.min.js"></script>

    <script>
        let urlUpdate = "{{ route('doctor.plannings.update', 'id') }}";
        let urlDelete = "{{ route('doctor.plannings.delete', 'id') }}";
        let event;

        function getDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2)
                month = '0' + month;
            if (day.length < 2)
                day = '0' + day;

            return [year, month, day].join('-');
        }

        function getTime(date) {
            var d = new Date(date);

            return d.getHours() + ":" + d.getMinutes();
        }

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

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                initialDate: Date.now(),
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                dayMaxEvents: true, // allow "more" link when too many events
                events: {!! json_encode($doctorPlannings) !!},
                eventClick: function(info) {
                    const updateForm = $('#update-planning-form');
                    const day = $('#update-planning-form #day');
                    const start = $('#update-planning-form #start');

                    $('#update-planning-modal').modal('show');
                    day.val(getDate(info.event._instance.range.start));
                    start.val(getTime(info.event._instance.range.start));
                    event = info.event;

                    updateForm.attr('action', urlUpdate.replace('id', info.event._def.publicId));

                }
            });

            calendar.render();


        });

        $(document).on("click", "#delete-planning", function (e) {
            e.preventDefault();
            $('#delete-planning-form').attr('action', urlDelete.replace('id', event._def.publicId));
            if (confirm("Voulez vous vraiment supprimé cette disponibilité ?")) {
                $('#delete-planning-form').submit();
            }
        });
    </script>
@endsection