@extends('layouts.master')

@section('page_title', 'Courier Wise Orders')
@section('title', 'Courier Wise Orders')
@section('main_item', 'courier')
@section('sub_item', 'Courier Wise Orders')

@section('content')

    <div class="col-12">
        <div class="card">
            <div id="accordion">
                <div class="border-bottom card-header" style="background-color: white; cursor: pointer;" data-toggle="collapse"
                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <h4 class="mb-0 header-title">
                        Filter
                    </h4>
                </div>
                <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="product">Product</label>
                                    <select class="form-control select2" id="product" name="product">
                                        <option value="" selected>All</option>
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('dispatch.waybill.store') }}" method="POST" id="dispatch" target="_blank">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="hidden" value="{{ $id }}" name="courier_id" id="courier_id">
                            <h4 class="header-title mt-0">Order Details</h4>
                        </div>

                        <div class="table-responsive dash-social">
                            @csrf
                            <table id="courier_datatable" class="table table-hover">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Action &nbsp; <input type="checkbox" id="selectall" name="selectall"
                                                class="check_all">
                                        </th>
                                        <th>Send Sms &nbsp;<input type="checkbox" id="check" name="check"
                                                class="" value="1" checked></th>
                                        <th>Waybill No </th>
                                        <th>Customer Name</th>
                                        <th>Address</th>
                                        <th>Status</th>
                                    </tr>
                        
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <input type="hidden" readonly value="" name="copy_waybill" id="copy_waybill">
                            <input type="hidden" value="{{ $id }}" name="select_courier_id">
                        </div>
                    </div>
                    <button id="sub_btn" type="button" data-href="{{ url('courier/waybills/add-it', $id) }}"
                        class="btn btn-primary px-4 float-right mt-0 mb-3">Dispatch
                        Orders </button>
                </form>
            </div>

        </div>

    </div>
    <div id="waybill-status" class="modal fade">
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $("#product").select2();
            let courier_datatable = $('#courier_datatable').DataTable({
                lengthMenu: [
                    [25, 50, 100, 3000000],
                    ['25 ', '50 ', '100', 'All']
                ],

                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: false,
                serverSide: true,
                ajax: {

                    url: "{{ route('packing_batch') }}",
                    data: function(d) {
                        d.product = $('#product').val();
                        d.courier_id = $('#courier_id').val();
                    }
                },
                columnDefs: [{
                    "targets": [0, 1, 4],
                    "orderable": false,
                    "searchable": false,
                }],
                "fnDrawCallback": function(oSettings) {
                    $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()
                },
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'send_sms',
                        name: 'send_sms'
                    },
                    {
                        data: 'waybill_no',
                        name: 'waybill_no'
                    },
                    {
                        data: 'customer_name',
                        name: 'customer_name'
                    },
                    {
                        data: 'address',
                        name: 'address'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                ]
            });

            $(document).on('change', '#product', function() {
                courier_datatable.ajax.reload();
            });
        });
        $(document).on('click', '#sub_btn', function() {
            let orders = getSelectedOrders();
            if (orders.length >= 1) {
                $('#dispatch').submit();
            } else {
                swal.fire('Please select Orders');
            }
        });

        function getSelectedOrders() {
            let orders = [];
            $('input[type=checkbox]:checked').each(function() {
                let value = $(this).val();
                orders.push(value);
            });
            return orders;
        }
        $(function() {
            $('.check_all').click(function() {
                if ($(this).prop('checked')) {
                    $('.check_oder').prop('checked', true);
                } else {
                    $('.check_oder').prop('checked', false);
                }
            });
        });
        $(document).on('click', '#check', function() {
            if ($(this).prop('checked')) {
                $('.select_order').prop('checked', true);
            } else {
                $('.select_order').prop('checked', false);
            }
        })
        $("#sub_btn1").click(function() {


            $('#waybill-status').load($(this).data('href'), function() {
                $('#waybill-status').modal('show');

            })
        });
        $(document).on('input', '#way_bill', function() {});
        $(document).on('click', '.update_waybills', function() {
            let waybill = $('#way_bill').val();
            $('#copy_waybill').val(waybill);
            $('#waybill-status').modal('hide');

            $('#dispatch').submit()

        })
    </script>

@endsection