@extends('layouts.app')

@section('content')
<style>
    body {
        background-color: #f4fdf6;
    }

    .attendance-container {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(46, 125, 50, 0.15);
        padding: 30px;
        margin-top: 30px;
        transition: all 0.3s ease-in-out;
    }

    h2 {
        color: #2e7d32;
        font-weight: 700;
    }

    .form-label {
        font-weight: 600;
        color: #2e7d32;
    }

    .form-control, .form-select {
        border: 1px solid #c8e6c9;
    }

    .form-control:focus, .form-select:focus {
        border-color: #2e7d32;
        box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
    }

    .btn-success {
        background-color: #2e7d32;
        border-color: #2e7d32;
    }

    .btn-success:hover {
        background-color: #256a28;
        border-color: #256a28;
    }

    .btn-secondary {
        background-color: #9e9e9e;
        border-color: #9e9e9e;
    }

    .btn-secondary:hover {
        background-color: #757575;
        border-color: #757575;
    }

    .dropdown-loading {
        font-style: italic;
        color: #777;
    }

    .d-flex.gap-2 > * {
        min-width: 120px;
    }
</style>

<div class="container attendance-container">
    <h2 class="mb-4">
        <i class="bi bi-clipboard-check me-2"></i>Record Attendance
    </h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('attendances.store') }}">
        @csrf
        <div class="row g-3">

            <!-- Classroom -->
            <div class="col-md-4">
                <label for="class_room_id" class="form-label">Classroom</label>
                <select id="class_room_id" name="class_room_id" class="form-select" required>
                    <option value="">Select Class</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}"
                            {{ old('class_room_id') == $class->id ? 'selected' : '' }}>
                            {{ $class->name ?? 'Class '.$class->id }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Trainee -->
            <div class="col-md-4">
                <label for="trainee_id" class="form-label">Trainee</label>
                <select id="trainee_id" name="trainee_id" class="form-select" required>
                    <option value="">Select Class First</option>
                </select>
            </div>

            <!-- Trainer -->
            <div class="col-md-4">
                <label for="trainer_display" class="form-label">Trainer</label>
                <select id="trainer_display" class="form-select" disabled>
                    <option value="">Select Class First</option>
                </select>
                <input type="hidden" name="trainer_id" id="trainer_id">
            </div>

            <!-- Attendance Info -->
            <div class="col-md-4">
                <label class="form-label">Attendance Date</label>
                <input type="date" name="attendance_date" class="form-control"
                       value="{{ old('attendance_date', date('Y-m-d')) }}" required>
            </div>

            <div class="col-md-4">
                <label class="form-label">Check In Time</label>
                <input type="time" name="check_in_time" class="form-control"
                       value="{{ old('check_in_time') }}">
            </div>

            <div class="col-md-4">
                <label class="form-label">Check Out Time</label>
                <input type="time" name="check_out_time" class="form-control"
                       value="{{ old('check_out_time') }}">
            </div>

            <div class="col-md-4">
                <label class="form-label">Status</label>
                <select name="status" class="form-select" required>
                    <option value="present" {{ old('status') == 'present' ? 'selected' : '' }}>Present</option>
                    <option value="absent" {{ old('status') == 'absent' ? 'selected' : '' }}>Absent</option>
                    <option value="late" {{ old('status') == 'late' ? 'selected' : '' }}>Late</option>
                </select>
            </div>

            <div class="col-md-8">
                <label class="form-label">Trainer-Generated Code (Optional)</label>
                <input type="text" name="attendance_code" class="form-control"
                       value="{{ old('attendance_code') }}" placeholder="Enter code if required">
            </div>

            <!-- Submit Buttons -->
            <div class="col-12 mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-success px-4">
                    <i class="bi bi-check2-circle me-1"></i> Save Attendance
                </button>
                <a href="{{ route('attendances.index') }}" class="btn btn-secondary px-4">Cancel</a>
            </div>

        </div>
    </form>
</div>

<!-- AJAX Script -->
<script>
document.getElementById('class_room_id').addEventListener('change', function() {
    const classId = this.value;
    const traineeSelect = document.getElementById('trainee_id');
    const trainerDisplay = document.getElementById('trainer_display');
    const trainerHidden = document.getElementById('trainer_id');

    traineeSelect.innerHTML = '<option class="dropdown-loading">Loading...</option>';
    trainerDisplay.innerHTML = '<option class="dropdown-loading">Loading...</option>';
    trainerHidden.value = '';

    if (classId) {
        fetch(`/api/classrooms/${classId}/details`)
            .then(response => response.json())
            .then(data => {
                // Populate trainees
                if (data.trainees && data.trainees.length > 0) {
                    traineeSelect.innerHTML = '<option value="">Select Trainee</option>';
                    data.trainees.forEach(trainee => {
                        traineeSelect.innerHTML += `<option value="${trainee.id}">${trainee.name}</option>`;
                    });
                } else {
                    traineeSelect.innerHTML = '<option value="">No trainees assigned</option>';
                }

                // Populate trainer
                if (data.trainer) {
                    trainerDisplay.innerHTML = `<option value="${data.trainer.id}" selected>${data.trainer.name}</option>`;
                    trainerHidden.value = data.trainer.id;
                } else {
                    trainerDisplay.innerHTML = '<option value="">No trainer assigned</option>';
                    trainerHidden.value = '';
                }
            })
            .catch(() => {
                traineeSelect.innerHTML = '<option value="">Error loading trainees</option>';
                trainerDisplay.innerHTML = '<option value="">Error loading trainer</option>';
                trainerHidden.value = '';
            });
    } else {
        traineeSelect.innerHTML = '<option value="">Select Class First</option>';
        trainerDisplay.innerHTML = '<option value="">Select Class First</option>';
        trainerHidden.value = '';
    }
});
</script>
@endsection