@extends('layouts.app')

@section('title')
    {{ __('modules')['home']['otas_availability'] }}
@endsection

@section('content')

    {{-- Styles --}}
        {{-- Custom Styles --}}
        <link href="{{ asset('css/components/custom/harsiScrollBar.css') }}" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/shared/otasPages.css') }}">

        <style>
            /*/ Overrides /*/
                /* General */
                body{
                    overflow-x: hidden;
                }

                /* Cards */
                .card-legends {
                    padding: 1.8% 2% !important;
                }

          /*/ Calendar Styles /*/

            /* Own Structures */
            #calendar {
                max-width: 100%;
            }

            .calendar-container {
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.952);
                box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25);

                padding: 20px;
            }

            /* Overridden Classes */

                /* Container */
                .fc-multiMonthYear-view {
                    max-height: 32.5rem !important;
                    overflow-y: auto !important;
                }

                /* Text */
                .fc-multimonth-title { /* Months title */
                    font-size: 1.1em;
                    color: #4d4d4d !important;
                }
                .fc-col-header-cell-cushion{ /* Days title */
                    font-size: 0.9em;
                }

                .fc-daygrid-day-number { /* Days Number text */
                    color: #000 !important;
                }

                .fc-toolbar-title { /* Calendar Main Title  */
                    color: #0d6889 !important;
                    font-size: 2rem !important;
                    font-family: 'Barlow' !important;
                    font-weight: 900 !important;
                    letter-spacing: 2.5px !important;
                    text-transform: uppercase;

                    padding-right: 1rem;
                }

                /* Buttons */
                .fc .fc-button:disabled { /* Disables Calendar Button */
                    opacity: .5;
                    cursor: not-allowed;
                }

                /* Cell Days */
                .fc-daygrid-day.fc-day-disabled { /* Disabled day cell */
                    cursor: not-allowed;
                }

                .fc-daygrid-day { /* Enabled day cell */
                    cursor: pointer;
                }

                .fc-multimonth-title, .fc-col-header-cell-cushion { /* Days & Months title */
                    text-transform: uppercase !important;
                }

                a.fc-col-header-cell-cushion { /* Week Days */
                    color: #0d6889 !important;
                }
        </style>

    {{-- Body --}}
        {{-- Superior Cards --}}
        <section class="px-3 mt-3 row">
            {{-- Main Card --}}
            <div class="col-12">
                <div class="card-legends color-card-low d-flex align-items-center justify-content-between">

                    {{-- Title --}}
                    <h3 class="mb-0 legend-titles text-uppercase">
                        {{ __('entity_forms')['otas_connection']['allotment_calendar']['title'] }}
                    </h3>

                    {{-- Page Description --}}
                    <button type="button" class="info-icon btn rounded-circle pulse-animation"
                        data-container="body"
                        data-toggle="popover"
                        data-placement="right"
                        data-content="{{ __('entity_forms')['otas_connection']['allotment_calendar']['page_instructions'] }}">
                        <i class="fas fa-info-circle"></i>
                    </button>

                </div>
            </div>
        </section>

        {{-- Calendar Structure --}}
        <section class="px-3 mt-4 mb-2 justify-content-center">
            <div class="calendar-container">
                <div id='calendar'></div>
            </div>
        </section>

@endsection

@section('scripts')
  {{-- Imports --}}
    {{-- JS --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"></script>

    {{-- FullCalendar CSS --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/multimonth@6.1.19/main.min.css">

    {{-- FullCalendar JS --}}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/multimonth@6.1.19/index.global.min.js"></script>

  {{-- Calendar Construction --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            //* Variables de Control
            const element = document.getElementById('calendar');
            const current_date = moment().startOf('day').format('YYYY-MM-DD');

            //* Construcción del Calendario
            const calendar = new FullCalendar.Calendar(element, {
              //- Localization - Lang
                timeZone: "{{ config('app.timezone') }}",
                locale: "{{ session('locale') }}",
                navLinks: false,

              //- Default view and design
                initialView: 'multiMonthYear',
                scrollTime: '00:00',
                aspectRatio: 2,
                height: 'auto',

              //- Header and Buttons
                headerToolbar: {
                    left: 'today prev,next',
                    center: '',
                    right: 'title',
                },

                // Custom button's texts
                buttonText: {
                    today: "{{ __('neutral_words')['current_year'] }}",
                },

                // Title format
                titleFormat: { year: 'numeric' },

              //- Custom views and design
                views: {
                    multiMonthYear: {
                        type: 'multiMonth',
                        duration: { years: 1 }
                    }
                },
                multiMonthMaxColumns: 3,

                // Define Valid & Interactable Dates
                validRange: {
                    start: current_date // Solo activamos fechas que aun no han sido o concluido
                },

                // Custom calendar presentation
                datesSet: function(info) {
                    // 1) Disable header buttons
                    const prevBtn = $('.fc-prev-button');

                    const viewStart = moment(info.startStr); // Inicio del periodo mostrado actualmente en pantalla
                    const prevStart = viewStart.clone().subtract(1, 'year'); // Obtenemos el año previo al mostrado en pantalla

                    // No permitimos ir a un rango que empiece antes del 1° de enero del año actual
                    const minStart = moment().startOf('year');
                    const shouldDisablePrev = prevStart.isBefore(minStart);
                    prevBtn.prop('disabled', shouldDisablePrev);
                },

              //- Interactions
                // OnClick interactions
                dateClick: function(info) {
                    const selectedDate = info.dateStr;
                    window.location.href = `/otas/allotment/${selectedDate}`;
                }
            });

            calendar.render(); // Render Calendar
        });
    </script>
@endsection

@section('footer')
    @include('shared.components.footer.basic-footer')
@endsection