@extends('layouts.master')
<style>
    .table-bordered td, .table-bordered th{ border:1px solid #00000042 !important; font-size: 13px !important; }
    .first-table td, .first-table th{ font-size: 13px !important; }
    .form-control { appearance: auto  !important; }
    @media print {
            #kt_header {
                display: none;
            }

            #kt_footer {
                display: none;
            }

            #backbtn,
            #yearDropdown,
            #dropdownMenuButton1,
            #printandyeardropdown,
            #truckreporthead {
                display: none;
            }
        }
     .dt-buttons{
        display:none !important;
    }
.select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
    color: #fff !important;
   }
</style>
@section('content')
@php
$PayType = config('custom.PayType');
$states = config('custom.states');
$driverType = config('custom.driverType');
$bad_zone = config('custom.bad_zone');
$vendors = config('custom.vendors');
$repairTypes = config('custom.repairTypes');
@endphp
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">
        <div class="flex-lg-row-fluid">
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xxl-250px mb-8 mb-lg-0 me-lg-4 me-5">
                    <form action="#" id="search_form">
                        <div class="card">
                            <div class="card-body">
                                <div class="position-relative">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="{{ $vendorsname ?? '' }}" id="search" placeholder="Search">
                                </div>
                                <div class="separator separator-dashed my-8"></div>
                                <div class="mb-10">
                                        <label class="fs-4 form-label fw-bold text-gray-900">Date Range</label>
                                        <div class="d-flex">
                                            <div id="range"
                                                style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                <i class="fa fa-calendar"></i>&nbsp;
                                                <span></span> <i class="fa fa-caret-down"></i>
                                            </div>
                                           @php
                                                $startDate = null;
                                                $endDate =  null;
                                            @endphp

                                            <!-- <input type="hidden" class="form-control sm" value="{{date('Y-m-d')}}" name="start_date" id="start_date">
                                            <input type="hidden" class="form-control sm" value="{{date('Y-m-d')}}" name="end_date" id="end_date"> -->
                                            <input type="hidden" class="form-control sm" value="{{ $startDate }}" name="start_date" id="start_date">
                                            <input type="hidden" class="form-control sm" value="{{ $endDate }}" name="end_date" id="end_date">
                                        </div>
                            </div>

                               <!-- <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Type</label>
                                    <select class="form-select form-control form-control-solid" name="exptype" id="exptype" data-control="select2" data-hide-search="true">
                                        <option value="">Please select</option>
                                        
                                    </select>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Paid Status</label>
                                    <select class="form-select form-control form-control-solid" name="paid_status" id="paid_status" data-control="select2" data-hide-search="true">
                                        <option value="">Please select</option>
                                        <option value="YES">YES</option>
                                        <option value="NO">NO</option>
                                    </select>
                                </div> -->

                            </div>

                            <div class="d-flex mt-5 mb-5" style="margin: 0 auto; !important">
                                <button type="button" id="submit" class="btn btn-primary me-5" onclick="changeExport()">Search</button>
                                <button type="button" id="clear" class="btn btn-primary me-5">Clear</button>
                            </div>
                                @php
                                    $expires_30_day = now()->addDays(30)->format('Y-m-d');
                                    $expired = now()->format('Y-m-d');
                                @endphp
                                   
                              <a href="?mode=past_30_day" type="button" class="btn btn-success btn-lg btn-block {{ request()->get('mode') == 'past_30_day' ? 'active' : '' }}" name="past_30_day" id="expires_30_day">
                                Open 30 Days+
                                </a>
                                <a href="?mode=past_60_day" type="button" class="btn mt-3 mb-3 btn-warning btn-lg btn-block {{ request()->get('mode') == 'past_60_day' ? 'active' : '' }}" name="past_60_day" id="expires_30_day">
                                Open 60 Days+
                                </a>
                                <a href="?mode=past_90_day" type="button" class="btn btn-danger btn-lg btn-block {{ request()->get('mode') == 'past_90_day' ? 'active' : '' }}" name="past_90_day" id="expires_30_day">
                                Open 90 Days+
                                </a>
                          
<!--
                                <a href="?mode=expired&date={{ $expired }}" type="button" class="btn btn-danger btn-lg btn-block mt-5 {{ request()->get('mode') == 'expired' ? 'active' : '' }}" name="expired" id="expired">
                                    Expired
                                </a> -->
                        </div>
                    </form>
                </div>
                <div class="flex-lg-row-fluid">
                    <div class="d-flex flex-wrap flex-stack mb-5">
                        <div class="d-flex flex-wrap align-items-center my-1">
                           
                             <h3>{{ 'Account Payable Report' }}  </h3>
                        </div>

                        <div class="card-body">
                            
                    <!-- <a href="?mode=past_30_day" type="button" class="btn btn-success btn-sm btn-lg btn-block {{ request()->get('mode') == 'past_30_day' ? 'active' : '' }}" name="past_30_day" id="expires_30_day">
                                Open 30 Days({{number_format($sum30)}})
                                </a>
                                <a href="?mode=past_60_day" type="button" class="btn btn-sm mt-3 mb-3 btn-warning btn-lg btn-block {{ request()->get('mode') == 'past_60_day' ? 'active' : '' }}" name="past_60_day" id="expires_30_day">
                                Open 60 Days({{number_format($sum60)}})
                                </a>
                                <a href="?mode=past_90_day" type="button" class="btn btn-sm btn-danger btn-lg btn-block {{ request()->get('mode') == 'past_90_day' ? 'active' : '' }}" name="past_90_day" id="expires_30_day">
                                Open 90 Days({{number_format($sum90)}})
                                </a> -->
                            <div class="float-end me-2">
                                <select name="downloadOptions" id="downloadOptions"
                                    class="form-select bg-primary form-select-solid form-select-sm"
                                    data-control="select2" data-hide-search="true" data-placeholder="Export">
                                    <option value="">Export</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="pdfHtml5">PDF</option>
                                    <option value="print">Print</option>
                                    <option value="reset">Reset</option>
                                    <option value="reload">Reload</option>
                                </select>
                           <!--  </div>
                            <a href="{{route('assets.trucks.allTruckReport')}}" class="btn btn-primary p-2 float-end me-1" style="font-size: 13px;">Truck Report</a>
                            <a href="{{route('assets.trucks.allDriverReport')}}" class="btn btn-primary p-2 float-end me-1" style="font-size: 13px;">Driver Report</a>   -->
                            </div>
                              
                              
                             
                        
                            <div class="float-end">

                                <!-- <a href="{{ route('assets.trailers.add') }}" class="btn btn-primary btn-sm me-2">Add</a> -->
                            </div>

                        </div>
                    </div>

                    <div class="tab-content">
                        <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                            <div class="card card-flush">
                                
                                <div class="pt-0">

                                    <div class="table-responsive p-5">
                                               @php
                                                $startdate = request('start_date') ?: date('Y-m-01');

                                                $monthYear = (new DateTime($startdate))->format('Y');
                                            @endphp

                                            <div style="margin:0 auto;text-align:center;">
                                                <h2>{{ 'Account Payable Report' }}  ({{ request('year') ? request('year') : $monthYear }})</h2>
                                            
                                            </div>
                                        <div  style="margin:0 auto;text-align:center;">
                                         <!-- <img alt="Logo" src="{{ asset('images/main_logo.png') }}" class="h-45px logo" /> -->
                                          <h3>{{ getAuthCompanyName() }}</h3>
                                           <span> {{ getAuthCarrierInfo()->BILL_TO }}</span>
                                        </div>     
                                     <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; margin-top:12px; margin-bottom:12px;">
                                        <tr>
                                            <!-- 📅 Left Date -->
                                            <td style="font-size:14px;border:none;">
                                                {{ date('m/d/Y h:i A') }}
                                            </td>

                                            <!-- 💰 Right Totals -->
                                           <td style="text-align:right;border:none;font-size:13px;">

                                                <span style="margin-right:15px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;">
                                                    30 Days: <b id="sum30">$0</b>
                                                </span>

                                                <span style="margin-right:15px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;">
                                                    60 Days: <b id="sum60">$0</b>
                                                </span>

                                                <span style="padding:4px 8px;border:1px solid #ccc;border-radius:4px;">
                                                    90+ Days: <b id="sum90">$0</b>
                                                </span>
                                            </td>

                                            <td style="text-align:right; font-size:14px;border:none;">
                                                <span id="total_income" class="font-weight-bold">$0</span>
                                            </td>
                                        </tr>
                                    </table>
                                        {!! $dataTable->table() !!}
                                          <div id="monthlyBarChart" style="height: 380px; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection()
@section('script')
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
//          document.getElementById('printButton').addEventListener('click', function() {
//             window.print();
//         });
//         document.getElementById('year').addEventListener('change', function() {
//         const selectedYear = this.value;
       
//         var year = selectedYear; 
//         var baseUrl = "{{ route('assets.customers.topTenCustomerReport') }}";
//         var fullUrl = baseUrl + "?year=" + encodeURIComponent(year);
//         location.href = fullUrl;
// });
        const table = $('#topTenCustomer-table');
        const urlParams = new URLSearchParams(window.location.search);
        const mode = urlParams.get('mode');
        const date = urlParams.get('date');
        $(document).ready(function(){
            var request_start_date = '{{ !empty(request()->get('start_date')) ? request()->get('start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('end_date')) ? request()->get('end_date') : '' }}';
            var request_type = '{{ !empty(request()->get('Type')) ? request()->get('Type') : '' }}';
            var request_paid_status = '{{ !empty(request()->get('paid_status')) ? request()->get('paid_status') : '' }}';
            if(request_start_date != ''){
                $('#start_date').val(request_start_date);
            }
            if(request_end_date != ''){
                $('#end_date').val(request_end_date);
            }
        
        });
       
        table.on('preXhr.dt', function(e, setting, data) {
            data.search = $('#search').val();
            data.start_date = $('#start_date').val();
            data.end_date = $('#end_date').val();
            data.status = $('#STATUS').val();
            
        });
         $('#submit').on('click', function() {
            table.DataTable().ajax.reload();
            return false;
        });
        
        $('#downloadOptions').on('change', function() {
    var downloadOptions = this.value;
    var datatableId = 'topTenCustomer-table';
    downloadDataTable(downloadOptions, datatableId);
});

function downloadDataTable(option, datatableId) {

   switch (option) {
       case 'excel':
           $('#' + datatableId).DataTable().buttons('.buttons-excel').trigger();
           break;

       case 'csv':
           $('#' + datatableId).DataTable().buttons('.buttons-csv').trigger();
           break;

       case 'print':
           $('#' + datatableId).DataTable().buttons('.buttons-print').trigger();
           break;

       case 'reset':
           $('#' + datatableId).DataTable().buttons('.buttons-reset').trigger();
           break;

       case 'reload':
           $('#' + datatableId).DataTable().buttons('.buttons-reload').trigger();
           break;

       case 'pdfHtml5':   
           downloadPdfAjax();
           break;
   }
}

                $(function() {
            // var start = moment().subtract(29, 'days');
            // var end = moment();

            var start = moment();
            var end = moment();

            function cb(start, end) {
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#range').daterangepicker({
                defaultDate: '',
                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')]
                }
            }, cb);

            var request_start_date = '{{ !empty(request()->get('start_date')) ? request()->get('start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('end_date')) ? request()->get('end_date') : '' }}';
            if(request_start_date != '' && request_end_date != ''){
                $('#start_date').val(request_start_date);
                $('#end_date').val(request_end_date);
                var d_start = moment(request_start_date);
                var d_end = moment(request_end_date);
                cb(d_start, d_end);
            }
        });


         $('#clear').on('click', function() {
            $('#search').val('');         

            $('#range span').html('');
            $('input[name="start_date"]').val('');
            $('input[name="end_date"]').val('');  

            var request_start_date = '{{ !empty(request()->get('start_date')) ? request()->get('start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('end_date')) ? request()->get('end_date') : '' }}';
        

            if(request_start_date != '' || request_end_date != ''){
                var route = '{{ route('assets.financeReport.payableReport') }}';
                var newUrl = route.split('?')[0];
                window.location.href = newUrl;
            } else{
                table.DataTable().ajax.reload();              
            }
            var mode = '{{ !empty(request()->get('mode')) ? request()->get('mode') : '' }}';
            if(mode != ''){
                var route = '{{ route('assets.financeReport.payableReport') }}';
                var newUrl = route.split('?')[0];
                window.location.href = newUrl;
            } else{
                table.DataTable().ajax.reload();
              
            }

        });

        function changeExport(){
          var value =   $("#downloadOptions").val();
           if(value != "" ){
             console.log("inside");
            $('#downloadOptions option[value=""]').prop('selected', true);
            $('#downloadOptions').trigger('change');
           }
           console.log("outside",value);

        }

    function downloadPdfAjax() {

        $.ajax({
            url: "{{ route('assets.financeReport.payableReportPdf') }}",
            type: "GET",
            data: {
                search: $('#search').val(),
                start_date: $('#start_date').val(),
                end_date: $('#end_date').val(),
                mode: @json(request('mode'))
            },
            xhrFields: {
                responseType: 'blob'
            },
            success: function (blob) {

                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = 'PayableReport.pdf';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        });
    }

let financeChart;
function renderChart(rows){

    let points = [];

    rows.forEach(row => {

        let amount = row.load_rate_sum
            ? parseFloat(row.load_rate_sum.replace(/[$,]/g,''))
            : 0;

        let name = row.NAME.replace(/(<([^>]+)>)/gi, "");

        points.push({
            label: name,
            y: amount
        });
    });

    if(!financeChart){

        financeChart = new CanvasJS.Chart("monthlyBarChart", {
            animationEnabled: true,
            theme: "light2",
            title:{
                text: "{{ getAuthCompanyName() }} - Customer Revenue"
            },
            axisX:{
                labelAngle: -40
            },
            axisY:{
                title: "Amount ($)",
                includeZero: true
            },
            data: [{
                type: "column",
                dataPoints: points
            }]
        });

    } else {

        financeChart.options.data[0].dataPoints = points;
    }

    financeChart.render();
}

/* ============================
   AUTO UPDATE CHART FROM AJAX
============================ */

table.on('xhr.dt', function (e, settings, json) {

    if(json && json.data){
        renderChart(json.data);
    }

});


    function getTotalIncome(){
            $.ajax({
                type: "GET",
                url: "{{ route('assets.financeReports.getlisttotal') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    search : $("#search").val(),
                    start_date:$("#start_date").val(),
                    end_date:$("#end_date").val(),
                    exptype:$("#exptype").val(),
                    paid_status:$("#paid_status").val(),
                    mode: @json(request('mode'))


                },
                success: function(response) {
                    var formattedTotalIncome = response.toLocaleString("en-US", { style: "currency", currency: "USD" });
                    $("#total_income").html("<b>Total Amount : $" + Number(response.total).toLocaleString());

                     $('#sum30').html('$' + Number(response.sum30).toLocaleString());
                    $('#sum60').html('$' + Number(response.sum60).toLocaleString());
                    $('#sum90').html('$' + Number(response.sum90).toLocaleString());
                    
                },
                error: function(xhr, status, error) {
                    $("#success-message").hide();
                }
            });
        }
    </script>

   {!! $dataTable->scripts() !!}
@endsection