@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Expenses';
    @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">
                        @can('crear gastos')
                            <a href="javascript:loadContent('{{ route('expenses.create') }}')" class="btn btn-info">
                                <i class="fas fa-plus-circle" style="padding-right: 5px"></i>
                                {{ __('New Expense') }}
                            </a>
                        @endcan

                        <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>
                    </div>
                </div>

                <br>

                <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_expense" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="project_id">{{ __('Project') }}</label>
                            <select class="form-control" name="project_id" id="project_id" onChange="drawTable()">
                                <option value="">
                                    {{ __('-- All projects --') }}
                                </option>
                                @foreach ($projects as $project)
                                    <option value="{{ $project->id }}">
                                        {{ $project->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="currency">{{ __('Currency') }}</label>
                            <select class="form-control" name="currency" id="currency" onChange="drawTable()">
                                <option value="">
                                    {{ __('-- All currencies --') }}
                                </option>
                                <option value="Pesos">
                                    Pesos
                                </option>
                                <option value="Dólares">
                                    Dólares
                                </option>
                                <option value="Euros">
                                    Euros
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="status">{{ __('Status') }}</label>
                            <select class="form-control" name="status" id="status" onChange="drawTable()">
                                <option value="">
                                    {{ __('-- All statuses --') }}
                                </option>
                                <option value="Nuevo">
                                    Nuevo
                                </option>
                                <option value="Parciales">
                                    Parciales
                                </option>
                                <option value="Pagado">
                                    Pagado
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6 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>

                <br>

                <table id="tbl_expenses" class="table table-bordered table-striped">
                    <thead>
                        <tr id="totals-row">
                            <td colspan="11"
                                style="font-weight:bold; text-align: right; border:0; background-color: #f0f0f0">
                                {{ __('Grand Total') }}
                            </td>
                            <td id="datatable-total"
                                style="font-weight:bold; text-align: right; border-left:0; border-top: 0px; border-left:0; border-bottom: 0px; background-color: #f0f0f0">
                                0.00</td>
                        </tr>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Payment Date') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Document Number') }}</th>
                            <th>{{ __('Provider') }}</th>
                            <th>{{ __('Project') }}</th>
                            <th>{{ __('Concept') }}</th>
                            <th>{{ __('Currency') }}</th>
                            <th>{{ __('T. Cam.') }}</th>
                            <th>{{ __('Total') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Actions') }}</td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <!-- Payments Modal -->
    <div class="modal fade" id="paymentsModal" tabindex="-1" role="dialog" aria-labelledby="paymentsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentsModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="paymentsModalProvider"></div>
                    <div id="paymentsModalConcept"></div>
                    <div id="paymentsModalTotal" style="padding-bottom:15px"></div>
                    <div id="paymentsModalTable"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        {{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $("#btn-export-excel").on("click", function() {
            exportReport();
        });

        function drawTable() {

            initializeDataTable(
                "#tbl_expenses",
                "{{ route('expenses.datatables') }}",
                expensesTableColumns,
                [{
                        targets: 0,
                        width: "80px"
                    },
                    {
                        targets: 9,
                        className: "text-right",
                    },
                    {
                        targets: 11,
                        width: "110px",
                    },
                ],
                [
                    [0, "desc"],
                    [1, "desc"],
                ]
            );
        }

        function handleAction(select) {
            const selectedOption = select.value;
            if (selectedOption === 'edit') {
                const url = select.options[select.selectedIndex].getAttribute('data-url');
                loadContent(url);
            } else if (selectedOption === 'delete') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const url = select.options[select.selectedIndex].getAttribute('data-url');
                const isRecurrent = select.options[select.selectedIndex].getAttribute('data-recurrent');
                const confirmText = isRecurrent == 0 ? 'Gasto' : 'Gasto Recurrente';

                deleteRow(url, 'tbl_expenses', [confirmText, id]);
            } else if (selectedOption === 'duplicate') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                duplicate(id);
            } else if (selectedOption === 'pay') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                let baseUrl = "{{ route('expenses.payments.create', ':expense_id') }}";
                let url = baseUrl.replace(':expense_id', id);
                loadContent(url);
            }
            select.value = '';
        }

        function duplicate(id) {
            if (confirm('{{ __('You are about to duplicate Expense ') }}' + id)) {
                $(".overlay").show();
                $.ajax({
                        url: '{{ route('expenses.duplicate', ['id' => '__ID__']) }}'.replace('__ID__', id),
                        type: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                'content')
                        },
                        success: function(response) {

                            addExpenseRow(
                                response.add.expense,
                                response.add.refLink,
                                response.add.actionsMenu
                            );
                        }
                    })
                    .fail(function(xhr) {
                        if (xhr.status === 401 || xhr.status === 419) {
                            window.location.href = "/login";
                        } else {
                            console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                            alert('{{ __('Failed to duplicate expense.') }}');
                        }
                    })
                    .always(function() {
                        $(".overlay").hide();
                    });
            }
        }

        function addExpenseRow(expense, refLink, actionsMenu) {

            const table = $('#tbl_expenses').DataTable();
            table.row.add({
                updated_at_formatted: expense.updated_at_formatted,
                payment_date_formatted: expense.payment_date_formatted,
                type_formatted: expense.type_formatted,
                ref_link: refLink,
                provider_name: expense.provider_name,
                project_name: expense.project_name,
                concept: expense.concept,
                currency: expense.currency,
                exchange_rate: expense.exchange_rate,
                amount_formatted: expense.amount_formatted,
                status: expense.status,
                action: actionsMenu
            }).draw();

            table.order([0, 'desc']).draw(false);
            scrollToTop();
            $(".overlay").hide();
        }

        async function showPayments(expense_id) {
            const url = `{{ route('expenses.payments', ['expense_id' => '__ID__']) }}`.replace('__ID__', expense_id);

            try {
                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 tableData = await response.json();

                    $('#paymentsModalLabel').text(tableData.title);
                    $('#paymentsModalProvider').html(tableData.provider);
                    $('#paymentsModalConcept').html(tableData.concept);
                    $('#paymentsModalTotal').html(tableData.total);
                    $('#paymentsModalTable').html(tableData.table);
                    $('#paymentsModal').modal('show');
                } else {
                    if (response.status === 401 || response.status === 419) {
                        window.location.href = "/login";
                    } else {
                        throw new Error(`HTTP error! Status: ${response.status} - ${response.statusText}`);
                    }
                }
            } catch (error) {
                console.error("Error fetching payments:", error);
            }
        }

        function exportReport() {

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

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

            $.ajax({
                type: 'POST',
                url: '{{ route('expenses.export') }}',
                data: {
                    'startDate': startDate != undefined ? startDate.format("YYYY/MM/DD") : '',
                    'endDate': endDate != undefined ? endDate.format("YYYY/MM/DD") : '',
                    'project_id': $('#project_id').val(),
                    'currency': $('#currency').val(),
                    'status': $('#status').val(),
                    'search_term': $("#tbl_expenses").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);
                }
            });
        }

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

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

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

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

                drawTable();
            }
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            var today = new Date();

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

            $('#project_id').val('');
            $('#currency').val('');
            $('#status').val('');
            $('#date_range_expense').val('');

            drawTable();
        }

        startDate = undefined;
        endDate = undefined;

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