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

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<style>
    /* Change the background color of the pagination buttons */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background-color: #ffd4b2;  /* Default blue background */
        color: white;  /* White text */
        border: none;  /* Remove border */
        border-radius: 5px;  /* Rounded corners */
        padding: 5px 10px;  /* Padding for better button size */
        transition: background-color 0.3s ease;  /* Smooth transition for background-color */
    }

    /* Change the background color when hovering over pagination buttons */
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #ffd4b2;  /* Darker blue on hover */
        color: white;  /* Keep text white */
    }

    /* Change the color of the active pagination button */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #ffe6aa;  /* Green background for active page */
        color: white;  /* White text for active button */
        border-radius: 5px;  /* Keep rounded corners */
    }

    /* Add a different hover effect on the active page button (optional) */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background-color: #ffe6aa;  /* Darker green when hovering the active page button */
    }

    /* Optionally, change the disabled button style (if applicable) */
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        background-color: #fac69c;  /* Light gray for disabled buttons */
        color: rgba(238, 109, 16, 0.29);  /* Dark gray text */
        cursor: not-allowed;  /* Show the not-allowed cursor */
    }
</style>
@endsection
@section('customerbody')

        <div class="col-xl-8 col-lg-7 col-md-7">
            <div class="card">
                <h5 class="card-header">Usage Chart</h5>
             <div id="paymentChart"></div>
            </div>
        </div>

        <div class="col-xl-12 col-lg-7 col-md-7">
            <div class="card">
                <h5 class="card-header">Usage 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 id="paymentHistoryTable" class="table table-hover" style="width:100%">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Used (m3)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- Data will be populated here -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>

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

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

                $.ajax({
                    url: 'customer-usageHistory',
                    method: 'GET',
                    data: {
                        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 tbody");
                            tableBody.empty();
                            let dates = [];
                            let amounts = [];
                            paymentData.forEach(function(payment) {
                                let row = `<tr>
                                    <td>${payment.create_date}</td>
                                    <td>${payment.dailyUsage}</td>
                                </tr>`;
                                tableBody.append(row);
                                dates.push(payment.create_date);
                                amounts.push(payment.dailyUsage);
                            });

                            createColumnChart(dates, amounts);

                            $('#paymentHistoryTable').DataTable({
                                scrollY: '300px',
                                scrollCollapse: true,
                                paging: true,
                                pageLength: 10,
                                searching: false,
                                lengthChange: false,
                                info: true,
                                language: {
                                    paginate: {
                                        previous: 'Prev',
                                        next: 'Next',
                                        first: 'First',
                                        last: 'Last'
                                    },
                                    search: 'Filter:',
                                    lengthMenu: 'Show _MENU_ entries'
                                }
                            });
                        } 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: 'Used (m3)',
                        data: amounts
                    }],
                    chart: {
                        height: 350,
                        type: 'bar',
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '45%',
                        },
                    },
                    dataLabels: {
                        enabled: true,
                        formatter: function (val) {
                            return  val+ ' m3';
                        },
                        style: {
                            fontSize: '12px',
                            colors: ['#fff'],
                        },
                        background: {
                            enabled: true,
                            borderRadius: 4,
                            foreColor: '#fff',
                            padding: 4,
                        }
                    },
                    xaxis: {
                        categories: dates.map(date => date.substring(0, 6)),
                        title: {
                            text: 'Used Date',
                        },
                        labels: {
                            rotate: -45,
                        }
                    },
                    yaxis: {
                        title: {
                            text: 'Usage (m3)',
                        },
                        min: 0
                    },
                    fill: {
                        opacity: 1,
                    },
                    colors: ['#00C1D4'],
                    tooltip: {
                        enabled: true,
                        shared: true,
                        intersect: false
                    }
                };

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

            }
        });

    </script>
@endsection