@extends('layouts.admin')

@section('title', 'Airtime & Data')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Airtime & Data <span class="page-title-count">({{ $transactions->total() ?? 0 }})</span></h1>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Total Purchases" value="{{ number_format($totalPurchases ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="7" y="2" width="10" height="20" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M11 18h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9 5h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Total Amount" value="{{ $currency ?? '₦' }}{{ number_format($totalAmount ?? 0, 2) }}" color="green">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v10M9 9h6c1.1 0 2 .9 2 2s-.9 2-2 2H9M9 13h6c1.1 0 2 .9 2 2s-.9 2-2 2H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Successful" value="{{ number_format($successful ?? 0) }}" color="green">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12l4 4 8-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Failed" value="{{ number_format($failed ?? 0) }}" color="red">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.transactions') }}" class="filter-bar">
            <div class="filter-group">
                <select name="type" class="filter-select">
                    <option value="">All Types</option>
                    <option value="airtime" {{ request('type') === 'airtime' ? 'selected' : '' }}>Airtime</option>
                    <option value="data" {{ request('type') === 'data' ? 'selected' : '' }}>Data</option>
                </select>
            </div>
            <div class="filter-group">
                <select name="provider" class="filter-select">
                    <option value="">All Providers</option>
                    <option value="mtn" {{ request('provider') === 'mtn' ? 'selected' : '' }}>MTN</option>
                    <option value="airtel" {{ request('provider') === 'airtel' ? 'selected' : '' }}>Airtel</option>
                    <option value="glo" {{ request('provider') === 'glo' ? 'selected' : '' }}>Glo</option>
                    <option value="9mobile" {{ request('provider') === '9mobile' ? 'selected' : '' }}>9mobile</option>
                </select>
            </div>
            <div class="filter-group">
                <select name="status" class="filter-select">
                    <option value="">All Status</option>
                    <option value="successful" {{ request('status') === 'successful' ? 'selected' : '' }}>Successful</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                </select>
            </div>
            <div class="filter-group">
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-input">
            </div>
            <div class="filter-group">
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-input">
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        </form>
    </div>

    <x-data-table :emptyMessage="'No transactions found.'" :paginator="$transactions ?? null">
        <x-slot:thead>
            <th>Customer</th>
            <th>Type</th>
            <th>Provider</th>
            <th>Phone</th>
            <th>Amount</th>
            <th>Reference</th>
            <th>Status</th>
            <th>Date</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($transactions ?? [] as $tx)
            <tr>
                <td class="text-semibold">{{ $tx->user->name ?? 'N/A' }}</td>
                <td><span class="badge badge-{{ ($tx->type ?? $tx->category ?? '') === 'data' ? 'blue' : 'green' }}">{{ ucfirst($tx->type ?? $tx->category ?? 'Airtime') }}</span></td>
                <td>{{ ucfirst($tx->provider ?? 'N/A') }}</td>
                <td><span class="text-mono">{{ $tx->phone_number ?? $tx->phone ?? 'N/A' }}</span></td>
                <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($tx->amount, 2) }}</td>
                <td><span class="text-mono">{{ $tx->reference }}</span></td>
                <td><span class="badge badge-{{ $tx->status === 'successful' ? 'green' : ($tx->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($tx->status) }}</span></td>
                <td>{{ $tx->created_at->format('M d, Y H:i') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="8">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><rect x="16" y="8" width="16" height="32" rx="3" stroke="#94A3B8" stroke-width="1.5"/><path d="M20 36h8" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/><path d="M20 14h8" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <p>No airtime & data transactions found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection