@extends('admin.layouts.app')
@section('title', 'Attendance Report')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.reports.index') }}">Reports</a></li>
    <li class="breadcrumb-item active">Attendance</li>
@endsection

@section('content')
<div class="page-header">
    <h1 class="page-title">Attendance Report</h1>
    <p class="page-subtitle">Generate and view student attendance analytics</p>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label">Select Class <span class="text-danger">*</span></label>
                <select name="class_id" class="form-select" required>
                    <option value="">-- Select Class --</option>
                    @foreach($classes as $c)
                        <option value="{{ $c->id }}" {{ request('class_id') == $c->id ? 'selected' : '' }}>
                            {{ $c->name }} ({{ $c->level }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" name="from_date" class="form-control" value="{{ request('from_date') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" name="to_date" class="form-control" value="{{ request('to_date') }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-filter me-1"></i> Filter
                </button>
            </div>
        </form>
    </div>
</div>

@if(request()->filled('class_id'))
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-bar-chart-fill me-2 text-primary"></i> Attendance Analytics</span>
        <button class="btn btn-sm btn-outline-secondary" onclick="window.print()">
            <i class="bi bi-printer"></i> Print
        </button>
    </div>
    <div class="card-body p-0">
        @if($data->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">Student</th>
                        <th>Code / Roll No</th>
                        <th class="text-center">Total Classes</th>
                        <th class="text-center">Attended</th>
                        <th class="text-center">Percentage</th>
                        <th class="text-end pe-4">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data as $row)
                    <tr>
                        <td class="ps-4 fw-medium">{{ $row->student_name }}</td>
                        <td>
                            <div class="text-muted" style="font-size:0.8rem">{{ $row->student_code }}</div>
                            <div style="font-size:0.75rem">Roll: {{ $row->roll_no }}</div>
                        </td>
                        <td class="text-center fw-bold">{{ $row->total }}</td>
                        <td class="text-center fw-bold text-primary">{{ $row->attended }}</td>
                        <td class="text-center">
                            @if($row->pct < 75)
                                <span class="badge bg-danger">{{ $row->pct }}%</span>
                            @elseif($row->pct < 85)
                                <span class="badge bg-warning text-dark">{{ $row->pct }}%</span>
                            @else
                                <span class="badge bg-success">{{ $row->pct }}%</span>
                            @endif
                            <div class="progress mt-2" style="height:4px">
                                <div class="progress-bar {{ $row->pct < 75 ? 'bg-danger' : ($row->pct < 85 ? 'bg-warning' : 'bg-success') }}" 
                                     style="width: {{ $row->pct }}%"></div>
                            </div>
                        </td>
                        <td class="text-end pe-4">
                            @if($row->pct < 75)
                                <span class="text-danger small fw-bold"><i class="bi bi-exclamation-triangle-fill me-1"></i> Defaulter</span>
                            @else
                                <span class="text-success small fw-bold"><i class="bi bi-check-circle-fill me-1"></i> Eligible</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center py-5 text-muted">
            <i class="bi bi-inbox fs-1 d-block mb-3"></i>
            <h5>No attendance records found</h5>
            <p class="mb-0">Try adjusting your date range filters.</p>
        </div>
        @endif
    </div>
</div>
@else
<div class="text-center py-5 text-muted">
    <i class="bi bi-funnel fs-1 d-block mb-3 opacity-50"></i>
    <h5>Select a class to generate report</h5>
    <p>Use the filters above to view attendance analytics.</p>
</div>
@endif

@endsection

@push('styles')
<style>
@media print {
    #sidebar, #topnav, .card-header .btn, .card:first-of-type { display: none !important; }
    #main-content { margin-left: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
}
</style>
@endpush