@extends('Component.layout')

@section('title', 'New Ticket - Iqra Parent Portal')
@section('breadcrumb', 'Support Tickets / New')

@section('content')
<div class="space-y-6">
    <div class="flex items-center gap-4">
        <a href="{{ route('parent.tickets.index') }}" class="w-10 h-10 bg-white border border-slate-200 rounded-xl flex items-center justify-center text-slate-500 hover:text-indigo-600 hover:border-indigo-100 hover:bg-indigo-50 transition-all shadow-sm">
            <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <div>
            <h2 class="text-xl font-extrabold text-slate-800 tracking-tight">Generate Support Ticket</h2>
            <p class="text-[11px] font-medium text-slate-500 mt-1">Send a message to your child's class teacher</p>
        </div>
    </div>

    @if($errors->any())
    <div class="bg-red-50 border border-red-100 text-red-700 p-4 rounded-2xl text-xs font-semibold flex items-start gap-3">
        <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden max-w-3xl">
        <div class="p-8">
            <form action="{{ route('parent.tickets.store') }}" method="POST" class="space-y-6">
                @csrf
                
                <div>
                    <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-2">Subject</label>
                    <input type="text" name="subject" value="{{ old('subject') }}" required placeholder="Brief description of the issue or inquiry"
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm text-slate-800 font-semibold placeholder:text-slate-400 placeholder:font-medium">
                </div>
                
                <div>
                    <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-2">Message</label>
                    <textarea name="message" required rows="6" placeholder="Provide details for the class teacher..."
                              class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm text-slate-800 font-semibold placeholder:text-slate-400 placeholder:font-medium resize-y">{{ old('message') }}</textarea>
                </div>
                
                <div class="pt-2 flex items-center justify-end gap-3">
                    <a href="{{ route('parent.tickets.index') }}" class="px-5 py-2.5 text-xs font-bold text-slate-500 hover:text-slate-800 transition-colors">Cancel</a>
                    <button type="submit" class="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs rounded-xl transition-all shadow-md shadow-indigo-600/20 flex items-center gap-2">
                        <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                        Send Ticket
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection