@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $doc_type = $type == 'invoices' ? 'Invoice' : 'Credit Note';
        $page_title = $type == 'invoices' ? 'Invoices' : 'Credit Notes';
    @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" style="display:none"></div>
                <div class="alert alert-danger" style="{{ session('message') ? '' : 'display:none;' }}">
                    @if ($message = session()->pull('message'))
                        {!! $message !!}
                    @endif
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        @can('crear facturas')
                            <a href="javascript:loadContent('{{ route('sales-documents.create', ['type' => $type]) }}')"
                                class="btn btn-info">
                                <i class="fas fa-plus-circle" style="padding-right: 5px"></i>
                                {{ __('New ' . $doc_type) }}
                            </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_invoice" class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="subclient_id">{{ __('Client') }}</label>
                            <select class="form-control" name="subclient_id" id="subclient_id" onChange="drawTable()">
                                <option value="">
                                    {{ __('-- All clients --') }}
                                </option>
                                @foreach ($subclients as $subclient)
                                    <option value="{{ $subclient->id }}">
                                        {{ $subclient->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-3">
                        <div class="form-group">
                            <label for="subclient_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="Borrador">
                                    Borrador
                                </option>
                                <option value="Facturada">
                                    Facturada
                                </option>
                                <option value="Enviada">
                                    Enviada
                                </option>
                                <option value="Cancelada">
                                    Cancelada
                                </option>
                                @if ($type == 'invoices')
                                    <option value="Parciales">
                                        Parciales
                                    </option>
                                    <option value="Pagada">
                                        Pagada
                                    </option>
                                @endif
                            </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" id="saveFilters">
                                {{ __('Save filters') }}
                            </button>
                            <button type="button" class="btn btn-light" style="margin-left: 10px;"
                                onclick="clearFilters()">
                                {{ __('Clear filters') }}
                            </button>
                        </div>
                    </div>

                </div>

                <br>

                <table id="tbl_invoices" 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>{{ __('Generated Date') }}</th>
                            <th>{{ __('Payment Date') }}</th>
                            <th>No.</th>
                            <th>{{ __('Reference') }}</th>
                            <th>{{ __('Client') }}</th>
                            <th>{{ __('Project') }}</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>
    <!-- Mail Modal -->
    <div class="modal fade modal-class" id="mailModal" tabindex="-1" role="dialog" aria-labelledby="mailModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mailModalLabel">{{ __('Send by mail') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="invoice-mail-form" method="post"
                        action="{{ route('sales-documents.mail', ['type' => 'invoices']) }}"
                        enctype="multipart/form-data">
                        <input type="hidden" id="mail_uid" name="mail_uid">
                        <div class="form-group row">
                            <label for="mail_from" class="col-md-2 col-form-label">{{ __('From') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-from" id="mail_from" name="mail_from">
                                <span id="mail_from-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_to" class="col-md-2 col-form-label">{{ __('To') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-to" id="mail_to" name="mail_to">
                                <span id="mail_to-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_cc" class="col-md-2 col-form-label">{{ __('Cc') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-cc" id="mail_cc" name="mail_cc">
                                <span id="mail_cc-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_subject" class="col-md-2 col-form-label">{{ __('Subject') }}</label>
                            <div class="col-md-10">
                                <input class="form-control mail-subject" id="mail_subject" name="mail_subject">
                                <span id="mail_subject-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_body" class="col-md-2 col-form-label">{{ __('Message') }}</label>
                            <div class="col-md-10">
                                <textarea class="form-control mail-body" id="mail_body" name="mail_body" rows="10"></textarea>
                                <span id="mail_body-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mail_attachment" class="col-md-2 col-form-label">{{ __('Attachment') }}</label>
                            <div class="col-md-10">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="mail_attachment"
                                        name="mail_attachment">
                                    <label class="custom-file-label"
                                        for="mail_attachment">{{ __('Choose file') }}</label>
                                </div>
                                <span id="mail_attachment-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-info" onclick="sendByMail()">
                        {{ __('Send') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Whatsapp Modal -->
    <div class="modal fade modal-class" id="whatsappModal" tabindex="-1" role="dialog"
        aria-labelledby="whatsappModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="whatsappModalLabel">{{ __('Send by Whatsapp') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="whatsapp_id" name="whatsapp_id" value="" />
                    <input type="hidden" id="whatsapp_uid" name="whatsapp_uid" value="" />
                    <input type="hidden" id="whatsapp_serie_folio" name="whatsapp_serie_folio" value="" />
                    <input type="hidden" id="whatsapp_company" name="whatsapp_company" value="" />
                    <div class="form-group row">
                        <label for="whatsapp_phone" class="col-md-2 col-form-label">{{ __('Phone number') }}</label>
                        <div class="col-md-10">
                            <input class="form-control whatsapp-phone" id="whatsapp_phone" name="whatsapp_phone">
                            <span id="whatsapp_phone-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div>
                        El mensaje se enviará al número del contacto de la factura. Si deseas puedes enviarlo a cualquier
                        otro número de celular.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-info" onclick="sendByWhatsapp()">
                        {{ __('Send') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Error 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="" />
                    <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">
                            {{ __('Close') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Cancel Modal -->
    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="cancel-invoice-form" method="post"
                    action="{{ route('sales-documents.cancel', ['type' => 'invoices']) }}">
                    <input type="hidden" id="id" name="id" value="" />
                    <input type="hidden" id="rowIndex" name="row" value="" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="cancelModalLabel">{{ __('Cancel Invoice') }}</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="cancelModalText"></div>
                        <div class="form-group row" id="cancelMotive" style="display:none">
                            <label for="motive_code" class="col-md-2 col-form-label">
                                {{ __('Motive for cancelling') }}</label>
                            <div class="col-md-10">
                                <select class="form-control motive-code" id="motive_code" name="motive_code"
                                    onchange="validateCancelForm()">
                                    <option value="">{{ __('-- Select motive --') }}</option>
                                    <option value="01">Comprobante emitido con errores con relación.</option>
                                    <option value="02">Comprobante emitido con errores sin relación.</option>
                                    <option value="03">No se llevó a cabo la operación.</option>
                                    <option value="04">Operación nominativa relacionada en la factura global.</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row" id="cancelMotiveUID" style="display:none">
                            <label for="substitute_uid" class="col-md-2 col-form-label">{{ __('Invoice UID') }}</label>
                            <div class="col-md-10">
                                <input class="form-control substitute-uid" id="substitute_uid" name="substitute_uid">
                            </div>
                            <span id="substitute_uid-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>

                    <div class="modal-footer" id="confirmCancel">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            {{ __('Close') }}</button>
                        <button type="button" class="btn btn-info" onclick="showMotive()">
                            {{ __('Continue') }}</button>
                    </div>
                    <div class="modal-footer" id="submitCancel" style="display:none">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            {{ __('Close') }}</button>
                        <button type="button" class="btn btn-info" id="cancelInvoiceButton" disabled
                            onclick="cancel()">
                            {{ __('Cancel Invoice') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Payment Date Modal -->
    <div class="modal fade" id="paymentDateModal" tabindex="-1" role="dialog" aria-labelledby="paymentDateModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="payment-date-form" method="post"
                    action="{{ route('invoices.payment-date', ['type' => 'invoices']) }}">
                    <input type="hidden" id="id" name="id" value="" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="paymentDateModalLabel"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label for="payment_date">Fecha de pago</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="payment_date" name="payment_date" type="text"
                                class="form-control datetimepicker-input" data-target="#calendar" value="">
                        </div>
                        <span id="payment_date-error" class="invalid-feedback" style="font-weight:bold"
                            role="alert"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            {{ __('Close') }}</button>
                        <button type="submit" class="btn btn-info">
                            {{ __('Update') }}</button>

                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Attach file Modal -->
    <div class="modal fade" id="attachFileModal" tabindex="-1" role="dialog" aria-labelledby="attachFileModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="attach-file-form" method="post"
                    action="{{ route('sales-documents.attach-file', ['type' => 'invoices']) }}"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="id" name="id" value="" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="attachFileModalLabel">{{ __('Attach File') }}</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 class="form-group" id="fileDownload">
                        </div>
                        <div class="form-group">
                            {{ __('Attach file') }}:<br>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="document" name="document">
                                <label class="custom-file-label" for="document">{{ __('Choose file') }}</label>
                            </div>
                            <span id="document-error" class="invalid-feedback font-weight-bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            {{ __('Close') }}</button>
                        <button type="button" class="btn btn-info" id="attachFileButton" onclick="attachFile()"
                            disabled>
                            {{ __('Attach') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        var filters = @json($filters);

        @if ($success = session()->pull('success'))
            if (generateInvoice) {
                showStatus(true, "{{ $success }}");
                generateInvoice = 0;
                $(".overlay").hide();
            }
        @endif

        if (filters.subclient_id) {
            $('#subclient_id').val(filters.subclient_id);
            $('#subclient_id').trigger('change');
        }

        if (filters.project_id) {
            $('#project_id').val(filters.project_id);
            $('#project_id').trigger('change');
        }

        if (filters.currency) {
            $('#currency').val(filters.currency);
            $('#currency').trigger('change');
        }

        if (filters.status) {
            $('#status').val(filters.status);
            $('#status').trigger('change');
        }

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

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

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

        $('#mail_attachment').on('change', function() {
            const fileName = this.files.length ? this.files[0].name : '{{ __('Choose file') }}';
            $(this).next('.custom-file-label').text(fileName);

            const hasFile = $(this).get(0).files.length > 0;
            $('#attachFileButton').prop('disabled', !hasFile);
        });

        $('#document').on('change', function() {
            const fileName = this.files.length ? this.files[0].name : '{{ __('Choose file') }}';
            $(this).next('.custom-file-label').text(fileName);

            const hasFile = $(this).get(0).files.length > 0;
            $('#attachFileButton').prop('disabled', !hasFile);
        });

        function drawTable() {
            initializeDataTable(
                "#tbl_invoices",
                "{{ route('sales-documents.datatables', ['type' => $type]) }}",
                invoicesTableColumns,
                [{
                        targets: 0,
                        width: "80px"
                    },
                    {
                        targets: 9,
                        className: "text-right",
                    },
                    {
                        targets: 11,
                        width: "110px",
                    },
                ],
                [
                    [0, "desc"]
                ]
            );
        }

        function showMotive() {
            $("#confirmCancel").hide();
            $("#cancelMotive").show();
            $("#submitCancel").show();
        }

        function validateCancelForm() {
            let motiveCode = $('#motive_code').val();
            if (motiveCode == '01') {
                $('#cancelMotiveUID').show();
            } else {
                $('#cancelMotiveUID').hide();
            }
            $('#cancelInvoiceButton').prop('disabled', motiveCode == '');
        }

        function duplicate(id, invoiceId) {
            if (confirm(
                    `{{ __('You are about to duplicate') }} {{ $type === 'invoices' ? __('Invoice') : __('Credit Note') }} ${invoiceId}`
                )) {

                $(".overlay").show();
                $.ajax({
                        url: '{{ route('sales-documents.duplicate', ['type' => ':type', 'id' => '__ID__']) }}'
                            .replace(':type', 'invoices')
                            .replace('__ID__', id),
                        success: function(response) {
                            if (response.success === false) {
                                showStatus(false, response.status);
                                return;
                            }
                            addInvoiceRow(
                                response.add.invoice,
                                response.add.refLink,
                                response.add.actionsMenu
                            );
                        }
                    })
                    .fail(function(xhr) {
                        console.log(xhr);
                        if (xhr.status === 401 || xhr.status === 419) {
                            window.location.href = "/login";
                        } else {
                            console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                            alert('{{ __('Failed to duplicate invoice.') }}');
                        }
                    })
                    .always(function() {
                        $(".overlay").hide();
                    });
            }
        }

        function handleAction(select, invoiceId) {
            const selectedOption = select.value;

            if (selectedOption === 'edit') {
                const url = select.options[select.selectedIndex].getAttribute('data-url');
                loadContent(url);
            } else if (selectedOption === 'delete') {
                const url = select.options[select.selectedIndex].getAttribute('data-url');
                const serie_folio = select.options[select.selectedIndex].getAttribute('data-serie_folio');
                deleteRow(url, 'tbl_invoices', ['Factura', serie_folio]);
            } else if (selectedOption === 'sendByMail') {
                const invoice = {
                    uid: select.options[select.selectedIndex].getAttribute('data-uid'),
                    name: select.options[select.selectedIndex].getAttribute('data-name'),
                    contact: select.options[select.selectedIndex].getAttribute('data-contact'),
                    email: select.options[select.selectedIndex].getAttribute('data-email'),
                    serie_folio: select.options[select.selectedIndex].getAttribute('data-serie_folio'),
                    date: select.options[select.selectedIndex].getAttribute('data-date'),
                    amount: select.options[select.selectedIndex].getAttribute('data-amount'),
                    company: select.options[select.selectedIndex].getAttribute('data-company')
                };
                openMailModal(invoice);
            } else if (selectedOption === 'sendByWhatsapp') {
                const invoice = {
                    id: select.options[select.selectedIndex].getAttribute('data-id'),
                    uid: select.options[select.selectedIndex].getAttribute('data-uid'),
                    phone: select.options[select.selectedIndex].getAttribute('data-phone'),
                    serie_folio: select.options[select.selectedIndex].getAttribute('data-serie_folio'),
                    company: select.options[select.selectedIndex].getAttribute('data-company')
                };
                openWhatsappModal(invoice);
            } else if (selectedOption === 'preview') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const draft = select.options[select.selectedIndex].getAttribute('data-draft');
                if (draft === 'false' || draft === '0' || draft === null) {
                    if (!confirm('{{ __('You are about to generate a draft. Do you want to continue?') }}')) {
                        return;
                    }
                }

                $(".overlay").show();
                isInvoiceDraft = 1;
                generate(id, null, null, 1, '{{ $type }}');
            } else if (selectedOption === 'duplicate') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const invoiceId = select.options[select.selectedIndex].getAttribute('data-number');
                duplicate(id, invoiceId);
            } else if (selectedOption === 'attachFile') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const serieFolio = select.options[select.selectedIndex].getAttribute('data-number');
                openAttachFileModal(id, serieFolio);
            } else if (selectedOption === 'viewFile') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const serieFolio = select.options[select.selectedIndex].getAttribute('data-number');
                viewFile(id, serieFolio);
            } else if (selectedOption === 'generate') {
                isInvoiceDraft = 0;
                const invoiceId = select.options[select.selectedIndex].getAttribute('data-id');
                handleInvoiceAction(invoiceId, '{{ $type }}');
            } else if (selectedOption === 'download') {
                const uid = select.options[select.selectedIndex].getAttribute('data-uid');
                downloadFiles(uid);
            } else if (selectedOption === 'downloadAcuse') {
                const uid = select.options[select.selectedIndex].getAttribute('data-uid');
                downloadAcuse(uid);
            } else if (selectedOption === 'cancel') {
                const invoice = {
                    id: select.options[select.selectedIndex].getAttribute('data-id'),
                    razon: select.options[select.selectedIndex].getAttribute('data-razon'),
                    serie_folio: select.options[select.selectedIndex].getAttribute('data-serie_folio'),
                    amount: select.options[select.selectedIndex].getAttribute('data-amount'),
                };
                openCancelModal(invoice);
            } else if (selectedOption === 'pay') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                let baseUrl = "{{ route('invoices.payments.create', ':invoice_id') }}";
                let url = baseUrl.replace(':invoice_id', id);
                loadContent(url);
            } else if (selectedOption === 'paymentDate') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const serieFolio = select.options[select.selectedIndex].getAttribute('data-serie_folio');
                const paymentDate = select.options[select.selectedIndex].getAttribute('data-date');
                openPaymentDateModal(id, serieFolio, paymentDate);
            }
            select.value = '';
        }

        function openMailModal(invoice) {
            $('.invalid-feedback').text('').css('display', 'none');

            $('#mail_uid').val(invoice.uid);
            $('#mail_from').val(invoice.name);
            $('#mail_to').val(invoice.email);
            $('#mail_cc').val('');
            $('#mail_subject').val(invoice.company + ' te ha enviado un CFDI número: ' + invoice.serie_folio);
            $('#mail_body').val('Envío de CFDI\n\nPara: ' + invoice.contact + '\nSerie y Folio: ' + invoice
                .serie_folio +
                '\nFecha de Emisión: ' + invoice.date + '\nMonto Total: ' + invoice.amount +
                '\n\nConsulte los archivos adjuntos\nFavor de confirmar de recibido');
            $('#mail_attachment').val('');
            $('.custom-file-label[for="mail_attachment"]').text('{{ __('Choose file') }}');
            $('#mailModal').modal('show');
        }

        function openWhatsappModal(invoice) {
            $('.invalid-feedback').text('').css('display', 'none');
            $('#whatsapp_id').val(invoice.id);
            $('#whatsapp_uid').val(invoice.uid);
            $('#whatsapp_phone').val(invoice.phone);
            $('#whatsapp_serie_folio').val(invoice.serie_folio);
            $('#whatsapp_company').val(invoice.company);
            $('#whatsappModal').modal('show');
        }

        function openCancelModal(invoice) {
            let documentType = "{{ $type === 'invoices' ? 'factura' : 'nota de credito' }}";
            let message =
                'Estas a punto de cancelar la ' + documentType + ' No. ' + invoice.serie_folio +
                ' expedida a: ' + invoice.razon + ' por la cantidad de: ' + invoice.amount +
                '. Esta operación no puede revertirse.';

            $('#cancelModalText').text(message);
            $('#cancelModal #id').val(invoice.id);
            $('#cancelModal #substitute_uid').val('');
            $('#cancelModal #motive_code').val('');
            $('#cancelInvoiceButton').prop('disabled', true);

            $("#confirmCancel").show();
            $("#cancelMotive").hide();
            $('#cancelMotiveUID').hide();
            $("#submitCancel").hide();
            $('#cancelModal').modal('show');
        }

        function openAttachFileModal(id, serieFolio, link = null) {
            $('.invalid-feedback').text('').css('display', 'none');
            $('#attachFileModalLabel').text('{{ __('Archivo') }} - {{ __('Invoice') }} No. ' + serieFolio);
            $('#attachFileModal #id').val(id);
            $('#attachFileModal #document').val('');
            $('#attachFileModal .custom-file-label').text('');
            $('#attachFileButton').prop('disabled', true);
            if (link != null) {
                $('#fileDownload').html(link).show();
            } else {
                $('#fileDownload').hide();
            }
            $('#attachFileModal').modal('show');
        }

        function openPaymentDateModal(id, serieFolio, paymentDate) {
            $('.invalid-feedback').text('').css('display', 'none');
            $('#paymentDateModalLabel').text('{{ __('Invoice') }} No. ' + serieFolio);
            $('#paymentDateModal #id').val(id);
            $('#paymentDateModal #payment_date').val(paymentDate);
            $('#paymentDateModal').modal('show');
        }

        function sendByMail() {
            $('.invalid-feedback').text('').css('display', 'none');

            let isValid = true;

            const mail_from = $('#mail_from').val().trim();
            if (!mail_from) {
                isValid = false;
                $('#mail_from-error').text('{{ __('From is required.') }}').css('display',
                    'block');
            }

            const mail_to = $('#mail_to').val().trim();
            if (!mail_to) {
                isValid = false;
                $('#mail_to-error')
                    .text('{{ __('To is required.') }}')
                    .css('display', 'block');
            } else {
                // Split by comma and trim spaces
                const emails = mail_to.split(',').map(e => e.trim()).filter(e => e !== '');

                // Check each email
                let allValid = true;
                emails.forEach(email => {
                    if (!validateEmail(email)) {
                        allValid = false;
                    }
                });

                if (!allValid) {
                    isValid = false;
                    $('#mail_to-error')
                        .text('{{ __('Invalid format for To field.') }}')
                        .css('display', 'block');
                }
            }

            const mail_subject = $('#mail_subject').val().trim();
            if (!mail_subject) {
                isValid = false;
                $('#mail_subject-error').text('{{ __('Subject is required.') }}').css('display',
                    'block');
            }

            const fileInput = document.getElementById('mail_attachment');
            const file = fileInput.files[0];

            if (file) {
                const maxSize = 10 * 1024 * 1024; // 10MB

                if (file.size > maxSize) {
                    isValid = false;
                    $('#mail_attachment-error').text('{{ __('File is too large. Max 10MB.') }}').css('display', 'block');
                }
            }

            if (isValid) {
                $('#mailModal').modal('hide');
                $(".overlay").show();
                $('#invoice-mail-form').submit();
            }
        }

        function sendByWhatsapp() {
            $('.invalid-feedback').text('').css('display', 'none');

            let isValid = true;

            let phone = $('#whatsapp_phone').val().trim();
            let invoice_id = $('#whatsapp_id').val();
            let invoice_uid = $('#whatsapp_uid').val();
            let company = $('#whatsapp_company').val();
            let serie_folio = $('#whatsapp_serie_folio').val();

            if (!phone) {
                isValid = false;
                $('#whatsapp_phone-error').text('{{ __('Phone is required.') }}').css('display',
                    'block');
            }

            if (isValid) {

                phone = phone.replace(/[-() ]/g, '');

                let message =
                    company + " te está enviando una factura con No: " + serie_folio +
                    ". Para descargar los archivos haz click en la siguiente liga: ";
                let baseUrl = "{{ route('download-invoice', ':invoice_uid') }}";
                let urlWithId = baseUrl.replace(':invoice_uid', invoice_uid);
                let encodedMessage = encodeURIComponent(message + urlWithId);
                let whatsappUrl = "https://wa.me/" + phone + "?text=" + encodedMessage;

                $('#whatsappModal').modal('hide');

                window.open(whatsappUrl, '_blank');

                updateRowStatus(invoice_id, 'Enviada');
            }
        }

        function addInvoiceRow(invoice, refLink, actionsMenu) {
            const table = $('#tbl_invoices').DataTable();
            table.row.add({
                updated_at_formatted: invoice.updated_at_formatted,
                invoice_date_formatted: invoice.invoice_date_formatted,
                payment_date_formatted: invoice.payment_date_formatted,
                serie_folio_formatted: '',
                ref_link: refLink,
                subclient_name: invoice.subclient_name,
                project_name: invoice.project_name,
                moneda: invoice.moneda,
                tipo_cambio: invoice.tipo_cambio,
                total_formatted: invoice.total_formatted,
                status: invoice.status,
                action: actionsMenu
            }).draw();

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

        function updateTableRow(invoice) {
            var table = $('#tbl_invoices').DataTable();
            var row = table.row(`#${invoice.id}`);
            if (row.node()) {
                if (invoice.updated_at_formatted) {
                    $(row.node()).find('td').eq(0).html(invoice.updated_at_formatted);
                }
                if (invoice.payment_date_formatted) {
                    $(row.node()).find('td').eq(1).html(invoice.payment_date_formatted);
                }
                if (invoice.invoice_date_formatted) {
                    $(row.node()).find('td').eq(1).html(invoice.invoice_date_formatted);
                }
                if (invoice.serie_folio_formatted) {
                    $(row.node()).find('td').eq(3).html(invoice.serie_folio_formatted);
                }
                if (invoice.status) {
                    const columns = $(row.node()).find('td');
                    const index = columns.length - 2;

                    $(row.node()).find('td').eq(index).html(invoice.status);
                }
                if (invoice.actionsMenu) {
                    $(row.node()).find('td:last-child').html(invoice.actionsMenu);
                }
            }
        }

        function updateRowStatus(id, status) {
            if (status != null) {
                const url = `{{ route('sales-documents.update-status', ['type' => $type, 'id' => ':id']) }}`
                    .replace(':id', id);

                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        id: id,
                        status: status,
                        _token: $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function(response) {
                        const table = $("#tbl_invoices").DataTable();
                        var row = table.row(`#${id}`);
                        $(row.node()).find("td").eq(10).html(response.status);
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        alert(errorMessage);
                    },
                }).fail(function(xhr) {
                    if (xhr.status === 401 || xhr.status === 419) {
                        window.location.href = "/login";
                    } else {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        alert(errorMessage);
                    }
                });
            }
        }

        function downloadFiles(uid) {
            downloadInvoice(uid, 'pdf');
            downloadInvoice(uid, 'xml');
        }

        function downloadAcuse(uid) {
            $(".overlay").show();

            $.ajax({
                url: `invoices/acuse/download/${uid}`,
                method: "GET",
                xhrFields: {
                    responseType: "blob",
                },
                headers: {
                    "Content-Type": "application/json",
                },
                success: function(response, status, xhr) {
                    const contentType = xhr.getResponseHeader("Content-Type");
                    const contentDisposition = xhr.getResponseHeader(
                        "Content-Disposition"
                    );

                    // Extract the filename from the Content-Disposition header
                    const matches =
                        contentDisposition &&
                        contentDisposition.match(/filename="([^"]+)"/);
                    let fileName =
                        matches && matches[1] ? matches[1] : "default-filename.ext";
                    if (
                        contentDisposition &&
                        contentDisposition.indexOf("filename=") !== -1
                    ) {
                        const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(
                            contentDisposition
                        );
                        if (matches != null && matches[1]) {
                            fileName = matches[1].replace(/['"]/g, ""); // Remove quotes
                        }
                    }

                    const url = window.URL.createObjectURL(response);
                    const a = document.createElement("a");
                    a.href = url;
                    a.download = fileName;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // console.error("AJAX Error:", textStatus, errorThrown);
                    // console.error("Response Text:", jqXHR.responseText);
                    showStatus(false, jqXHR.responseText);
                },
            }).always(function() {
                $(".overlay").hide();
            });
        }

        function cancel() {
            $('#cancel-invoice-form').submit();
            $('#cancelModal').modal('hide');
        }

        async function showErrorMessage(id) {

            const url = `{{ route('sales-documents.error', ['type' => 'invoices', 'id' => ':id']) }}`
                .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);
                $('#errorModalText').text(data.errorMsg);
                $('#errorModal').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}`);
                }
            }
        }

        function attachFile() {
            const hasExistingFile = $("#fileDownload").is(":visible");

            if (hasExistingFile) {
                const confirmReplace = confirm('{{ __('Are you sure you want to replace the existing file?') }}');

                if (!confirmReplace) {
                    return;
                }
            }

            $("#attach-file-form").submit();
        }

        async function viewFile(id, serieFolio) {
            const url = `{{ route('sales-documents.get-file', ['type' => 'invoices', 'id' => '__ID__']) }}`
                .replace(
                    '__ID__', 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 fileInfo = await response.json();

                    openAttachFileModal(id, serieFolio, fileInfo.link);
                } 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 file information:", error);
            }
        }

        async function deleteFile(id) {
            if (confirm('{{ __('Are you sure you want to delete this file?') }}')) {
                const url =
                    `{{ route('sales-documents.delete-file', ['type' => 'invoices', 'id' => '__ID__']) }}`
                    .replace('__ID__', id);

                try {
                    const response = await fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    const data = await response.json();

                    if (data.success) {
                        updateTableRow(data.updatedModel);
                        $('#fileDownload').html('').hide();
                    } else {
                        if (response.status === 401 || response.status === 419) {
                            window.location.href = "/login";
                        } else {
                            throw new Error(`Server responded with success: false`);
                        }
                    }
                } catch (error) {
                    console.error("Error deleting file:", error);
                }
            }
        }

        async function showPayments(invoice_id) {
            const url = `{{ route('invoices.payments', ['invoice_id' => '__ID__']) }}`.replace('__ID__',
                invoice_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);
                    $('#paymentsModalClient').html(tableData.client);
                    $('#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('sales-documents.export', ['type' => $type]) }}",
                data: {
                    'startDate': startDate != undefined ? startDate.format("YYYY/MM/DD") : '',
                    'endDate': endDate != undefined ? endDate.format("YYYY/MM/DD") : '',
                    'subclient_id': $('#subclient_id').val(),
                    '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_invoice').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_invoice").focus();
        });

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

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

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

                drawTable();
            }
        });

        $('#saveFilters').on('click', function(e) {
            e.preventDefault();
            let defaultStartDate = null;
            if (startDate && startDate.isValid()) {
                defaultStartDate = startDate.format("YYYY/MM/DD");
            } else {
                defaultStartDate = "";
            }
            let defaultEndDate = null;
            if (endDate && endDate.isValid()) {
                defaultEndDate = endDate.format("YYYY/MM/DD");
            } else {
                defaultEndDate = "";
            }

            const filters = {
                project_id: $('#project_id').val(),
                subclient_id: $('#subclient_id').val(),
                currency: $('#currency').val(),
                status: $('#status').val(),
                startDate: defaultStartDate,
                endDate: defaultEndDate,
            };

            $.ajax({
                url: `{{ route('sales-documents.save-filters', ['type' => $type]) }}`,
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    filters: filters,
                },
                success: function(response) {
                    showStatus(true, response.status);
                },
                error: function(xhr) {
                    alert('{{ __('Failed to save filters.') }}');
                }
            });
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            var today = new Date();

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

            $('#subclient_id').val('');
            $('#project_id').val('');
            $('#currency').val('');
            $('#status').val('');
            $('#date_range_invoice').val('');

            drawTable();
        }

        startDate = undefined;
        endDate = undefined;

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

        if (filters.startDate && filters.endDate) {
            startDate = moment(filters.startDate);
            endDate = moment(filters.endDate);

            if (startDate.isValid() && endDate.isValid()) {
                $('#date_range_invoice').data('daterangepicker').setStartDate(startDate);
                $('#date_range_invoice').data('daterangepicker').setEndDate(endDate);

                drawTable();
            } else {
                console.log('Invalid start or end date');
            }
        }

        function startPolling(invoiceId) {
            pollingInterval = setInterval(() => checkPaymentStatus(invoiceId), 3000);
        }

        function stopPolling() {
            clearInterval(pollingInterval);
        }

        function checkPaymentStatus(invoiceId) {
            console.log('polling');
            fetch(`/admin/check-invoice-payment-status?invoice_id=${invoiceId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'completed') {
                        stopPolling();
                        generate(
                            invoiceId,
                            null,
                            null,
                            0,
                            '{{ $type }}'
                        );
                    } else if (data.status === 'pending') {
                        console.log('Payment is still pending.');
                    } else if (data.status === 'error') {
                        stopPolling();
                        console.error(data.message);
                        $(".overlay").hide();
                    }
                }).catch(error => {
                    console.error('Fetch error:', error);
                    stopPolling();
                });
        }
    </script>
@endsection