@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 mb-4">
                        <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-3">
                            <div class="form-group custom-form-group">
                                <label class="form-label">Year</label>
                                <select class="form-control year" id="total-earnings-chart">
                                                                          <option value="2025">2025</option>
                                                                          <option value="2024">2024</option>
                                                                          <option value="2023">2023</option>
                                                                          <option value="2022">2022</option>
                                                                          <option value="2021">2021</option>
                                                                          <option value="2020">2020</option>
                                                                          <option value="2019">2019</option>
                                                                          <option value="2018">2018</option>
                                                                          <option value="2017">2017</option>
                                                                          <option value="2016">2016</option>
                                                                          <option value="2015">2015</option>
                                                                          <option value="2014">2014</option>
                                                                          <option value="2013">2013</option>
                                                                          <option value="2012">2012</option>
                                                                          <option value="2011">2011</option>
                                                                          <option value="2010">2010</option>
                                                                          <option value="2009">2009</option>
                                                                          <option value="2008">2008</option>
                                                                          <option value="2007">2007</option>
                                                                          <option value="2006">2006</option>
                                                                          <option value="2005">2005</option>
                                                                          <option value="2004">2004</option>
                                                                          <option value="2003">2003</option>
                                                                          <option value="2002">2002</option>
                                                                          <option value="2001">2001</option>
                                                                          <option value="2000">2000</option>
                                                                    </select>
                            </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 class="title-section pt-0">
                        <p>Slab Discount</p>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <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=""> 0-5000
                                                Ships 0%
                                            </p>
                                            <p class="mb-0"><img src="/assets/images/lspdot2.png" alt=""> 5001-10000
                                                Ships 0.25%
                                            </p>
                                            <p class="mb-0"><img src="/assets/images/lspdot3.png" alt=""> 10001-20000
                                                Ships 0.35%
                                            </p>
                                            <p class="mb-0"><img src="/assets/images/lspdot3.png" alt=""> 20001-50000
                                                Ships 0.45%
                                            </p>
                                            <p class="mb-0"><img src="/assets/images/lspdot3.png" alt=""> 50001+
                                                Ships 0.55%
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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-3">
                            <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">
                            <div class="form-group custom-form-group">
                                <label class="form-label">Year From</label>
                                <select class="form-control year_from" name="year_from">
                                                                          <option value="2024">2024</option>
                                                                          <option value="2023">2023</option>
                                                                          <option value="2022">2022</option>
                                                                          <option value="2021">2021</option>
                                                                          <option value="2020">2020</option>
                                                                          <option value="2019">2019</option>
                                                                          <option value="2018">2018</option>
                                                                          <option value="2017">2017</option>
                                                                          <option value="2016">2016</option>
                                                                          <option value="2015">2015</option>
                                                                          <option value="2014">2014</option>
                                                                          <option value="2013">2013</option>
                                                                          <option value="2012">2012</option>
                                                                          <option value="2011">2011</option>
                                                                          <option value="2010">2010</option>
                                                                          <option value="2009">2009</option>
                                                                          <option value="2008">2008</option>
                                                                          <option value="2007">2007</option>
                                                                          <option value="2006">2006</option>
                                                                          <option value="2005">2005</option>
                                                                          <option value="2004">2004</option>
                                                                          <option value="2003">2003</option>
                                                                          <option value="2002">2002</option>
                                                                          <option value="2001">2001</option>
                                                                          <option value="2000">2000</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group custom-form-group">
                                <label class="form-label">Year To</label>
                                <select class="form-control year_to" name="year_to">
                                                                          <option value="2025">2025</option>
                                                                          <option value="2024">2024</option>
                                                                          <option value="2023">2023</option>
                                                                          <option value="2022">2022</option>
                                                                          <option value="2021">2021</option>
                                                                          <option value="2020">2020</option>
                                                                          <option value="2019">2019</option>
                                                                          <option value="2018">2018</option>
                                                                          <option value="2017">2017</option>
                                                                          <option value="2016">2016</option>
                                                                          <option value="2015">2015</option>
                                                                          <option value="2014">2014</option>
                                                                          <option value="2013">2013</option>
                                                                          <option value="2012">2012</option>
                                                                          <option value="2011">2011</option>
                                                                          <option value="2010">2010</option>
                                                                          <option value="2009">2009</option>
                                                                          <option value="2008">2008</option>
                                                                          <option value="2007">2007</option>
                                                                          <option value="2006">2006</option>
                                                                          <option value="2005">2005</option>
                                                                          <option value="2004">2004</option>
                                                                          <option value="2003">2003</option>
                                                                          <option value="2002">2002</option>
                                                                          <option value="2001">2001</option>
                                                                          <option value="2000">2000</option>
                                                                    </select>
                            </div>
                        </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>
                    </div>
                </div>
            </div>
            <div class="row py-4 py-sm-5">
                <div class="col-md-6" style="display:none">
                    <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-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-3">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Customer Name</span></label>
                                                <input class="form-control forward_customer_name" placeholder="" name="forward_customer_name" 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-3">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Zone</span></label>
                                                <input class="form-control forward_zone" placeholder="" name="forward_zone" 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-3">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Customer Name</span></label>
                                                <input class="form-control reverse_customer_name" placeholder="" name="reverse_customer_name" 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-3">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Zone</span></label>
                                                <input class="form-control reverse_zone" placeholder="" name="reverse_zone" 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() {
            var forward_customer_name='';
            var forward_zone='';
            $('.forward_customer_name').keyup(function() {
                forward_customer_name = $(this).val();
                $("#statementList-billing").DataTable().draw(true);
            });
            $('.forward_zone').keyup(function() {
                forward_zone = $(this).val();
                $("#statementList-billing").DataTable().draw(true);
            });

            $("#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) {
                        d.customer_name=forward_customer_name;
                        d.zone=forward_zone;
                    }
                },

                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'
                    },
                ]
            });

            var reverse_customer_name='';
            var reverse_zone='';

            $('.reverse_customer_name').keyup(function() {
                reverse_customer_name = $(this).val();
                $("#statementList-billing-reverse").DataTable().draw(true);
            });
            $('.reverse_zone').keyup(function() {
                reverse_zone = $(this).val();
                $("#statementList-billing-reverse").DataTable().draw(true);
            });
            
            $("#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) {
                        d.customer_name=reverse_customer_name;
                        d.zone=reverse_zone;
                    }
                },

                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'
                    },
                ]
            });

            var year_from='';
            var year_to='';

            $('.year_from').change(function() {
                year_from = $(this).val();
                $("#billreceivables-list").DataTable().draw(true);
            });
            $('.year_to').change(function() {
                year_to = $(this).val();
                $("#billreceivables-list").DataTable().draw(true);
            });
    
            let billreceivablesList = $("#billreceivables-list").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                paging: false,
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [1, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('/lsp-billings/bill-receivables') }}",
                    data: function(d) {
                        d.year_from=year_from;
                        d.year_to=year_to;
                    }
                },

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

        });
    </script>
    <script>
        $(function(){
           billingTotalEarningsChart1();

           $('.year').change(function(){
                var targetId = $(this).attr('id');
                targetId = targetId.split('-');
                targetId = targetId[0]+'-'+targetId[1];
                switch(targetId){
                    case 'total-earnings':
                        billingTotalEarningsChart1();
                        break;
                }
            });
        });

        //TotalEarnings chart
        var n = document.getElementById('earningChart').getContext('2d');
        var earningChart = new Chart(n, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov','Dec'],
                datasets: [{
                    //label: 'RTO Status',
                    data: [0,0,0,0,0,0,0,0,0,0,0,0],
                    fill: false,
                    borderColor: '#43B5F4',
                    tension: 0.1
                }, {
                    //label: 'RTO Status',
                    data: [0,0,0,0,0,0,0,0,0,0,0,0],
                    fill: false,
                    borderColor: '#A1DEFF',
                    tension: 0.1
                }, {
                    //label: 'RTO Status',
                    data: [0,0,0,0,0,0,0,0,0,0,0,0],
                    fill: false,
                    borderColor: '#3397D1',
                    tension: 0.1
                }]
            },
            options: {
                yAxes: [{
                    angleLines: {
                        display: false
                    }
                }]
            }
        });

        
        function billingTotalEarningsChart1(){
            $.ajax({
                url: "{{ url('/lsp/billing-total-earnings-graph') }}",
                type: "POST",
                data: {
                    'year' : $('#total-earnings-chart').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    earningChart.data.labels = data.data.labels;
                    earningChart.data.datasets = [];

                    $.each(data.data.count, function(key, val) {
                        earningChart.data.datasets.push({
                            label: Object.keys(val)[0],
                            data: Object.values(val)[0],
                            borderColor: val.bcolor,
                            //borderWidth: 0,
                            tension: 0.1,
                            fill: false,
                        });
                    });

                    earningChart.update();
                }
            });
        }

        //End TotalEarnings chart




        // Chart 2
        var s = document.getElementById('slabChart').getContext('2d');
        var slabChart = new Chart(s, {
            type: 'doughnut',
            data: {
                //labels: ['0-5000', '5001-10000', '10001-20000','10001-20000','20001-50000','50001+'],
                datasets: [{
                    data: [0, 0.25, 0.35,0.45,0.55],
                    backgroundColor: [
                        '#18B0ED',
                        '#1189B9',
                        '#127DA9',
                        '#0E6588',
                        '#0B5877'
                    ],
                    hoverOffset: 1,
                    borderWidth: 0
                }]
            },
            options: {
                rotation: -90,
                circumference: 180,
            }
        });

$(function(){

    $('.date_range').daterangepicker({
        locale: {
            format: 'DD/MM/YYYY'
        },
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                'month').endOf('month')],
        },
        autoApply: true,
    });
    

});

    </script>
@endsection