@extends('layout.layout')

@section('title', 'Add Student Feedback')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Add Student Feedback"
                    description="Create feedback for the selected student using the required stage for this course.">
                    <a href="{{ route('students.index') }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <form action="{{ route('students.feedback.store') }}" method="POST">
                    @csrf

                    <input type="hidden" name="student_id" value="{{ $student->id }}">
                    <input type="hidden" name="staff_schedule_id" value="{{ $staffScheduleId }}">
                    <input type="hidden" name="session_id" value="{{ $sessionId }}">
                    <input type="hidden" name="type" value="{{ old('type', $nextType) }}">

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Feedback Overview</h5>
                                <p class="form-section__sub mb-0">Complete the required fields for the selected stage.</p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="type" class="asset-label">Type</label>
                                    <select id="type" class="asset-select" disabled>
                                        <option value="initial" {{ $nextType == 'initial' ? 'selected' : '' }}>Initial</option>
                                        <option value="mid" {{ $nextType == 'mid' ? 'selected' : '' }}>Mid</option>
                                        <option value="final" {{ $nextType == 'final' ? 'selected' : '' }}>Final</option>
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Student</label>
                                    <div class="readonly-card">
                                        {{ $student->first_name ?? '' }} {{ $student->last_name ?? '' }}
                                    </div>
                                </div>

                                @if (in_array($nextType, ['initial', 'mid']))
                                    <div class="asset-col-6">
                                        <label for="level" class="asset-label">Level</label>
                                        <select name="level" id="level" class="asset-select @error('level') asset-invalid @enderror">
                                            <option value="">Select Level</option>
                                            <option value="Pioneer" {{ old('level') == 'Pioneer' ? 'selected' : '' }}>Pioneer</option>
                                            <option value="Advanced" {{ old('level') == 'Advanced' ? 'selected' : '' }}>Advanced</option>
                                            <option value="Super Advanced" {{ old('level') == 'Super Advanced' ? 'selected' : '' }}>Super Advanced</option>
                                        </select>
                                        @error('level')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="asset-col-6">
                                        <label for="need" class="asset-label">Need</label>
                                        <input type="text" name="need" id="need" class="asset-input @error('need') asset-invalid @enderror"
                                            value="{{ old('need') }}" placeholder="Enter student needs">
                                        @error('need')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="asset-col-12">
                                        <label for="first_feedback" class="asset-label">First Feedback</label>
                                        <textarea name="first_feedback" id="first_feedback" rows="4"
                                            class="asset-input @error('first_feedback') asset-invalid @enderror"
                                            placeholder="Enter feedback summary...">{{ old('first_feedback') }}</textarea>
                                        @error('first_feedback')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>
                                @else
                                    <div class="asset-col-6">
                                        <label for="level" class="asset-label">Level</label>
                                        <select name="level" id="level" class="asset-select @error('level') asset-invalid @enderror">
                                            <option value="">Select Level</option>
                                            <option value="Pioneer" {{ old('level') == 'Pioneer' ? 'selected' : '' }}>Pioneer</option>
                                            <option value="Advanced" {{ old('level') == 'Advanced' ? 'selected' : '' }}>Advanced</option>
                                            <option value="Super Advanced" {{ old('level') == 'Super Advanced' ? 'selected' : '' }}>Super Advanced</option>
                                        </select>
                                        @error('level')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="asset-col-6">
                                        <label for="result" class="asset-label">Result</label>
                                        <input type="text" name="result" id="result" class="asset-input @error('result') asset-invalid @enderror"
                                            value="{{ old('result') }}" placeholder="Enter result">
                                        @error('result')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="asset-col-6">
                                        <label for="score" class="asset-label">Score</label>
                                        <input type="number" name="score" id="score" class="asset-input @error('score') asset-invalid @enderror"
                                            value="{{ old('score') }}" placeholder="Enter score">
                                        @error('score')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="asset-col-6">
                                        <label for="up_to_level" class="asset-label">Up To Level</label>
                                        <select name="up_to_level" id="up_to_level" class="asset-select @error('up_to_level') asset-invalid @enderror">
                                            <option value="">Select Level</option>
                                            <option value="Pioneer" {{ old('up_to_level') == 'Pioneer' ? 'selected' : '' }}>Pioneer</option>
                                            <option value="Advanced" {{ old('up_to_level') == 'Advanced' ? 'selected' : '' }}>Advanced</option>
                                            <option value="Super Advanced" {{ old('up_to_level') == 'Super Advanced' ? 'selected' : '' }}>Super Advanced</option>
                                        </select>
                                        @error('up_to_level')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>

                                    @foreach (['grammar', 'speaking', 'appropriacy', 'listening', 'reading', 'writing'] as $skill)
                                        <div class="asset-col-4">
                                            <label for="{{ $skill }}" class="asset-label">{{ ucfirst($skill) }}</label>
                                            <input type="number" name="{{ $skill }}" id="{{ $skill }}"
                                                class="asset-input @error($skill) asset-invalid @enderror"
                                                value="{{ old($skill) }}" min="0" max="100" placeholder="0 - 100">
                                            @error($skill)<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                        </div>
                                    @endforeach

                                    <div class="asset-col-12">
                                        <label for="teachers_note" class="asset-label">Teacher's Note</label>
                                        <textarea name="teachers_note" id="teachers_note" rows="4"
                                            class="asset-input @error('teachers_note') asset-invalid @enderror"
                                            placeholder="Enter teacher notes...">{{ old('teachers_note') }}</textarea>
                                        @error('teachers_note')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                    </div>
                                @endif

                                <div class="asset-col-12">
                                    <label for="comment" class="asset-label">Comment <span class="text-danger">*</span></label>
                                    <textarea name="comment" id="comment" rows="4"
                                        class="asset-input @error('comment') asset-invalid @enderror"
                                        placeholder="Enter comment..." required>{{ old('comment') }}</textarea>
                                    @error('comment')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="asset-actions">
                        <a href="{{ route('students.index') }}" class="asset-btn asset-btn--secondary">Cancel</a>
                        <button type="submit" class="asset-btn asset-btn--primary">Save Feedback</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .ui-card { border-radius: 0 !important; }
        .form-section__head { margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid #eef2f7; }
        .form-section__title { font-size: 1rem; font-weight: 800; color: #111827; }
        .form-section__sub { color: #6b7280; font-size: 0.92rem; }
        .asset-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
        .asset-col-12 { grid-column: span 12 / span 12; }
        .asset-col-6 { grid-column: span 6 / span 6; }
        .asset-col-4 { grid-column: span 4 / span 4; }
        .asset-label { display: inline-block; margin-bottom: 0.45rem; font-weight: 700; color: #374151; font-size: 0.92rem; }
        .asset-input, .asset-select { width: 100%; min-height: 44px; border: 1px solid #dbe2ea; border-radius: 12px; padding: 0.7rem 0.9rem; background: #fff; color: #111827; transition: 0.2s ease; }
        textarea.asset-input { min-height: 120px; resize: vertical; }
        .asset-input:focus, .asset-select:focus { outline: none; border-color: #b8c4d6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08); }
        .asset-invalid { border-color: #dc3545 !important; }
        .readonly-card { width: 100%; min-height: 44px; border: 1px solid #edf2f7; border-radius: 12px; background: #f8fafc; color: #111827; padding: 0.7rem 0.9rem; font-weight: 800; }
        @media (max-width: 991.98px) {
            .asset-col-6, .asset-col-4, .asset-col-12 { grid-column: span 12 / span 12; }
        }
    </style>
@endpush