@extends('layouts.master')

@section('page_title', 'Delivery status Pending waybill')
@section('title', 'Delivery status Pending waybill')
@section('main_item', 'Orders')
@section('sub_item', 'Delivery status Pending waybill')

@section('content')
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" for="reportrange"> Date </label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="dates-d" id="reportrange" value=""
                                    readonly>
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card card-eco">
            <div class="card-body">
                <h4 class="card-title mt-0">Delivery Status Pending Waybill Number</h4>
                <div class="table table-responsive">
                    <table class="table table-striped" width="100%" id="laravel_datatable_waybill">
                        <thead class="thead-dark">
                            <tr>
                                <th>Delivery Status</th>
                                <th>Name and Address</th>
                                <th>Phone No</th>
                                <th>Items Sku</th>
                                <th>Waybill Number</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <!--end card -body-->
        </div>
    @endsection
    @section('scripts')
        <script>
            $('#reportrange').val('');
            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
            $(document).ready(function() {
                report_table = $('#laravel_datatable_waybill').DataTable({
                    lengthMenu: [
                        [15, 50, 100, 500, 1500],
                        ['15 ', '50 ', '100', '500', '1500']
                    ],
                    buttons: ['copy', 'excel', 'pdf', 'colvis'],
                    processing: false,
                    serverSide: true,
                    ajax: {
                        url: "{{ url('/home/waybill_id_pending') }}",
                        data: function(d) {
                            d.contact_id = $('#contact_id').val();
                            d.range = $('#reportrange').val();
                            d.status = $('#status').val();
                        }
                    },
                    columnDefs: [{
                        "targets": [0],
                        "orderable": false,
                        "searchable": false,
                    }],
                    "autoWidth": false,
                    columns: [{
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'contact_id',
                            name: 'contact_id'
                        },
                        {
                            data: 'contact_no',
                            name: 'contact_no'
                        },
                        {
                            data: 'items',
                            name: 'items'
                        },
                        {
                            data: 'waybill_number',
                            name: 'waybill_number'
                        },
                    ]
                });
            })
            $(document).on('change',
                '#reportrange, #mdate',
                function() {
                    report_table.ajax.reload();
                });
        </script>

    @endsection