@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4>Konversi dan Jaminan</h4>
                        <p class="f-m-light mt-1">We already set start date are 7 days before this day for database
                            performance purpose</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-bordered table-striped" id="export-button">
                    <thead>
                        <tr class="bg-light-primary text-dark">
                            <th>Invoice No</th>
                            <th>Invoice Date</th>
                            <th>Good Receive No</th>
                            <th>Good Receive Date</th>
                            <th>OP No</th>
                            <th>OP Date</th>
                            <th>OB No</th>
                            <th>OB Date</th>
                            <th>BOM No</th>
                            <th>BOM Date</th>
                            <th>BOM Material Code</th>
                            <th>BOM Qty</th>
                            <th>BOM UoM</th>
                            <th>Subbom from BOM</th>
                            <th>WO No</th>
                            <th>MR No</th>
                            <th>MR Date</th>
                            <th>MR Material Code</th>
                            <th>MR Material Type</th>
                            <th>MR Qty</th>
                            <th>MR UoM</th>
                            <th>Price per Unit</th>
                            <th>Currency Code</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="/assets/js/datatable/datatables/jquery.dataTables.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/dataTables.buttons.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/jszip.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.colVis.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/pdfmake.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/vfs_fonts.js"></script>
    <script src="/assets/js/datatable/datatable-extension/dataTables.autoFill.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/dataTables.select.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.bootstrap4.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.html5.min.js"></script>
    <script src="/assets/js/datatable/datatable-extension/buttons.print.min.js"></script>
    <script>
        $("#export-button").DataTable({
            serverSide: true,
            dom: "Blfrtip",
            buttons: ["excelHtml5", "csvHtml5"],
            processing: true,
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],
            ajax: {
                url: "{{ route('datatable.subcon.konversi.jaminan') }}",
                type: 'GET',
            },
            columns: [{
                    data: 'po_supplier_invoice.no',
                    name: 'po_supplier_invoice.no',
                }, {
                    data: 'invoice_formatted_date',
                    name: 'invoice_formatted_date',
                }, {
                    data: 'po_supplier_gr_no',
                    name: 'po_supplier_gr_no',
                }, {
                    data: 'gr_formatted_date',
                    name: 'gr_formatted_date',
                },
                {
                    data: 'material_request.wo.date_range.bom.op.no',
                    name: 'material_request.wo.date_range.bom.op.no',
                }, {
                    data: 'op_formatted_date',
                    name: 'op_formatted_date',
                }, {
                    data: 'material_request.wo.date_range.bom.op.ob_detail.ob.no',
                    name: 'material_request.wo.date_range.bom.op.ob_detail.ob.no',
                }, {
                    data: 'ob_formatted_date',
                    name: 'ob_formatted_date',
                }, {
                    data: 'material_request.wo.date_range.bom.no',
                    name: 'material_request.wo.date_range.bom.no',
                }, {
                    data: 'bom_formatted_date',
                    name: 'bom_formatted_date',
                }, {
                    data: 'material_request.wo.date_range.bom.material_code',
                    name: 'material_request.wo.date_range.bom.material_code',
                }, {
                    data: 'material_request.wo.date_range.bom.qty',
                    name: 'material_request.wo.date_range.bom.qty',
                }, {
                    data: 'material_request.wo.date_range.bom.material.uom_code',
                    name: 'material_request.wo.date_range.bom.material.uom_code',
                }, {
                    data: 'bom_parent',
                    name: 'bom_parent',
                }, {
                    data: 'material_request.wo.no',
                    name: 'material_request.wo.no',
                }, {
                    data: 'material_request.no',
                    name: 'material_request.no',
                }, {
                    data: 'mr_formatted_date',
                    name: 'mr_formatted_date',
                }, {
                    data: 'material.code',
                    name: 'material.code',
                }, {
                    data: 'material.material_type_code',
                    name: 'material.material_type_code',
                }, {
                    data: 'qty',
                    name: 'qty',
                }, {
                    data: 'material.uom_code',
                    name: 'material.uom_code',
                }, {
                    data: 'formatted_price_per_unit',
                    name: 'formatted_price_per_unit',
                }, {
                    data: 'currency_code',
                    name: 'currency_code',
                }, {
                    data: 'formatted_amount',
                    name: 'formatted_amount',
                },
            ]
        });
    </script>
@endsection