@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>
        <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>
    </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' => '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-4">
            <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>
                    <h5 class="fw-semibold mb-1">{{ $stat['title'] }}</h5>
                    <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('centers.index') }}" 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('centers.index') }}">
            <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>

                    <!-- Quick Summary List -->
                    <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-workspace"></i> Lead Trainers:
                            <strong>{{ $center->leadTrainers->count() ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-person-fill-gear"></i> Deputy Lead Trainers:
                            <strong>{{ $center->deputies_count ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-person-check"></i> Master Trainers:
                            <strong>{{ $center->masterTrainers->count() ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-mortarboard"></i> Head Teachers:
                            <strong>{{ $center->head_teachers_count ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-journal-check"></i> Teachers on Duty:
                            <strong>{{ $center->teachers_on_duty_count ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-people"></i> Coordinators:
                            <strong>{{ $center->coordinators_count ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-person-lines-fill"></i> Trainees:
                            <strong>{{ $center->trainees_count ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-person-gear"></i> ICT Agents:
                            <strong>{{ $center->ict_agents_count ?? 0 }}</strong>
                        </li>
                        <li><i class="bi bi-eye"></i> Recce Agents:
                            <strong>{{ $center->recce_agents_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->child_minders_count ?? 0 }}</strong>
                        </li>
                    </ul>

                    <!-- Optionally show lead trainer names -->
                    @if($center->leadTrainers->isNotEmpty())
                    <p class="mb-1 fw-semibold">Lead Trainers:</p>
                    <ul class="list-unstyled small">
                        @foreach($center->leadTrainers as $lead)
                            <li>{{ $lead->lead_trainer_name }} — {{ $lead->lead_trainer_email ?? 'N/A' }}</li>
                        @endforeach
                    </ul>
                    @else
                        <p class="text-muted small mb-1">No lead trainers assigned yet.</p>
                    @endif

                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <small class="text-muted">
                            Updated {{ $center->updated_at ? $center->updated_at->diffForHumans() : 'N/A' }}
                        </small>
                        <a href="{{ route('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>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->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 ? $center->updated_at->diffForHumans() : 'N/A' }}</td>
                    <td class="text-end">
                        <a href="{{ route('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="9" 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