@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Account Balances';
    @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="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>
                <div class="row">
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="until_date">{{ __('Until Date') }}</label>
                            <div class="input-group date" id="calendar" data-target-input="nearest">
                                <div class="input-group-prepend" data-target="#calendar" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                                <input id="until_date" name="until_date" type="text"
                                    class="form-control datetimepicker-input" data-target="#calendar">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="company">{{ __('Client') }}</label>
                            <select class="form-control" name="company" id="company" onChange="drawTable()">
                                <option value="">{{ __('-- Select company --') }}</option>
                                @foreach ($companies as $company)
                                    <option value="{{ $company->value }}">
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="type">{{ __('Type') }}</label>
                            <select class="form-control type" name="type" id="type" onChange="drawTable()">
                                <option value="">{{ __('-- Select type --') }}</option>
                                <option value="Depósito">
                                    Depósito
                                </option>
                                <option value="Retiro">
                                    Retiro
                                </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-12">
                        <label for="">{{ __('Accounts') }}</label>
                        <div class="form-group d-flex flex-wrap align-items-center gap-2">
                            @foreach ($accounts as $account)
                                <div class="custom-control custom-checkbox mr-3">
                                    <input
                                        class="custom-control-input custom-control-input-danger custom-control-input-outline"
                                        type="checkbox" id="check_{{ $account->id }}" name="account_ids[]"
                                        value="{{ $account->id }}" checked>
                                    <label for="check_{{ $account->id }}" class="custom-control-label"
                                        style="font-weight:normal;">
                                        {{ $account->name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Summary --}}
                <div class="row">
                    <div class="col-md-12 col-lg-6">
                        <div class="card" style="height: 185px;">
                            <div class="card-body">
                                <div class="col-md-12 text-center font-weight-bold"
                                    style="font-size: 1.1rem; padding-bottom: 1rem;">
                                    Resumen Saldos
                                </div>
                                <table class="table table-sm">
                                    <tr>
                                        <th>{{ __('Deposits') }}</th>
                                        <td class="text-right" id="total_deposits"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Withdrawals') }}</th>
                                        <td class="text-right" id="total_withdrawals"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Balance') }}</th>
                                        <td class="text-right" id="total_balance"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <br>
                <table id="tbl_balances_report" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Client / Provider') }}</th>
                            <th>{{ __('Concept') }}</th>
                            <th>{{ __('Document Number') }}</th>
                            <th>{{ __('Account') }}</th>
                            <th class="text-right">{{ __('Deposit') }}</th>
                            <th class="text-right">{{ __('Withdrawal') }}</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>
        var today = new Date();

        var day = String(today.getDate()).padStart(2, '0');
        var month = String(today.getMonth() + 1).padStart(2, '0');
        var year = today.getFullYear();
        var today_formatted = `${day}/${month}/${year}`;

        $('#until_date').on('focus', function() {
            $('#calendar').datetimepicker('show');
        });

        $('#calendar').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'es',
        });

        $('#calendar').on('change.datetimepicker', function(e) {
            drawTable();
        });

        $('input[name="account_ids[]"]').on('change', function() {
            drawTable();
        });

        $("#btn-export-excel").on("click", function() {
            exportReport();
        });

        function drawTable() {

            initializeDataTable(
                "#tbl_balances_report",
                "{{ route('reports.balances.datatables') }}",
                balancesTableColumns,
                [{
                    targets: [5, 6],
                    className: "text-right",
                }, ],
                [
                    [0, "desc"]
                ]
            );
        }

        function clearFilters() {

            $('#until_date').val(today_formatted);
            $('#company').val('');
            $('#type').val('');
            $("input[name='account_ids[]']").prop("checked", true);

            drawTable();
        }

        function exportReport() {

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

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

            if ($("input[name='account_ids[]']").length) {
                var selectedAccountIds = $(
                        "input[name='account_ids[]']:checked"
                    )
                    .map(function() {
                        return this.value;
                    })
                    .get();
            }

            $.ajax({
                type: 'POST',
                url: '{{ route('reports.balances.export') }}',
                data: {
                    'until_date': $("#until_date").val(),
                    'type': $("#type").val(),
                    'account_ids': selectedAccountIds,
                    'company': $('#company').val(),
                    'search_term': $("#tbl_balances_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_balances_report').DataTable();
            table.button('.buttons-print').trigger();
        }

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