@extends('layouts.master')
@section('style')
<style>
.select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
    color: white !important;

}

.select2-selection__rendered {
    padding: 0px !important;
}

.select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__rendered {
    color: white !important;
}

.form-switch.form-check-solid .form-check-input:not(:checked) {
    background-color: #818181 !important;
}
</style>
@endsection
@section('content')
<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-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 class="fw-bold me-5 my-1">Vendor Summary Details
                            </h3>

                        </div>
                                      
          <div class="d-flex align-items-center justify-content-end gap-2 flex-wrap">

<input type="hidden" name="" id="invoice_status" value="">
    <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"
        style="width:120px;">
        <option value="">Export</option>
        <option value="excel">Excel</option>
        <option value="csv">CSV</option>
        <option value="print">Print</option>
        <option value="reset">Reset</option>
        <option value="reload">Reload</option>
    </select>

</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">
                                              <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>
                                </div>
                            </div>


                            <div class="card card-flush">
                                <div class="pt-0">
                                    
                                    <div class="bar-chart" id="chart">
                                       
                                        <div id="expenseBarChart" 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>


const table= $('#expense-table');
    table.on('preXhr.dt', function(e, setting, data) {
        data.vendorId = '{{ $id }}';      
        data.status = $('#invoice_status').val();
        getTotalIncome($('#invoice_status').val());
    });

$('#downloadOptions').on('change', function() {
    var downloadOptions = this.value;
    var datatableId = 'expense-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;
   }
}

    $(".btn-invoice").click(function(){
        $(".btn-invoice").removeClass("active");       
        $('#invoice_status').val($(this).data('status'));    
        
        table.DataTable().ajax.reload();
     
    })


let expenseChart;

function renderExpenseChart(rows){

    let bucket30 = 0;
    let bucket60 = 0;
    let bucket90 = 0;
    let bucket90plus = 0;

    if(!rows || rows.length === 0){
        console.log("No data for chart");
        return;
    }

    rows.forEach(row => {

        bucket30 += parseFloat(
            (row.days_30 ?? 0).toString().replace(/,/g,'')
        ) || 0;

        bucket60 += parseFloat(
            (row.days_60 ?? 0).toString().replace(/,/g,'')
        ) || 0;

        bucket90 += parseFloat(
            (row.days_90 ?? 0).toString().replace(/,/g,'')
        ) || 0;

        bucket90plus += parseFloat(
            (row.days_90_plus ?? 0).toString().replace(/,/g,'')
        ) || 0;

    });

    let points = [
        { label: "30 Days", y: bucket30 },
        { label: "60 Days", y: bucket60 },       
        { label: "90+ Days", y: bucket90plus }
    ];

    if(!expenseChart){
        expenseChart = new CanvasJS.Chart("expenseBarChart", {
            animationEnabled: true,
            theme: "light2",
            title:{ text: "Expense Aging Summary" },
            axisY:{ title: "Amount ($)", includeZero: true },
            data: [{
                type: "column",
                dataPoints: points
            }]
        });
    } else {
        expenseChart.options.data[0].dataPoints = points;
    }

    expenseChart.render();
}


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

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

});

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


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

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

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