@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0"><i class="fas fa-list-check me-2"></i> Attendance Details — {{ $attendanceSession->session_date->format('Y-m-d') }}</h4>
            <a href="{{ route('attendance.index') }}" class="btn btn-light btn-sm"><i class="fas fa-arrow-left"></i> Back</a>
        </div>

        <div class="card-body">
            <p><strong>Class:</strong> {{ $attendanceSession->class->subject->title ?? 'N/A' }}</p>
            <p><strong>Instructor:</strong> {{ $attendanceSession->takenBy->username ?? 'N/A' }}</p>

            <div class="table-responsive mt-4">
                <table class="table table-bordered align-middle text-center">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Student</th>
                            <th>Status</th>
                            <th>Remark</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($attendanceSession->attendanceEntries as $index => $entry)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $entry->student->user->username ?? 'N/A' }}</td>
                                <td>
                                    <span class="badge bg-{{ $entry->status == 'present' ? 'success' : ($entry->status == 'absent' ? 'danger' : 'warning') }}">
                                        {{ ucfirst($entry->status) }}
                                    </span>
                                </td>
                                <td>{{ $entry->remark ?? '-' }}</td>
                                <td>
                                    @if(!$attendanceSession->locked)
                                   <form action="{{ route('attendance.updateEntry', $entry->id) }}" method="POST" class="d-inline update-attendance-form">
                                    @csrf
                                    @method('PUT')
                                    <select name="status" class="form-select form-select-sm d-inline w-auto">
                                        <option value="present" {{ $entry->status == 'present' ? 'selected' : '' }}>Present</option>
                                        <option value="absent" {{ $entry->status == 'absent' ? 'selected' : '' }}>Absent</option>
                                        <option value="late" {{ $entry->status == 'late' ? 'selected' : '' }}>Late</option>
                                        <option value="excused" {{ $entry->status == 'excused' ? 'selected' : '' }}>Excused</option>
                                    </select>
                                    <input type="text" name="remark" class="form-control form-control-sm d-inline w-auto" placeholder="Remark" value="{{ $entry->remark }}">
                                    <button type="submit" class="btn btn-sm btn-success"><i class="fas fa-save"></i></button>
                                </form>
                                    @else
                                        <span class="text-muted">Locked</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4 text-end">
                @if(!$attendanceSession->locked)
                <form action="{{ route('attendance.lock', $attendanceSession->id) }}" method="POST" class="d-inline">
                    @csrf
                    <button class="btn btn-warning"><i class="fas fa-lock"></i> Lock Attendance</button>
                </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.update-attendance-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            // Show loading state
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            submitBtn.disabled = true;

            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Show success message
                    const toast = document.createElement('div');
                    toast.className = 'alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-3';
                    toast.style.zIndex = '9999';
                    toast.innerHTML = `
                        Attendance updated successfully!
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    `;
                    document.body.appendChild(toast);

                    // Auto-hide after 2 seconds
                    setTimeout(() => {
                        toast.remove();
                        location.reload(); // Reload to see changes
                    }, 2000);
                } else {
                    alert('Error: ' + (data.message || 'Update failed'));
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                alert('An error occurred. Please try again.');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    });
});
</script>
@endpush