<link href="{{ asset('css/components/tables/entity-tables.css') }}" rel="stylesheet">

@extends('adminlte::page')

@section('title', __('modules')['dashboard']['hotel']['consumption_tickets'])

@section('content')

    {{-- Body --}}
    <div class="col-xs-12">
        <div>
            <div class="row cardtitle-nota">
                <div class="col-lg-12" align="center" style="padding-top:1%;">
                    <h3>
                        {{ __('entity_forms')['consumption_tickets']['page'] }}
                    </h3>
                </div>
            </div>
            <br>
            <div class="table-responsive">
                <table class="table text-center cardtable tableUserList" id="tableUserList">
                    <thead>
                        <tr class="cardtabletr">
                            <th width="col">Folio</th>
                            <th width="col">{{ __('entity_fields')['reservation']['client'] }}</th>
                            <th width="col">{{ __('entity_fields')['common']['date'] }}</th>
                            <th width="col">{{ __('entity_fields')['reservation']['contract'] }}</th>
                            <th width="col">{{ __('entity_fields')['charges_and_payments']['amount'] }}</th>
                            <th width="col">{{ __('entity_fields')['charges_and_payments']['payment'] }}</th>
                            <th scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>

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

    <script>
        // Table Controller & Cycle
        $(document).ready(function () {
            $('.tableUserList').DataTable({

                language: getDataTableLanguageConfig(),
                processing: false,
                order: [
                    [0, 'desc']
                ],
                serverSide: true,
                ajax:{
                    url: "{{ route('reservation.tickets.hotelConsumptions') }}",
                },
                columns:[
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'client_reference',
                        name: 'client_reference'
                    },
                    {
                        data: 'reservation_date',
                        name: 'reservation_date'
                    },
                    {
                        data: 'consumption_contract',
                        name: 'consumption_contract'
                    },
                    {
                        data: 'consumption_charges',
                    },
                    {
                        data: 'consumption_payments',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });

        function cargarTabla() {
            $('#tableUserList').DataTable().ajax.reload(null, false);
        }

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

@endsection
