@extends('layouts.app')
@section('title','Payments Report — BlueBando v3')

@section('content')
<div class="container-fluid">
    <h1 class="mb-2">Payments Report</h1>
    <p class="text-muted mb-3">Malipo yote ya wateja kwa router ulizochagua.</p>

    {{-- Filters --}}
    <form method="GET" class="row g-2 mb-3">
        <div class="col-md-3">
            <label class="form-label">Router</label>
            <select name="router_id" class="form-select" onchange="this.form.submit()">
                <option value="">Router zote</option>
                @foreach($routers as $r)
                    <option value="{{ $r->id }}" {{ (string)$routerId === (string)$r->id ? 'selected' : '' }}>
                        {{ $r->name }}
                    </option>
                @endforeach
            </select>
        </div>

        @php $currentStatus = $status ?? 'all'; @endphp
        <div class="col-md-3">
            <label class="form-label">Hali ya Malipo</label>
            <select name="status" class="form-select" onchange="this.form.submit()">
                <option value="all"     {{ $currentStatus === 'all' ? 'selected' : '' }}>Zote</option>
                <option value="success" {{ $currentStatus === 'success' ? 'selected' : '' }}>Success</option>
                <option value="pending" {{ $currentStatus === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="failed"  {{ $currentStatus === 'failed' ? 'selected' : '' }}>Failed</option>
            </select>
        </div>

        <div class="col-md-2">
            <label class="form-label">Kuanzia</label>
            <input type="date" name="from" value="{{ $from }}" class="form-control" onchange="this.form.submit()">
        </div>
        <div class="col-md-2">
            <label class="form-label">Mpaka</label>
            <input type="date" name="to" value="{{ $to }}" class="form-control" onchange="this.form.submit()">
        </div>

        <div class="col-md-2 d-flex align-items-end">
            <a href="{{ route('reports.payments') }}" class="btn btn-outline-secondary w-100">Clear</a>
        </div>
    </form>

    {{-- Counters --}}
    <div class="row mb-3">
        <div class="col-md-3 mb-2">
            <div class="card h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Jumla ya Malipo</div>
                    <div class="h5 mb-0">{{ number_format($counters['total'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="card h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Success</div>
                    <div class="h5 mb-0 text-success">{{ number_format($counters['success'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="card h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Pending</div>
                    <div class="h5 mb-0 text-warning">{{ number_format($counters['pending'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-2">
            <div class="card h-100">
                <div class="card-body py-2">
                    <div class="small text-muted">Failed</div>
                    <div class="h5 mb-0 text-danger">{{ number_format($counters['failed'] ?? 0) }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-striped table-hover mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>Tarehe</th>
                        <th>Router</th>
                        <th>Kifurushi</th>
                        <th>Phone</th>
                        <th>Network</th>
                        <th>Reference</th>
                        <th>Gateway</th>
                        <th>Amount</th>
                        <th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($orders as $o)
                        @php $st = strtolower($o->status); @endphp
                        <tr>
                            <td>{{ $o->created_at?->format('Y-m-d H:i') }}</td>
                            <td>{{ $o->router->name ?? '-' }}</td>
                            <td>{{ $o->plan->name ?? '-' }}</td>
                            <td>{{ $o->phone }}</td>
                            <td>{{ $o->network ?? $o->operator }}</td>
                            <td>{{ $o->reference }}</td>
                            <td>{{ strtoupper($o->gateway) }}</td>
                            <td>{{ number_format($o->amount) }} {{ $o->currency }}</td>
                            <td>
                                <span class="badge
                                    @if($st==='success') bg-success
                                    @elseif($st==='pending') bg-warning text-dark
                                    @else bg-danger @endif">
                                    {{ ucfirst($o->status) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="text-center text-muted py-3">Hakuna rekodi za kuonyesha.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($orders->hasPages())
            <div class="card-footer py-2">
                {{ $orders->links() }}
            </div>
        @endif
    </div>
</div>
@endsection