@extends('layouts.app')
@section('title', __('Mpesa Transactions'))

@section('content')

<section class="content-header">
    <h1>@lang('Mpesa')
        <small>@lang('Transactions')</small>
    </h1>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- Main Card -->
            <div class="card card-white">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-money-bill-wave text-primary"></i>
                        @lang('Mpesa Transactions')
                    </h3>
                    <div class="card-tools">
                    
                </div>
                <!-- /.card-header -->
                
                <div class="card-body">
                    {{-- Filters --}}
                    <form method="GET" action="{{ route('mpesa.records') }}" class="mb-3">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <label class="mb-1">Search</label>
                                <input type="text"
                                       name="q"
                                       value="{{ $q ?? request('q') }}"
                                       class="form-control"
                                       placeholder="Search by TransID, Name, Invoice No...">
                            </div>

                            <div class="col-md-2 mb-2">
                                <label class="mb-1">Status</label>
                                <select name="status" class="form-control">
                                    <option value="">All</option>
                                    <option value="utilized" {{ (request('status') === 'utilized') ? 'selected' : '' }}>Utilized</option>
                                    <option value="notused"  {{ (request('status') === 'notused') ? 'selected' : '' }}>Not Used</option>
                                </select>
                            </div>

                            <div class="col-md-2 mb-2">
                                <label class="mb-1">Start Date</label>
                                <input type="date"
                                       name="start_date"
                                       value="{{ $startDate ?? request('start_date') }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-2 mb-2">
                                <label class="mb-1">End Date</label>
                                <input type="date"
                                       name="end_date"
                                       value="{{ $endDate ?? request('end_date') }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-2 mb-2 d-flex align-items-end" style="margin-top:20px;">
                                <button class="btn btn-primary me-2" type="submit">
                                    <i class="fa fa-filter"></i> Filter
                                </button>
                                <a class="btn btn-light" href="{{ route('mpesa.records') }}">
                                    <i class="fa fa-undo"></i> Reset
                                </a>
                            </div>
                        </div>
                    </form>
                    
                    <hr>

                    <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="rowCount">Show rows:</label>
                            <select id="rowCount" class="form-control">
                                <option value="25" selected>25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="250">250</option>
                                <option value="500">500</option>
                                <option value="1000">1000</option>
                                <option value="all">All</option>
                            </select>
                        </div>
                        <div class="col-md-10 text-right">
                            <small class="text-muted">
                                Showing {{ $transactions->firstItem() ?? 0 }} - {{ $transactions->lastItem() ?? 0 }} 
                                of {{ $transactions->total() ?? 0 }} transactions
                            </small>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>TransID</th>
                                    <th>TransTime</th>
                                    <th><i class="fas fa-coins" style="color:gold;"></i> Amount</th>
                                    <th>Name</th>
                                    <th>Amount Utilized</th>
                                    <th>Invoice No</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse($transactions as $index => $txn)
                                    @php
                                        $fullName = trim(collect([$txn->FirstName, $txn->MiddleName, $txn->LastName])
                                            ->filter()
                                            ->map(fn($n) => \Illuminate\Support\Str::ucfirst($n))
                                            ->implode(' '));

                                        $isUtilized = (($txn->status ?? '') === 'utilized');
                                    @endphp

                                    <tr>
                                        <td>{{ $transactions->firstItem() + $index }}</td>
                                        <td><code>{{ $txn->TransID }}</code></td>
                                        <td>
                                            @if(!empty($txn->TransTime))
                                                {{ \Carbon\Carbon::createFromFormat('YmdHis', $txn->TransTime)->format('d/m/y H:i') }}
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td><strong>KES {{ number_format((float)$txn->TransAmount, 2) }}</strong></td>
                                        <td>{{ $fullName ?: '—' }}</td>
                                        <td>
                                            @if($txn->utilized_amount)
                                                KES {{ number_format((float)$txn->utilized_amount, 2) }}
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($txn->invoice_no)
                                                {{ $txn->invoice_no }}
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($isUtilized)
                                                <span class="badge badge-success">Utilized</span>
                                            @else
                                                <span class="badge badge-warning">Pending</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">
                                            <div class="py-3">
                                                <i class="fas fa-inbox fa-2x text-muted"></i>
                                                <p class="text-muted mt-2">No transactions found.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    @if(isset($transactions) && method_exists($transactions, 'links'))
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div class="d-flex justify-content-center">
                                    {{ $transactions->appends(request()->query())->links() }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <!-- /.card-body -->
                
                <div class="card-footer text-muted">
                    <div class="row">
                        <div class="col-md-6">
                            <small>
                                <i class="fas fa-database"></i> 
                                Total Records: <strong>{{ $transactions->total() ?? 0 }}</strong>
                            </small>
                        </div>
                        
                    </div>
                </div>
                <!-- /.card-footer -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col-md-12 -->
    </div>
    <!-- /.row -->
</section>

<style>
    .card-white {
        background: #ffffff;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border-radius: 0.25rem;
    }
    
    .card-white .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        padding: 0.75rem 1.25rem;
    }
    
    .card-white .card-header .card-title {
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .card-white .card-body {
        padding: 1.25rem;
    }
    
    .card-white .card-footer {
        background-color: #f8f9fa;
        border-top: 1px solid #e9ecef;
        padding: 0.75rem 1.25rem;
    }
    
    .table thead.thead-light th {
        background-color: #e9ecef;
        color: #495057;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }
    
    .badge-success {
        background-color: #28a745;
        color: white;
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 700;
        border-radius: 0.25rem;
    }
    
    .badge-warning {
        background-color: #ffc107;
        color: #212529;
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 700;
        border-radius: 0.25rem;
    }
    
    .badge-info {
        background-color: #17a2b8;
        color: white;
        padding: 0.35em 0.65em;
        font-size: 0.75em;
        font-weight: 700;
        border-radius: 0.25rem;
    }
    
    code {
        background-color: #f8f9fa;
        padding: 0.15rem 0.4rem;
        border-radius: 0.2rem;
        font-size: 0.875rem;
        color: #e83e8c;
        word-break: break-all;
    }
    
    .row.mb-3 {
        margin-bottom: 1rem !important;
    }
    
    select#rowCount {
        padding: 6px;
        font-size: 14px;
        cursor: pointer;
    }
    
    select#rowCount:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .card-white .card-body {
            padding: 0.75rem;
        }
        
        .table-responsive {
            font-size: 0.875rem;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rowCountSelect = document.getElementById('rowCount');
        
        if (rowCountSelect) {
            const tableBody = document.querySelector('table tbody');
            
            if (tableBody) {
                const allRows = tableBody.querySelectorAll('tr');
                const isAllRows = allRows.length > 0 && allRows[0].colSpan !== 8; // Check if not empty row

                function updateVisibleRows() {
                    if (!isAllRows) return;
                    
                    let selectedValue = rowCountSelect.value;
                    let count = selectedValue === 'all' ? allRows.length : parseInt(selectedValue);

                    allRows.forEach((row, index) => {
                        row.style.display = index < count ? '' : 'none';
                    });
                }

                // Initial call
                if (isAllRows) {
                    updateVisibleRows();
                }

                // Update on change
                rowCountSelect.addEventListener('change', updateVisibleRows);
            }
        }
    });
</script>

@endsection