{{-- Styles --}}
  {{-- Custom --}}
    <link href="{{ asset('css/components/custom/harsiScrollBar.css') }}" rel="stylesheet">
    <link href="{{ asset('css/components/custom/specialElements.css') }}" rel="stylesheet">
    <link href="{{ asset('css/components/custom/toastify.css') }}" rel="stylesheet">
    <link href="{{ asset('css/components/tables/entity-tables.css') }}" rel="stylesheet">

  {{-- Imports --}}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

{{-- Page Configuration --}}
@extends('adminlte::page')
@section('plugins.Datatables',true)
@section('title', __('modules')['dashboard']['hotel']['seasons'])

{{-- Content --}}
@section('content')
    {{-- Body --}}
    <div class="col-xs-12">

        {{-- Title & Button --}}
        <div class="row cardtitle">
            <div class="col-lg-7 col-md-7">
                <h3>{{ __('modules')['dashboard']['hotel']['seasons'] }}</h3>
            </div>
            <div class="col-lg-5 col-md-5" align="right">
                <button type="button" name="create_record" id="create_record" class="btn btn-harsi">
                    ✚ {{ __('common_actions')['add'] }} {{ __('entities')['hotel']['season'] }}
                </button>
            </div>
        </div>

        {{-- Page Indications --}}
        <div class="my-3 row cardtitle">
            <div class="text-center col-lg-12 col-md-12">
                <p style="line-height: 2.4rem;">
                    {{ __('entity_forms')['season']['page_indications'] }}
                    <b>'{{ __('seeders')['seasons']['default_season'] }}'</b>
                </p>
            </div>
        </div>

        {{-- Table Structure --}}
        <div class="mb-5 table-responsive">
            <table class="table text-center cardtable" id="season_table">
                <thead>
                    <tr class="cardtabletr">
                        <th width="30%">{{ __('entity_fields')['common']['name'] }}</th>
                        <th width="20%">{{ __('entity_fields')['common']['type'] }}</th>
                        <th>{{ __('entity_fields')['season']['periods'] }}</th>
                        <th width="20%">{{ __('entity_fields')['common']['actions'] }}</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
    @include('hotel.seasons.components.season-form')

  {{-- JS Control --}}
    <script type="text/javascript">
        "use strict";
    </script>

    {{-- Toastify --}}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

  {{-- Table Controls --}}
    <script>
      // Table Data
        $(document).ready(function () {
            $('#season_table').DataTable({
                language: getDataTableLanguageConfig(),
                processing: false,
                serverSide: true,

                ajax: {
                    url: "{{ route('seasons.index') }}",
                },
                columns: [
                    { data: 's_name', name: 's_name' },
                    { data: 's_type', name: 's_type' },
                    { data: 'periods', name: 'periods' },
                    { data: 'action', name: 'action', orderable: false }
                ]
            });
        });

        // Table Data Cycle
        function cargarTabla() {
            $('#season_table').DataTable().ajax.reload(null, false);
        }

        $(document).ready(function () {
            setInterval(cargarTabla, 30000); //Cada 30 segundos (30 mil milisegundos)
        });
    </script>

@endsection