@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('centers.index') }}" 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' => 'Coordinators', 'value' => $coordinatorsCount ?? 0, 'icon' => 'bi bi-person-gear', 'color' => 'danger', 'sub' => 'Managing operations'],
                ['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'],
            ];
        @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 Add Users and Lists -->
    <div class="accordion mb-5" id="centerAccordion">


        <!-- Trainers List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTrainers">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTrainers" aria-expanded="false" aria-controls="collapseTrainers">
                    🧑‍🏫 Senior Trainers ({{ $trainersCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseTrainers" class="accordion-collapse collapse" aria-labelledby="headingTrainers" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if ($center->trainers->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Specialization</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->trainers as $index => $trainer)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td class="fw-semibold">{{ $trainer->name }}</td>
                                    <td>{{ $trainer->specialization ?? '—' }}</td>
                                    <td>{{ $trainer->phone ?? '—' }}</td>
                                    <td>{{ $trainer->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No trainers assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Lead Trainers List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingLeadTrainers">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLeadTrainers" aria-expanded="false" aria-controls="collapseLeadTrainers">
                    🧑‍💼 Lead Trainers ({{ $center->leadTrainers->count() }})
                </button>
            </h2>
            <div id="collapseLeadTrainers" class="accordion-collapse collapse" aria-labelledby="headingLeadTrainers" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if ($center->leadTrainers->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->leadTrainers as $index => $lead)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $lead->name }}</td>
                                    <td>{{ $lead->phone ?? '—' }}</td>
                                    <td>{{ $lead->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No lead trainers assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Trainees List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTrainees">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTrainees" aria-expanded="false" aria-controls="collapseTrainees">
                    👩‍🎓 Trainees ({{ $traineesCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseTrainees" class="accordion-collapse collapse" aria-labelledby="headingTrainees" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if ($center->trainees->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Training Type</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Ward</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->trainees as $index => $trainee)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td class="fw-semibold">{{ $trainee->name }}</td>
                                    <td>{{ $trainee->training_type ?? '—' }}</td>
                                    <td>{{ $trainee->phone ?? '—' }}</td>
                                    <td>{{ $trainee->email ?? '—' }}</td>
                                    <td>{{ $trainee->ward ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No trainees registered yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Assistant Trainers List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingAssistants">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseAssistants" aria-expanded="false"
                        aria-controls="collapseAssistants">
                    👩‍🏫 Assistant Trainers ({{ $assistantTrainersCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseAssistants" class="accordion-collapse collapse"
                aria-labelledby="headingAssistants" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->assistantTrainers) && $center->assistantTrainers->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Senior Trainer</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->assistantTrainers as $index => $assistant)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $assistant->name }}</td>
                                    <td>{{ $assistant->seniorTrainer->name ?? '—' }}</td>
                                    <td>{{ $assistant->phone ?? '—' }}</td>
                                    <td>{{ $assistant->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No Assistant Trainers assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>


        <!-- Deputy Lead Trainers List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingDeputies">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDeputies" aria-expanded="false" aria-controls="collapseDeputies">
                    👨‍💼 Deputy Lead Trainers  ({{ $deputiesCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseDeputies" class="accordion-collapse collapse" aria-labelledby="headingDeputies" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if ($deputiesCount > 0)
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->deputies as $index => $deputy)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $deputy->name }}</td>
                                    <td>{{ $deputy->phone ?? '—' }}</td>
                                    <td>{{ $deputy->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No Deputy Lead Trainers assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

                <!-- Master Trainers List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingMasters">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMasters" aria-expanded="false" aria-controls="collapseMasters">
                    👨‍🏫 Master Trainers ({{ $center->masterTrainers->count() }})
                </button>
            </h2>
            <div id="collapseMasters" class="accordion-collapse collapse" aria-labelledby="headingMasters" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if ($center->masterTrainers->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->masterTrainers as $index => $master)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $master->name }}</td>
                                    <td>{{ $master->phone ?? '—' }}</td>
                                    <td>{{ $master->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No Master Trainers assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

                 <!-- Head Teachers List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingHeadTeachers">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHeadTeachers" aria-expanded="false" aria-controls="collapseHeadTeachers">
                    🎓 Head Teachers ({{ $headTeachersCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseHeadTeachers" class="accordion-collapse collapse" aria-labelledby="headingHeadTeachers" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->headTeachers) && $center->headTeachers->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->headTeachers as $index => $head)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $head->name }}</td>
                                    <td>{{ $head->phone ?? '—' }}</td>
                                    <td>{{ $head->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No head teachers assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Teachers on Duty List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTeachersOnDuty">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTeachersOnDuty" aria-expanded="false" aria-controls="collapseTeachersOnDuty">
                    🧑‍🏫 Teachers on Duty ({{ $teachersOnDutyCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseTeachersOnDuty" class="accordion-collapse collapse" aria-labelledby="headingTeachersOnDuty" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->teachersOnDuty) && $center->teachersOnDuty->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Duty Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->teachersOnDuty as $index => $teacher)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $teacher->name }}</td>
                                    <td>{{ $teacher->phone ?? '—' }}</td>
                                    <td>{{ $teacher->email ?? '—' }}</td>
                                    <td>{{ $teacher->duty_date ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No teachers on duty assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- ICT Agents List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingICTAgents">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseICTAgents" aria-expanded="false" aria-controls="collapseICTAgents">
                    💻 ICT Agents ({{ $ictAgentsCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseICTAgents" class="accordion-collapse collapse" aria-labelledby="headingICTAgents" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->ictAgents) && $center->ictAgents->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->ictAgents as $index => $agent)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $agent->name }}</td>
                                    <td>{{ $agent->phone ?? '—' }}</td>
                                    <td>{{ $agent->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No ICT agents assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Recce Agents List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingRecceAgents">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRecceAgents" aria-expanded="false" aria-controls="collapseRecceAgents">
                    🔭 Recce Agents ({{ $recceAgentsCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseRecceAgents" class="accordion-collapse collapse" aria-labelledby="headingRecceAgents" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->recceAgents) && $center->recceAgents->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->recceAgents as $index => $recce)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $recce->name }}</td>
                                    <td>{{ $recce->phone ?? '—' }}</td>
                                    <td>{{ $recce->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No recce agents assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Cleaners List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingCleaners">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCleaners" aria-expanded="false" aria-controls="collapseCleaners">
                     Cleaners ({{ $cleanersCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseCleaners" class="accordion-collapse collapse" aria-labelledby="headingCleaners" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->cleaners) && $center->cleaners->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->cleaners as $index => $cleaner)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $cleaner->name }}</td>
                                    <td>{{ $cleaner->phone ?? '—' }}</td>
                                    <td>{{ $cleaner->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No cleaners assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Child Minders List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingChildMinders">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseChildMinders" aria-expanded="false" aria-controls="collapseChildMinders">
                     Child Minders ({{ $childMindersCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseChildMinders" class="accordion-collapse collapse" aria-labelledby="headingChildMinders" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if (!empty($center->childMinders) && $center->childMinders->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->childMinders as $index => $minder)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $minder->name }}</td>
                                    <td>{{ $minder->phone ?? '—' }}</td>
                                    <td>{{ $minder->email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No child minders assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>

        
        <!-- Coordinators List -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingCoordinators">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCoordinators" aria-expanded="false" aria-controls="collapseCoordinators">
                    🛠 Coordinators ({{ $coordinatorsCount ?? 0 }})
                </button>
            </h2>
            <div id="collapseCoordinators" class="accordion-collapse collapse" aria-labelledby="headingCoordinators" data-bs-parent="#centerAccordion">
                <div class="accordion-body">
                    @if ($center->coordinators->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Coordinator 1</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Coordinator 2</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($center->coordinators as $index => $coordinator)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $coordinator->coordinator1_name ?? '—' }}</td>
                                    <td>{{ $coordinator->coordinator1_phone ?? '—' }}</td>
                                    <td>{{ $coordinator->coordinator1_email ?? '—' }}</td>
                                    <td>{{ $coordinator->coordinator2_name ?? '—' }}</td>
                                    <td>{{ $coordinator->coordinator2_phone ?? '—' }}</td>
                                    <td>{{ $coordinator->coordinator2_email ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <p class="text-muted mb-0">No coordinators assigned yet.</p>
                    @endif
                </div>
            </div>
        </div>


    </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; }
</style>
@endsection