@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.index') }}" 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' => request('start_date') ?? date('Y-m-d', strtotime('-30 days')),
                'end_date' => request('end_date') ?? date('Y-m-d')
            ]) }}" 
               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($transactions) && $transactions->count() > 0)
    <!-- 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">Transaction Type</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Amount</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Short Code</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Biller Number</th>
                    <th class="py-2 px-4 text-left border-b text-sm font-bold text-gray-700">Phone Number</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transactions as $value)
                <tr>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ $value->created_at->format('d M, Y') }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">
                            @if($value->transaction_type == 1)
                                {{ __('Payment') }}
                            @elseif($value->transaction_type == 2)
                                {{ __('Receipt') }}
                            @else
                                {{ __('Charge') }}
                            @endif
                        </td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ $value->amount }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ $value->business_short_code }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ $value->bill_ref_number }}</td>
                        <td class="py-2 px-4 border-b text-sm text-gray-700">{{ $value->phone_number }}</td>
                     
                    </tr>
                @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5" style="text-align: right;">Total:</th>
                        <th>
                            {{ number_format($transactions->sum('amount'), 2) }}
                        </th>
                        <th colspan="3"></th>
                    </tr>
                </tfoot>
         
        </table>
    </div>
    <div class="mt-4">
        {{ $transactions->withQueryString()->links('pagination::tailwind') }}
    </div>
    @else
        <div class="text-center py-8">
            <p class="text-gray-700">No transactions found within the date range.</p>
        </div>
    @endif
</div>


<script>
// $(document).ready(function() {
    // Target the specific VIEW button you have on your page
  

    // // 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