@extends('layouts.app')
@section('title', 'Student FYP - Admin')

@section('content')
<div class="page-header">
    <h2>Student FYP Assignments</h2>
    <p style="font-size: 0.8rem; color: #64748b; margin: 0;">Manage student FYP enrollments and supervisor allocation</p>
</div>

{{-- Create Student & Assign FYP Form --}}
<div class="form-card mb-4">
    <div class="card-header">Create Student & Assign FYP</div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.students.store-student') }}">
            @csrf

            <div class="mb-3">
                <label class="form-label">Select Existing Student</label>
                <select id="existingStudent" name="existing_student_id" class="form-select">
                    <option value="">-- Select a student to auto-fill (optional) --</option>
                    @foreach($studentList as $s)
                        <option value="{{ $s->id }}">{{ $s->fullname }} ({{ $s->user_id }})</option>
                    @endforeach
                </select>
                <small style="color: #64748b;">Selecting a student will auto-fill the form below.</small>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Full Name <span class="text-danger">*</span></label>
                    <input type="text" name="fullname" id="fullname" class="form-control @error('fullname') is-invalid @enderror" value="{{ old('fullname') }}" required>
                    @error('fullname') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Student ID <span class="text-danger">*</span></label>
                    <input type="text" name="user_id" id="user_id" class="form-control @error('user_id') is-invalid @enderror" value="{{ old('user_id') }}" required>
                    @error('user_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Program</label>
                    <input type="text" name="program" id="program" class="form-control @error('program') is-invalid @enderror" value="{{ old('program') }}">
                    @error('program') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Contact</label>
                    <input type="text" name="contact" id="contact" class="form-control @error('contact') is-invalid @enderror" value="{{ old('contact') }}">
                    @error('contact') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Email <span class="text-danger">*</span></label>
                    <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">FYP Duration</label>
                    <input type="text" name="fyp_duration" class="form-control @error('fyp_duration') is-invalid @enderror" value="{{ old('fyp_duration') }}" placeholder="e.g. Semester 1 2025/2026">
                    @error('fyp_duration') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Supervisor</label>
                    <select name="supervisor_id" class="form-select @error('supervisor_id') is-invalid @enderror">
                        <option value="">-- Select Supervisor --</option>
                        @foreach($supervisors as $sv)
                            <option value="{{ $sv->id }}" {{ old('supervisor_id') == $sv->id ? 'selected' : '' }}>{{ $sv->fullname }} ({{ $sv->user_id }})</option>
                        @endforeach
                    </select>
                    @error('supervisor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">FYP Title</label>
                    <select name="project_title_id" class="form-select @error('project_title_id') is-invalid @enderror">
                        <option value="">-- Select Project Title --</option>
                        @foreach($titles as $t)
                            <option value="{{ $t->id }}" {{ old('project_title_id') == $t->id ? 'selected' : '' }}>{{ $t->title }} [{{ $t->category->name }}]</option>
                        @endforeach
                    </select>
                    @error('project_title_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Create Student & Assign FYP</button>
            </div>
        </form>
    </div>
</div>

{{-- FYP Assignment List --}}
<div class="table-card">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.students.index') }}" class="d-flex gap-2" style="width: 350px;">
            <input type="text" name="search" class="form-control form-control-sm" placeholder="Search by name or ID..." value="{{ request('search') }}">
            <button type="submit" class="btn btn-sm btn-primary">Search</button>
            @if(request('search'))
                <a href="{{ route('admin.students.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
            @endif
        </form>
    </div>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Student</th>
                <th>Student ID</th>
                <th>Supervisor</th>
                <th>Project Title</th>
                <th>Duration</th>
                <th>Status</th>
                <th style="width: 160px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($students as $i => $fyp)
            <tr>
                <td>{{ $students->firstItem() + $i }}</td>
                <td>{{ optional($fyp->student)->fullname }}</td>
                <td style="font-family: monospace;">{{ optional($fyp->student)->user_id }}</td>
                <td>{{ $fyp->supervisorDisplayName() }}</td>
                <td>{{ $fyp->projectTitle?->title ?? '-' }}</td>
                <td>{{ $fyp->fyp_duration ?? '-' }}</td>
                <td>
                    <span class="badge-status
                        @if($fyp->status === 'Active') badge-approved
                        @elseif($fyp->status === 'Completed') badge-proceed
                        @else badge-pending
                        @endif
                    ">{{ $fyp->status }}</span>
                </td>
                <td>
                    <a href="{{ route('admin.students.edit', $fyp) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                    <form method="POST" action="{{ route('admin.students.destroy', $fyp) }}" style="display:inline;" onsubmit="return confirm('Remove this FYP assignment?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="8" class="empty-state">No FYP assignments found.</td></tr>
            @endforelse
        </tbody>
    </table>

    <div class="px-3 py-2">{{ $students->withQueryString()->links() }}</div>
</div>

@push('scripts')
<script>
document.getElementById('existingStudent').addEventListener('change', function() {
    const studentId = this.value;
    if (!studentId) {
        document.getElementById('fullname').value = '';
        document.getElementById('user_id').value = '';
        document.getElementById('program').value = '';
        document.getElementById('contact').value = '';
        document.getElementById('email').value = '';
        return;
    }

    fetch('/admin/students/' + studentId + '/details')
        .then(response => response.json())
        .then(data => {
            document.getElementById('fullname').value = data.fullname || '';
            document.getElementById('user_id').value = data.user_id || '';
            document.getElementById('program').value = data.program || '';
            document.getElementById('contact').value = data.contact || '';
            document.getElementById('email').value = data.email || '';
        })
        .catch(err => console.error('Error fetching student details:', err));
});
</script>
@endpush
@endsection