@section('title')
    Calendário
@stop

@section('content-header')
    Calendário
@stop

@section('breadcrumb')
    <li class="active">Calendário</li>
@stop

@section('content')
<style>
    .legend__container {
    display: flex;
    overflow: auto;
    padding: 0 10px;
    }
    .legend__item {
    margin: 2px 5px;
    display: flex;
    align-items: center;
    }
    .legend__text {
    color: rgb(55, 61, 63);
    font-size: 15px;
    font-weight: 400;
    }

    .fc-day-today {
        background: whitesmoke !important;
    }
    .fc-border-color{
        background: black !important;
    }
    .legend__marker {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-right: 3px;
    border-style: solid;
    height: 12px;
    width: 12px;
    left: 0px;
    top: 0px;
    border-width: 0px;
    border-color: rgb(255, 255, 255);
    border-radius: 2px;

    background: rgb(92, 97, 242);
    color: rgb(92, 97, 242);
    }

    #calendar {
        max-height: 580px;
    }

    .legend__item--blue .legend__marker {
    background: rgb(92, 97, 242);
    }
    .legend__item--orange .legend__marker {
    background: rgb(255, 151, 102);
    }
    .legend__item--grey .legend__marker {
        background: rgb(128,128,128);
    }
    .legend__item--green .legend__marker {
    background: rgb(81, 187, 37);
    }
    .legend__item--lgreen .legend__marker {
        background: rgb(00, 255, 00);
    }
</style>
    <div class="container-calendar">

        <div class="legend__container">
            <div class="legend__item legend__item--grey">
                <span class="legend__marker"></span>
                <span class="legend__text">Aguarda Entrega</span>
            </div>

            <div class="legend__item legend__item--orange">
                <span class="legend__marker"></span>
                <span class="legend__text">Aguarda Orçamento</span>
            </div>

            <div class="legend__item legend__item--blue">
                <span class="legend__marker"></span>
                <span class="legend__text">Aguarda Reparação</span>
            </div>

            <div class="legend__item legend__item--lgreen">
                <span class="legend__marker"></span>
                <span class="legend__text">Aguarda Levantamento</span>
            </div>

            <div class="legend__item legend__item--green">
                <span class="legend__marker"></span>
                <span class="legend__text">Terminado</span>
            </div>

        </div>
        <div id="calendar"></div>
    </div>
<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="appointmentModalLabel">Novo Agendamento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">X</span>
                </button>
            </div>
            <div class="modal-body" id="appointmentModalBody">
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="appointmentDetailsModal" tabindex="-1" role="dialog" aria-labelledby="appointmentDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="appointmentDetailsModalLabel">Detalhes do Agendamento</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">X</span>
                </button>
            </div>
            <div class="modal-body" id="appointmentDetailsModalBody">
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler/index.global.min.js'></script>
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core/main.css" rel="stylesheet" />
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'resourceTimeGridDay',
                resources: @json($resources),
                {{--events: @json($events),--}}
                eventSources: [
                    '{{route('admin.calendar.getEvents')}}',
                ],
                {{--url: "{{route('admin.calendar.getEvents')}}",--}}
                headerToolbar: {
                    left: 'today prev,next allButton',
                    center: 'title',
                    right: 'resourceTimeGridDay,resourceTimeGridWeek'
                },
                timeZone: 'GMT',
                customButtons: {
                    allButton: {
                        text: 'Todos',
                        click: function() {
                            calendar.getEvents().forEach(function(event) {
                                event.setProp('display', 'block');
                            });
                        }
                    }
                },
                locale: 'pt',
                buttonText: {
                    today: 'Hoje',
                    week: 'Semana',
                    day: 'Dia',
                    list: 'Lista'
                },
                slotMinTime: '08:00',
                slotMaxTime: '19:00',
                slotLabelFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false,
                    omitZeroMinute: false
                },
                locale: 'pt',
                eventSourceSuccess: function (content,response) {
                    const resourceButton = document.querySelector('.resource-toggle.active');

                    if(!resourceButton) return;


                    const id = resourceButton.dataset.resourceId
                    return content.filter(item => item.resourceId === id);
                },
                allDayText: 'Diários',
                scrollTime: '14:00',
                aspectRatio: 1.0,
                eventDurationEditable: false,
                schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
                editable: true,
                resourceLabelContent: function(arg) {
                    return {
                        html: '<button class="resourceButtons resource-toggle" data-resource-id="' + arg.resource.id + '">' + arg.resource.title + '</button>'
                    };
                },
                overlap:false,
                resourceOrder: 'title',
                eventClick: function(info) {
                    var appointmentId = info.event.id;
                    $.ajax({
                        url: "{{ route('admin.appointments.show', ['id_appointment' => ':id']) }}".replace(':id', appointmentId),
                        type: "GET",
                        success: function(response) {
                            $('#appointmentDetailsModalBody').html(response);
                            $('#appointmentDetailsModal').modal('show');
                        },
                        error: function(error) {
                            $('#appointmentDetailsModal').modal('show');
                        }
                    });
                },
                selectOverlap: function(event) {
                    var view = calendar.view;
                    var dateSpan = event.dateSpan;

                    dateSpan.forEach(function(span) {
                        var td = view.dateCellForSpan(span);
                        if (td) {
                            td.classList.add('hover-highlight');
                        }
                    });
                },
                unselect: function() {
                    var view = calendar.view;
                    var tds = view.el.querySelectorAll('.hover-highlight');
                    tds.forEach(function(td) {
                        td.classList.remove('hover-highlight');
                    });
                },
                dateClick: function(info) {
                    var resourceId = info.resource.id;
                    var selectedStartDate = info.dateStr;
                    var selectedEndDate = new Date(info.date);
                    selectedEndDate.setHours(selectedEndDate.getHours() + 1);
                    var formattedEndDate = selectedEndDate.toISOString().slice(0, 19).replace('T', ' ');
                    // Show the appointment modal
                    $('#appointmentModal').modal('show');

                    // Fetch appointment creation form
                    $.ajax({
                        url: "{{ route('admin.appointments.create') }}",
                        type: "GET",
                        data: {
                            selectedStartDate: selectedStartDate,
                            selectedEndDate: formattedEndDate,
                            technician: resourceId
                        },
                        success: function(response) {
                            $('#appointmentModalBody').html(response);
                            $('#appointmentModal').modal('show');
                        },
                        error: function(error) {
                            $('#appointmentModalBody').html('<p>Ocorreu um erro ao carregar o agendamento.</p>');
                            $('#appointmentModal').modal('show');
                        }

                    });
                },
                eventDrop: function(info) {
                    updateEvent(info.event);
                },
                eventResize: function(info) {
                    updateEvent(info.event);
                }
            });
            $('#appointmentDetailsModal').on('hidden.bs.modal', function () {
                calendar.refetchEvents();
                $('#appointmentDetailsModalBody').html('');
            });

            $('#appointmentModal').on('hidden.bs.modal', function () {
                calendar.refetchEvents();
                $('#appointmentModalBody').html('');
            });

            calendarEl.addEventListener('click', function(event) {
                if (event.target.classList.contains('resource-toggle')) {
                    var resourceId = event.target.dataset.resourceId;
                    var resourceButtons = document.querySelectorAll('.resource-toggle');
                    resourceButtons.forEach(function(button) {
                        if (button.dataset.resourceId === resourceId) {
                            button.classList.add('active');
                        } else {
                            button.classList.remove('active');
                        }
                    });
                    if (resourceId === 'todos') {
                        calendar.getEvents().forEach(function(event) {
                            event.setProp('display', 'block');
                        });
                    } else {
                        calendar.getEvents().forEach(function(event) {
                            var resources = event.getResources();
                            var resourceIds = resources.map(function(resource) { return resource.id });
                            if (event && resourceIds.includes(resourceId)) {
                                event.setProp('display', 'block');
                            } else {
                                event.setProp('display', 'none');
                            }
                        });
                    }
                }
            });
            function updateEvent(event) {
                var updatedEvent = {
                    start: event.start.toISOString(),
                    end: event.end ? event.end.toISOString() : null,
                    resourceId: event.getResources().length ? event.getResources()[0].id : null,
                };

                $.ajax({

                    url: "{{ route('admin.appointments.update', ['appointment' => ':id']) }}".replace(':id', event.id),
                    type: "POST",
                    data: {
                        ...updatedEvent,
                        _method: 'PUT'
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Successo!',
                            text: 'Agendamento alterado com sucesso.',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                    },
                    error: function(xhr, status,error) {
                        Swal.fire({
                            title: 'Erro!',
                            text: 'Ocorreu um erro ao alterar o agendamento.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }


            calendar.render();

            var todosButton = document.querySelector('.resource-toggle[data-resource-id="todos"]');
            todosButton.click();
        });
    </script>
@endsection