@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Invoices';
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-body table-responsive no-padding">
                <div class="alert alert-success fade show" role="alert" style="display:none">
                </div>
                <div class="alert alert-danger fade show" role="alert" style="display:none">
                </div>
                <div class="row">
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label><strong>{{ __('Date Range') }}</strong></label>
                            <div class="form-group input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
                                </div>
                                <input type="text" id="date_range_revenue" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <button type="button" class="btn btn-outline-secondary btn-sm"
                            style="height: calc(2.25rem + 2px); margin-top: 2rem; margin-bottom: 1rem; float: right;"
                            onclick="clearFilters()">
                            {{ __('Clear filters') }}
                        </button>
                    </div>
                </div>
                <table id="tbl_payment_invoices" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Package') }}</th>
                            <th>{{ __('Amount') }}</th>
                            <th>{{ __('Tax') }}</th>
                            <th>{{ __('Total') }}</th>
                            <th>{{ __('Invoice') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>{{ __('Totals') }}</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="generate-invoice-form" method="post" action="{{ route('payment.invoices.update') }}">
                    <input type="hidden" id="invoiceId" name="id" value="" />
                    <input type="hidden" id="rowIndex" name="row" value="" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="errorModalLabel">Error</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="errorModalText">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Cerrar</button>
                        <button type="button" onclick="generatePaymentInvoice()" class="btn btn-primary" id="continue-btn"
                            data-dismiss="modal">
                            {{ __('Try again') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        function drawTable() {

            initializeDataTable(
                "#tbl_payment_invoices",
                "admin/payment-invoices/datatables",
                paymentInvoiceTableColumns,
                null,
                [
                    [0, "desc"]
                ]
            );
        }

        async function showErrorMessage(id, ind) {

            const url = `{{ route('sales-documents.error', [':type', ':id']) }}`
                .replace(':type', 'invoices')
                .replace(':id', id);
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
            });

            if (response.ok) {
                const data = await response.json();

                $('#generate-invoice-form #invoiceId').val(id);
                $('#generate-invoice-form #rowIndex').val(ind);
                $('#errorModalText').text(data.errorMsg);
                $('#errorModal').modal('show');
            } else {
                console.log(response);
            }
        }

        function generatePaymentInvoice() {
            $(".overlay").show();
            $('#generate-invoice-form').submit();
        }

        $('#date_range_revenue').daterangepicker({
            locale: {
                autoUpdateInput: false,
                format: 'YYYY/MM/DD',
                applyLabel: "Aplicar",
                cancelLabel: "Cancelar",
                fromLabel: "De",
                toLabel: "A",
                customRangeLabel: "Personalizado",
                daysOfWeek: [
                    "Do",
                    "Lu",
                    "Ma",
                    "Mi",
                    "Ju",
                    "Vi",
                    "Sa"
                ],
                monthNames: [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Septiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre"
                ],
                firstDay: 1
            }
        }, function(start, end, label) {});

        $(".input-group-text i.far.fa-calendar").on("click", function() {
            $("#date_range_revenue").focus();
        });

        $('#date_range_revenue').on('cancel.daterangepicker', function(ev, picker) {
            if (!startDate && !endDate) {
                $('#date_range_revenue').val('');
            }
        });

        $('#date_range_revenue').on('hide.daterangepicker', function() {
            if (!startDate && !endDate) {
                $('#date_range_revenue').val('');
            }
        });

        $('#date_range_revenue').on('apply.daterangepicker', function(ev, picker) {

            if (picker.startDate && picker.endDate) {
                startDate = moment(picker.startDate, 'YYYY/MM/DD');
                endDate = moment(picker.endDate, 'YYYY/MM/DD');

                $('#date_range_revenue').val(startDate.format('YYYY/MM/DD') + ' - ' + endDate.format(
                    'YYYY/MM/DD'));

                drawTable();
            }
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            var today = new Date();

            $('#date_range_revenue').data('daterangepicker').setStartDate(today);
            $('#date_range_revenue').data('daterangepicker').setEndDate(today);

            $('#date_range_revenue').val('');

            drawTable();
        }

        startDate = undefined;
        endDate = undefined;

        $('#date_range_revenue').val('');
    </script>
@endsection