@extends('layout.customerapp')
@section('title','- Payment History')

@section('customerbody')
        <div class="col-xl-8 col-lg-4 col-md-4">
            <div class="card">
                <h5 class="card-header">Payment Chart</h5>
                <div class="payment-cart">
                    <div id="paymentChart"></div> <!-- This is where the chart will render -->
                </div>
            </div>
        </div>
        <div class="col-xl-12 col-lg-6 col-md-6">
            <div class="card">
                <h5 class="card-header">Payment History</h5>
                <input type="hidden" id="type" value="Home">
                <input type="hidden" id="meterno" value="{{ session('meterno') }}">
                <input type="hidden" id="account_no" value="{{ session('account_no') }}">
                <div class="table-responsive text-nowrap">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>Pay Data</th>
                            <th>Tran ID</th>
                            <th>Amount</th>
                        </tr>
                        </thead>
                        <tbody id="paymentHistoryTable" class="table-border-bottom-0">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        $(document).ready(function() {
            fetchPaymentHistory();

            function fetchPaymentHistory() {
                let type = $("#type").val();
                let meterno = $("#meterno").val();
                let account_no = $("#account_no").val();

                $.ajax({
                    url: 'customer-pay-history',
                    method: 'GET',
                    data: {
                        type: type,
                        meterno: meterno,
                        account_no: account_no,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        var response = JSON.parse(data);

                        if (response.statusCode === 200) {
                            let paymentData = response.statusMsg;
                            let tableBody = $("#paymentHistoryTable");
                            tableBody.empty();

                            // Prepare data for the chart
                            let dates = [];
                            let amounts = [];

                            // Loop through the data to fill both the table and chart data
                            paymentData.forEach(function(payment) {
                                let row = `<tr>
                                    <td>${payment.pay_date}</td>
                                    <td>${payment.bank_tran_id}</td>
                                    <td>${payment.base_amount}</td>
                                </tr>`;
                                tableBody.append(row);
                                dates.push(payment.pay_date);
                                amounts.push(payment.base_amount);
                            });
                            createColumnChart(dates, amounts);
                        } else {
                            alert('Failed to retrieve data');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error:', error);
                        alert('An error occurred while fetching data');
                    }
                });
            }

            function createColumnChart(dates, amounts) {
                var options = {
                    series: [{
                        name: 'Payment Amount',
                        data: amounts  // Y-axis data (payment amounts)
                    }],
                    chart: {
                        height: 280,
                        type: 'bar',  // Column chart (bar chart)
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,  // Keep the bars vertical
                            columnWidth: '45%',  // Adjust the width of the columns
                        },
                    },
                    dataLabels: {
                        enabled: true,  // Enable data labels
                        formatter: function (val) {
                            return '$' + val;  // Format the value with a dollar sign
                        },
                        style: {
                            fontSize: '12px',  // Font size for data labels
                            colors: ['#fff'],  // Color for the data labels
                        },
                        background: {
                            enabled: true,  // Enable background for data labels
                            borderRadius: 4,  // Radius for background
                            foreColor: '#fff',  // Text color for background
                            padding: 4,  // Padding around the label
                        }
                    },
                    xaxis: {
                        categories: dates,  // X-axis labels (payment dates)
                        title: {
                            text: 'Payment Date',
                        },
                        labels: {
                            rotate: -45,  // Rotate the date labels for better readability
                        }
                    },
                    yaxis: {
                        title: {
                            text: 'Amount ($)',
                        },
                        min: 0  // Start Y-axis from 0
                    },
                    fill: {
                        opacity: 1,
                    },
                    colors: ['#00C1D4'],  // Set the color for the columns
                    tooltip: {
                        enabled: true,
                        shared: true,
                        intersect: false
                    }
                };

                var chart = new ApexCharts(document.querySelector("#paymentChart"), options);
                chart.render();  // Render the chart
            }
        });

    </script>
@endsection