@extends('layouts.app')

@section('content')
<div class="container-fluid py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary mb-0">👩‍🏫 My Trainees Dashboard</h2>
        <a href="{{ route('trainer.dashboard') }}" class="btn btn-outline-primary btn-sm shadow-sm">
            <i class="bi bi-arrow-left-circle"></i> Back to Dashboard
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success shadow-sm rounded-pill px-4">{{ session('success') }}</div>
    @endif

    @if($trainees->isEmpty())
        <div class="text-center mt-5 text-muted">
            <p>No trainees assigned yet.</p>
        </div>
    @else
    <div class="table-responsive shadow-sm rounded-3">
        <table class="table table-bordered table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Trainee</th>
                    <th>Email</th>
                    <th>Module</th>
                    <th>Status</th>
                    <th>Score</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($trainees as $trainee)
                    @forelse($trainee->modules as $module)
                    <tr>
                        <td>{{ $loop->parent->iteration }}</td>
                        <td>{{ $trainee->name }}</td>
                        <td>{{ $trainee->email }}</td>
                        <td>
                            <strong>{{ $module->title }}</strong>
                            @if($module->file_path)
                                <a href="{{ route('modules.download', $module->id) }}" 
                                   class="btn btn-sm btn-outline-primary ms-2" target="_blank">
                                   <i class="bi bi-download"></i>
                                </a>
                            @endif
                        </td>
                        <td>
                            <select class="form-select form-select-sm module-status" data-trainee-id="{{ $trainee->id }}" data-module-id="{{ $module->id }}">
                                <option value="assigned" {{ $module->pivot->status == 'assigned' ? 'selected' : '' }}>Assigned</option>
                                <option value="in_progress" {{ $module->pivot->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                <option value="completed" {{ $module->pivot->status == 'completed' ? 'selected' : '' }}>Completed</option>
                            </select>
                        </td>
                        <td>
                            <input type="number" step="0.01" min="0" max="100"
                                class="form-control form-control-sm module-score"
                                data-trainee-id="{{ $trainee->id }}"
                                data-module-id="{{ $module->id }}"
                                value="{{ $module->pivot->score }}">
                        </td>
                        <td>
                            <button class="btn btn-success btn-sm update-module-btn" data-trainee-id="{{ $trainee->id }}" data-module-id="{{ $module->id }}">
                                <i class="bi bi-check2-circle"></i> Update
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $trainee->name }}</td>
                        <td>{{ $trainee->email }}</td>
                        <td colspan="4" class="text-muted fst-italic text-center">No modules assigned</td>
                    </tr>
                    @endforelse
                    {{-- Add row to assign new module --}}
                    <tr class="table-secondary">
                        <td colspan="7">
                            <form action="{{ route('trainer.trainees.assignModule') }}" method="POST" class="d-flex gap-2">
                                @csrf
                                <input type="hidden" name="trainee_id" value="{{ $trainee->id }}">
                                <select name="module_id" class="form-select form-select-sm" required>
                                    <option value="">Assign New Module</option>
                                    @foreach($modules as $module)
                                        <option value="{{ $module->id }}">{{ $module->title }}</option>
                                    @endforeach
                                </select>
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="bi bi-plus-circle"></i> Assign
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>
@endsection

@section('styles')
<style>
    .table thead th {
        vertical-align: middle;
    }
    .table tbody td select,
    .table tbody td input {
        width: 100%;
    }
    .table-secondary form {
        margin-bottom: 0;
    }
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    document.querySelectorAll('.update-module-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            const traineeId = btn.dataset.traineeId;
            const moduleId = btn.dataset.moduleId;
            const row = btn.closest('tr');
            const status = row.querySelector('.module-status').value;
            const score = row.querySelector('.module-score').value;

            try {
                const response = await fetch("{{ route('trainer.trainees.updateModules') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        trainee_id: traineeId,
                        modules: {
                            [moduleId]: { status, score }
                        }
                    })
                });

                if(response.ok){
                    alert("✅ Module updated successfully!");
                } else {
                    const error = await response.json();
                    alert("Error: " + (error.message || 'Unknown error'));
                }
            } catch(err){
                console.error(err);
                alert("An unexpected error occurred.");
            }
        });
    });
});
</script>
@endsection