@extends('layouts.master')

@section('page_title', 'Courier Transactions')
@section('title', ' Courier Transactions')
@section('main_item', 'Courier')
@section('sub_item', 'View Courier Transactions')

@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold" for="supplier">Status</label>
                            <select class="form-control custom-select" id="status" name="status">
                                <option value="">All</option>
                                <option value="paid">Paid</option>
                                <option value="pending">Pending</option>

                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label style="font-weight: bold">Order 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 class="col-md-4">
                        <div class="card  card-light">
                            <div class="card-body">
                                <p class="lead font-weight-bold mb-1">{{ $courier_name }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="col-12">
        <input type="hidden" id="courier_id" value="{{ $courier_id }}">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0">Courier Transaction Details</h4><br>
                <div class="table-responsive dash-social">
                    <table id="courier_transaction_table" class="table table-bordered">
                        <thead class="thead-dark" style="text-align: center">
                            <tr>
                                <th>Order</th>
                                <th>Order Date</th>
                                <th>Status</th>
                                <th>Waybill</th>
                                <th>COD Amount</th>
                                <th>Courier Fee</th>
                                <th>Received Amount</th>
                            </tr>
                        </thead>

                        <tbody style="text-align: right">

                        </tbody>
                        <tfoot style="text-align: right">
                            <tr>
                                <th colspan="4" style="text-align: center;font-weight: bold">Total</th>
                                <th></th>
                                <th></th>
                                <th></th>

                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

    <script>
        $(document).ready(function() {
            $('#reportrange').val('');
            courier_transaction_table = $('#courier_transaction_table').DataTable({
                lengthMenu: [
                    [25, 50, 100, -1],
                    ['25 ', '50 ', '100', 'All']
                ],
                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                processing: false,
                serverSide: true,

                ajax: {
                    url: "{{ route('courier.get_transaction_details') }}",
                    data: function(d) {
                        d.courier_id = $('#courier_id').val();
                        d.status = $('#status').val();
                        d.range = $('#reportrange').val();

                    }

                },
                columnDefs: [{
                    "targets": [6],
                    "orderable": false,
                    "searchable": false,

                }],
                "order": [
                        [1, "desc"]
                    ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;
  
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    let cod = api.column(4).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                    $(api.column(4).footer()).html(formatNumber(cod) + '.00');
                    let corier_fee = api.column(5).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                    $(api.column(5).footer()).html(formatNumber(corier_fee) + '.00');

                    let received = api.column(6).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);


                    $(api.column(6).footer()).html(formatNumber(received) + '.00');

                },

                columns: [
                    {
                        data: 'order_ref',
                        name: 'order_ref'
                    },
                    {
                        data: 'order_date',
                        name: 'order_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'waybill_id',
                        name: 'waybill_id'
                    },

                    {
                        data: 'cod_amount',
                        name: 'cod_amount'
                    },

                    {
                        data: 'courier_fee',
                        name: 'courier_fee'
                    },
                    {
                        data: 'received_amount',
                        name: 'received_amount'
                    },
                ]
            });



   
            $('[data-toggle="tooltip"]').tooltip()
            $(document).on('change', '#reportrange, #status', function() {
                courier_transaction_table.ajax.reload();
            });
        });
    </script>
@endsection