@extends('layouts.app')
@section('title', 'Attendance Sheet')
@section('breadcrumb', 'Attendance › ' . $classArm->full_name)

@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 Sheet
        </h4>
        <p class="text-muted mb-0" style="font-size:.85rem;">
            {{ $classArm->full_name }} &bull; {{ $term->name }} &bull; {{ $school->name }}
        </p>
    </div>
    <button id="btnSave" class="btn" style="background:#1a6b3c; color:#fff; border-radius:8px;">
        <i class="bi bi-cloud-check me-1"></i><span id="saveLabel">Save Attendance</span>
    </button>
</div>

{{-- Global days opened --}}
<div class="card table-card mb-4">
    <div class="card-body py-3">
        <div class="row align-items-center">
            <div class="col-md-4">
                <label class="form-label fw-semibold mb-1">
                    Total Days School Opened This Term
                    <span class="text-danger">*</span>
                </label>
                <input type="number" id="globalDays" class="form-control" style="max-width:160px;"
                       min="1" max="120" placeholder="e.g. 65">
                <div class="form-text">Set once — applies to all students. Individual days present below.</div>
            </div>
            <div class="col-md-4">
                <button type="button" id="btnApplyGlobal" class="btn btn-outline-secondary" style="border-radius:7px;">
                    <i class="bi bi-arrow-down me-1"></i>Apply to All Rows
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card table-card">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle" id="attTable">
            <thead>
                <tr>
                    <th style="width:30px;">#</th>
                    <th>Student Name</th>
                    <th style="width:160px;">Days School Opened</th>
                    <th style="width:160px;">Days Present</th>
                    <th style="width:100px;">Days Absent</th>
                    <th style="width:80px;">Rate</th>
                </tr>
            </thead>
            <tbody>
                @foreach($enrollments as $i => $enrollment)
                @php $att = $existing[$enrollment->id] ?? null; @endphp
                <tr>
                    <td class="text-muted">{{ $i + 1 }}</td>
                    <td>
                        <div class="fw-semibold" style="font-size:.88rem;">{{ $enrollment->student->full_name }}</div>
                        <div class="text-muted" style="font-size:.72rem;">{{ $enrollment->student->mcss_student_id }}</div>
                        <input type="hidden" class="enrollment-id" value="{{ $enrollment->id }}">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm days-opened"
                               value="{{ $att?->days_school_opened }}" min="0" max="120" placeholder="0">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm days-present"
                               value="{{ $att?->days_present }}" min="0" max="120" placeholder="0">
                    </td>
                    <td class="fw-bold days-absent text-center">
                        {{ $att ? $att->days_absent : '—' }}
                    </td>
                    <td class="rate-display text-center fw-bold" style="font-size:.82rem;">
                        @if($att && $att->days_school_opened > 0)
                            <span style="color:{{ $att->attendance_percent >= 75 ? '#1a6b3c' : '#c62828' }}">
                                {{ $att->attendance_percent }}%
                            </span>
                        @else
                            —
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
const SAVE_URL   = "{{ route('school.attendance.save') }}";
const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').content;
const TERM_ID    = {{ $term->id }};

// Recalculate absent + rate when inputs change
document.querySelectorAll('#attTable tbody tr').forEach(row => {
    const opened  = row.querySelector('.days-opened');
    const present = row.querySelector('.days-present');
    const absent  = row.querySelector('.days-absent');
    const rate    = row.querySelector('.rate-display');

    function recalc() {
        const o = parseInt(opened.value) || 0;
        const p = Math.min(parseInt(present.value) || 0, o);
        present.value = p;
        absent.textContent = o > 0 ? (o - p) : '—';
        if (o > 0) {
            const pct = Math.round((p / o) * 100);
            rate.innerHTML = `<span style="color:${pct >= 75 ? '#1a6b3c' : '#c62828'}">${pct}%</span>`;
        } else {
            rate.textContent = '—';
        }
    }
    opened.addEventListener('input', recalc);
    present.addEventListener('input', recalc);
});

// Apply global days opened
document.getElementById('btnApplyGlobal').addEventListener('click', function () {
    const val = document.getElementById('globalDays').value;
    if (!val) return;
    document.querySelectorAll('.days-opened').forEach(i => {
        i.value = val;
        i.dispatchEvent(new Event('input'));
    });
});

// Save
document.getElementById('btnSave').addEventListener('click', async function () {
    const label = document.getElementById('saveLabel');
    label.textContent = 'Saving…';
    this.disabled = true;

    const records = [];
    document.querySelectorAll('#attTable tbody tr').forEach(row => {
        records.push({
            enrollment_id:      row.querySelector('.enrollment-id').value,
            days_school_opened: row.querySelector('.days-opened').value || 0,
            days_present:       row.querySelector('.days-present').value || 0,
        });
    });

    try {
        const res  = await fetch(SAVE_URL, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body:    JSON.stringify({ term_id: TERM_ID, records }),
        });
        const data = await res.json();
        label.textContent = data.success ? '✓ Saved' : 'Error';
        setTimeout(() => { label.textContent = 'Save Attendance'; this.disabled = false; }, 2000);
    } catch (e) {
        label.textContent = 'Error — Retry';
        this.disabled = false;
    }
}.bind(document.getElementById('btnSave')));
</script>
@endpush