@extends('admin.layouts.adminpanel')

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

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

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-body table-responsive no-padding">

                {{-- Buttons --}}
                <div class="row">
                    <div class="col-lg-12">
                        <div class="float-right d-inline-flex">
                            <div style="width:100%; text-align:right; padding-bottom:10px">
                                <button id="btn-export-excel" class="btn btn-secondary">Excel</button>
                            </div>
                            <div style="width:100%; text-align:right; padding-bottom:10px; padding-left:10px">
                                <button id="btn-print" class="btn btn-secondary"
                                    onclick="printReport()">{{ __('Print') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Filters --}}
                <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_payable" class="form-control" autocomplete="off">
                            </div>

                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="provider_id">{{ __('Provider') }}</label>
                            <select class="form-control" name="provider_id" id="provider_id" onChange="drawTable()">
                                <option value="">{{ __('-- Select provider --') }}</option>
                                @foreach ($providers as $provider)
                                    <option value="{{ $provider->id }}">
                                        {{ $provider->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="payment_status">{{ __('Status') }}</label>
                            <select class="form-control" name="payment_status" id="payment_status" onChange="drawTable()">
                                <option value="">{{ __('-- Select status --') }}</option>
                                <option value="Vencido ">
                                    Vencido
                                </option>
                                <option value="Al corriente">
                                    Al corriente
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <div style="margin-bottom: 1rem;">
                            <button type="button" class="btn btn-light" onclick="clearFilters()">
                                {{ __('Clear filters') }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-3" style="margin-left:20px">
                        <div class="form-group">
                            <div class="custom-control custom-radio" style="margin-right: 2rem;">
                                <input class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="date_range_created" name="date_range_field" value="updated_at"
                                    onChange="drawTable()">
                                <label for="date_range_created" class="custom-control-label"
                                    style="font-weight:normal">Fecha de
                                    alta</label>
                            </div>
                            <div class="custom-control custom-radio" style="margin-right: 2rem;">
                                <input class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                    type="radio" id="date_range_payment" name="date_range_field" value="payment_date"
                                    onChange="drawTable()" checked>
                                <label for="date_range_payment" class="custom-control-label"
                                    style="font-weight:normal">Fecha de
                                    vencimiento</label>
                            </div>
                        </div>
                    </div>
                </div>
                <br>

                {{-- Summary --}}
                <div class="row">
                    <div class="col-md-12 col-lg-6">
                        <div class="card" style="height: 180px;">
                            <div class="card-body">
                                <div class="col-md-12 text-center font-weight-bold"
                                    style="font-size: 1.1rem; padding-bottom: 1rem;">
                                    Resumen General
                                </div>
                                <table class="table table-sm">
                                    <tr>
                                        <td style="font-weight:bold">Total de Cuentas por Pagar</td>
                                        <td class="text-right" id="total_due"></td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight:bold">Total Vencido</td>
                                        <td class="text-right" id="total_past_due"></td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight:bold">Porcentaje de Mora</td>
                                        <td class="text-right" id="total_pct_past_due"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <br>

                {{-- Table --}}
                <table id="tbl_payable_report" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Provider') }}</th>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Concept') }}</th>
                            <th class="text-right">{{ __('Amount') }}</th>
                            <th>{{ __('Due Date') }}</th>
                            <th>{{ __('Days Past Due') }}</th>
                            <th class="text-right">{{ __('Remaining Balance') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <style>
        .totals-table th,
        .totals-table td {
            padding-top: 2px;
            padding-bottom: 2px;
            padding-left: 6px;
            padding-right: 6px;
            line-height: 1.3;
            vertical-align: top;
        }

        .totals-table tr {
            border-bottom: 1px solid #d1d5db;
            /* Light grey border */
        }
    </style>
    <script>
        $("#btn-export-excel").on("click", function() {
            exportReport();
        });

        function drawTable() {

            initializeDataTable(
                "#tbl_payable_report",
                "{{ route('reports.payable') }}",
                payableTableColumns,
                [{
                    targets: [3, 6],
                    className: "text-right",
                }, ],
                [
                    [1, "desc"]
                ]
            );
        }

        $('#date_range_payable').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_payable").focus();
        });

        $('#date_range_payable').on('cancel.daterangepicker', function(ev, picker) {
            startDate = null;
            endDate = null;
            $('#date_range_payable').val('');
        });

        $('#date_range_payable').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_payable').val(
                    startDate.format('YYYY/MM/DD') + ' - ' + endDate.format('YYYY/MM/DD')
                );

                drawTable();
            }
        });

        $('#date_range_payable').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_payable').val(startDate.format('YYYY/MM/DD') + ' - ' + endDate.format(
                    'YYYY/MM/DD'));

                drawTable();
            }
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            $('#date_range_payable').data('daterangepicker').setStartDate(startDate);
            $('#date_range_payable').data('daterangepicker').setEndDate(endDate);

            $('#date_range_payable').val('');
            $('#provider_id').val('');
            $('#payment_status').val('');

            drawTable();
        }

        function exportReport() {

            $(".overlay").show();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('reports.payable.export') }}',
                data: {
                    'startDate': startDate != undefined ? startDate.format("YYYY/MM/DD") : '',
                    'endDate': endDate != undefined ? endDate.format("YYYY/MM/DD") : '',
                    'date_range_field': $('input[name="date_range_field"]:checked').val(),
                    'provider_id': $("#provider_id").val(),
                    'payment_status': $('#payment_status').val(),
                    'search_term': $("#tbl_payable_report").DataTable().search()
                },
                dataType: 'json',
            }).done(function(response) {
                var filename = response.filename;
                var link = document.createElement('a');

                link.download = response.filename;
                link.href = 'admin/exports/download/' + response.filename;

                document.body.appendChild(link);
                link.click();

                document.body.removeChild(link);

                $(".overlay").hide();

            }).fail(function(xhr) {
                if (xhr.status === 401 || xhr.status === 419) {
                    window.location.href = '/login';
                } else {
                    console.log(xhr.statusText);
                }
            });
        }

        function printReport() {
            let table = $('#tbl_payable_report').DataTable();
            table.button('.buttons-print').trigger();
        }

        @if (!empty($end_date))
            startDate = moment().startOf('year');
            endDate = moment(@json($end_date), 'YYYY-MM-DD');
            $('#date_range_payable').data('daterangepicker').setEndDate(endDate);
        @else
            endDate = undefined;
            startDate = undefined;
        @endif

        if (endDate) {
            $('#date_range_payable').data('daterangepicker').setStartDate(startDate);
            $('#date_range_payable').data('daterangepicker').setEndDate(endDate);
        } else {
            $('#date_range_payable').val('');
        }
    </script>
@endsection