@extends('layout.customerapp')
@section('title','- Home')
<style>
    #speedometer .wrapper {
        width: 500px;
        height: 250px;
        border: 1px solid red;
        border-top-left-radius: 360px;
        border-top-right-radius: 360px;
        overflow: hidden;
        position: relative;
    }

    #speedometer .wrapper .indicator-wrapper {
        position: absolute;
        left: 10%;
        top: 20%;
        width: 80%;
        height: 80%;
        border-top-left-radius: 360px;
        border-top-right-radius: 360px;
        background-color: #ffffff;
        z-index: 400;
    }

    #speedometer .wrapper .bar {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-origin: bottom center;
    }

    #speedometer .wrapper .bar-1 {
        top: 0;
        left: 0;
        z-index: 200;
        transform: rotate(-140deg);
        /* background-color: rgb(114, 114, 238); */
        background-color: #97de97;
    }

    #speedometer .wrapper .bar-2 {
        top: 0;
        right: 0;
        z-index: 150;
        transform: rotate(-90deg);
        background-color: #68b664;
    }

    #speedometer .wrapper .bar-3 {
        top: 0;
        left: 0;
        z-index: 100;
        transform: rotate(-40deg);
        background-color: #ff702f;
    }

    #speedometer .wrapper .bar-4 {
        top: 0;
        left: 0;
        z-index: 0;
        transform: rotate(30deg);
        background-color: #bb0000;
    }
</style>
@section('customerbody')


    <!-- User Profile Content -->

    <div class="col-xl-8 col-lg-7 col-md-7">
        <!-- Activity Timeline -->
        <div class="card">
            <h5 class="card-header">Last Recharge 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>
        <!--/ Activity Timeline -->
    </div>
    <!--/ User Profile Content -->
@endsection

@section('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 data = response.statusMsg
                            let tableBody = $("#paymentHistoryTable");
                            tableBody.empty();
                            data.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);
                            });
                        } else {
                            alert('Failed to retrieve data');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error:', error);
                        alert('An error occurred while fetching data');
                    }
                });
            }
        });
    </script>
@endsection