@extends('admin.layout')

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

@section('content')
<div class="container-fluid p-0">
    <!-- Welcome Header Banner -->
    <div class="card border-0 rounded-4 shadow-sm mb-4 overflow-hidden" style="background: linear-gradient(135deg, #03235A 0%, #08337C 70%, #FF6201 160%); color: #ffffff;">
        <div class="card-body p-4 p-md-5 position-relative">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <span class="badge bg-white text-dark rounded-pill px-3 py-2 fw-semibold mb-3">
                        <i class="bi bi-shield-check text-success me-1"></i> Admin Console Authenticated
                    </span>
                    <h1 class="display-6 fw-bold mb-2 font-heading">
                        Welcome Back, {{ $admin->name }}
                    </h1>
                 
                    
                </div>
                <div class="col-lg-4 text-center d-none d-lg-block">
                    <i class="bi bi-mortarboard-fill display-1 text-white-50 opacity-25"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics Stats Overview Cards -->


    <!-- Main Content Grid -->
    <div class="row g-4">
        <!-- Quick Academy Management Shortcuts -->
        <div class="col-lg-8">
           

            <!-- IQ Skills Store Data & Inquiries Table -->
            <div class="card border-0 rounded-4 shadow-sm mb-4">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold text-dark mb-0 font-heading">
                        <i class="bi bi-database-check text-success me-2"></i> Inquiries 
                    </h5>
                    <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2 fw-semibold">
                        {{ $inquiries->total() }} Record(s) Stored
                    </span>
                </div>
                <div class="card-body p-4">
                    @if($inquiries->isEmpty())
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-inbox fs-1 text-secondary opacity-50 d-block mb-2"></i>
                            <p class="mb-1 fw-semibold">No submissions recorded yet in `iqskills` table.</p>
                            <small>Inquiries submitted via the Contact form or store API will appear here in real-time.</small>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table align-middle table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Name</th>
                                        <th>Contact</th>
                                        <th>Interest / Program</th>
                                        <th>Message</th>
                                        <th>Date</th>
                                        <th class="text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($inquiries as $item)
                                    <tr>
                                        <td>
                                            <strong>{{ $item->full_name ?: 'Anonymous' }}</strong>
                                            <span class="badge bg-primary-subtle text-primary rounded-pill d-block mt-1" style="width: fit-content; font-size: 0.7rem;">
                                                {{ ucfirst($item->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="small fw-semibold">{{ $item->email }}</div>
                                            @if($item->phone)
                                                <div class="small text-muted">{{ $item->phone }}</div>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-warning-subtle text-dark rounded-pill">
                                                {{ $item->area_of_interest ?: ($item->subject ?: 'General') }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="small text-muted" style="max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $item->message }}">
                                                {{ $item->message }}
                                            </div>
                                        </td>
                                        <td class="text-muted small">
                                            {{ $item->created_at ? $item->created_at->format('M d, H:i') : 'N/A' }}
                                        </td>
                                        <td class="text-end">
                                            <form action="{{ route('admin.iqskills.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Delete this inquiry record?');" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle" title="Delete">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        @if($inquiries->hasPages())
                            <div class="pt-3 border-top mt-3 d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
                                <div class="small text-muted">
                                    Showing <strong>{{ $inquiries->firstItem() }}</strong> to <strong>{{ $inquiries->lastItem() }}</strong> of <strong>{{ $inquiries->total() }}</strong> inquiries
                                </div>
                                <div class="pagination-wrapper">
                                    {{ $inquiries->links() }}
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>

            <!-- Administrators Table -->
            <div class="card border-0 rounded-4 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                    <h5 class="fw-bold text-dark mb-0 font-heading">
                        <i class="bi bi-person-badge-fill text-primary me-2"></i> Registered System Administrators
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="table-responsive">
                        <table class="table align-middle table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Admin Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $adminsList = \App\Models\User::all();
                                @endphp
                                @foreach($adminsList as $u)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="admin-avatar-pill bg-primary text-white" style="width: 32px; height: 32px; font-size: 0.8rem;">
                                                {{ strtoupper(substr($u->name, 0, 1)) }}
                                            </div>
                                            <strong>{{ $u->name }}</strong>
                                        </div>
                                    </td>
                                    <td>{{ $u->email }}</td>
                                    <td>
                                        <span class="badge {{ $u->role === 'admin' ? 'bg-primary' : 'bg-secondary' }} rounded-pill">
                                            {{ ucfirst($u->role) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-success-subtle text-success rounded-pill">
                                            <i class="bi bi-dot"></i> {{ ucfirst($u->status) }}
                                        </span>
                                    </td>
                                    <td class="text-muted small">{{ $u->created_at->format('M d, Y') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Info & System Details -->
        <div class="col-lg-4">
            <!-- Admin Profile Card -->
            <div class="card border-0 rounded-4 shadow-sm mb-4">
                <div class="card-body p-4 text-center">
                    <div class="admin-avatar-pill bg-warning text-dark mx-auto mb-3" style="width: 64px; height: 64px; font-size: 1.5rem;">
                        {{ strtoupper(substr($admin->name, 0, 1)) }}
                    </div>
                    <h5 class="fw-bold mb-1">{{ $admin->name }}</h5>
                    <div class="text-muted small mb-3">{{ $admin->email }}</div>
                    <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill fw-semibold mb-3">
                        <i class="bi bi-patch-check-fill me-1"></i> Active Administrator
                    </span>
                    <hr>
                    <div class="d-flex justify-content-around text-center">
                        <div>
                            <div class="fw-bold text-dark">Role</div>
                            <small class="text-muted text-uppercase">{{ $admin->role }}</small>
                        </div>
                        <div class="border-start"></div>
                        <div>
                            <div class="fw-bold text-dark">Session</div>
                            <small class="text-success">Secured</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Server Details Card -->
          
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .pagination {
        margin-bottom: 0;
        gap: 4px;
    }
    .pagination .page-item .page-link {
        color: var(--iq-navy);
        border-radius: 8px !important;
        border: 1px solid #E2E8F0;
        font-weight: 500;
        padding: 0.35rem 0.75rem;
        font-size: 0.85rem;
    }
    .pagination .page-item.active .page-link {
        background-color: var(--iq-orange);
        border-color: var(--iq-orange);
        color: #ffffff;
        box-shadow: 0 2px 6px rgba(255, 98, 1, 0.3);
    }
    .pagination .page-item.disabled .page-link {
        color: #94a3b8;
        background-color: #f8fafc;
    }
</style>
@endpush