@extends('layouts.app')

@section('title', 'Students Inventory')

@section('content')
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0 fw-bold">Students Inventory</h4>
    </div>

    <!-- Summary Cards -->
    <div class="row g-2 mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white h-100 border-0 shadow-sm">
                <div class="card-body p-2 text-center">
                    <h6 class="text-uppercase fw-semibold mb-1" style="opacity: 0.9; font-size: 11px;">Total Students</h6>
                    <h2 class="mb-0 fw-bold fs-4">{{ $totalStudents }}</h2>
                    <div class="mt-1 text-white-50" style="font-size: 9px;">
                        <i class="fa fa-male"></i> {{ $boys }} Boys &nbsp; | &nbsp; <i class="fa fa-female"></i> {{ $girls }} Girls
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-success text-white h-100 border-0 shadow-sm">
                <div class="card-body p-2 text-center">
                    <h6 class="text-uppercase fw-semibold mb-1" style="opacity: 0.9; font-size: 11px;">Boarding Students</h6>
                    <h2 class="mb-0 fw-bold fs-4">{{ $boardingTotal }}</h2>
                    <div class="mt-1 text-white-50" style="font-size: 9px;">
                        <i class="fa fa-male"></i> {{ $boardingBoys }} Boys &nbsp; | &nbsp; <i class="fa fa-female"></i> {{ $boardingGirls }} Girls
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-info text-white h-100 border-0 shadow-sm">
                <div class="card-body p-2 text-center">
                    <h6 class="text-uppercase fw-semibold mb-1" style="opacity: 0.9; font-size: 11px;">Day Scholars</h6>
                    <h2 class="mb-0 fw-bold fs-4">{{ $dayTotal }}</h2>
                    <div class="mt-1 text-white-50" style="font-size: 9px;">
                        <i class="fa fa-male"></i> {{ $dayBoys }} Boys &nbsp; | &nbsp; <i class="fa fa-female"></i> {{ $dayGirls }} Girls
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-dark text-white h-100 border-0 shadow-sm">
                <div class="card-body p-2 text-center">
                    <h6 class="text-uppercase fw-semibold mb-1" style="opacity: 0.9; font-size: 11px;">Overall Ratio</h6>
                    <h2 class="mb-0 fw-bold fs-4">
                        @if($totalStudents > 0)
                            {{ round(($boys / $totalStudents) * 100) }}% : {{ round(($girls / $totalStudents) * 100) }}%
                        @else
                            0% : 0%
                        @endif
                    </h2>
                    <div class="mt-1 text-white-50" style="font-size: 9px;">Boys to Girls (%)</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Class Breakdown Table -->
    <div class="card border-0 shadow-sm" style="border-radius: 8px;">
        <!-- Removed card header -->
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Class Name</th>
                            <th class="text-center">Total Students</th>
                            <th class="text-center">Boys</th>
                            <th class="text-center">Girls</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($classStats as $className => $stats)
                        <tr>
                            <td class="fw-bold">{{ $className }}</td>
                            <td class="text-center"><span class="badge bg-primary rounded-pill px-3">{{ $stats['total'] }}</span></td>
                            <td class="text-center">{{ $stats['boys'] }}</td>
                            <td class="text-center">{{ $stats['girls'] }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">No student class data available.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection