@extends('modules.head') @section('contenido')
<style>
    /* Ensure that the demo table scrolls */
    /* th, */
    td {
        white-space: nowrap;
    }

    div.dataTables_wrapper {
        height: fit-content;
        margin: 0px 10px 0px 10px;
    }

    .dataTables_scrollBody {
        max-height: none !important;
    }
</style>
<div class="box-header">
    <a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
        <i class="fa fa-file-excel-o"></i> {{ Lang::get('messages.collection_invoices.title_export_all') }}
    </a>
</div>

<h3>
    <a class="ruta" class="" href="{{ url('/collection_invoices') }}">{{ Lang::get('messages.collection_invoices.title_list') }} </a>
    <span class="separador-ruta">|</span>
    <a class="ruta" class="" href="{{ url('/collection_invoices/detail/' . $invoice->id) }}">{{ Lang::get('messages.collection_invoices.title_detail') }}</a>
</h3>

<!-- List Data -->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">{{ Lang::get('messages.collection_invoices.title_detail') }} ➜ {{ $invoice->name }}</h3>
        <input type="hidden" id="name" value="{{ $invoice->name }}">
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="example2" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail0') }} </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail1') }} </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail2') }} </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail3') }} </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail4') }} </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail5') }} </th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"> {{ Lang::get('messages.collection_invoices.tag_detail6') }} </th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- /.box-body -->
</div>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        _table = $('#example2').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            order: [],
            language: {
                url: window.DATATABLES_LANGUAGE_URL,
            },
            ajax: '/collection_invoices/filterDetail/{{$invoice->id}}',
            columns: [{
                    data: 'invoice',
                    render: function(data, type, row, column) {
                        return row.invoice ? row.invoice.name : '';
                    },
                    name: 'invoice.name'
                }, {
                    data: 'reference',
                    name: 'reference'
                },
                {
                    data: 'transaction_id',
                    name: 'transaction_id'
                },
                {
                    data: 'origin',
                    name: 'origin'
                },
                {
                    data: 'total',
                    name: 'total'
                },
                {
                    data: 'gateway',
                    render: function(data, type, row, column) {
                        return row.gateway ? row.gateway.name : '';
                    },
                    name: 'gateway.name'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ]
        });

        var info =
            '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Nombre, Orden y Link</p></div>';

        $('#example2_filter').append(info);
        $('#btn-info-busqueda').on('click', function() {
            $('#menuBusqueda').toggle();
        });

    });

    function clickExportAll() {
        $('#loading').show();
        _table = $("#example2").DataTable();
        let query = _table.ajax.json().queries[_table.ajax.json().queries.length - 1].query;
        let bindings = _table.ajax.json().queries[_table.ajax.json().queries.length - 1].bindings;
        query = query.split(' limit ')[0];

        var validateDownloadUrl = document.location.origin + "/collection_invoices/validateExport";
        var downloadUrl = document.location.origin + "/collection_invoices/export/";

        var formData = new FormData();
        formData.append("query", query);
        formData.append("bindings", bindings);
        formData.append("name", $("#name").val());

        $.ajax({
            type: "POST",
            dataType: "json",
            processData: false,
            contentType: false,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: formData,
            url: validateDownloadUrl,
            success: function(response) {
                $('#loading').hide();
                if (response.success) {
                    window.location.assign(downloadUrl + response.data);
                } else {
                    swal("Error", response.message, "error");
                }
            },
            error: function(response) {
                $('#loading').hide();
                swal("Error", response.responseJSON ? response.responseJSON.message :
                    'Hubo un error en el servidor, espere unos segundos e intente de nuevo', "error");
            }
        });
    }
</script>
@endsection