@extends('modules.head') @section('contenido')
    <div class="box-header">
        @if(Auth::user()->rol_id == 1)
          <a class="auxiliar" href="{{url('/credit-notes/report')}}"><button type="button" class="btn  pull-left btnAux"><i class="fa fa-file"></i>@lang('messages.inventory_report')</button></a>
        @endif
    </div>
    <!-- LIST lines-->
    <div class="box">
        <div class="box-header">
            <h3 class="box-title"> Credit Notes </h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive dvCreditNotes">
            <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                <thead>
                <tr role="row">
                    <th>BPCode</th>
                    <th>Company Name</th>
                    <th>DocNum</th>
                    <th>DocEntry</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Document Status</th>
                    <th>Order Relation</th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>
    @include('orders/infoOrder')
    <style type="text/css">
    @media(max-width: 768px) {
        .dvCreditNotes { }
        .dvCreditNotes table { }
        .dvCreditNotes table thead tr { justify-content: space-evenly; }
        .dvCreditNotes table tbody tr { border-bottom: solid 2px #ccc; justify-content: flex-start; }
        .dvCreditNotes table tr { display: flex; flex-wrap: wrap; }
        .dvCreditNotes table tr th { flex: 0 0 25%; box-sizing: border-box;}
        .dvCreditNotes table tr th:nth-child(2), .dvCreditNotes table tr th:nth-child(4), .dvCreditNotes table tr th:nth-child(7), .dvCreditNotes table tr th:last-child { display: none;}
        .dvCreditNotes table tr td { border-width: 0; box-sizing: border-box; flex: 0 0 20%;}
        .dvCreditNotes table tr td:first-child { flex: 0 0 62px;}
        .dvCreditNotes table tr td:nth-child(2) { flex: 0 0 calc(100% - 62px); font-weight: bold;}
    }
    @media(max-width: 480px) {
        .dvCreditNotes table tr th:nth-child(5), .dvCreditNotes table tr th:nth-child(6) { display: none;}
        .dvCreditNotes table tr th { flex: 0 0 50%;}
    }
    </style>
    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset("js/orders.js?v=$appVersion") }}"></script>
    <script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
    <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();
            $('#example2').DataTable({
                'paging': true,
                'lengthChange': true,
                'searching': true,
                'ordering': false,
                'info': true,
                'autoWidth': true,
                responsive: true,
                processing: true,
                serverSide: true,
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
                },
                ajax: '{{ route('credit_notes.table') }}',
                columns: [
                    {
                        data: 'client',
                        name: 'client.document',
                        render: function (data) {
                            return data.document;
                        }
                    },
                    {
                        data: 'client',
                        name: 'client.first_name',
                        render: function (data) {
                            return data.first_name;
                        }
                    },
                    {
                        data: 'bo_doc_num',
                        name: 'bo_doc_num'
                    },
                    {
                        data: 'bo_doc_entry',
                        name: 'bo_doc_entry'
                    },
                    {
                        data: 'amount',
                        name: 'amount'

                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function (data) {
                            return new Date(data).toLocaleDateString('en-US');
                        }
                    },
                    {
                        data: 'bo_document_status',
                        name: 'boDocumentStatus.value',
                        render: function (data) {
                            return data.value;
                        }
                    },
                    {
                        data: 'order_relation',
                        name: 'order_relation',
                    }
                ],
                initComplete: addFiltersForDataTable
            });
            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, Nombre y Teléfono</p></div>';
            $('#example2_filter').append(info);
            $('#btn-info-busqueda').on('click', function () {
                $('#menuBusqueda').toggle();
            });
        });
    </script>
@endsection