@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Quotes';
    @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-danger" style="display:none"></div>
                <div class="alert alert-success" style="display:none"></div>
                @can('crear cotizaciones')
                    <div class="row">
                        <div class="col-lg-12">
                            <a href="javascript:loadContent('{{ route('quotes.create') }}')" class="btn btn-info">
                                <i class="fas fa-plus-circle" style="padding-right: 5px"></i>
                                {{ __('New Quote') }}
                            </a>
                        </div>
                    </div><br>
                @endcan

                <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_quote" 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="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="Nueva">
                                    Nueva
                                </option>
                                <option value="Enviada">
                                    Enviada
                                </option>
                                <option value="Aprobada">
                                    Aprobada
                                </option>
                                <option value="Facturada">
                                    Facturada
                                </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" id="saveFilters" onclick="clearFilters()">
                                {{ __('Clear filters') }}
                            </button>
                        </div>
                    </div>
                </div>

                <br>

                <table id="tbl_quotes" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Date') }}</th>
                            <th>No.</th>
                            <th>{{ __('Client') }}</th>
                            <th>{{ __('Project') }}</th>
                            <th>{{ __('Contact') }}</th>
                            <th>{{ __('Quote Title') }}</th>
                            <th>{{ __('Currency') }}</th>
                            <th>{{ __('Exchange Rate') }}</th>
                            <th>{{ __('Amount') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Sales Person') }}</th>
                            <th>{{ __('Actions') }}</td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <!-- Contact Modal -->
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalLabel">{{ __('Contact') }}</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="contact">
                    <div class="modal-body" id="contact">
                        <div class="form-group row">
                            <div style="font-weight:bold">{{ __('Name') }}</div>
                            <div class="col-md-10 contact-name"></div>
                            <div style="font-weight:bold">{{ __('Title') }}</div>
                            <div class="col-md-10 contact-title"></div>
                            <div style="font-weight:bold">{{ __('Phone') }}</div>
                            <div class="col-md-10 contact-phone"></div>
                            <div style="font-weight:bold">{{ __('Email') }}</div>
                            <div class="col-md-10 contact-email"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        {{ __('Close') }}</button>
                </div>
            </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="quote-mail-form" method="post" action="{{ route('quotes.mail') }}"
                        enctype="multipart/form-data">
                        <input type="hidden" id="mail_id" name="mail_id" value="" />
                        <input type="hidden" id="mail_hashid" name="mail_hashid" value="" />
                        <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="8"></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_hashid" name="whatsapp_hashid" value="" />
                    <input type="hidden" id="whatsapp_number" name="whatsapp_number" value="" />
                    <input type="hidden" id="whatsapp_client" name="whatsapp_client" 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 cotización. 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>
    <!-- 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('quotes.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="attach-file-button" onclick="attachFile()"
                            disabled>
                            {{ __('Attach') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $('#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;
            $('#attach-file-button').prop('disabled', !hasFile);
        });

        $('#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;
            $('#attach-file-button').prop('disabled', !hasFile);
        });

        function drawTable() {

            initializeDataTable(
                "#tbl_quotes",
                "admin/sales/quotes/datatables",
                quotesTableColumns,
                [{
                    targets: 9,
                    width: "80px"
                }, {
                    targets: 11,
                    width: "80px"
                }],
                null
            );
        }

        function updateActionsMenu(actionsMenu, rowId) {
            var table = $('#tbl_quotes').DataTable();
            var row = table.row(`#${rowId}`);
            if (row.node()) {
                $(row.node()).find('td:last-child').html(actionsMenu);
            }
        }

        function duplicate(id, quote_number) {
            if (confirm('{{ __('You are about to duplicate Quote ') }}' + quote_number)) {
                $(".overlay").show();
                $.ajax({
                        url: '{{ route('quotes.duplicate', ['id' => '__ID__']) }}'.replace('__ID__', id),
                        type: 'GET',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                'content')
                        },
                        success: function(response) {
                            addQuoteRow(
                                response.add.quote,
                                response.add.statusMenu,
                                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 quote.') }}');
                        }
                    })
                    .always(function() {
                        $(".overlay").hide();
                    });
            }
        }

        function handleAction(select, quoteName) {
            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');
                deleteRow(url, 'tbl_quotes', ['Cotización', quoteName]);
            } else if (selectedOption === 'sendByMail') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const hashid = select.options[select.selectedIndex].getAttribute('data-hashid');
                const number = select.options[select.selectedIndex].getAttribute('data-number');
                const name = select.options[select.selectedIndex].getAttribute('data-name');
                const client = select.options[select.selectedIndex].getAttribute('data-client');
                const contact = select.options[select.selectedIndex].getAttribute('data-contact');
                const email = select.options[select.selectedIndex].getAttribute('data-email');
                const title = select.options[select.selectedIndex].getAttribute('data-title');

                openMailModal(id, hashid, name, client, contact, number, email, title);

            } else if (selectedOption === 'sendByWhatsapp') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const hashid = select.options[select.selectedIndex].getAttribute('data-hashid');
                const phone = select.options[select.selectedIndex].getAttribute('data-phone');
                const client = select.options[select.selectedIndex].getAttribute('data-client');
                const number = select.options[select.selectedIndex].getAttribute('data-number');
                openWhatsappModal(id, hashid, phone, client, number);
            } else if (selectedOption === 'preview') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                loadPreview(id);
            } else if (selectedOption === 'saveLink') {
                const hashid = select.options[select.selectedIndex].getAttribute('data-hashid');
                saveLink(hashid);
            } else if (selectedOption === 'duplicate') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const quote_number = select.options[select.selectedIndex].getAttribute('data-number');
                duplicate(id, quote_number);
            } else if (selectedOption === 'attachFile') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const number = select.options[select.selectedIndex].getAttribute('data-number');
                openAttachFileModal(id, number);
            } else if (selectedOption === 'viewFile') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const number = select.options[select.selectedIndex].getAttribute('data-number');
                viewFile(id, number);
            } else if (selectedOption === 'createInvoice') {
                const id = select.options[select.selectedIndex].getAttribute('data-id');
                const quote_number = select.options[select.selectedIndex].getAttribute('data-number');
                const status = select.options[select.selectedIndex].getAttribute('data-status');
                const name = select.options[select.selectedIndex].getAttribute('data-name');
                createInvoice(id, quote_number, status, name);
            }
            select.value = '';
        }

        function openMailModal(id, hashid, name, client, contact, number, email, title) {

            var subject = client + ' te ha enviado la cotización No: ' + number + '; ' + title + '.';
            var message = 'Apreciable ' + contact + '\n\nA continuación te enviamos la cotización solicitada.';

            $('.invalid-feedback').text('').css('display', 'none');
            $('#mail_id').val(id);
            $('#mail_hashid').val(hashid);
            $('#mail_from').val(name);
            $('#mail_to').val(email);
            $('#mail_cc').val('');
            $('#mail_subject').val(subject);
            $('#mail_body').val(message);
            $('#mail_attachment').val('');
            $('.custom-file-label[for="mail_attachment"]').text('{{ __('Choose file') }}');
            $('#mailModal').modal('show');
        }

        function openWhatsappModal(id, hashid, phone, client, number) {
            $('.invalid-feedback').text('').css('display', 'none');
            $('#whatsapp_id').val(id);
            $('#whatsapp_hashid').val(hashid);
            $('#whatsapp_phone').val(phone);
            $('#whatsapp_client').val(client);
            $('#whatsapp_number').val(number);
            $('#whatsappModal').modal('show');
        }

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

        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, number) {
            const url = `{{ route('quotes.get-file', ['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, number, 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('quotes.delete-file', ['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);
                }
            }
        }

        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();
                $('#quote-mail-form').submit();
            }
        }

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

            let isValid = true;

            let whatsapp_phone = $('#whatsapp_phone').val().trim();
            let id = $('#whatsapp_id').val();
            let hashid = $('#whatsapp_hashid').val();
            let number = $('#whatsapp_number').val();
            let client = $('#whatsapp_client').val();
            if (!whatsapp_phone) {
                isValid = false;
                $('#whatsapp_phone-error').text('{{ __('Phone is required.') }}').css('display',
                    'block');
            }

            if (isValid) {

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

                const baseUrl = "{{ route('view-quote', ':hashid') }}";
                const urlWithId = baseUrl.replace(':hashid', hashid);
                const encodedMessage =
                    client + " te está enviando la cotización No. " + number +
                    ". Para visualizar la cotización haz click en la siguiente liga: " +
                    encodeURIComponent(urlWithId);

                const whatsappUrl = "https://wa.me/" + whatsapp_phone + "?text=" + encodedMessage;

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

                updateQuoteStatus(id, null, 'Enviada');

                window.open(whatsappUrl, '_blank');
            }
        }

        function loadPreview(id) {
            const url = `{{ route('quotes.preview', ':id') }}`.replace(':id', id);

            loadContent(url);
        }

        function saveLink(hashid) {
            const url = `${baseUrl}/quote/${hashid}`;

            navigator.clipboard.writeText(url)
                .then(() => alert("{{ __('Link copied to clipboard!') }}"))
                .catch(err => alert("{{ __('Failed to copy the link.') }}"));
        }

        function createInvoice(quote_id, quote_number, status, name) {
            if (status == 'Cliente') {
                const url = `{{ route('sales-documents.create', ['type' => ':type', 'quote_id' => ':quote_id']) }}`
                    .replace(':type', 'invoices')
                    .replace(':quote_id', quote_id);

                loadContent(url);
            } else {
                alert(
                    `El cliente "${name}" no tiene completos los datos para facturar. Completa los datos y vuelve a generar la factura.`
                );
            }
        }

        function addQuoteRow(quote, statusMenu, actionsMenu) {
            const table = $('#tbl_quotes').DataTable();
            table.row.add({
                created_at_formatted: quote.created_at_formatted,
                quote_number: quote.quote_number,
                subclient_name: quote.subclient_name,
                project_name: quote.project_name,
                contact_name: quote.contact_name,
                title: quote.title,
                currency: quote.currency,
                exchange_rate: quote.exchange_rate,
                total_formatted: quote.total_formatted,
                status: statusMenu,
                sales_person: quote.sales_person,
                action: actionsMenu
            }).draw();

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

        function updateTableRow(quote) {
            var table = $('#tbl_quotes').DataTable();
            var row = table.row(`#${quote.id}`);
            if (row.node()) {
                if (quote.actionsMenu) {
                    $(row.node()).find('td:last-child').html(quote.actionsMenu);
                }
            }
        }

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

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

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

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

                drawTable();
            }
        });

        function clearFilters() {

            startDate = undefined;
            endDate = undefined;

            var today = new Date();

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

            $('#subclient_id').val('');
            $('#currency').val('');
            $('#status').val('');
            $('#date_range_quote').val('');

            drawTable();
        }

        startDate = undefined;
        endDate = undefined;

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