leezard/resources/views/livewire/calendar.blade.php

<style>
    {!! $css_festivities !!} {
        background: var(--fc-highlight-color) !important;
    }
</style>

<div class="col card--ui" id="card--dashboard">


    <section id="resume-table">
        
        <div class="compare--chart_wrapper d-none"></div>

        <div class="row">
            <div class="col"></div>
            <div class="col-auto text-end mt-2">
                <div class="form--item d-flex align-items-center form--item gap-3">
                    <label for="inputName" class="form-label mb-0">CORSO</label>
                    <select class="form-select form-select-lg me-1" id="name_filter" onchange="reloadCalendar()">
                        <option value="">
                        @foreach($names as $n)
                            <option value="{{$n}}" {{isset($_GET["name_filter"]) && $_GET["name_filter"] == $n ? 'selected' : ''}}>{{$n}}
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-auto mt-2">
                <a style="cursor:pointer" href="#" data-bs-toggle="modal" data-bs-target="#calendarNewModal" class="openNewModal addData btn--ui">
                    {{-- <i class="fa-solid fa-plus"></i> --}}
                    Aggiungi lezione
                </a>
            </div>
        </div>
        <br>
        <div id='calendar'></div>

    </section>

    <a href="#" data-bs-toggle="modal" data-bs-target="#calendarModal" class="openModal"></a>

    <div  wire:ignore.self class="modal" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header modal-header-blu">
                    <h5 class="modal-title" id="calendarModalLabel">Dettaglio</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row align-items-center flex-nowrap">
                        <div class="col-auto">
                            <label for="course_subscription_id" class="form-label text-primary">Ora inizio</label>
                            <h3 class="time mb-0 text-primary">ORA</h3>
                        </div>
                        <div class="col-auto">
                            <div style="border-left: 2px solid var(--bs-primary);height: 75px;"></div>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label date text-primary">Martdì aaa</label>
                            <h3 class="title mb-0">Padel</h3>
                        </div>
                    </div>                    
                    <div class="row mt-2 showDelete" style="display:none">
                        <br>
                        <div class="col-md-12">
                            <label for="newMotivation" class="form-label">Motivazione</label>
                            <select class="form-select form-select-lg me-1 " id="motivation_id">
                                <option value="">
                                @foreach($motivations as $m)
                                    <option value="{{$m["id"]}}">{{$m["name"]}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>                
                </div>
                <div class="modal-footer mt-2 justify-content-between">
                    <button class="btn--ui lightGrey hideDelete hideDeleteButton activeCalendarButton" onclick="showDelete()">Annulla Lezione</a>
                    <button type="button" class="btn--ui btn-primary hideDelete activeCalendarButton" onclick="goPresence()">Presenze</button>
                    <button type="button" class="btn--ui primary showDelete" onclick="deleteCalendar()" style="display:none">Annulla lezione</button>

                    <button type="button" class="btn--ui primary revertDelete" onclick="revertCalendarDeletion()" style="display:none">Ripristina lezione</button>
                </div>
            </div>
        </div>
    </div>

    <!--
    Giorno e data della lezione
    Corso, livello, tipologia, frequenza, insegnante, campo, note
    -->

    <div  wire:ignore.self class="modal" id="calendarNewModal" tabindex="-1" aria-labelledby="calendarNewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header modal-header-blu">
                    <h5 class="modal-title" id="calendarNewModalLabel">Dettaglio</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="date" class="form-label">Data</label>
                            <input class="form-control" type="date" id="date" placeholder="Data">
                        </div>
                        <div class="col-md-6">
                            <label for="date" class="form-label">Nome</label>
                            <input class="form-control js-keyupTitle" type="name" id="name" placeholder="Nome">
                        </div>
                    </div>                    
                    <div class="row">
                        <div class="col-md-6">
                            <label for="course_subscription_id" class="form-label">Ora inizio</label>
                            <select class="form-select" id="from">
                                <option value="">--Seleziona--
                                @for($c=6;$c<=23;$c++)
                                    <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00
                                    <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="course_subscription_id" class="form-label">Ora fine</label>
                            <select class="form-select" id="to">
                                <option value="">--Seleziona--
                                @for($c=6;$c<=23;$c++)
                                    <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00
                                    <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30
                                @endfor
                            </select>
                        </div>
                    </div>                    
                    <div class="row">
                        <div class="col-md-6">
                            <label for="course_type_id" class="form-label">Corso</label>
                            <select class="form-select form-select-lg me-1" id="course_type_id">
                                <option value="">
                                @foreach($course_types as $c)
                                    <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="course_duration_id" class="form-label">Darata</label>
                            <select class="form-select form-select-lg me-1" id="course_duration_id">
                                <option value="">
                                @foreach($course_durations as $c)
                                    <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                                @endforeach
                            </select>
                            
                        </div>
                    </div>    
                    <div class="row">
                        <div class="col-md-6">
                            <label for="course_frequency_id" class="form-label">Frequenza</label>
                            <select class="form-select form-select-lg me-1" id="course_frequency_id">
                                <option value="">
                                @foreach($course_frequencies as $c)
                                    <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="course_level_id" class="form-label">Livello</label>
                            <select class="form-select form-select-lg me-1" id="course_level_id">
                                <option value="">
                                @foreach($course_levels as $c)
                                    <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                                @endforeach
                            </select>
                            
                        </div>
                    </div>  
                    {{-- <div class="row">
                        <div class="col-md-6">
                            <label for="course_frequency_id" class="form-label">Campo</label>
                            <select class="form-select form-select-lg me-1" id="court_id">
                                <option value="">
                                @foreach($courts as $c)
                                    <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="course_level_id" class="form-label">Istruttore</label>
                            <select class="form-select form-select-lg me-1" id="instructor_id">
                                <option value="">
                                @foreach($instructors as $c)
                                    <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                                @endforeach
                            </select>
                            
                        </div>
                    </div>  
                    <div class="row">
                        <div class="col-md-12">
                            <label for="note" class="form-label">Note</label>
                            <input class="form-control" type="name" id="note" placeholder="Note">                            
                        </div>
                    </div> --}}
                </div>
                <div class="modal-footer mt-2">
                    <button class="btn--ui lightGrey" >Annulla</a>
                    <button type="button" class="btn--ui btn-primary" onclick="createCalendar()">Salva</button>
                </div>
            </div>
        </div>
    </div>

</div>

@push('scripts')
    
    <script src="/assets/js/fullcalendar.js"></script>
    <script src="/assets/js/fullcalendar_locales.js"></script>
@endpush

@push('scripts')
    <script>

        var currentCalendar = 0;
        var params = '';

        function goPresence()
        {
            document.location.href = '/presences' + params;
        }

        function createCalendar()
        {
            console.log($("#course_type_id").val());
            @this.set('course_type_id',$("#course_type_id").val());
            console.log($("#course_duration_id").val());
            @this.set('course_duration_id', $("#course_duration_id").val());
            console.log($("#course_frequency_id").val());
            @this.set('course_frequency_id', $("#course_frequency_id").val());
            console.log($("#course_level_id").val());
            @this.set('course_level_id', $("#course_level_id").val());
            console.log($("#date").val() + " " + $("#from").val() + ":00");
            @this.set('from', $("#date").val() + " " + $("#from").val() + ":00");
            console.log($("#date").val() + " " + $("#to").val() + ":00");
            @this.set('to', $("#date").val() + " " + $("#to").val() + ":00");
            console.log($("#name").val());
            @this.set('name', $("#name").val());
            // console.log($("#note").val());
            // @this.set('note', $("#note").val());
            // console.log($("#court_id").val());
            // @this.set('court_id', $("#court_id").val());
            // console.log($("#instructor_id").val());
            // @this.set('instructor_id', $("#instructor_id").val());
            @this.createCalendar();
        }

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

            initialView = document.body.clientWidth < 768 ? 'timeGridDay' : 'timeGridWeek';
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialDate: @this.lastDate ?? null,
                initialView: initialView,
                slotMinTime: '06:00:00',
                headerToolbar: {
                    // left: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
                    left: 'timeGridDay,timeGridWeek,dayGridMonth',
                    center: 'title',
                    right: 'prevYear,prev,next,nextYear today',
                },
                displayEventEnd: false,
                dateClick: function(info) {
                    var x = info.dateStr.split("T");
                    $("#date").val(x[0]);
                    var y = x[1].split("+");
                    var z = y[0].split(":");
                    var from = z[0] + ":" + z[1];
                    console.log(from);
                    $("#from").val(from);
                    $('.openNewModal').trigger('click');
                },
                eventClick: function(info) {
                    var eventDate = new Date(info.event.start); 
                    var datestring = eventDate.getFullYear() + "-" + pad(eventDate.getMonth()+1, 2) + "-" + pad(eventDate.getDate(), 2) + " " + pad(eventDate.getHours(), 2) + ":" + pad(eventDate.getMinutes(), 2) + ":00";
                    var title = info.event.title;
                    $(".title").html(title);
                    if (title.includes("annullata"))
                    {
                        $(".activeCalendarButton").css("display", "none");
                        $(".revertDelete").css("display", "block");
                    }
                    else
                    {
                        $(".activeCalendarButton").css("display", "block");
                        $(".revertDelete").css("display", "none");
                    }
                    $(".time").html(pad(eventDate.getHours(), 2) + ":" + pad(eventDate.getMinutes(), 2));
                    $(".date").html(eventDate.toLocaleDateString('it-IT', { weekday: 'long' }) + " " + pad(eventDate.getDate(), 2) + " " + eventDate.toLocaleDateString('it-IT', { month: 'long' }));
                    currentCalendar = info.event.id;
                    params = '?calendarId=' + info.event.id;// + "&date=" + datestring; 
                    if (info.event.id > 0)
                        $('.openModal').trigger('click');
                },
                locale: 'it',
                events: @json($records),
            });            
            calendar.render();
        });

        $(document).ready(function() {

            
            
        } );

        function showDelete() {
            jQuery(".hideDelete").hide();
            jQuery(".showDelete").show();
        }

        function pad(num, size) {
            num = num.toString();
            while (num.length < size) num = "0" + num;
            return num;
        }

        function deleteCalendar()
        {
            var motivation = jQuery("#motivation_id").val();
            @this.cancelCalendar(currentCalendar, motivation);            
        }

        function revertCalendarDeletion()
        {
            @this.revertCalendarDeletion(currentCalendar);            
        }

        function reloadCalendar()
        {
            document.location.href = '/calendar?name_filter=' + $("#name_filter").val();
        }
        
    </script>
@endpush

@push("css")
    <link href="/css/calendar.css" rel="stylesheet" />
@endpush