{{-- resources/views/school/attendance/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Attendance')
@section('breadcrumb', 'Attendance')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0" style="color:#0f3d23;">
            <i class="bi bi-person-check me-2" style="color:#c9a94d;"></i>Attendance Recording
        </h4>
        <p class="text-muted mb-0" style="font-size:.85rem;">
            Record end-of-term attendance summaries per class.
        </p>
    </div>
    <a href="{{ route('school.attendance.summary') }}" class="btn btn-outline-secondary" style="border-radius:8px;">
        <i class="bi bi-bar-chart me-1"></i>View Summary
    </a>
</div>

<div class="card table-card mb-4">
    <div class="card-header bg-white py-3">
        <span class="fw-semibold"><i class="bi bi-pencil me-1" style="color:#c9a94d;"></i>Select Class & Term</span>
    </div>
    <div class="card-body p-4">
        <form action="{{ route('school.attendance.sheet') }}" method="GET" class="row g-3 align-items-end">
            <div class="col-md-5">
                <label class="form-label fw-semibold">Class / Arm <span class="text-danger">*</span></label>
                <select name="class_arm_id" class="form-select" required>
                    <option value="">— Select class —</option>
                    @foreach($classArms as $arm)
                    <option value="{{ $arm->id }}">{{ $arm->full_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">Term <span class="text-danger">*</span></label>
                <select name="term_id" class="form-select" required>
                    <option value="">— Select term —</option>
                    @foreach($terms as $term)
                    <option value="{{ $term->id }}">
                        {{ $term->name }}{{ $term->is_current ? ' (Current)' : '' }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn w-100" style="background:#1a6b3c; color:#fff; border-radius:8px;">
                    <i class="bi bi-arrow-right me-1"></i>Open Sheet
                </button>
            </div>
        </form>
    </div>
</div>

<div class="alert" style="background:#e8f5ee; border-left:4px solid #1a6b3c; border-radius:8px;">
    <i class="bi bi-info-circle me-1" style="color:#1a6b3c;"></i>
    <strong>How attendance works:</strong> At the end of each term, enter the total number of days school was open
    and how many days each student was present. This data appears on report cards and transcripts.
</div>
@endsection