@extends('modules.head') @section('contenido')
    <div class="box-header">
    </div>

    <!-- List forms-->
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Purchase Orders</h3>
        </div>

        <!-- /.box-header -->
        <div class="box-body table-responsive ">
            <table id="example2" class="table table-bordered table-hover dataTable" role="grid">
                <thead>
                <tr role="row">
                    <th>DocNum</th>
                    <th>DocEntry</th>
                    <th>DocDate</th>
                    <th>DocDueDate</th>
                    <th>Status</th>
                    <th>Branch</th>
                    <th>Supplier Code</th>
                    <th>Supplier</th>
                    <th>Total</th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- /.box-body -->
    </div>

@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></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();
        const _table = $('#example2').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "order": [],
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: '{{ route('purchase_orders.index') }}',
            columns: [
                {data: 'bo_doc_num', name: 'bo_doc_num', render: function(data, type, row) {
                    return `<a href="/purchase_orders/${row.id}/edit">${data}</a>`;
                }},
                {data: 'bo_doc_entry', name: 'bo_doc_entry'},
                {data: 'bo_doc_date', name: 'bo_doc_date'},
                {data: 'bo_doc_due_date', name: 'bo_doc_due_date'},
                {data: 'bo_document_status', name: 'boDocumentStatus.value', render: function (data, type, row) {
                    return `${data.value}`;
                }},
                {data: 'branch', name: 'branch.name', render: function (data, type, row) {
                    return `${data.name}`;
                }},
                {data: 'supplier', name: 'supplier.document', render: function (data, type, row) {
                        return `${data.document}`;
                }},
                {data: 'supplier', name: 'supplier.first_name', render: function (data, type, row) {
                    return `${data.first_name}`;
                }},
                {data: 'total', name: 'total', render: function (data, type, row) {
                    return new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(data);
                }},
            ],
            initComplete: addFiltersForDataTable
        })
    });

</script>