@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-success mb-1">
                <i class="bi bi-person-lines-fill me-2"></i> Edit Trainee
            </h2>
            <p class="text-muted mb-0">Update trainee information below.</p>
        </div>
        <a href="{{ route('students.index') }}" class="btn btn-outline-success">
            <i class="bi bi-arrow-left-circle me-1"></i> Back to Trainees
        </a>
    </div>

    <!-- Flash Message -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm rounded-3" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

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

    <!-- Edit Form -->
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body">
            <form action="{{ route('admin.trainees.update', $trainee->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label for="name" class="form-label fw-bold">Name</label>
                    <input type="text" name="name" id="name" class="form-control" 
                           value="{{ old('name', $trainee->name) }}" required>
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label fw-bold">Email</label>
                    <input type="email" name="email" id="email" class="form-control" 
                           value="{{ old('email', $trainee->email) }}" required>
                </div>

                <div class="mb-3">
                    <label for="role" class="form-label fw-bold">Role</label>
                    <input type="text" id="role" class="form-control" value="{{ ucfirst($trainee->role) }}" disabled>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('students.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-success">Update Trainee</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Custom Page Styles -->
<style>
    body {
        background: linear-gradient(135deg, #f5fff8, #e8f7ee);
    }

    .card-body {
        padding: 2rem;
    }

    .btn-success {
        transition: all 0.2s ease;
    }

    .btn-success:hover {
        background-color: #198754;
        color: #fff;
    }

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: #fff;
    }
</style>
@endsection