@extends('operations.layout.mainlayout')

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Received Orders List</h1>
                    </div>
                    <div class="col-sm-6">

                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12">
                    <br/>
                    <div class="card bg-light">
                        <div class="card-header text-muted border-bottom-0">
                        </div>
                        <form method="get" action="" style="width:100%;">
                            <div class="card-body pt-0">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row form-group">
                                            <div class="col-md-4">
                                                <span class="text-muted text-sm"><b>Date from</b></span>
                                                <input id="date_from" class="form-control" type="date"
                                                       name="date_from"

                                                       placeholder="Date From"></div>
                                            <div class="col-md-4">
                                                <span class="text-muted text-sm"><b>Date to</b></span>
                                                <input id="date_to" class="form-control" type="date"
                                                       name="date_to"

                                                       placeholder="Date To">
                                            </div>
                                            <div class="col-md-4">
                                                <span class="text-muted text-sm"><b>Vendors</b></span>
                                                <select name="vendor_select" multiple id="vendor_select">
                                                    @foreach($vendors as $vendor)
                                                        <option value="{{ $vendor->ID }}">{{ $vendor->NAME }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row form-group">

                                            <div class="col-md-4">
                                                <span class="text-muted text-sm"><b>Locations</b></span>
                                                <select name="locations" multiple id="locations">
                                                    @foreach($locations as $location)
                                                        <option value="{{ $location->id }}">{{ $location->text }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <span class="text-muted text-sm"><b>Reference #</b></span>
                                                <input type="text" class="form-control" placeholder="Reference #" name="reference_number" id="reference_number">
                                            </div>

                                            <div class="col-md-4">
                                                <span class="text-muted text-sm"><b>P.O Reference #</b></span>
                                                <input type="text" class="form-control" placeholder="P.O Reference #" name="po_reference_number" id="po_reference_number">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="text-right">
                                    <button class="btn btn-sm btn-info" id="loading_button" type="button"
                                            disabled style="display: none">
                                                <span class="spinner-border spinner-border-sm" role="status"
                                                      aria-hidden="true"></span>
                                        Loading...
                                    </button>
                                    <button id="submit-po-payments-filter-form" type="submit"
                                            class="btn btn-sm btn-success">
                                        <i class="fas fa-search"></i> Search
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <table id="warehouse-vendors-payments-datatable"
                                       class="table table-bordered table-striped">
                                    <tfoot style="background: gainsboro;">
                                    <tr>
                                        <th colspan="5">Totals</th>
                                        <th></th>
                                        <th></th>
                                        <th colspan="2"></th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="items-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="lines-modal-title" style="font-size: 16px; font-weight: bold;">Received Items</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('warehouse_scripts')
    <script>

        $('#payment_status').select2({
            placeholder: 'Select Status'
        });
        $('#vendor_select').select2({
            placeholder: 'Select Vendor'
        });

        $('#locations').select2({
            placeholder: 'Select Location'
        });

        $("#warehouse-vendors-payments-datatable").DataTable({
            dom: 'lBfrtip',
            "buttons": [
                { extend: 'copy', footer: true },
                { extend: 'csv', footer: true },
                { extend: 'excel', footer: true },
                { extend: 'pdf', footer: true },
                { extend: 'print', footer: true }
            ],
            "responsive": true,
            "autoWidth": false,
            "info": true,
            destroy: true,
            "pageLength" : 10,
            lengthChange: true,
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"],
            ],
            "order": [[0, "desc"]],
            ajax: {
                url: '/operations/warehouse/vendors/received-table',
                "data": function (d) {
                    d.date_from = $('#date_from').val();
                    d.date_to = $('#date_to').val();
                    d.vendors = $('#vendor_select').val();
                    d.reference_number = $('#reference_number').val();
                    d.po_reference_number = $('#po_reference_number').val();
                    d.locations = $('#locations').val();
                }
            },
            columns: [
                {data: 'ID', title: 'ID'},
                {data: 'PURCHASEORDER.VENDOR.NAME', title: 'Vendor'},
                {data: 'REFERENCE_NUMBER', title: 'Reference #'},
                {data: 'PURCHASEORDER.REFERENCE_NUMBER', title: 'Order Reference #'},
                {data: 'LOCATION.text', title: 'Received At'},
                {data: 'RECEIVED_ITEMS_COUNT', title: 'Number of Items'},
                {data: 'RECEIVED_ITEM_QTY', title: 'Quantity Received'},
                {data: 'created_at', title: 'Order Date'},
                {
                    title: 'Received Items', "mRender": function (data, type, row) {
                       return '<button style="border-radius: 50%;" class="btn btn-outline-success btn-sm items_details" id="' + row.ID + '"><i class="fa fa-list"></i></button>';
                    }
                },
            ],
            "footerCallback": function (row, data, start, end, display) {

                var api = this.api();
                var intVal = function (i) {
                    return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                };

                totalNumberOfItems = api
                    .column(5)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                totalQty = api
                    .column(6)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                $(api.column(5).footer()).html(totalNumberOfItems);
                $(api.column(6).footer()).html(totalQty);
            }
        });

        $('#submit-po-payments-filter-form').on('click', function (e) {
            e.preventDefault();
            $("#warehouse-vendors-payments-datatable").DataTable().ajax.reload();
        })

        $(document).on('click', '.items_details', function (e) {
            e.preventDefault();
            let id = $(this).attr('id');
            $.ajax({
                url: '/operations/warehouse/vendors/received-data',
                data: {
                    id: id
                },
                success: function (data) {
                    $('.modal-body').html(data)
                }
            })
            $('#items-modal').modal('show');

        })

    </script>
@endsection