@extends('Component.layout')

@section('title', 'Ticket #' . str_pad($ticket->id, 5, '0', STR_PAD_LEFT) . ' - Iqra Parent Portal')
@section('breadcrumb', 'Support Tickets / Ticket #' . str_pad($ticket->id, 5, '0', STR_PAD_LEFT))

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <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 shrink-0">
                <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>
                <div class="flex items-center gap-3">
                    <h2 class="text-xl font-extrabold text-slate-800 tracking-tight">{{ $ticket->subject }}</h2>
                    @if($ticket->status === 'open')
                        <span class="px-2.5 py-1 bg-emerald-50 text-emerald-600 border border-emerald-200 rounded-lg text-[10px] font-extrabold uppercase tracking-wider">Open</span>
                    @elseif($ticket->status === 'resolved')
                        <span class="px-2.5 py-1 bg-blue-50 text-blue-600 border border-blue-200 rounded-lg text-[10px] font-extrabold uppercase tracking-wider">Answered</span>
                    @else
                        <span class="px-2.5 py-1 bg-slate-100 text-slate-500 border border-slate-200 rounded-lg text-[10px] font-extrabold uppercase tracking-wider">Closed</span>
                    @endif
                </div>
                <p class="text-[11px] font-medium text-slate-500 mt-1">Ticket #{{ str_pad($ticket->id, 5, '0', STR_PAD_LEFT) }} • Created {{ $ticket->created_at->format('M d, Y h:i A') }}</p>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-800 text-xs font-semibold flex items-center gap-2">
        <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif
    @if($errors->any())
    <div class="bg-red-50 border border-red-100 text-red-700 p-3.5 rounded-2xl text-xs font-semibold flex items-start gap-2">
        <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>
        <span>{{ $errors->first() }}</span>
    </div>
    @endif

    <div class="max-w-4xl space-y-6">
        <!-- Messages Thread -->
        <div class="space-y-6">
            @foreach($messages as $msg)
                @php
                    $isParent = $msg->sender_type === 'parent';
                @endphp
                <div class="flex gap-4 {{ $isParent ? 'flex-row-reverse' : '' }}">
                    <!-- Avatar -->
                    <div class="shrink-0">
                        @if($isParent)
                            <div class="w-10 h-10 rounded-full bg-indigo-100 border border-indigo-200 flex items-center justify-center text-indigo-700 font-extrabold text-sm shadow-sm">
                                P
                            </div>
                        @else
                            <div class="w-10 h-10 rounded-full bg-emerald-100 border border-emerald-200 flex items-center justify-center text-emerald-700 font-extrabold text-sm shadow-sm">
                                T
                            </div>
                        @endif
                    </div>
                    
                    <!-- Bubble -->
                    <div class="flex flex-col {{ $isParent ? 'items-end' : 'items-start' }} max-w-[80%]">
                        <div class="flex items-center gap-2 mb-1.5 px-1">
                            <span class="text-[11px] font-extrabold text-slate-700">
                                {{ $isParent ? 'You (Parent)' : ($msg->sender ? $msg->sender->name : 'Staff') }}
                            </span>
                            <span class="text-[9px] font-semibold text-slate-400">{{ $msg->created_at->format('M d, h:i A') }}</span>
                        </div>
                        <div class="p-4 rounded-2xl text-sm font-medium shadow-sm {{ $isParent ? 'bg-indigo-600 text-white rounded-tr-sm' : 'bg-white border border-slate-200 text-slate-700 rounded-tl-sm' }}">
                            {!! nl2br(e($msg->message)) !!}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Reply Box -->
        @if($ticket->status !== 'closed')
            <div class="mt-8 bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
                <form action="{{ route('parent.tickets.reply', $ticket->id) }}" method="POST">
                    @csrf
                    <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-2">Reply to Teacher</label>
                    <textarea name="message" required rows="4" placeholder="Type your message here..."
                              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"></textarea>
                    
                    <div class="mt-4 flex justify-end">
                        <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 Reply
                        </button>
                    </div>
                </form>
            </div>
        @else
            <div class="mt-8 bg-slate-50 border border-slate-200 rounded-2xl p-6 text-center">
                <svg class="w-8 h-8 text-slate-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                <h4 class="text-sm font-extrabold text-slate-700">Ticket Closed</h4>
                <p class="text-xs font-medium text-slate-500 mt-1">This ticket has been marked as closed. If you have further questions, please generate a new ticket.</p>
            </div>
        @endif
    </div>
</div>
@endsection