@extends('layouts.app') {{-- or layouts.admin --}}

@section('title', $center->name . ' | Center Overview')

@section('content')
<div class="container-fluid py-4">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1 text-success">
                🏫 {{ $center->name }} Center Overview
            </h2>
            <p class="text-muted mb-0">Detailed overview of trainers, trainees, lead trainers, coordinators, and operations for this center.</p>
        </div>
        <a href="{{ route('public.centers') }}" class="btn btn-outline-success rounded-pill">
            <i class="bi bi-arrow-left"></i> Back to Centers
        </a>
    </div>

    <!-- Summary Cards -->
    <div class="row g-4 mb-4">
        @php
            $summaryStats = [
                ['label' => 'Senior Trainers', 'value' => $trainersCount ?? 0, 'icon' => 'bi bi-person-badge-fill', 'color' => 'primary', 'sub' => 'Across all classrooms'],
                ['label' => 'Assistant Trainers', 'value' => $assistantTrainersCount ?? 0, 'icon' => 'bi bi-person-plus-fill', 'color' => 'info', 'sub' => 'Supporting senior trainers'],
                ['label' => 'Trainees', 'value' => $traineesCount ?? 0, 'icon' => 'bi bi-people-fill', 'color' => 'success', 'sub' => 'Active learners'],
                ['label' => 'Lead Trainers', 'value' => $center->leadTrainers->count(), 'icon' => 'bi bi-person-lines-fill', 'color' => 'warning', 'sub' => 'Mentors overseeing sessions'],
                ['label' => 'Deputy Lead Trainers', 'value' => $deputiesCount ?? 0, 'icon' => 'bi bi-person-badge', 'color' => 'info', 'sub' => 'Supporting lead trainers'],
                ['label' => 'Master Trainers', 'value' => $center->masterTrainers->count(), 'icon' => 'bi bi-person-check-fill', 'color' => 'success', 'sub' => 'Senior trainers for the center'],
                ['label' => 'Head Teachers', 'value' => $headTeachersCount ?? 0, 'icon' => 'bi bi-mortarboard-fill', 'color' => 'secondary', 'sub' => 'Overseeing classes'],
                ['label' => 'Teachers on Duty', 'value' => $teachersOnDutyCount ?? 0, 'icon' => 'bi bi-person-badge', 'color' => 'info', 'sub' => 'Daily supervising teachers'],
                ['label' => 'ICT Agents', 'value' => $ictAgentsCount ?? 0, 'icon' => 'bi bi-laptop-fill', 'color' => 'dark', 'sub' => 'Tech support'],
                ['label' => 'Recce Agents', 'value' => $recceAgentsCount ?? 0, 'icon' => 'bi bi-binoculars-fill', 'color' => 'warning', 'sub' => 'Recon operations'],
                ['label' => 'Cleaners', 'value' => $cleanersCount ?? 0, 'icon' => 'bi bi-broom-fill', 'color' => 'secondary', 'sub' => 'Maintaining cleanliness'],
                ['label' => 'Child Minders', 'value' => $childMindersCount ?? 0, 'icon' => 'bi bi-heart-fill', 'color' => 'danger', 'sub' => 'Caring for children'],
                ['label' => 'Coordinators', 'value' => $coordinatorsCount ?? 0, 'icon' => 'bi bi-person-gear', 'color' => 'danger', 'sub' => 'Managing operations'],
            ];
        @endphp

        @foreach ($summaryStats as $stat)
            <div class="col-md-3 col-sm-6">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body text-center">
                        <div class="icon-wrapper mx-auto mb-3 bg-{{ $stat['color'] }}-subtle text-{{ $stat['color'] }}">
                            <i class="{{ $stat['icon'] }} fs-3"></i>
                        </div>
                        <h6 class="text-uppercase text-muted mb-1">{{ $stat['label'] }}</h6>
                        <h2 class="fw-bold text-dark mb-0">{{ $stat['value'] }}</h2>
                        <small class="text-muted">{{ $stat['sub'] }}</small>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Accordion for Users -->
    <div class="accordion mb-5" id="centerAccordion">

        @php
            $roles = [
                ['label'=>'Senior Trainers','data'=>$center->trainers,'count'=>$trainersCount ?? 0,'icon'=>'🧑‍🏫','fields'=>['Name','Specialization','Phone','Email']],
                ['label'=>'Assistant Trainers','data'=>$center->assistantTrainers ?? collect(),'count'=>$assistantTrainersCount ?? 0,'icon'=>'🧑‍🎓','fields'=>['Name','Specialization','Phone','Email']],
                ['label'=>'Lead Trainers','data'=>$center->leadTrainers,'count'=>$center->leadTrainers->count(),'icon'=>'🧑‍💼','fields'=>['Name','Phone','Email']],
                ['label'=>'Deputy Lead Trainers','data'=>$center->deputies ?? collect(),'count'=>$deputiesCount ?? 0,'icon'=>'👨‍💼','fields'=>['Name','Phone','Email']],
                ['label'=>'Master Trainers','data'=>$center->masterTrainers,'count'=>$center->masterTrainers->count(),'icon'=>'👨‍🏫','fields'=>['Name','Phone','Email']],
                ['label'=>'Trainees','data'=>$center->trainees,'count'=>$traineesCount ?? 0,'icon'=>'👩‍🎓','fields'=>['Name','Training Type','Phone','Email','Ward']],
                ['label'=>'Head Teachers','data'=>$center->headTeachers ?? collect(),'count'=>$headTeachersCount ?? 0,'icon'=>'🎓','fields'=>['Name','Phone','Email']],
                ['label'=>'Teachers on Duty','data'=>$center->teachersOnDuty ?? collect(),'count'=>$teachersOnDutyCount ?? 0,'icon'=>'🧑‍🏫','fields'=>['Name','Phone','Email','Duty Date']],
                ['label'=>'ICT Agents','data'=>$center->ictAgents ?? collect(),'count'=>$ictAgentsCount ?? 0,'icon'=>'💻','fields'=>['Name','Phone','Email']],
                ['label'=>'Recce Agents','data'=>$center->recceAgents ?? collect(),'count'=>$recceAgentsCount ?? 0,'icon'=>'🔭','fields'=>['Name','Phone','Email']],
                ['label'=>'Cleaners','data'=>$center->cleaners ?? collect(),'count'=>$cleanersCount ?? 0,'icon'=>'🧹','fields'=>['Name','Phone','Email']],
                ['label'=>'Child Minders','data'=>$center->childMinders ?? collect(),'count'=>$childMindersCount ?? 0,'icon'=>'❤️','fields'=>['Name','Phone','Email']],
                ['label'=>'Coordinators','data'=>$center->coordinators ?? collect(),'count'=>$coordinatorsCount ?? 0,'icon'=>'🛠','fields'=>['Coordinator 1','Phone','Email','Coordinator 2','Phone','Email']],
            ];
        @endphp

        @foreach($roles as $index => $role)
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading{{ $index }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}" aria-expanded="false" aria-controls="collapse{{ $index }}">
                    {{ $role['icon'] }} {{ $role['label'] }} ({{ $role['count'] }})
                </button>
            </h2>
            <div id="collapse{{ $index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $index }}" data-bs-parent="#centerAccordion">
                <div class="accordion-body">

                
                    @if ($role['count'] > 0)
                        <div class="table-responsive">
                            <table class="table table-striped align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        @foreach($role['fields'] as $field)
                                        <th>{{ $field }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($role['data'] as $i => $item)
                                        <tr>
                                            <td>{{ $i + 1 }}</td>
                                            @foreach($role['fields'] as $field)
                                                @php
                                                    $key = str_replace(' ','_',strtolower($field));
                                                    $value = $item->$key ?? '—';
                                                @endphp
                                                <td>{{ $value }}</td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted mb-0">No {{ strtolower($role['label']) }} assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>
        @endforeach

    </div>

</div>

<style>
.icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.bg-primary-subtle { background-color: #e7f1ff !important; }
.bg-success-subtle { background-color: #e8f5e9 !important; }
.bg-warning-subtle { background-color: #fff8e1 !important; }
.bg-danger-subtle { background-color: #ffebee !important; }
.bg-info-subtle { background-color: #e0f7fa !important; }
.bg-secondary-subtle { background-color: #f5f5f5 !important; }
.bg-dark-subtle { background-color: #d6d6d6 !important; }
</style>
@endsection