@extends('layouts.admin')

@section('title', 'Executive Dashboard')
@section('header_title', 'Executive Dashboard')

@section('content')

<!-- Top Metric Cards -->
<div class="row g-3 g-xl-4 mb-4">
    <!-- Total Submissions -->
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card-pro" style="--card-accent: #12353b;">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <span class="text-muted small text-uppercase fw-bold" style="letter-spacing: 0.08em; font-size: 0.72rem;">Total Registrations</span>
                <div class="stat-icon-pro text-white" style="background-color: #12353b;">
                    <i class="bi bi-people-fill" style="color: #d4aa2c;"></i>
                </div>
            </div>
            <div class="d-flex align-items-baseline gap-2">
                <h2 class="fw-bold text-dark mb-0 font-outfit" style="font-size: 2.1rem;">{{ $stats['total'] }}</h2>
                <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill px-2 py-1 small fw-semibold" style="color: #854d0e !important; background-color: #fef08a !important;">
                    <i class="bi bi-graph-up-arrow me-1"></i> All Time
                </span>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between text-muted small" style="font-size: 0.75rem;">
                <span>Database Records</span>
                <span class="fw-semibold" style="color: #12353b;">Live Synchronized</span>
            </div>
        </div>
    </div>

    <!-- Pending Verification -->
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card-pro" style="--card-accent: #d4aa2c;">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <span class="text-muted small text-uppercase fw-bold" style="letter-spacing: 0.08em; font-size: 0.72rem;">Pending Review</span>
                <div class="stat-icon-pro" style="background-color: rgba(212, 170, 44, 0.18); color: #d4aa2c;">
                    <i class="bi bi-hourglass-split"></i>
                </div>
            </div>
            <div class="d-flex align-items-baseline gap-2">
                <h2 class="fw-bold text-dark mb-0 font-outfit" style="font-size: 2.1rem;">{{ $stats['pending'] }}</h2>
                <span class="badge bg-warning text-dark rounded-pill px-2 py-1 small fw-bold" style="background-color: #d4aa2c !important;">
                    <span class="pulse-dot me-1"></span> Action Needed
                </span>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between text-muted small" style="font-size: 0.75rem;">
                <span>Awaiting Staff Check</span>
                <a href="{{ route('admin.applications.index', ['status' => 'pending']) }}" class="text-decoration-none fw-bold" style="color: #d4aa2c;">Review &rarr;</a>
            </div>
        </div>
    </div>

    <!-- Approved Members -->
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card-pro" style="--card-accent: #10b981;">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <span class="text-muted small text-uppercase fw-bold" style="letter-spacing: 0.08em; font-size: 0.72rem;">Approved Members</span>
                <div class="stat-icon-pro bg-success-subtle text-success">
                    <i class="bi bi-patch-check-fill"></i>
                </div>
            </div>
            <div class="d-flex align-items-baseline gap-2">
                <h2 class="fw-bold text-dark mb-0 font-outfit" style="font-size: 2.1rem;">{{ $stats['approved'] }}</h2>
                <span class="badge bg-success-subtle text-success rounded-pill px-2 py-1 small fw-semibold">
                    <i class="bi bi-check2 me-1"></i> Active
                </span>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between text-muted small" style="font-size: 0.75rem;">
                <span>Certified Practitioners</span>
                <span class="text-success fw-semibold">Enrolled</span>
            </div>
        </div>
    </div>

    <!-- Rejected / On Hold -->
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card-pro" style="--card-accent: #ef4444;">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <span class="text-muted small text-uppercase fw-bold" style="letter-spacing: 0.08em; font-size: 0.72rem;">Rejected / Queries</span>
                <div class="stat-icon-pro bg-danger-subtle text-danger">
                    <i class="bi bi-shield-x"></i>
                </div>
            </div>
            <div class="d-flex align-items-baseline gap-2">
                <h2 class="fw-bold text-dark mb-0 font-outfit" style="font-size: 2.1rem;">{{ $stats['rejected'] }}</h2>
                <span class="badge bg-danger-subtle text-danger rounded-pill px-2 py-1 small fw-semibold">
                    Disapproved
                </span>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between text-muted small" style="font-size: 0.75rem;">
                <span>Incomplete Proofs</span>
                <span class="text-muted">Archived</span>
            </div>
        </div>
    </div>
</div>

<!-- Main Dashboard Grid -->
<div class="row g-4 mb-4">
    
    <!-- Recent Submissions Table -->
    <div class="col-lg-8">
        <div class="card-custom p-4">
            
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                <div>
                    <h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2 font-outfit fs-6">
                        <i class="bi bi-lightning-charge-fill" style="color: #d4aa2c;"></i> Recent Member Submissions
                    </h6>
                    <small class="text-muted">Real-time registrations recorded in database</small>
                </div>
                <a href="{{ route('admin.applications.index') }}" class="btn btn-sm btn-ftptn rounded-pill px-3 fw-semibold">
                    View Registry ({{ $stats['total'] }}) <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr class="text-muted small text-uppercase" style="font-size: 0.72rem; letter-spacing: 0.05em; background-color: #f8fafc;">
                            <th class="py-3 ps-3 rounded-start">Applicant</th>
                            <th class="py-3">District</th>
                            <th class="py-3">Contact</th>
                            <th class="py-3">Status</th>
                            <th class="py-3">Submitted</th>
                            <th class="py-3 pe-3 text-end rounded-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentApplications as $app)
                            <tr>
                                <td class="ps-3 py-3">
                                    <div class="d-flex align-items-center gap-3">
                                        @if($app->photo_doc)
                                            <img src="{{ asset($app->photo_doc) }}" alt="Photo" class="rounded-3 shadow-sm border" style="width: 42px; height: 46px; object-fit: cover;">
                                        @else
                                            <div class="rounded-3 bg-light border d-flex align-items-center justify-content-center text-muted shadow-sm" style="width: 42px; height: 46px;">
                                                <i class="bi bi-person fs-5"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <a href="{{ route('admin.applications.show', $app->id) }}" class="fw-bold text-dark text-decoration-none d-block">
                                                {{ $app->name }}
                                            </a>
                                            <span class="badge bg-secondary-subtle text-secondary" style="font-size: 0.7rem;">{{ $app->application_no }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border px-2 py-1 rounded-pill">{{ $app->district }}</span>
                                </td>
                                <td>
                                    <div class="small fw-semibold text-dark"><i class="bi bi-whatsapp text-success me-1"></i>{{ $app->whatsapp_number ?: $app->mobile_number }}</div>
                                    <small class="text-muted text-truncate d-inline-block" style="max-width: 150px;">{{ $app->email }}</small>
                                </td>
                                <td>
                                    <span class="badge {{ $app->status_badge }} rounded-pill px-3 py-1 fw-semibold shadow-sm">
                                        @if($app->status == 'pending') <span class="pulse-dot me-1"></span> @endif
                                        {{ ucfirst(str_replace('_', ' ', $app->status)) }}
                                    </span>
                                </td>
                                <td>
                                    <small class="text-muted text-nowrap">{{ $app->created_at->format('d M Y') }}</small>
                                </td>
                                <td class="pe-3 text-end">
                                    <div class="d-flex justify-content-end gap-1">
                                        <a href="{{ route('admin.applications.show', $app->id) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3 shadow-sm" title="Inspect Record">
                                            <i class="bi bi-eye me-1"></i>
                                        </a>
                                        <a href="{{ route('admin.applications.pdf', $app->id) }}" class="btn btn-sm btn-outline-success rounded-pill px-2" title="Download PDF">
                                            <i class="bi bi-file-earmark-pdf"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-2 text-secondary"></i>
                                    No submissions recorded yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        </div>
    </div>

    <!-- Right Column: District Distribution & Quick Actions -->
    <div class="col-lg-4">
        
        <!-- District Breakdown Card -->
        <div class="card-custom p-4 mb-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h6 class="fw-bold text-dark mb-0 font-outfit d-flex align-items-center gap-2">
                    <i class="bi bi-geo-alt-fill text-warning" style="color: #d4aa2c !important;"></i> District Distribution
                </h6>
                <span class="badge bg-light text-muted border small">Top Regions</span>
            </div>

            @forelse($districtStats as $dist)
                @php
                    $pct = $stats['total'] > 0 ? round(($dist->count / $stats['total']) * 100) : 0;
                @endphp
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="small fw-semibold text-dark">{{ $dist->district }}</span>
                        <span class="small text-muted fw-bold">{{ $dist->count }} ({{ $pct }}%)</span>
                    </div>
                    <div class="progress rounded-pill" style="height: 6px; background-color: #f1f5f9;">
                        <div class="progress-bar rounded-pill" style="width: {{ $pct }}%; background-color: #12353b;"></div>
                    </div>
                </div>
            @empty
                <p class="text-muted small mb-0">No district data available.</p>
            @endforelse
        </div>

        <!-- Pro Management Tools -->
        <div class="card-custom p-4" style="background: linear-gradient(135deg, #08191d 0%, #12353b 100%); border: 1.5px solid rgba(212, 170, 44, 0.35); color: #ffffff;">
            <div class="d-flex align-items-center gap-2 mb-2">
                <div class="p-2 rounded-3 text-warning" style="background: rgba(212, 170, 44, 0.2); color: #d4aa2c !important;">
                    <i class="bi bi-command fs-5"></i>
                </div>
                <div>
                    <h6 class="fw-bold text-white mb-0 font-outfit">Quick Actions</h6>
                    <small class="text-white-50" style="font-size: 0.72rem;">Operational shortcuts</small>
                </div>
            </div>
            
            <p class="small text-white-50 mt-2 mb-3" style="font-size: 0.8rem;">
                Export verified registrations or review incoming website inquiries.
            </p>

            <div class="d-grid gap-2">
                <a href="{{ route('admin.applications.export') }}" class="btn btn-ftptn-gold btn-sm rounded-pill fw-bold shadow-sm py-2">
                    <i class="bi bi-file-earmark-excel me-1"></i> Export Master Database (CSV)
                </a>
                <a href="{{ route('admin.contacts.index') }}" class="btn btn-outline-light btn-sm rounded-pill py-2">
                    <i class="bi bi-envelope-paper me-1"></i> View Contact Messages
                </a>
            </div>
        </div>

    </div>

</div>
@endsection