@extends('layouts.admin')
@section('title','Admin Dashboard')
@section('page-title','📊 Dashboard')

@section('styles')
<style>
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:24px}
.stat-card{background:#fff;padding:22px;border-radius:15px;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .3s}
.stat-card:hover{transform:translateY(-3px)}
.stat-icon{font-size:34px;margin-bottom:10px}
.stat-number{font-size:26px;font-weight:700;color:#1e3c72}
.stat-label{color:#888;font-size:13px;margin-top:5px}
.quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.quick-link{background:#fff;padding:16px;border-radius:12px;text-align:center;text-decoration:none;color:#333;border:1px solid #e0e0e0;transition:all .3s;font-size:14px;font-weight:500}
.quick-link:hover{border-color:#1e3c72;background:#f0f4ff;color:#1e3c72}

/* ---------- THEME BUTTONS ---------- */
.add-btn, .btn-save, .quick-link, .btn-pay {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 13px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #07b8a3 !important;
    border-bottom: 4px solid #089a89 !important;
}
.add-btn:hover, .btn-save:hover, .quick-link:hover, .btn-pay:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}
.quick-links .quick-link:nth-child(2) { background: #81c66b !important; border-bottom-color: #67a055 !important; }
.quick-links .quick-link:nth-child(3) { background: #ff7528 !important; border-bottom-color: #d9a810 !important; }
.quick-links .quick-link:nth-child(4) { background: #de2779 !important; border-bottom-color: #af1b5d !important; }
.quick-links .quick-link:nth-child(5) { background: #11A2D9 !important; border-bottom-color: #0c8bbb !important; }

.action-btn { 
    border-radius: 6px !important; 
    border: none !important;
    border-bottom: 3px solid rgba(0,0,0,0.2) !important; 
    padding: 6px 12px !important; 
    font-weight: 600 !important; 
    color: #fff !important;
    transition: transform .18s ease !important;
}
.action-btn:hover { transform: translateY(-2px) !important; }
.edit-btn { background: #11A2D9 !important; }
.credits-btn, .btn-approve, .btn-success { background: #81c66b !important; }
.delete-btn, .btn-reject, .btn-danger { background: #de2779 !important; }
.btn-cancel { background: #ff7528 !important; color: #fff !important; border-bottom: 4px solid #d9a810 !important; }

.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
    .logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
        height: 45px !important;
        margin: 5px 0 !important;
    }
    .card, .del-card, .settings-card { padding: 16px !important; }
    .filter-bar { flex-direction: column; align-items: stretch !important; }
    .filter-group, .filter-select, .filter-input { width: 100% !important; }
    .responsive-form-grid, .view-grid { grid-template-columns: 1fr !important; }
}

.sidebar a[href*="logout"], .sidebar form[action*="logout"] button, .sidebar .logout-btn, .sidebar .btn-logout, .main-sidebar a[href*="logout"], .main-sidebar form[action*="logout"] button, .sidebar-wrapper a[href*="logout"] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #de2779 !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.sidebar a[href*="logout"]:hover, .sidebar form[action*="logout"] button:hover, .sidebar .logout-btn:hover, .sidebar .btn-logout:hover, .main-sidebar a[href*="logout"]:hover, .main-sidebar form[action*="logout"] button:hover, .sidebar-wrapper a[href*="logout"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    background: #de2779 !important;
}

.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

.main-sidebar, .sidebar, aside, .sidebar-wrapper {
    background: #1d1d1d !important;
}
.sidebar .nav-link, .sidebar a {
    color: #fff !important;
}
.sidebar .nav-link:hover, .sidebar a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #07b8a3 !important;
}
.sidebar .nav-item .nav-link.active, .sidebar .active > a {
    background: linear-gradient(90deg, #81c66b 0%, #07b8a3 25%, #ff7528 70%, #de2779 100%) !important;
    color: #fff !important;
    border-radius: 6px;
}
</style>
@endsection

@section('content')
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-number">{{ $totalCustomers }}</div>
        <div class="stat-label">Total Customers</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">💰</div>
        <div class="stat-number">${{ number_format($totalCreditBalance, 2) }}</div>
        <div class="stat-label">Total Credit Balance</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">💳</div>
        <div class="stat-number">${{ number_format($totalPayments, 2) }}</div>
        <div class="stat-label">Total Revenue</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">🤲</div>
        <div class="stat-number">${{ number_format($totalDonations, 2) }}</div>
        <div class="stat-label">Total Donations</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">🏆</div>
        <div class="stat-number">{{ $wallCount }}</div>
        <div class="stat-label">Wall of Fame</div>
    </div>
</div>

<h3 style="margin-bottom:14px;color:#333">Quick Actions</h3>
<div class="quick-links">
    <a href="{{ route('admin.customers') }}" class="quick-link">➕ Add Customer</a>
    <a href="{{ route('admin.credits') }}" class="quick-link">💰 Adjust Credits</a>
    <a href="{{ route('admin.wall-of-fame') }}" class="quick-link">🏆 Wall of Fame</a>
    <a href="{{ route('admin.deletion-requests') }}" class="quick-link">🗑️ Del Requests</a>
    <a href="{{ route('admin.payments') }}" class="quick-link">💳 View Payments</a>
</div>

<div class="card">
    <div class="card-title">📋 Recent Payments</div>
    <div class="table-wrap">
    <table>
        <thead>
            <tr><th>Invoice</th><th>Customer</th><th>Amount</th><th>Type</th><th>Status</th><th>Date</th></tr>
        </thead>
        <tbody>
        @forelse($recentPayments as $p)
        <tr>
            <td><strong>{{ $p->invoice_no }}</strong></td>
            <td>{{ $p->customer_name }}</td>
            <td><strong>${{ number_format($p->amount, 2) }}</strong></td>
            <td>{{ ucfirst($p->type) }}</td>
            <td>
                <span class="badge {{ $p->status=='success' ? 'badge-success' : ($p->status=='refunded' ? 'badge-info' : 'badge-danger') }}">
                    {{ ucfirst($p->status) }}
                </span>
            </td>
            <td>{{ $p->created_at->format('d M Y') }}</td>
        </tr>
        @empty
        <tr><td colspan="6" style="text-align:center;padding:30px;color:#aaa">No payments yet</td></tr>
        @endforelse
        </tbody>
    </table>
    </div>
</div>
@endsection