@extends('agent.layouts.index')

@section('content')
    <!-- Invoice Table -->
    <h2 class="text-xl text-gray-500 font-semibold ml-4 mb-2">Invoices</h2>
    <div class="bg-white p-4 rounded-lg shadow-bottom-only border-t-2">
        <div class="overflow-x-auto"> <!-- Add this wrapper for the table -->
            <table id="invoiceTable" class="display w-full">
                <thead>
                    <tr>
                        <th>Invoice No.</th>
                        <th>Units</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="text-center" id="invoiceTableBody">
                    <!-- Table content will be populated by JavaScript -->
                </tbody>
            </table>
        </div> <!-- Close the wrapper div -->

        <!-- M-Pesa Payment Modal -->
        <div id="mpesaModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50">
            <div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-semibold text-gray-700">M-Pesa Payment</h3>
                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <form id="mpesaForm">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">
                            Phone Number (2547xxxxxxxx)
                        </label>
                        <input
                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                            id="phone" type="text" placeholder="Enter phone number" required>
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="amount">
                            Amount (KSh)
                        </label>
                        <input
                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100"
                            id="amount" type="number" placeholder="Amount" readonly>
                        <input type="hidden" id="invoiceId" value="">
                    </div>
                    <div class="flex items-center justify-between">
                        <button
                            class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
                            type="submit">
                            Pay Now
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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



            // Function to handle pay button click
            $(document).on('click', '.pay-btn', function(e) {
                e.preventDefault();

                // Get the row data
                const row = $(this).closest('tr');
                const invoiceNo = row.find('td:eq(0)').text();
                const amount = row.find('td:eq(2)').text().replace(/,/g,
                ''); // Remove commas from formatted number

                // Set the values in the modal
                $('#invoiceId').val(invoiceNo);
                $('#amount').val(parseFloat(amount));

                // Show the modal
                $('#mpesaModal').removeClass('hidden').addClass('flex');
            });

            // Close modal when clicking the close button
            $('#closeModal').on('click', function() {
                $('#mpesaModal').removeClass('flex').addClass('hidden');
            });

            // Close modal when clicking outside the modal content
            $('#mpesaModal').on('click', function(e) {
                if (e.target === this) {
                    $(this).removeClass('flex').addClass('hidden');
                }
            });

            // Handle M-Pesa form submission
            $('#mpesaForm').on('submit', async function(e) {
                e.preventDefault();

                const phone = $('#phone').val();
                const amount = $('#amount').val();
                const invoiceId = $('#invoiceId').val();

                if (!phone || !amount) {
                    alert('Please enter a valid phone number!');
                    return;
                }

                // Show loading state using Sweet Alert
                Swal.fire({
                    title: 'Processing Payment...',
                    text: 'Please wait while we send the STK Push request.',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    willOpen: () => {
                        Swal.showLoading();
                    }
                });

                try {
                    // Send STK push request
                    const response = await fetch('/api/mpesa/stkpush', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            phone: phone,
                            amount: amount,
                            reference: invoiceId,
                            invoice_id: invoiceId
                        })
                    });

                    const data = await response.json();

                    if (data.CheckoutRequestID) {
                        Swal.fire('STK Push Sent!', 'Check your phone to enter M-Pesa PIN.', 'success');

                        // Close the modal
                        $('#mpesaModal').removeClass('flex').addClass('hidden');

                        // Check payment status
                        await checkPaymentStatus(data.CheckoutRequestID, invoiceId);
                    } else {
                        Swal.fire('Error', data.error || 'Failed to send STK Push', 'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    Swal.fire('Error', 'Something went wrong!', 'error');
                }
            });

            // Function to check payment status
            async function checkPaymentStatus(checkoutRequestId, invoiceId) {
                let attempts = 10; // Check for 50 seconds (every 5s)

                while (attempts > 0) {
                    try {
                        const response = await fetch('/api/mpesa/status', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                checkout_request_id: checkoutRequestId,
                                invoice_id: invoiceId
                            })
                        });

                        const data = await response.json();

                        if (data.status === 'completed') {
                            Swal.fire({
                                title: 'Payment Successful!',
                                text: 'Receipt: ' + data.mpesa_receipt_number,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                // Refresh the invoices to show updated status
                                const selectedMeter = $('#accountDropdown').val();
                                if (selectedMeter) {
                                    fetchInvoices(selectedMeter);
                                }
                            });
                            return;
                        } else if (data.status === 'failed') {
                            Swal.fire('Payment Failed!', data.error_message || 'Transaction failed.', 'error');
                            return;
                        }

                        // Wait 5 seconds before checking again
                        await new Promise(resolve => setTimeout(resolve, 10000));
                        attempts--;
                    } catch (error) {
                        console.error('Error checking payment status:', error);
                        attempts--;
                    }
                }

                Swal.fire('Timeout', 'Payment verification timed out.', 'warning');
            }




            // Initialize DataTable
            $('#invoiceTable').DataTable({
                "paging": false,
                "searching": false,
                "ordering": false,
                "info": false
            });

            // Get the selected meter from the account dropdown
            const selectedMeter = $('#accountDropdown').val();
            if (selectedMeter) {
                // Fetch invoices for the selected meter
                fetchInvoices(selectedMeter);
            } else {
                $('#invoiceTableBody').html(
                    '<tr><td colspan="6" class="text-center py-4">Please select a meter</td></tr>');
            }

            // Listen for changes on the dropdown
            $('#accountDropdown').on('change', function() {
                const meterNumber = $(this).val();
                if (meterNumber) {
                    fetchInvoices(meterNumber);
                } else {
                    $('#invoiceTableBody').html(
                        '<tr><td colspan="6" class="text-center py-4">Please select a meter</td></tr>');
                }
            });

            // Function to fetch invoices
            function fetchInvoices(meterNumber) {
                $.ajax({
                    url: '/user/get-invoices',
                    method: 'GET',
                    data: {
                        meter_number: meterNumber
                    },
                    success: function(response) {
                        populateInvoiceTable(response.invoices);
                    },
                    error: function(error) {
                        console.error('Error fetching invoices:', error);
                        $('#invoiceTableBody').html(
                            '<tr><td colspan="6" class="text-center py-4">Error loading invoices</td></tr>'
                        );
                    }
                });
            }

            // Function to populate the invoice table
            function populateInvoiceTable(invoices) {
                let tableBody = $('#invoiceTableBody');
                tableBody.empty();

                if (invoices && invoices.length > 0) {
                    invoices.forEach(function(invoice) {
                        const invoiceNo = invoice.invoice_no || invoice.invoiceNo || 'N/A';
                        const units = invoice.units || 0;
                        const amount = parseFloat(invoice.amount || 0).toLocaleString('en-US', {
                            minimumFractionDigits: 2
                        });
                        const status = invoice.status || 'N/A';
                        const createdDate = new Date(invoice.created_at).toLocaleDateString('en-US', {
                            month: 'long',
                            day: 'numeric',
                            year: 'numeric'
                        });

                        let row = `
                        <tr class="py-4">
                            <td>${invoiceNo}</td>
                            <td>${units}</td>
                            <td>${amount}</td>
                            <td><span class="status-${status.toLowerCase()}">${status}</span></td>
                            <td>${createdDate}</td>
                            <td class="action-buttons"></td>
                        </tr>
                    `;
                        tableBody.append(row);
                    });

                    // Add action buttons based on status
                    addActionButtonsToInvoiceRows();
                } else {
                    tableBody.html('<tr><td colspan="6" class="text-center py-4">No invoices found</td></tr>');
                }
            }

            // Function to add action buttons to invoice rows
            function addActionButtonsToInvoiceRows() {
                $('#invoiceTable tbody tr').each(function() {
                    const statusText = $(this).find('td:eq(3) span').text().trim().toLowerCase();
                    const actionButtonsCell = $(this).find('.action-buttons');

                    // Clear any existing buttons
                    actionButtonsCell.empty();

                    if (statusText === 'paid') {
                        // If the status is "Paid", show the "VIEW" and "PDF" buttons
                        actionButtonsCell.append(
                            '<a href="#" class="view-btn mr-2" title="View Invoice">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bg-blue-100 p-1 rounded">' +
                            '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>' +
                            '<circle cx="12" cy="12" r="3"></circle>' +
                            '</svg>' +
                            '</a>'
                        );
                        actionButtonsCell.append(
                            '<a href="#" class="pdf-btn" title="Download PDF">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1E3A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bg-gray-200 p-1 rounded">' +
                            '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>' +
                            '<polyline points="14 2 14 8 20 8"></polyline>' +
                            '<line x1="12" y1="18" x2="12" y2="12"></line>' +
                            '<line x1="9" y1="15" x2="15" y2="15"></line>' +
                            '</svg>' +
                            '</a>'
                        );
                    } else if (statusText === 'not paid' || statusText === 'unpaid') {
                        // If the status is "Not Paid" or "Unpaid", show the "PAY INVOICE", "VIEW", and "PDF" buttons
                        actionButtonsCell.append(
                            '<a href="#" class="pay-btn mr-2" title="Pay Invoice">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#047857" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bg-green-100 p-1 rounded">' +
                            '<rect x="2" y="5" width="20" height="14" rx="2"></rect>' +
                            '<line x1="2" y1="10" x2="22" y2="10"></line>' +
                            '</svg>' +
                            '</a>'
                        );
                        actionButtonsCell.append(
                            '<a href="#" class="view-btn mr-2" title="View Invoice">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bg-blue-100 p-1 rounded">' +
                            '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>' +
                            '<circle cx="12" cy="12" r="3"></circle>' +
                            '</svg>' +
                            '</a>'
                        );
                        actionButtonsCell.append(
                            '<a href="#" class="pdf-btn" title="Download PDF">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1E3A8A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bg-gray-200 p-1 rounded">' +
                            '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>' +
                            '<polyline points="14 2 14 8 20 8"></polyline>' +
                            '<line x1="12" y1="18" x2="12" y2="12"></line>' +
                            '<line x1="9" y1="15" x2="15" y2="15"></line>' +
                            '</svg>' +
                            '</a>'
                        );
                    }
                });
            }

            // Handle action button clicks
            $(document).on('click', '.view-btn', function(e) {
                e.preventDefault();
                // Add your view invoice functionality here
                // For example, open a modal with invoice details
            });

            $(document).on('click', '.pdf-btn', function(e) {
                e.preventDefault();
                // Add your PDF download functionality here
            });
        });
    </script>
@endsection