@extends('layouts.main_dashboard.app')

@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

@section('title', $isArabic ? 'إرسال استفسار' : 'Send Inquiry')
@section('skip_page_hero', true)

@section('content')
<div class="space-y-6" x-data="{ childId: '{{ old('student_id') }}' }">
    <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.24em] text-amber-600">{{ $isArabic ? 'إرسال جديد' : 'New submission' }}</p>
                <h1 class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'استفسار موجّه لمعلم المساق' : 'Inquiry to a course teacher' }}</h1>
                <p class="mt-3 max-w-3xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اختر الابن أولًا، ثم حدّد مساقه والمعلم المرتبط به، وبعدها اكتب الرسالة بوضوح.' : 'Choose your child first, then select one of their courses and the assigned teacher before writing the message clearly.' }}</p>
            </div>
            <a href="{{ route('parent.inquiries.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-5 py-3 text-sm font-black text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800">
                <i class="fa-solid fa-list text-xs"></i>
                <span>{{ $isArabic ? 'كل الاستفسارات' : 'All inquiries' }}</span>
            </a>
        </div>
    </section>

    <form action="{{ route('parent.inquiries.store') }}" method="POST" enctype="multipart/form-data" class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
        @csrf

        <section class="space-y-6">
            <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="grid gap-6 lg:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الابن' : 'Child' }}</label>
                        <select name="student_id" x-model="childId" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900" required>
                            <option value="">{{ $isArabic ? 'اختر الابن' : 'Select child' }}</option>
                            @foreach($availableChildren as $child)
                                <option value="{{ $child->id }}" @selected(old('student_id') == $child->id)>{{ $child->name }}{{ $child->class_label ? ' - ' . $child->class_label : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'المساق والمعلم' : 'Course and teacher' }}</label>
                        <select name="course_id" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900" required>
                            <option value="">{{ $isArabic ? 'اختر المساق' : 'Select course' }}</option>
                            @foreach($availableChildren as $child)
                                @foreach($child->courses as $course)
                                    <option value="{{ $course->id }}"
                                            x-show="childId === '{{ $child->id }}'"
                                            @selected(old('course_id') == $course->id)>
                                        {{ $course->name }} - {{ $course->teacher?->name ?? ($isArabic ? 'معلم غير محدد' : 'Unassigned teacher') }}
                                    </option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                    <div class="lg:col-span-2">
                        <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ __('dashboard.Title') }}</label>
                        <input type="text" name="title" value="{{ old('title') }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900" required>
                    </div>
                    <div class="lg:col-span-2">
                        <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ __('dashboard.Message') }}</label>
                        <textarea name="message" rows="7" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900" required>{{ old('message') }}</textarea>
                    </div>
                    <div class="lg:col-span-2">
                        <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ __('dashboard.Attach Files') }}</label>
                        <input type="file" name="files[]" multiple class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900">
                        @error('files')<p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p>@enderror
                    </div>
                </div>
            </section>
        </section>

        <aside class="space-y-6">
            <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'قبل الإرسال' : 'Before sending' }}</h2>
                <ul class="mt-4 space-y-3 text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                    <li>{{ $isArabic ? 'الاختيار يقتصر على مساقات الأبناء المرتبطين بحسابك فقط.' : 'Selection is limited to the courses linked to your children only.' }}</li>
                    <li>{{ $isArabic ? 'اكتب الرسالة في سياق المساق المحدد حتى يصل الرد بدقة أسرع.' : 'Keep the message tied to the selected course for a faster, more precise reply.' }}</li>
                    <li>{{ $isArabic ? 'يمكنك إرفاق ملفات توضيحية عند الحاجة.' : 'You can attach supporting files when needed.' }}</li>
                </ul>
            </section>

            <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <div class="flex flex-wrap justify-end gap-3">
                    <a href="{{ route('parent.inquiries.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-zinc-200 px-5 py-3 text-sm font-bold text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800">{{ __('dashboard.Cancel') }}</a>
                    <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-amber-600 px-5 py-3 text-sm font-black text-white transition hover:bg-amber-700">
                        <i class="fa-solid fa-paper-plane text-xs"></i>
                        <span>{{ __('dashboard.Send') }}</span>
                    </button>
                </div>
            </section>
        </aside>
    </form>
</div>
@endsection