@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-calendar-check me-2"></i> Attendance Sessions</h4>
            <a href="{{ route('dashboard') }}" class="btn btn-light btn-sm"><i class="fas fa-home"></i> Dashboard</a>
        </div>

        <div class="card-body">
            {{-- Filter Form --}}
            <form method="GET" class="row g-3 mb-4">
                <div class="col-md-3">
                    <label>Start Date</label>
                    <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
                </div>
                <div class="col-md-3">
                    <label>End Date</label>
                    <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                </div>
                <div class="col-md-3">
                    <label>Class</label>
                    <select name="class_id" class="form-select">
                        <option value="">All</option>
                        @foreach(\App\Models\ClassModel::with('subject')->get() as $class)
                            <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                                {{ $class->batchSubject->subject->name ?? 'Unknown' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-primary w-100"><i class="fas fa-filter"></i> Filter</button>
                </div>
            </form>

            {{-- Table --}}
            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle text-center">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Class</th>
                            <th>Date</th>
                            <th>Taken By</th>
                            <th>Locked</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($attendanceSessions as $index => $session)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $session->class->batch->name ?? 'N/A' }}</td>
                                <td>{{ $session->session_date->format('Y-m-d') }}</td>
                                <td>{{ $session->takenBy->username ?? 'N/A' }}</td>
                                <td>
                                    @if($session->locked)
                                        <span class="badge bg-danger">Locked</span>
                                    @else
                                        <span class="badge bg-success">Open</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('attendance.show', $session->id) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i> View
                                    </a>

                                    {{-- ✅ FIXED: Use the same route for both lock and unlock --}}
                                    <form action="{{ route('attendance.lock', $session->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="action" value="{{ $session->locked ? 'unlock' : 'lock' }}">
                                        @if($session->locked)
                                            <button type="submit" class="btn btn-sm btn-warning">
                                                <i class="fas fa-unlock"></i> Unlock
                                            </button>
                                        @else
                                            <button type="submit" class="btn btn-sm btn-secondary">
                                                <i class="fas fa-lock"></i> Lock
                                            </button>
                                        @endif
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-muted">No attendance sessions found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{ $attendanceSessions->links() }}
        </div>
    </div>
</div>

{{-- JavaScript for AJAX lock/unlock (optional) --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Optional: Add AJAX handling for lock/unlock
    const lockForms = document.querySelectorAll('form[action*="/lock"]');

    lockForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const sessionId = this.action.split('/').pop();
            const action = formData.get('action');

            if (confirm(`Are you sure you want to ${action} this attendance session?`)) {
                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ action: action })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message);
                        location.reload();
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred. Please try again.');
                });
            }
        });
    });
});
</script>
@endsection