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

    <link href="{{ asset('css/pages/shared/otasPages.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('title', __('modules')['dashboard']['hotel']['room_types'])
@section('plugins.Datatables',true)

{{-- Content --}}
@section('content')

  {{-- Body --}}
    <div class="col-xs-12">

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

        {{-- Indications --}}
        <div class="my-3 row cardtitle">
            <div class="text-center col-lg-12 col-md-12">
                <p>
                    {{ __('entity_forms')['room_type']['page_indications'] }}
                    <b>'Overbooked'</b> {{ __('neutral_words')['and'] }} <b>'Unassigned'</b></p>
            </div>
        </div>

        {{-- Table Structure --}}
        <div class="mb-5 table-responsive">
            <table class="table text-center cardtable" id="rooms_table">
                <thead>
                    <tr class="cardtabletr">
                        <th width="20%">{{ __('entity_fields')['common']['name'] }}</th>
                        <th scope="col">{{ __('entity_fields')['room_type']['prices_per_season'] }}</th>
                        <th width="16%">{{ __('entity_fields')['common']['created_at'] }}</th>
                        <th width="18%">{{ __('entity_fields')['common']['actions'] }}</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
    @include('hotel.room-types.components.room-type-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() {
            $('#rooms_table').DataTable({
                language: getDataTableLanguageConfig(),
                order: [2, 'desc'],

                processing: false,
                serverSide: true,
                ajax: {
                    url: "{{ route('room-types.index') }}",
                },

                columns: [
                    {
                        data: 'tr_name',
                        name: 'tr_name'
                    },
                    {
                        data: 'season_prices',
                        name: 'season_prices'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        type: 'date',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });

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

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

@endsection