@extends('users.layouts.index')

@section('content')  

<!-- Generate Statement Section -->
<div class="mb-6">
    <h2 class="text-xl font-semibold mb-4">Generate Statement</h2>
    <form id="statementForm" action="{{ route('statements.generate') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <input type="date" name="start_date" id="start_date"
            class="block w-full bg-white border border-gray-300 text-gray-700 py-3 px-4 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
            value="{{ $startDate ?? date('Y-m-d', strtotime('-30 days')) }}">
            
        <input type="date" name="end_date" id="end_date"
            class="block w-full bg-white border border-gray-300 text-gray-700 py-3 px-4 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
            value="{{ $endDate ?? date('Y-m-d') }}">
            
        <input type="hidden" id="selectedMeterNumber" name="meter_number" 
            value="{{ $selectedMeter->meter_number ?? $meters->first()->meter_number ?? '' }}">
            
        <div class="flex space-x-2">
            <button type="submit" id="view-statement-btn" class="bg-blue-100 text-blue-700 py-1 px-2 rounded w-full md:w-auto">VIEW</button>
            <a href="{{ route('statements.pdf', [
                    'start_date' => $startDate ?? date('Y-m-d', strtotime('-30 days')),
                    'end_date' => $endDate ?? date('Y-m-d'),
                    'meter_number' => $selectedMeter->meter_number ?? $meters->first()->meter_number ?? ''
                ]) }}" 
               class="bg-gray-200 text-blue-900 py-1 px-2 rounded w-full md:w-auto text-center">PDF</a>
        </div>
    </form>
</div>

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    @if(isset($allTransactions))
    <!-- Statement Details -->
    <div class="mb-6 statement-details">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
               <img src="/images/fpos.png" alt="purewellness logo" width="12%" height="12%">  
                <p>Purewellness</p>
                <p>P.O. Box 47419 - 00100</p>
                <p>Nairobi, Kenya 00100</p>
            </div>
            <div class="text-left md:text-right">
                <p>Start Date: <span id="statementStartDate">{{ date('F d, Y', strtotime($startDate)) }}</span></p>
                <p>End Date: <span id="statementEndDate">{{ date('F d, Y', strtotime($endDate)) }}</span></p>
                <p>Account #: <span id="statementAccountNumber">{{ $selectedMeter->meter_number ?? $meters->first()->meter_number ?? 'N/A' }}</span></p>
                <h1 class="text-4xl font-bold mt-4">STATEMENT</h1>
            </div>
        </div>
        <div class="mt-6">
            <p>{{ auth('client')->user()->name }}</p>
            <p>{{ auth('client')->user()->building }}</p>
            <p>{{ auth('client')->user()->location }}.</p>
        </div>
    </div>

    <!-- Transaction Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white border border-gray-300 transaction-table">
            <thead class="bg-gray-100">
                <tr>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Date</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Description</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Reference</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Debit</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Credit</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Balance</th>
                </tr>
            </thead>
            <tbody>
                @php 
                    $totalDebits = 0;
                    $totalCredits = 0;
                    $runningBalance = 0;
                @endphp
                
                @forelse($allTransactions as $transaction)
                    @php
                        $isDebit = $transaction->type === 'invoice';
                        $amount = $transaction->amount;
                        if($isDebit) {
                            $totalDebits += $amount;
                            $runningBalance += $amount;
                        } else {
                            $totalCredits += $amount;
                            $runningBalance -= $amount;
                        }
                    @endphp
                    <tr>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ date('F d, Y', strtotime($transaction->created_at)) }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ ucfirst($transaction->type) }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700"># {{ $transaction->reference_number }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ $isDebit ? 'Ksh ' . number_format($amount, 2) : '-' }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ !$isDebit ? 'Ksh ' . number_format($amount, 2) : '-' }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">Ksh {{ number_format(abs($runningBalance), 2) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="py-4 text-center text-sm text-gray-700">No transactions found for the selected period.</td>
                    </tr>
                @endforelse
            </tbody>
            <tfoot class="bg-gray-100">
                <tr>
                    <td colspan="3" class="py-2 px-4 text-right text-sm font-medium text-gray-700 border-b"></td>
                    <td class="py-2 px-4 text-sm font-bold text-gray-700 border-b">Total Debits</td>
                    <td class="py-2 px-4 text-sm font-bold text-gray-700 border-b">Total Credits</td>
                    <td class="py-2 px-4 text-sm font-bold text-gray-700 border-b">Amount Due</td>
                </tr>
                <tr>
                    <td colspan="3" class="py-2 px-4 text-right text-sm font-medium text-gray-700 border-b"></td>
                    <td class="py-2 px-4 text-sm text-gray-700 border-b" id="totalDebits">Ksh {{ number_format($totalDebits, 2) }}</td>
                    <td class="py-2 px-4 text-sm text-gray-700 border-b" id="totalCredits">Ksh {{ number_format($totalCredits, 2) }}</td>
                    <td class="py-2 px-4 text-sm text-gray-700 border-b" id="amountDue">Ksh {{ number_format(max(0, $runningBalance), 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @else
        <div class="text-center py-8">
            <p class="text-gray-700">Please select a date range and click VIEW to generate your statement.</p>
        </div>
    @endif
</div>


<script>
$(document).ready(function() {
    // Target the specific VIEW button you have on your page
    $('.view-btn, button:contains("VIEW")').on('click', function(e) {
        e.preventDefault();
        
        const meterNumber = $('#selectedMeterNumber').val() || $('#accountDropdown').val();
        const startDate = $('input[name="start_date"]').val() || $('input[type="date"]:eq(0)').val();
        const endDate = $('input[name="end_date"]').val() || $('input[type="date"]:eq(1)').val();
        
        console.log('Statement request:', { meterNumber, startDate, endDate });
        
        if (!startDate || !endDate) {
            alert('Please select both start and end dates');
            return;
        }
        
        // Show loading indicator
        if ($('.transaction-table').length) {
            $('.transaction-table tbody').html('<tr><td colspan="6" class="py-4 text-center">Loading transactions...</td></tr>');
        } else {
            $('.container').append('<div class="text-center py-4">Loading transactions...</div>');
        }
        
        // Fetch statement data via AJAX
        $.ajax({
            url: '/user/get-statement-data',
            method: 'GET',
            data: { 
                meter_number: meterNumber,
                start_date: startDate,
                end_date: endDate
            },
            success: function(response) {
                // If we get a successful response, reload the page with the parameters
                // This is a fallback approach in case the AJAX update doesn't work
                window.location.href = '/user/statements/generate?start_date=' + startDate + 
                                        '&end_date=' + endDate + 
                                        '&meter_number=' + meterNumber;
            },
            error: function(xhr) {
                console.error('Error fetching statement data:', xhr);
                alert('Error loading statement data. Please try again.');
            }
        });
    });

    // Also handle direct form submission
    $('form').on('submit', function(e) {
        // Make sure the meter number is included
        const meterNumber = $('#selectedMeterNumber').val() || $('#accountDropdown').val();
        if (meterNumber) {
            // Add the meter number as a hidden input if it doesn't exist
            if (!$('input[name="meter_number"]').length) {
                $(this).append('<input type="hidden" name="meter_number" value="' + meterNumber + '">');
            } else {
                $('input[name="meter_number"]').val(meterNumber);
            }
        }
    });

    // Update the account number display when a meter is selected
    $('#accountDropdown').change(function() {
        const selectedMeterNumber = $(this).val();
        $('#selectedMeterNumber').val(selectedMeterNumber);
        if ($('#statementAccountNumber').length) {
            $('#statementAccountNumber').text(selectedMeterNumber);
        }
    });

    // Initialize with the default selected meter
    const initialMeter = $('#accountDropdown').val();
    if (initialMeter) {
        $('#selectedMeterNumber').val(initialMeter);
        if ($('#statementAccountNumber').length) {
            $('#statementAccountNumber').text(initialMeter);
        }
    }
});
</script>

@endsection