@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>LSP : Billing</p>
                    </div>
                </div>
            </div>
            <div class="row pt-sm-4 pt-0">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Earning</p>
                    </div>
                    <div class="zone-box">
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <div class="lsp-heading">
                                    <h5>Total Earnings</h5>
                                    <p>Revenue earned from total sales</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <select name="" id="" class="border-0">
                                    <option value="">Months</option>
                                    <option value="">year</option>
                                </select>
                            </div>
                        </div>
                        <canvas id="earningChart"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Bill Receivables</p>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-md-2">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="customername">Area</label>
                                <select class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="orderid">Select</label>
                                <select class="form-control">
                                    <option value="">Pickup</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <p>Select Date Range <img src="/assets/images/calender2.png" alt=""></p>
                        </div>
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-striped" id="billreceivables-list">
                                    <thead>
                                        <tr>
                                            <th scope="col">Month</th>
                                            <th scope="col">Delivery</th>
                                            <th scope="col">Reverse</th>
                                            <th scope="col">RTO</th>
                                            <th scope="col">Lost/Theft</th>
                                            <th scope="col">Others</th>
                                            <th scope="col">Discount</th>
                                            <th scope="col">Expected Earning</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <div class="pagination_rounded">
                                <ul>
                                    <li>
                                        <a href="#" class="prev"> <i class="fa fa-chevron-left"
                                                aria-hidden="true"></i> </a>
                                    </li>
                                    <li><a href="#" class="active">1</a> </li>
                                    <li class="hidden-xs"><a href="#">2</a> </li>
                                    <li class="hidden-xs"><a href="#">3</a> </li>
                                    <li class="hidden-xs"><a href="#">4</a> </li>
                                    <li>
                                        <a href="#" class="next"> <i class="fa fa-chevron-right"
                                                aria-hidden="true"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row py-4 py-sm-5">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Credit Terms</p>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="zone-box">
                                <p>Current credit terms: <strong> 45 days </strong></p>
                                <img src="/assets/images/credit-card.png" alt="">
                                <p class="text-right mb-0"><a href="#" class="text-decoration-underline">Increase
                                        limit</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Slab Discount</p>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="zone-box">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <canvas id="slabChart" width="100%"></canvas>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="">
                                            <p class="mb-0"><img src="/assets/images/lspdot1.png" alt=""> 10000
                                                Ships 15%
                                            </p>
                                            <p class="mb-0"><img src="/assets/images/lspdot2.png" alt=""> 7000
                                                Ships 10%
                                            </p>
                                            <p class="mb-0"><img src="/assets/images/lspdot3.png" alt=""> 5000
                                                Ships 5%
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <div class="title-section">
                                <p>Statement</p>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <ul class="nav nav-tabs lsp-tabs" id="myTab" role="tablist">
                                <li class="nav-item lsp-item">
                                    <a class="nav-link lsp-link active" id="pickup-tab" data-toggle="tab" href="#pickup"
                                        role="tab" aria-controls="pickup" aria-selected="true">Forward Order</a>
                                </li>
                                <li class="nav-item lsp-item">
                                    <a class="nav-link lsp-link" id="delivery-tab" data-toggle="tab" href="#delivery"
                                        role="tab" aria-controls="delivery" aria-selected="false">Reverse Orders</a>
                                </li>
                            </ul>
                            <div class="tab-content lsp-tab-content" id="myTabContent">
                                <div class="tab-pane fade  show active" id="pickup" role="tabpanel"
                                    aria-labelledby="pickup-tab">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Customer Name</span></label>
                                                <input class="form-control" placeholder="" type="text"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Sales Channel</span></label>
                                                <input class="form-control" placeholder="" type="text"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Zone</span></label>
                                                <input class="form-control" placeholder="" type="text"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <div class="table-responsive">
                                                <table class="table table-striped" id="statementList-billing">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Date</th>
                                                            <th scope="col">Awb bill</th>
                                                            <th scope="col">Order ID</th>
                                                            <th scope="col">To Pin</th>
                                                            <th scope="col">From Pin</th>
                                                            <th scope="col">Volumetric</th>
                                                            {{-- <th scope="col">Base Charges</th>  --}}
                                                            <th scope="col">Actual Mass</th>
                                                            <th scope="col">RTO Charges</th>
                                                            {{-- <th scope="col">Weight Disc Charges</th> --}}
                                                            {{-- <th scope="col">Shipment Value</th>  --}}
                                                            {{-- <th scope="col">Revenue</th> --}}
                                                            <th scope="col">Transit Type</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="pagination_rounded">
                                                <ul>
                                                    <li>
                                                        <a href="#" class="prev"> <i class="fa fa-chevron-left"
                                                                aria-hidden="true"></i> </a>
                                                    </li>
                                                    <li><a href="#" class="active">1</a> </li>
                                                    <li class="hidden-xs"><a href="#">2</a> </li>
                                                    <li class="hidden-xs"><a href="#">3</a> </li>
                                                    <li class="hidden-xs"><a href="#">4</a> </li>
                                                    <li>
                                                        <a href="#" class="next"> <i class="fa fa-chevron-right"
                                                                aria-hidden="true"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="delivery" role="tabpanel"
                                    aria-labelledby="delivery-tab">

                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Customer Name</span></label>
                                                <input class="form-control" placeholder="" type="text"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Sales Channel</span></label>
                                                <input class="form-control" placeholder="" type="text"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Zone</span></label>
                                                <input class="form-control" placeholder="" type="text"
                                                    value="">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <div class="table-responsive">
                                                <table class="table table-striped w-100" id="statementList-billing-reverse">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Date</th>
                                                            <th scope="col">Awb bill</th>
                                                            <th scope="col">Order ID</th>
                                                            <th scope="col">To Pin</th>
                                                            <th scope="col">From Pin</th>
                                                            <th scope="col">Volumetric</th>
                                                            <th scope="col">Actual Mass</th>
                                                            <th scope="col">RTO Charges</th>
                                                            <th scope="col">Transit Type</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        $(document).ready(function() {
            $("#statementList-billing").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/lspbillings/table') }}",
                    data: function(d) {}
                },

                columns: [
                    {
                        data: 'start_date',
                        name: 'start_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'docket_no',
                        name: 'docket_no',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'delivery_pincode',
                        name: 'delivery_pincode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_pincode',
                        name: 'pickup_pincode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'volumetric_weight',
                        name: 'volumetric_weight',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'actual_mass',
                        name: 'actual_mass',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'rto_charges',
                        name: 'rto_charges',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'transit_type',
                        name: 'transit_type',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ]
            });

            $("#statementList-billing-reverse").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/lspbillings/reverse/table') }}",
                    data: function(d) {}
                },

                columns: [
                    {
                        data: 'start_date',
                        name: 'start_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'docket_no',
                        name: 'docket_no',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'delivery_pincode',
                        name: 'delivery_pincode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_pincode',
                        name: 'pickup_pincode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'volumetric_weight',
                        name: 'volumetric_weight',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'actual_mass',
                        name: 'actual_mass',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'rto_charges',
                        name: 'rto_charges',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'transit_type',
                        name: 'transit_type',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ]
            });

            $("#billreceivables-list").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [1, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/lsp-billings/bill-receivables') }}",
                    data: function(d) {}
                },

                columns: [
                    {
                        data: 'month',
                        name: 'month',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'delivery_count',
                        name: 'delivery_count',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'reverse_count',
                        name: 'reverse_count',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'rto_count',
                        name: 'rto_count',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'lost_count',
                        name: 'lost_count',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'others_count',
                        name: 'others_count',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'discount',
                        name: 'discount',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'totalAmounts',
                        name: 'totalAmounts',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ]
            });

        });
    </script>
    <script>
        // Chart 1
        var n = document.getElementById('earningChart').getContext('2d');
        var earningChart = new Chart(n, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    // label: 'RTO Status',
                    data: [0, 15, 30, 20, 22, 30],
                    fill: false,
                    borderColor: '#43B5F4',
                    tension: 0.1
                }, {
                    // label: 'RTO Status',
                    data: [0, 20, 10, 30, 20, 30, ],
                    fill: false,
                    borderColor: '#A1DEFF',
                    tension: 0.1
                }, {
                    // label: 'RTO Status',
                    data: [0, 14, 8, 15, 20, 10, ],
                    fill: false,
                    borderColor: '#3397D1',
                    tension: 0.1
                }]


            },
            options: {
                yAxes: [{
                    angleLines: {
                        display: false
                    }
                }]
            }

        });



        // Chart 2

        var s = document.getElementById('slabChart').getContext('2d');
        var slabChart = new Chart(s, {
            type: 'doughnut',
            data: {
                // labels: ['Out for Pickup', 'Pickup', 'Others',],
                datasets: [{
                    data: [15, 10, 5],
                    backgroundColor: [
                        '#43B5F4',
                        '#89CFF5',
                        '#D4EDFB'
                    ],
                    hoverOffset: 1,

                    borderWidth: 0
                }]
            },
            options: {
                rotation: -90,
                circumference: 180,
            }
        });
    </script>
@endsection