@extends('Admin.layout')

<style>
    :root {
        --brand-red: #ff3b3b;
    }

    [data-bs-theme="light"] .stat-card,
    [data-bs-theme="light"] .dashboard-card {
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    [data-bs-theme="dark"] .stat-card,
    [data-bs-theme="dark"] .dashboard-card {
        background: #16181b;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    .stat-card {
        border: none;
        border-radius: 14px;
        border-left: 4px solid var(--brand-red);
        transition: transform .15s ease, box-shadow .15s ease;
        text-decoration: none !important;
        color: inherit;
        display: block;
        height: 100%;
    }

    .stat-card:hover {
        transform: translateY(-3px);
    }

    [data-bs-theme="light"] .stat-card:hover {
        box-shadow: 0 10px 24px rgba(255, 59, 59, 0.18);
    }

    [data-bs-theme="dark"] .stat-card:hover {
        box-shadow: 0 10px 24px rgba(255, 59, 59, 0.25);
    }

    .stat-card .stat-value {
        font-size: 1.9rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .stat-icon-circle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 59, 59, 0.12);
        flex-shrink: 0;
    }

    .stat-icon-circle i {
        font-size: 22px;
        color: var(--brand-red);
    }

    .stat-footer {
        font-size: .8rem;
    }

    .dashboard-card {
        border: none;
        border-radius: 14px;
    }

    .dashboard-card h6 {
        font-size: .95rem;
        letter-spacing: .2px;
    }

    .dashboard-card h6 i {
        color: var(--brand-red) !important;
    }

    .avatar-fallback {
        width: 30px;
        height: 30px;
        font-size: 12px;
        font-weight: 600;
        background: var(--brand-red) !important;
    }

    .badge-unread {
        background: rgba(255, 59, 59, 0.15);
        color: var(--brand-red);
    }

    .badge-read {
        background: rgba(120, 120, 120, 0.18);
        color: #888;
    }

    .table-hover > tbody > tr:hover {
        --bs-table-hover-bg: rgba(255, 59, 59, 0.06);
    }

    .btn-outline-brand {
        border: 1px solid var(--brand-red);
        color: var(--brand-red);
        background: transparent;
    }

    .btn-outline-brand:hover {
        background: var(--brand-red);
        color: #fff;
    }

    @media (max-width: 991px) {
        .view-all-wrapper {
            justify-content: center !important;
        }
    }
</style>

@section('content')

<div class="row align-items-center justify-content-between mb-4 mt-3 m-2">
    <div class="col-auto">
        <h5 class="fw-bold mb-0">Dashboard</h5>
        <small class="text-muted">{{ date('D, d M Y') }}</small>
    </div>
</div>

{{-- STAT CARDS --}}
<div class="row g-3">

    <div class="col-lg-3 col-md-6">
        <a href="{{ route('user_list') }}" class="stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1 small">Total Members</p>
                    <h3 class="stat-value mb-0">{{ $total_members }}</h3>
                </div>
                <div class="stat-icon-circle">
                    <i class="ti tabler-users"></i>
                </div>
            </div>
            <hr class="my-2">
            <div class="d-flex justify-content-between stat-footer">
                <span class="text-muted">
                    <i class="ti tabler-mars me-1"></i>{{ $male_count }} Male
                </span>
                <span class="text-muted">
                    <i class="ti tabler-venus me-1"></i>{{ $female_count }} Female
                </span>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6">
        <a href="{{ route('trainer_list') }}" class="stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1 small">Total Trainers</p>
                    <h3 class="stat-value mb-0">{{ $total_trainers }}</h3>
                </div>
                <div class="stat-icon-circle">
                    <i class="ti tabler-barbell"></i>
                </div>
            </div>
            <hr class="my-2">
            <small class="fw-semibold stat-footer" style="color: var(--brand-red);">
                <i class="ti tabler-circle-check me-1"></i>{{ $active_trainers }} Active
            </small>
        </a>
    </div>

    <div class="col-lg-3 col-md-6">
        <a href="{{ route('package_list') }}" class="stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1 small">Total Packages</p>
                    <h3 class="stat-value mb-0">{{ $total_packages }}</h3>
                </div>
                <div class="stat-icon-circle">
                    <i class="ti tabler-package"></i>
                </div>
            </div>
            <hr class="my-2">
            <small class="fw-semibold stat-footer" style="color: var(--brand-red);">
                <i class="ti tabler-circle-check me-1"></i>{{ $active_packages }} Active
            </small>
        </a>
    </div>

    <div class="col-lg-3 col-md-6">
        <a href="{{ route('enquiry_list') }}" class="stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1 small">Total Enquiries</p>
                    <h3 class="stat-value mb-0">{{ $total_enquiries }}</h3>
                </div>
                <div class="stat-icon-circle">
                    <i class="ti tabler-mail"></i>
                </div>
            </div>
            <hr class="my-2">
            <small class="fw-semibold stat-footer" style="color: var(--brand-red);">
                <i class="ti tabler-bell me-1"></i>{{ $pending_enquiries }} Unread
            </small>
        </a>
    </div>

</div>

{{-- RECENT MEMBERS / ENQUIRIES --}}
<div class="row g-3 mt-1">
    <div class="col-lg-6">
        <div class="card dashboard-card p-3 h-100 d-flex flex-column">
            <h6 class="fw-bold mb-3">
                <i class="ti tabler-users me-2"></i>Recent Members
            </h6>
            <div class="table-responsive flex-grow-1">
                <table class="table table-sm table-hover align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Joining Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recent_members as $member)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($member->profile_image && file_exists(public_path($member->profile_image)))
                                    <img src="{{ asset($member->profile_image) }}" class="rounded-circle" width="30"
                                        height="30" style="object-fit:cover;">
                                    @else
                                    <div class="rounded-circle avatar-fallback d-flex align-items-center justify-content-center text-white">
                                        {{ strtoupper(substr($member->name, 0, 1)) }}
                                    </div>
                                    @endif
                                    <span>{{ $member->name }}</span>
                                </div>
                            </td>
                            <td>{{ $member->phone_number }}</td>
                            <td>
                                {{ $member->joining_date
                                ? \Carbon\Carbon::parse($member->joining_date)->format('d M Y')
                                : '-' }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="text-center text-muted py-3">
                                No members yet
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end mt-2 pt-2 border-top view-all-wrapper">
                <a href="{{ route('user_list') }}" class="btn btn-sm btn-outline-brand">
                    View All
                </a>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card dashboard-card p-3 h-100 d-flex flex-column">
            <h6 class="fw-bold mb-3">
                <i class="ti tabler-mail me-2"></i>Recent Enquiries
            </h6>
            <div class="table-responsive flex-grow-1">
                <table class="table table-sm table-hover align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Package</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recent_enquiries as $enquiry)
                        <tr>
                            <td>{{ $enquiry->name }}</td>
                            <td>{{ $enquiry->phone_number }}</td>
                            <td><small>{{ $enquiry->package ?? '-' }}</small></td>
                            <td>
                                <span class="badge {{ $enquiry->is_read ? 'badge-read' : 'badge-unread' }}">
                                    {{ $enquiry->is_read ? 'Read' : 'Unread' }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3">
                                No enquiries yet
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end mt-2 pt-2 border-top view-all-wrapper">
                <a href="{{ route('enquiry_list') }}" class="btn btn-sm btn-outline-brand">
                    View All
                </a>
            </div>
        </div>
    </div>
</div>

@endsection