@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<style>
    .dash-welcome {
        background: linear-gradient(135deg, var(--royal-blue) 0%, var(--royal-blue-dark) 100%);
        color: var(--white);
        border-radius: var(--radius);
        padding: 1.75rem 2rem;
        margin-bottom: 1.75rem;
        box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.25);
    }
    .dash-welcome h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; margin: 0 0 0.35rem 0; }
    .dash-welcome p { margin: 0; opacity: 0.9; font-size: 0.95rem; }
    .dash-welcome i { color: var(--soft-gold); margin-right: 0.5rem; }
    .stat-card {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        padding: 1.35rem 1.5rem;
        height: 100%;
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid rgba(0,0,0,0.04);
        position: relative;
        overflow: hidden;
    }
    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--card-accent, var(--royal-blue));
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -5px rgba(0,0,0,0.1);
    }
    .stat-card .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .stat-card.inquiries .stat-icon { background: rgba(30, 58, 138, 0.12); color: var(--royal-blue); }
    .stat-card.bookings .stat-icon { background: rgba(5, 150, 105, 0.12); color: #059669; }
    .stat-card.blog .stat-icon { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
    .stat-card.faqs .stat-icon { background: rgba(212, 175, 55, 0.2); color: var(--soft-gold); }
    .stat-card .stat-value { font-family: var(--font-heading); font-weight: 700; font-size: 1.75rem; color: var(--text-dark); line-height: 1.2; }
    .stat-card .stat-label { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; margin-top: 0.2rem; }
    .stat-card a.stretched-link::after { z-index: 1; }
    .dash-quick {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        padding: 1.35rem 1.5rem;
        margin-top: 1.5rem;
        border: 1px solid rgba(0,0,0,0.04);
    }
    .dash-quick h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; margin: 0 0 1rem 0; color: var(--text-dark); }
    .dash-quick .quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .dash-quick .quick-links a {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.9rem;
        background: var(--royal-blue-muted);
        color: var(--royal-blue);
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
    }
    .dash-quick .quick-links a:hover { background: var(--royal-blue); color: var(--white) !important; }
    .dash-panel {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        padding: 1.35rem 1.5rem;
        margin-top: 1.5rem;
        border: 1px solid rgba(0,0,0,0.04);
    }
    .dash-panel h3 {
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 1.1rem;
        margin: 0 0 1rem 0;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .dash-panel h3 .badge-new { font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
    .dash-panel .table { font-size: 0.875rem; margin-bottom: 0; }
    .dash-panel .table th { font-weight: 600; color: var(--text-muted); border-bottom-width: 1px; white-space: nowrap; }
    .dash-panel .empty-hint { color: var(--text-muted); font-size: 0.9rem; padding: 1rem 0; text-align: center; }
</style>

<div class="dash-welcome">
    <h2><i class="bi bi-graph-up-arrow"></i>Welcome back, {{ Auth::user()->name }}</h2>
    <p>Here’s what’s happening with your consultancy dashboard today.</p>
</div>

<div class="row g-4">
    <div class="col-sm-6 col-xl-3">
        <a href="{{ route('admin.inquiries.index') }}" class="text-decoration-none">
            <div class="stat-card inquiries" style="--card-accent: #1E3A8A;">
                <div class="stat-icon"><i class="bi bi-inbox"></i></div>
                <div class="stat-value">{{ $counts['inquiries'] ?? 0 }}</div>
                <div class="stat-label">Inquiries</div>
                <span class="stretched-link"></span>
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-xl-3">
        <a href="{{ route('admin.bookings.index') }}" class="text-decoration-none">
            <div class="stat-card bookings" style="--card-accent: #059669;">
                <div class="stat-icon"><i class="bi bi-calendar-check"></i></div>
                <div class="stat-value">{{ $counts['bookings'] ?? 0 }}</div>
                <div class="stat-label">Bookings @if(($counts['bookings_new'] ?? 0) > 0)<span class="badge bg-warning text-dark ms-1">{{ $counts['bookings_new'] }} new</span>@endif</div>
                <span class="stretched-link"></span>
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-xl-3">
        <a href="{{ route('admin.blog-posts.index') }}" class="text-decoration-none">
            <div class="stat-card blog" style="--card-accent: #3b82f6;">
                <div class="stat-icon"><i class="bi bi-journal-text"></i></div>
                <div class="stat-value">{{ $counts['blog_posts'] ?? 0 }}</div>
                <div class="stat-label">Blog posts</div>
                <span class="stretched-link"></span>
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-xl-3">
        <a href="{{ route('admin.faqs.index') }}" class="text-decoration-none">
            <div class="stat-card faqs" style="--card-accent: #D4AF37;">
                <div class="stat-icon"><i class="bi bi-question-circle"></i></div>
                <div class="stat-value">{{ $counts['faqs'] ?? 0 }}</div>
                <div class="stat-label">FAQs</div>
                <span class="stretched-link"></span>
            </div>
        </a>
    </div>
</div>

<div class="dash-quick">
    <h3><i class="bi bi-lightning text-warning"></i> Quick links</h3>
    <div class="quick-links">
        <a href="{{ route('admin.inquiries.index') }}"><i class="bi bi-inbox"></i> Inquiries</a>
        <a href="{{ route('admin.bookings.index') }}"><i class="bi bi-calendar-plus"></i> Bookings</a>
        <a href="{{ route('admin.faqs.index') }}"><i class="bi bi-question-circle"></i> FAQs</a>
        <a href="{{ route('admin.services.index') }}"><i class="bi bi-gear"></i> Services</a>
        <a href="{{ route('admin.settings.index') }}"><i class="bi bi-sliders"></i> Settings</a>
    </div>
</div>

<div class="row g-4 mt-0">
    <div class="col-12 col-xl-7">
        <div class="dash-panel h-100">
            <h3>
                <span><i class="bi bi-calendar-event text-success"></i> Recent consultation bookings</span>
                <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-outline-primary">View all</a>
            </h3>
            @if($recentBookings->isEmpty())
                <p class="empty-hint mb-0">No bookings yet. Submissions from the website <strong>Book consultation</strong> form will appear here.</p>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Submitted</th>
                                <th>Name</th>
                                <th>Contact</th>
                                <th>Preferred</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentBookings as $b)
                                @php
                                    $statusColors = [
                                        'new' => 'primary',
                                        'confirmed' => 'success',
                                        'completed' => 'secondary',
                                        'cancelled' => 'danger',
                                    ];
                                    $bg = $statusColors[$b->status] ?? 'secondary';
                                @endphp
                                <tr>
                                    <td class="text-muted small">{{ $b->created_at->format('d M Y, H:i') }}</td>
                                    <td class="fw-medium">{{ $b->name }}</td>
                                    <td class="small">
                                        <div>{{ $b->phone ?? '—' }}</div>
                                        <div class="text-muted">{{ $b->email }}</div>
                                    </td>
                                    <td class="small">
                                        {{ $b->preferred_date?->format('d M Y') ?? '—' }}
                                        @if($b->preferred_slot)
                                            <div class="text-muted">{{ $b->preferred_slot }}</div>
                                        @endif
                                    </td>
                                    <td><span class="badge text-bg-{{ $bg }}">{{ $b->status }}</span></td>
                                    <td class="text-end">
                                        <a href="{{ route('admin.bookings.show', $b) }}" class="btn btn-sm btn-outline-secondary">View</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
    <div class="col-12 col-xl-5">
        <div class="dash-panel h-100">
            <h3>
                <span><i class="bi bi-inbox text-primary"></i> Recent inquiries</span>
                <a href="{{ route('admin.inquiries.index') }}" class="btn btn-sm btn-outline-primary">View all</a>
            </h3>
            @if($recentInquiries->isEmpty())
                <p class="empty-hint mb-0">No inquiries yet.</p>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Type</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentInquiries as $inq)
                                <tr>
                                    <td class="text-muted small">{{ $inq->created_at->format('d M H:i') }}</td>
                                    <td class="fw-medium">{{ $inq->name }}</td>
                                    <td><span class="badge text-bg-light text-dark border">{{ $inq->type ?? '—' }}</span></td>
                                    <td class="text-end">
                                        <a href="{{ route('admin.inquiries.show', $inq) }}" class="btn btn-sm btn-outline-secondary">View</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection