@extends('modules.head')
@section('contenido')
<div class="box">
    <div class="box-header">
        @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 2)
          <a class="auxiliar" href="{{url('/returns/report')}}">
           <button type="button" class="btn  pull-left btnAux">
             <i class="fa fa-file"></i>@lang('messages.inventory_report')
            </button>
          </a>
        @endif
    </div><br>
    <div class="box-header">
        <h3>Returns</h3><br>
        {{-- <button onClick="createReturn(1)" class="fa fa-mail-forward iconMini btnWithBusy" name="btnCreate"></i>
        <button onClick="createReturn(1)" class="fa fa-mail-forward iconMini btnWithBusy" name="btnCreate"></button>
        <button onClick="createReturn(1)" class="fa fa-mail-forward iconMini btnWithBusy" name="btnCreate"></i> --}}
    </div>
    <!-- /.box-header -->
    <div class="box-body table-responsive dvTBLReturns">
        @include('eko_table_preferences')
        <table id="example2" class="table table-bordered table-hover dataTable ekoTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th id="col_ref_return_b1" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Ref Return B1</th>
                    <th id="col_credit_note_b1" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.returns.bo_reference_credit_note') }}</th>
                    <th id="col_created_by" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.returns.admin') }}</th>
                    <th id="col_customer" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.returns.client') }}</th>
                    <th id="col_bp_code" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">BP Code</th>
                    <th id="col_date" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.returns.date') }}</th>
                    <th id="col_notes" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.returns.notes') }}</th>
                    <th id="col_branch" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Branch</th>
                    <th id="col_actions" class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- /.box-body -->
</div>
<style type="text/css">
@media(max-width: 768px) {
    .dvTBLReturns {}
    .dvTBLReturns table { }
    .dvTBLReturns table tbody { display: table; width: 100%;}
    .dvTBLReturns table thead tr { display: flex;}
    .dvTBLReturns table tbody tr { display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: solid 2px #111; position: relative;}
    .dvTBLReturns table tbody tr td {display: block; width: calc(100% - 40px); box-sizing: border-box; border-width: 0;}
    .dvTBLReturns table tbody tr td > * { margin: 0;}

    .dvTBLReturns table tr th:first-child, .dvTBLReturns table tr th:nth-child(2), .dvTBLReturns table tr th:nth-child(6), .dvTBLReturns table tr th:nth-child(8),
    .dvTBLReturns table tr td:nth-child(6),
    .dvTBLReturns table tr td:first-child, .dvTBLReturns table tr td:nth-child(2) ,.dvTBLReturns table tr td:nth-child(6) ,.dvTBLReturns table tr td:nth-child(7) { display: none;}

    .dvTBLReturns table tr th:nth-child(5) { order: 1;}

    .dvTBLReturns table tr td:last-child { width: 40px; position: absolute; top: 0; right: 0; display: flex; padding: 0; align-items: center; height: 100%; flex-wrap: wrap;}

    @media(max-width: 600px) {
        .dvTBLReturns table tr th:nth-child(3), .dvTBLReturns table tr th:nth-child(5) { display: none;}
    }

    @media(max-width: 501px) {
        .modal-content table.dataTable tbody tr { background-color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: solid 2px #111;}
        .modal-content table.dataTable tbody tr td { border-width: 0; padding: 0 0 10px; font-size: 13px; flex: 0 0 49%; text-align: left; }
        .modal-content table.dataTable tbody tr td:before { content:''; display: table; font-weight: bold; font-size: 12px; margin: 0; width: 100%;}
        .modal-content table.dataTable tbody tr td:first-child {}
        .modal-content table.dataTable tbody tr td:nth-child(2) { }
        .modal-content table.dataTable tbody tr td:nth-child(3) { }
        .modal-content table.dataTable tbody tr td:nth-child(4) { }
        .modal-content table.dataTable tbody tr td:nth-child(5) { }
        .modal-content table.dataTable tbody tr td:nth-child(6) { }
        .modal-content table.dataTable tbody tr td:last-child { }

        .modal-content table.dataTable tbody tr td:first-child:before { content:'Order ID:'; }
        .modal-content table.dataTable tbody tr td:nth-child(2):before { content:'Date:'; }
        .modal-content table.dataTable tbody tr td:nth-child(3):before { content:'PLU:'; }
        .modal-content table.dataTable tbody tr td:nth-child(4):before { content:'Unit Price:'; }
        .modal-content table.dataTable tbody tr td:nth-child(5):before { content:'Qty:'; }
        .modal-content table.dataTable tbody tr td:nth-child(6):before { content:'Fee:'; }
        .modal-content table.dataTable tbody tr td:last-child:before { content:'Total Credit:'; }
    }

    @media(max-width: 425px) {
    .dvTBLReturns table tbody tr td { padding-right: 0; font-size: 14px;}
    }
}
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/returns.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<!--Columns visibility -->
<script src="{{ asset('js/column_visibility.js') }}"></script>
<!--End Columns visibility -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example2 thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#example2 thead');

        $('#example2 thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#example2").dataTable().fnDestroy();
        _table = $('#example2').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'info': true,
            'autoWidth': true,
            "order": [[ 2, "desc" ]],
            "ordering": false,
            responsive: true,
            processing: true,
            serverSide: true,
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },

            ajax: '{{ route('returns.table') }}',
            columns: [
                {
                    data: 'bo_reference',
                    name: 'bo_reference',
                    render: function(data, type, row) {
                        if(data) {
                            return `<a type="button" onclick="displayCreditNote(${row.id})" style="cursor:pointer">${data}</a>`;
                        }
                        else {
                            return '';
                        }
                    }
                },
                {
                    data: 'bo_reference_credit_note',
                    name: 'bo_reference_credit_note',
                },
                {
                    data: 'admin',
                    name: 'admin.first_name',
                    render: function(data) {
                        return data.last_name ? data.first_name + ' ' + data.last_name : data.first_name;
                    }
                },
                {
                    data: 'user',
                    name: 'user.first_name',
                    render: function(data) {
                        return data.last_name ? data.first_name + ' ' + data.last_name : data.first_name;
                    }
                },
                {
                    data: 'user',
                    name: 'user.document',
                    render: function(data) {
                        return data.document ? data.document : "";
                    }
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    render: function(data) {
                        var date = new Date(data);
                        var month = date.getMonth() + 1;
                        return (month.length > 1 ? "0" + month : month) + "/" + date.getDate() + "/" + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                    }
                },
                {
                    data: 'pick_notes',
                    name: 'pick_notes',
                },
                {
                    data: 'latest_return_detail',
                    name: 'latestReturnDetail.order.branch.short_name',
                    render: function(data, type, row) {
                        return data ? data.order.branch.short_name : '';
                    }
                },
                {
                    data: 'actions',
                    name: 'actions',
                },

            ],
            initComplete: addFiltersForDataTable
        });

        handleUserColumnsPreferences('example2', 'returns', _table); //First argument: table id, Second argument: corresponding name in eko_tables database table, Third argument: datatable instance


        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 Código, Cedula, Mensajero, Sucursal, Fechas, Estado, Nombre</p></div>';

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

</script>
@endsection
@include("returns.modal_credit_note_details")
@include("returns.modal_items")