@extends('layouts.reports')

@section('title')
Hotel | {{ __('reports.hotel.statisticalReports.reservas.credit_per_period_and_payment_method') }}
@endsection

@section('content')

    {{-- Content --}}
    <div class="mt-4 container-fluid">

        {{-- Header --}}
        <section class="flex-wrap px-3 d-flex justify-content-between align-items-center cardtitle oculto-impresion">

            {{-- Action & Titles --}}
            <div class="flex-wrap py-2 justify-content-between align-items-center d-flex">
                {{-- Buttons --}}
                <div class="mr-3 d-flex">
                    {{-- Go Back --}}
                    <a type="button" href="{{ route('hotel.reports') }}"
                        class="mx-1 fixed-width oculto-impresion btn return-button"
                    >
                        <img src="{{ asset('icons/arrow_inverse.svg') }}">
                    </a>

                    {{-- Print --}}
                    <button onclick="imprimir()"
                        class="px-0 mx-1 fixed-width oculto-impresion btn harsi-button"
                    >
                        <img src="{{ asset('icons/print.svg') }}">
                    </button>

                    {{-- Download as CSV --}}
                    <button onclick="print_csv()"
                        class="px-0 mx-1 btn btn-success fixed-width oculto-impresion download-csv-button"
                        title="{{ __('reports')['hotel']['common']['download'] }}"
                    >
                        <img src="{{ asset('icons/csv_white.svg') }}">
                    </button>
                </div>

                {{-- Title --}}
                <h5 class="mb-0 oculto-impresion">
                    {{ __('reports.hotel.statisticalReports.reservas.credit_per_period_and_payment_method') }}
                </h5>
            </div>

            {{-- Filter Form --}}
            <form id="filter_report" class="py-2 d-flex align-items-center">
                {{-- Year --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <span class="px-3 input-group-text harsi-color fw-bold">
                            {{ __('reports')['hotel']['common']['from'] }}
                        </span>
                    </div>

                    <input type="date" id="from" class="form-control"
                        value="{{ now()->format('Y-m-01') }}">
                </div>

                {{-- Month --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <span class="px-3 input-group-text harsi-color fw-bold">
                            {{ __('reports')['hotel']['common']['to'] }}
                        </span>
                    </div>

                    <input type="date" id="to" class="form-control"
                        value="{{ now()->format('Y-m-t') }}">
                </div>

                {{-- Submit --}}
                <button type="submit" class="mx-2 btn harsi-button">
                    {{ __('common_actions')['filter'] }}
                </button>
            </form>

        </section>

        {{-- Title for Print --}}
        <section class="mb-4">
            <h2 class="text-center col-lg-12" id="uno">
                {{ __('reports.hotel.statisticalReports.reservas.credit_per_period_and_payment_method') }}
            </h2>
            <h3 class="mt-1 text-center col-lg-12 fw-bold" id="uno"><span id="period_of_contracts"></span></h3>
        </section>

        {{-- Table --}}
        <section class="my-1 table-responsive col-12">
            <table class="table text-center cardtable" id="example">
                <thead>
                    <tr class="cardtabletr">
                        <th class="text-center" colspan="6">{{ __('entities')['hotel']['reservation'] }}</th>
                        <th class="text-center" colspan="3">{{ __('reports')['hotel']['common']['lodging'] }} ({{ __('reports')['hotel']['common']['balance'] }})</th>
                    </tr>
                    <tr class="cardtabletr">
                        <th class="text-center th_minus" scope="col">ID</th>
                        <th class="text-center th_minus" scope="col">{{ __('entity_fields')['reservation']['client'] }}</th>
                        <th class="text-center th_minus" scope="col">{{ __('entity_fields')['reservation']['source'] }}</th>
                        <th class="text-center th_minus" scope="col">Check-In</th>
                        <th class="text-center th_minus" scope="col">Check-Out</th>
                        <th class="text-center th_minus" scope="col">{{ __('entity_fields')['reservation']['regimen'] }}</th>
                        <th class="text-center th_minus" scope="col">{{ __('reports')['hotel']['common']['agreed'] }}</th>
                        <th class="text-center th_minus" scope="col">{{ __('reports')['hotel']['common']['credited'] }}</th>
                        <th class="text-center th_minus" scope="col">{{ __('reports')['hotel']['common']['outstanding'] }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th scope="row" colspan="6" class="text-center">
                            {{ __('reports')['hotel']['common']['total'] }}
                        </th>
                        <td class="text-center td-minus"><b id="total_price_raw"></b></td>
                        <td class="text-center td-minus"><b id="lodging_paid_raw"></b></td>
                        <td class="text-center td-minus"><b id="lodging_remaining_raw"></b></td>
                    </tr>
                </tfoot>
            </table>
        </section>
    </div>

    <script>
        // Global Controls
        $(document).ready(function () {
          // Redraw Table for Filter
            $('#filter_report').on('submit', function (e) {
                e.preventDefault();
                reportTable.ajax.reload();
            });

          // Table Controller
            const reportTable =  $('#example').DataTable({
                language: getDataTableLanguageConfig(),
                "order": [0, 'asc'],
                lengthMenu: [[-1, 5, 10, 25, 50, 100],['All', 5, 10, 25, 50, 100]],
                processing: false,
                serverSide: true,

                ajax: {
                    url: "{{ route('hotel.reports.creditPerPeriod') }}",
                    type: "GET",
                    data: function (d) {
                        d.from = $('#from').val();
                        d.to = $('#to').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'client_reference', name: 'client_reference' },
                    { data: 'source' },
                    { data: 'date_entry', name: 'date_entry', type: 'date' },
                    { data: 'date_departure', name: 'date_departure', type: 'string' },
                    { data: 'regimen' },
                    { data: 'total_price', name: 'total_price' },
                    { data: 'lodging_payments', name: 'lodging_payments' },
                    { data: 'payment_left', name: 'payment_left' },
                ],

                drawCallback: function (settings) {
                  //* Control Data
                    const json = settings.json || {};

                  //* Totals
                    $('#total_price_raw').html(clean_currencies(json.total_price_raw || 0.00));
                    $('#lodging_paid_raw').html(clean_currencies(json.lodging_paid_raw || 0.00));
                    $('#lodging_remaining_raw').html(clean_currencies(json.lodging_remaining_raw || 0.00));
                }
            });
        });

        // Table Data Cycle
        const cargarTabla = ()=>$('#example').DataTable().ajax.reload(null, false);
        $(document).ready(() => setInterval(cargarTabla, 30000) ); //Cada 30 segundos (30 mil milisegundos)

        // Report Interactions
        function imprimir() {
            const beforePrint = function () {
                const from = $('#from').val();
                const to = $('#to').val();

                $('#period_of_contracts').text(`${formatDate(from)} - ${formatDate(to)}`);
            };

            if (isIosDevice()) {
                openPrintWindow(beforePrint);
            } else {
                beforePrint();
                window.print();
            }
        }

        function print_csv() {
            var from = $("#from").val();
            var to = $("#to").val();

            window.location = `/hotel/csv/credit-per-period/${from}/${to}`
        }

        // Support Functions
        const clean_currencies = (value) => formatCurrency( removeUnnecessaryDecimal(value) );
    </script>

@endsection