{{-- 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">
    <link href="{{ asset('css/pages/shared/otasPages.css') }}" rel="stylesheet">
    @if ($has_otas)
        <link href="{{ asset('css/components/custom/harsiScrollBar.css') }}" rel="stylesheet">
    @endif

  {{-- 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']['rooms'])
@section('plugins.Datatables',true)

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

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

        {{-- Header --}}
        <div class="px-4 py-2 mb-3 cardtitle d-flex align-items-center justify-content-between">

            {{-- Title --}}
            <h3 class="pl-3 mb-0">
                {{ __('modules')['dashboard']['hotel']['rooms'] }}
            </h3>

            <div class="gap-2 d-flex align-items-center justify-content-end">
                @if ($has_external_integrations)
                    <button type="button" id="export_ical_availability" class="px-2 py-1 mx-2 btn btn-secondary">
                        <i class="mr-2 fas fa-cloud-download-alt"></i> {{ __('entity_forms')['room']['export_availability'] }}
                    </button>
                @endif

                <button type="button" name="create_record" id="create_record" class="px-2 py-1 mx-2 btn btn-harsi">
                    ✚ {{ __('common_actions')['add'] }} {{ __('entities')['hotel']['room'] }}
                </button>
            </div>
        </div>

        {{-- Message For User --}}
        <div class="my-3 row cardtitle">
            <div class="pt-1 text-center col-lg-12 col-md-12">
                <p class="my-0">
                    {{ __('entity_forms')['room']['page_indications']['part_1'] }}
                    &nbsp;<b>{{ __('entities')['hotel']['room'] }} 0</b>&nbsp;
                    {{ __('entity_forms')['room']['page_indications']['part_2'] }}
                    <b>'Unassigned'</b>
                </p>
            </div>
        </div>

        {{-- Table --}}
        <div class="mb-4 table-responsive">
            <table class="table text-center cardtable" id="room_types_table">
                <thead>
                    <tr>
                        <th width="col">{{ __('entities')['hotel']['room'] }}</th>
                        <th width="col">{{ __('entities')['hotel']['room_type'] }}</th>
                        <th width="col">{{ __('entity_fields')['room']['group'] }}</th>
                        <th width="col">{{ __('entity_fields')['room']['floor'] }}</th>
                        <th width="col">{{ __('entity_fields')['common']['status'] }}</th>
                        <th scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
    @include('hotel.rooms.components.room-form')
    @include('hotel.rooms.components.export-ical-list')

  {{-- 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(){
            $('#room_types_table').DataTable({
                language: getDataTableLanguageConfig(),
                processing: false,
                serverSide: true,
                ajax:{
                    url: "{{ route('rooms.index') }}",
                },
                columns:[
                    {
                        data: 'room_name',
                        name: 'room_name'
                    },
                    {
                        data: 'roomType',
                    },
                    {
                        data: 'roomGroup',
                    },
                    {
                        data: 'room_floor',
                        name: 'room_floor'
                    },
                    {
                        data: 'room_status',
                        name: 'room_status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });

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

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