@extends('layouts.admin')

@section('title', 'Bill Payments')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Bill Payments <span class="page-title-count">({{ $bills->total() ?? 0 }})</span></h1>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Total Payments" value="{{ number_format($totalPayments ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 3h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5"/><path d="M8 8h8M8 12h6M8 16h4" 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="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 bill payments found.'" :paginator="$bills ?? null">
        <x-slot:thead>
            <th>Customer</th>
            <th>Biller</th>
            <th>Amount</th>
            <th>Reference</th>
            <th>Status</th>
            <th>Date</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($bills ?? [] as $bill)
            <tr>
                <td class="text-semibold">{{ $bill->user->name ?? 'N/A' }}</td>
                <td>{{ $bill->biller_name ?? $bill->provider ?? 'N/A' }}</td>
                <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($bill->amount, 2) }}</td>
                <td><span class="text-mono">{{ $bill->reference }}</span></td>
                <td><span class="badge badge-{{ $bill->status === 'successful' ? 'green' : ($bill->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($bill->status) }}</span></td>
                <td>{{ $bill->created_at->format('M d, Y H:i') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="6">
                    <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"/><path d="M14 12h20a2 2 0 012 2v20a2 2 0 01-2 2H14a2 2 0 01-2-2V14a2 2 0 012-2z" stroke="#94A3B8" stroke-width="1.5"/><path d="M18 20h12M18 26h8M18 32h6" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <p>No bill payments found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection