@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start flex-wrap mb-4">
        <div>
            <h2 class="fw-bold text-success mb-2">
                🏢 Centers Dashboard
            </h2>
            <p class="text-muted mb-0">Monitor and manage all Nyota Programme training centers efficiently.</p>
        </div>

        @if(auth()->check())
            <a href="{{ route('centers.create') }}" class="btn btn-success btn-lg rounded-pill shadow-sm mt-3 mt-md-0">
                <i class="bi bi-plus-circle me-1"></i> Add Center
            </a>
        @endif
    </div>

    <!-- Summary Stats -->
    <div class="row g-4 mb-5">
        @php
            $centerStats = [
                ['title' => 'Total Centers', 'count' => $totalCenters ?? 0, 'desc' => 'Registered centers', 'icon' => 'bi bi-building-check'],
                ['title' => 'Active Centers', 'count' => $activeCenters ?? 0, 'desc' => 'Currently running', 'icon' => 'bi bi-activity'],
                ['title' => 'Inactive Centers', 'count' => $inactiveCenters ?? 0, 'desc' => 'Paused operations', 'icon' => 'bi bi-pause-circle'],
                ['title' => 'Total Trainers', 'count' => $totalTrainers ?? 0, 'desc' => 'Across all centers', 'icon' => 'bi bi-person-badge-fill'],
                ['title' => 'Master Trainers', 'count' => $totalMasterTrainers ?? 0, 'desc' => 'Expert trainers', 'icon' => 'bi bi-person-check-fill'],
                ['title' => 'Deputy Lead Trainers', 'count' => $totalDeputyLeads ?? 0, 'desc' => 'Supporting lead trainers', 'icon' => 'bi bi-person-fill-gear'],
                ['title' => 'Total Trainees', 'count' => $totalTrainees ?? 0, 'desc' => 'Active trainees', 'icon' => 'bi bi-people-fill'],
                ['title' => 'Top Performing', 'count' => $topCenter->name ?? '—', 'desc' => 'Based on performance', 'icon' => 'bi bi-trophy-fill'],
            ];
        @endphp

        @foreach ($centerStats as $stat)
        <div class="col-md-4 col-lg-3">
            <div class="card border-0 shadow-sm dashboard-card h-100">
                <div class="card-body text-center">
                    <div class="icon-wrapper mx-auto mb-3">
                        <i class="{{ $stat['icon'] }} fs-3 text-success"></i>
                    </div>
                    <h6 class="fw-semibold mb-1">{{ $stat['title'] }}</h6>
                    <p class="display-6 fw-bold text-success mb-1">{{ $stat['count'] }}</p>
                    <small class="text-muted">{{ $stat['desc'] }}</small>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Search & Filter -->
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4 bg-white p-3 rounded shadow-sm">
        <form method="GET" action="{{ route('public.centers') }}" class="d-flex flex-wrap align-items-center gap-2 mb-2 mb-md-0">
            <input type="text" name="search" value="{{ request('search') }}" 
                   class="form-control form-control-lg border-success rounded-pill"
                   placeholder="🔍 Search centers...">
            <button type="submit" class="btn btn-success rounded-pill px-4">
                Search
            </button>
        </form>

        <form method="GET" action="{{ route('public.centers') }}">
            <select name="status" class="form-select border-success rounded-pill py-2" onchange="this.form.submit()">
                <option value="">Filter by status</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
        </form>
    </div>

    <!-- Centers Overview Cards -->
    <h4 class="fw-bold text-success mb-3">Center Performance Overview</h4>
    <div class="row g-4 mb-5">
        @foreach ($centers as $center)
        <div class="col-md-6 col-lg-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="fw-bold text-success mb-0">{{ $center->name }}</h5>
                        <span class="badge bg-{{ $center->status === 'active' ? 'success' : 'secondary' }}">
                            {{ ucfirst($center->status ?? 'Active') }}
                        </span>
                    </div>

                    <p class="text-muted small mb-3">
                        Sub-county: {{ $center->subCounty->name ?? 'N/A' }}
                    </p>

                    <ul class="list-unstyled small mb-3">
                        <li><i class="bi bi-person-badge"></i>Senior Trainers: <strong>{{ $center->trainers_count ?? 0 }}</strong></li>
                        <li><i class="bi bi-person-lines-fill"></i> Assistant Trainers:<strong>{{ $center->assistantTrainers->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-person-gear"></i> Lead Trainers: <strong>{{ $center->leadTrainers?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-person-fill-gear"></i> Deputy Lead Trainers: <strong>{{ $center->deputyLeadTrainers?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-person-check-fill"></i> Master Trainers: <strong>{{ $center->masterTrainers?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-people-fill"></i> Trainees: <strong>{{ $center->trainees_count ?? 0 }}</strong></li>
                        <li><i class="bi bi-mortarboard"></i> Head Teachers: <strong>{{ $center->headTeachers?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-clipboard2-check"></i> Teachers on Duty: <strong>{{ $center->teachersOnDuty?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-pc-display"></i> ICT Agents: <strong>{{ $center->ictAgents?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-eye"></i> Recce Agents: <strong>{{ $center->recceAgents?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-bucket"></i> Cleaners: <strong>{{ $center->cleaners?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-person-heart"></i> Child Minders: <strong>{{ $center->childMinders?->count() ?? 0 }}</strong></li>
                        <li><i class="bi bi-people"></i> Coordinators: <strong>{{ $center->coordinators_count ?? 0 }}</strong></li>
                    </ul>

                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <small class="text-muted">
                            Updated {{ $center->updated_at?->diffForHumans() ?? 'N/A' }}
                        </small>
                        <a href="{{ route('public.centers.show', $center->id) }}" 
                           class="btn btn-outline-success btn-sm">
                            View
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Centers Table -->
    <div class="table-responsive shadow-sm rounded-4 bg-white p-3">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light border-bottom border-success">
                <tr class="text-success fw-semibold">
                    <th>#</th>
                    <th>Center Name</th>
                    <th>Location</th>
                    <th>Trainers</th>
                    <th>Lead Trainers</th>
                    <th>Deputy Lead Trainers</th>
                    <th>Master Trainers</th>
                    <th>Trainees</th>
                    <th>Status</th>
                    <th>Updated</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($centers as $center)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td class="fw-semibold">{{ $center->name }}</td>
                    <td>{{ $center->subCounty->name ?? 'N/A' }}</td>
                    <td>{{ $center->trainers_count ?? 0 }}</td>
                    <td>{{ $center->leadTrainers?->count() ?? 0 }}</td>
                    <td>{{ $center->deputyLeadTrainers?->count() ?? 0 }}</td>
                    <td>{{ $center->masterTrainers?->count() ?? 0 }}</td>
                    <td>{{ $center->trainees_count ?? 0 }}</td>
                    <td>
                        <span class="badge px-3 py-2 rounded-pill {{ $center->status == 'active' ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-muted' }}">
                            {{ ucfirst($center->status) }}
                        </span>
                    </td>
                    <td>{{ $center->updated_at?->diffForHumans() ?? 'N/A'}}</td>
                    <td class="text-end">
                        <a href="{{ route('public.centers.show', $center->id) }}" class="btn btn-sm btn-outline-success me-1">
                            <i class="bi bi-eye"></i>
                        </a>
                        <a href="{{ route('centers.edit', $center->id) }}" class="btn btn-sm btn-outline-warning me-1">
                            <i class="bi bi-pencil-square"></i>
                        </a>
                        <form action="{{ route('centers.destroy', $center->id) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this center?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="11" class="text-center text-muted py-4">No centers found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4 d-flex justify-content-center">
        {{ $centers->onEachSide(1)->links('pagination::bootstrap-5') }}
    </div>
</div>

<style>
    body { background: #f7faf7; }

    .dashboard-card {
        border-radius: 16px;
        transition: all 0.25s ease-in-out;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 18px rgba(0, 128, 0, 0.12);
    }

    .icon-wrapper {
        background: #e8f5e9;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination .page-item.active .page-link {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
        color: #fff;
    }

    .pagination .page-link {
        border-radius: 50% !important;
        margin: 0 4px;
        color: #28a745;
        transition: all 0.2s ease;
    }

    .pagination .page-link:hover {
        background-color: #e8f5e9;
    }

    .table thead th {
        border-bottom: 2px solid #a5d6a7;
    }

    .small li {
        margin-bottom: 6px;
    }

    .bi {
        color: #198754;
        margin-right: 6px;
    }
</style>
@endsection