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

@section('content')
<div class="container-fluid">
    <h1 class="mb-2">Vouchers Report</h1>
    <p class="text-muted mb-3">Orodha ya vocha zote zilizoundwa na mfumo.</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 Vocha</label>
            <select name="status" class="form-select" onchange="this.form.submit()">
                <option value="all"     {{ $currentStatus === 'all' ? 'selected' : '' }}>Zote</option>
                <option value="unused"  {{ $currentStatus === 'unused' ? 'selected' : '' }}>Bado (unused)</option>
                <option value="used"    {{ $currentStatus === 'used' ? 'selected' : '' }}>Imetumika (used)</option>
                <option value="expired" {{ $currentStatus === 'expired' ? 'selected' : '' }}>Ime-expire</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.vouchers') }}" 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 Vocha</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">Bado (unused)</div>
                    <div class="h5 mb-0 text-primary">{{ number_format($counters['unused'] ?? 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">Imetumika (used)</div>
                    <div class="h5 mb-0 text-success">{{ number_format($counters['used'] ?? 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">Ime-expire</div>
                    <div class="h5 mb-0 text-danger">{{ number_format($counters['expired'] ?? 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>Vocha</th>
                        <th>Phone</th>
                        <th>Kifurushi</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Ina-expire</th>
                        <th>Order Ref</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($vouchers as $v)
                        @php $st = strtolower($v->status); @endphp
                        <tr>
                            <td>{{ $v->created_at?->format('Y-m-d H:i') }}</td>
                            <td>{{ $v->router->name ?? '-' }}</td>
                            <td><strong>{{ $v->code }}</strong></td>
                            <td>{{ $v->phone ?? ($v->order->phone ?? '-') }}</td>
                            <td>{{ $v->order->plan->name ?? $v->profile ?? '-' }}</td>
                            <td>{{ number_format($v->amount) }} {{ $v->currency }}</td>
                            <td>
                                <span class="badge
                                    @if($st==='unused') bg-primary
                                    @elseif($st==='used') bg-success
                                    @elseif($st==='expired') bg-secondary
                                    @else bg-light text-dark @endif">
                                    {{ ucfirst($v->status) }}
                                </span>
                            </td>
                            <td>{{ $v->expires_at?->format('Y-m-d H:i') ?? '-' }}</td>
                            <td>{{ $v->order->reference ?? '-' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="text-center text-muted py-3">Hakuna vocha za kuonyesha.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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