@extends('users.layouts.index')

@section('content')
    <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">
        <!-- Invoice Table -->
        <div id="invoice-content">
            <p class="text-center py-4">Loading invoices...</p>
        </div>
    </div>

    <!-- Payment Modal -->
    <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50"
        style="display: none;">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold">Pay Invoice</h3>
                <button onclick="closePaymentModal()"
                    class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
            </div>

            <div class="mb-4">
                <p class="text-gray-600">Invoice No: <span id="modal-invoice-no" class="font-semibold"></span></p>
                <p class="text-gray-600">Amount: <span id="modal-amount" class="font-semibold text-green-600"></span></p>
            </div>

            <form id="invoice-payment-form">
                @csrf
                <input type="hidden" id="invoice-no" name="invoice_no">
                <input type="hidden" id="invoice-amount" name="amount">
                <input type="hidden" id="invoice-reference" name="reference">

                <div class="mb-4">
                    <label for="payment-phone" class="block text-sm font-medium text-gray-700 mb-2">
                        M-Pesa Phone Number
                    </label>
                    <input type="text" id="payment-phone" name="phone"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value="{{ auth('client')->user()->phone_number }}" placeholder="254XXXXXXXXX" required>
                    <small class="text-gray-500">Format: 254XXXXXXXXX</small>
                </div>

                <div class="flex gap-2">
                    <button type="button" onclick="closePaymentModal()"
                        class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
                        Cancel
                    </button>
                    <button type="submit"
                        class="flex-1 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
                        Pay Now
                    </button>
                </div>
            </form>

            <div id="payment-status" class="mt-3 text-sm text-center hidden"></div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            let table = null;

            // Simple notification function
            function showNotification(message, type = 'info') {
                const colors = {
                    'success': '#28a745',
                    'danger': '#dc3545',
                    'info': '#17a2b8',
                    'warning': '#ffc107'
                };

                const notification = $('<div>')
                    .css({
                        'position': 'fixed',
                        'top': '20px',
                        'right': '20px',
                        'background-color': colors[type] || colors['info'],
                        'color': 'white',
                        'padding': '15px 20px',
                        'border-radius': '5px',
                        'box-shadow': '0 4px 6px rgba(0,0,0,0.1)',
                        'z-index': '10000',
                        'max-width': '300px',
                        'animation': 'slideIn 0.3s ease-out'
                    })
                    .text(message)
                    .appendTo('body');

                setTimeout(function() {
                    notification.fadeOut(function() {
                        $(this).remove();
                    });
                }, 4000);
            }

            // Make showNotification global
            window.showNotification = showNotification;

            // Define formatDate function
            function formatDate(dateStr) {
                if (!dateStr || dateStr === 'N/A') return 'N/A';
                const date = new Date(dateStr);
                return date.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric'
                });
            }

            window.fetchInvoices = function() {
                $('#invoice-content').html('<p class="text-center py-4">Loading invoices...</p>');

                const urlParams = new URLSearchParams(window.location.search);
                let meterNumber = urlParams.get('meter_number');

                if (!meterNumber || meterNumber === '') {
                    meterNumber = $('#accountDropdown').val();
                }

                // Prepare AJAX request data
                let ajaxOptions = {
                    url: '/user/get-invoices',
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log('AJAX Success:', response);
                        if (response.success && Array.isArray(response.invoices)) {
                            let content = response.invoices.length > 0 ? `
                    <h4 class="mb-3">Invoices for Your Account</h4>
                    <div class="overflow-x-auto">
                        <table id="invoiceTable" class="display w-full">
                            <thead>
                                <tr>
                                    <th>Invoice No</th>
                                    <th>Invoice type</th>
                                    <th>Amount (KES)</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${response.invoices.map(invoice => `
                                    <tr class="border-b">
                                        <td class="py-4 text-center">${invoice.invoice_no}</td>
                                        <td class="text-center">${invoice.invoice_type}</td>
                                        <td class="text-center">${number_format(invoice.amount, 2)}</td>
                                        <td class="text-center">
                                            <span class="${invoice.status === 'paid' ? 'status-paid' : 'status-not-paid'}">
                                                ${invoice.status}
                                            </span>
                                        </td>
                                        <td class="text-center">${formatDate(invoice.created_at)}</td>
                                        <td class="text-center space-x-1">
                                            <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-2 py-1 rounded text-sm">VIEW</button>
                                            ${invoice.status !== 'paid' ? 
                                                `<button onclick="openPaymentModal('${invoice.id}', '${invoice.invoice_no}', '${invoice.amount}', '${invoice.meter_number}')" 
                                                    class="bg-green-100 hover:bg-green-200 text-green-800 px-2 py-1 rounded text-sm flex items-center gap-1 inline-flex">
                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M2 8.5H14.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M6 16.5H8" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M10.5 16.5H14.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M22 12.03V16.11C22 19.62 21.11 20.5 17.56 20.5H6.44C2.89 20.5 2 19.62 2 16.11V7.89C2 4.38 2.89 3.5 6.44 3.5H14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M20 3.5V9.5L22 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M20 9.5L18 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                    PAY
                                                </button>` 
                                                : 
                                                `<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-2 py-1 rounded text-sm hidden">PDF</button>`
                                            }
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                ` : '<p class="text-center py-4">No invoices found for your account.</p>';
                            $('#invoice-content').html(content).hide().fadeIn();
                            if (table) table.destroy();
                            if (response.invoices.length) table = $('#invoiceTable').DataTable({
                                paging: true,
                                searching: true,
                                ordering: true,
                                info: true,
                                pageLength: 10
                            });
                        } else {
                            $('#invoice-content').html(
                                '<p class="text-center py-4 text-red-600">Invalid response format.</p>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error:', status, error, xhr.responseText);
                        let message = 'Error loading invoices. Please try again.';
                        try {
                            const response = JSON.parse(xhr.responseText);
                            message = response.message || message;
                        } catch (e) {}
                        $('#invoice-content').html(
                            `<p class="text-center py-4 text-red-600">${message}</p>`);
                    }
                };

                // Add meter_number to the request if it exists
                if (meterNumber) {
                    ajaxOptions.data = {
                        meter_number: meterNumber
                    };
                }

                $.ajax(ajaxOptions);
            }

            fetchInvoices();

           // Handle invoice payment form submission
$('#invoice-payment-form').on('submit', function(e) {
    e.preventDefault();

    const phone = $('#payment-phone').val();
    const amount = Math.round(parseFloat($('#invoice-amount').val())); // Ensure whole number
    const reference = $('#invoice-reference').val();
    const invoiceId = $('#invoice-id').val();

    console.log('Payment data:', {
        phone,
        amount,
        reference,
        invoiceId
    });

    // Validate phone number
    if (!phone.match(/^254[0-9]{9}$/)) {
        showNotification('Invalid phone number format. Use 254XXXXXXXXX', 'warning');
        return;
    }

    // Validate amount
    if (isNaN(amount) || amount < 1) {
        showNotification('Invalid amount', 'warning');
        return;
    }

    // Disable submit button
    const submitBtn = $(this).find('button[type="submit"]');
    submitBtn.prop('disabled', true).text('Processing...');

    $.ajax({
        url: '{{ route('mpesa.c2b.initiate') }}',
        method: 'POST',
        data: {
            phone: phone,
            amount: amount, // Whole number
            reference: reference,
            invoice_id: invoiceId,
            _token: '{{ csrf_token() }}'
        },
        dataType: 'json',
        success: function(response) {
            console.log('Payment response:', response);

            submitBtn.prop('disabled', false).text('Pay Now');

            if (response.success) {
                showNotification('Payment initiated! Check your phone.', 'success');
                $('#payment-status')
                    .removeClass('hidden text-red-600')
                    .addClass('text-green-600')
                    .text('Payment initiated. Check your phone for M-Pesa prompt.');

                // Start polling for payment status
                if (response.CheckoutRequestID) {
                    setTimeout(function() {
                        checkPaymentStatus(response.CheckoutRequestID);
                    }, 10000);
                }
            } else {
                showNotification(response.message || 'Payment initiation failed', 'danger');
                $('#payment-status')
                    .removeClass('hidden text-green-600')
                    .addClass('text-red-600')
                    .text(response.message || 'Payment initiation failed');
            }
        },
        error: function(xhr) {
            console.error('Payment error:', xhr.responseText);

            submitBtn.prop('disabled', false).text('Pay Now');

            let errorMessage = 'Failed to initiate payment';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }

            showNotification(errorMessage, 'danger');
            $('#payment-status')
                .removeClass('hidden text-green-600')
                .addClass('text-red-600')
                .text(errorMessage);
        }
    });
});

            // Poll payment status
            function checkPaymentStatus(checkoutRequestId) {
                console.log('Checking payment status for:', checkoutRequestId);

                $.ajax({
                    url: '/checkStatus/' + checkoutRequestId,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        console.log('Status check response:', data);

                        if (data.success) {
                            if (data.status == "completed") {
                                showNotification('Payment successful! Refreshing...', 'success');
                                setTimeout(function() {
                                    closePaymentModal();
                                    fetchInvoices(); // Refresh invoice list
                                }, 2000);
                            } else if (data.status == "canceled") {
                                showNotification(data.error_message || 'Payment canceled',
                                    'danger');
                                $('#payment-status')
                                    .removeClass('hidden text-green-600')
                                    .addClass('text-red-600')
                                    .text(data.error_message || 'Payment was canceled');
                            } else {
                                // Still pending, check again
                                setTimeout(function() {
                                    checkPaymentStatus(checkoutRequestId);
                                }, 10000);
                            }
                        } else {
                            // Still pending, check again
                            setTimeout(function() {
                                checkPaymentStatus(checkoutRequestId);
                            }, 10000);
                        }
                    },
                    error: function(xhr) {
                        console.error('Status check error:', xhr.responseText);
                    }
                });
            }
        });

      // Open payment modal - Update this function
function openPaymentModal(invoiceId, invoiceNo, amount, meterNumber) {
    console.log('Opening payment modal:', {
        invoiceId,
        invoiceNo,
        amount,
        meterNumber
    });

    // Convert amount to whole number (round to nearest integer)
    const wholeAmount = Math.round(parseFloat(amount));

    $('#invoice-id').val(invoiceId);
    $('#invoice-reference').val(invoiceNo);
    $('#invoice-amount').val(wholeAmount);  // Use whole number
    $('#modal-invoice-no').text(invoiceNo);
    $('#modal-amount').text('KES ' + number_format(wholeAmount, 0)); // Show without decimals
    $('#payment-status').addClass('hidden').removeClass('text-green-600 text-red-600');

    $('#paymentModal').removeClass('hidden').css('display', 'flex');
}

        // Close payment modal
        function closePaymentModal() {
            $('#paymentModal').addClass('hidden').css('display', 'none');
            $('#invoice-payment-form')[0].reset();
            $('#payment-status').addClass('hidden');
        }

        // Close modal when clicking outside
        $(document).on('click', '#paymentModal', function(e) {
            if (e.target.id === 'paymentModal') {
                closePaymentModal();
            }
        });

        // Number format function
        if (typeof number_format === 'undefined') {
            function number_format(number, decimals, decPoint, thousandsSep) {
                number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
                const n = !isFinite(+number) ? 0 : +number;
                const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
                const sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep;
                const dec = (typeof decPoint === 'undefined') ? '.' : decPoint;
                let s = '';
                const toFixedFix = function(n, prec) {
                    const k = Math.pow(10, prec);
                    return Math.round(n * k) / k;
                };
                s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
                if (s[0].length > 3) {
                    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
                }
                if ((s[1] || '').length < prec) {
                    s[1] = s[1] || '';
                    s[1] += new Array(prec - s[1].length + 1).join('0');
                }
                return s.join(dec);
            }
        }

        // Add CSS animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from {
                    transform: translateX(400px);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
        `;
        document.head.appendChild(style);
    </script>
@endsection