@extends(template().'layout.master2')

@section('content2')
<div class="dashboard-body-part bg-black min-h-screen py-8 px-4">
    <div class="max-w-4xl mx-auto space-y-6">
        
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="text-center md:text-left">
                <div class="flex items-center justify-center md:justify-start gap-3 mb-1">
                    <span class="px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 text-[10px] font-black uppercase tracking-widest">
                        #{{ $ticket->support_id }}
                    </span>
                </div>
                <h4 class="text-white text-xl font-black tracking-tighter uppercase">{{ $ticket->subject }}</h4>
            </div>
            
            <div class="text-center md:text-end">
                <a href="{{ route('user.ticket.index') }}" class="inline-flex items-center text-zinc-500 hover:text-white transition-colors group">
                    <i class="bi bi-arrow-left mr-2 group-hover:-translate-x-1 transition-transform"></i> 
                    <span class="text-[10px] font-black uppercase tracking-[0.2em]">{{ __('Back to Tickets') }}</span>
                </a>
            </div>
        </div>

        <div class="relative bg-zinc-950 border border-zinc-800 rounded-[2rem] overflow-hidden shadow-2xl">
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-emerald-500/5 blur-[80px] rounded-full"></div>
            
            <div class="relative z-10 p-6 md:p-8">
                <form action="{{ route('user.ticket.reply', $ticket->id) }}" enctype="multipart/form-data" method="post" class="space-y-6">
                    @csrf
                    <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">

                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500 ml-1">
                            {{ __('Your Message') }}
                        </label>
                        <textarea name="message" rows="4" required
                            class="w-full bg-zinc-900/50 border border-zinc-800 text-zinc-200 rounded-2xl p-4 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500/50 transition-all placeholder:text-zinc-700"
                            placeholder="{{ __('Describe your issue or provide an update...') }}"></textarea>
                    </div>

                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div class="relative group flex-1 max-w-sm">
                            <input type="file" name="file" id="image-upload" class="hidden">
                            <label for="image-upload" class="flex items-center justify-center gap-3 w-full bg-zinc-900/30 border border-dashed border-zinc-800 rounded-xl p-3 cursor-pointer hover:bg-zinc-800/50 transition-all">
                                <i class="bi bi-cloud-arrow-up text-zinc-500 group-hover:text-emerald-500"></i>
                                <span class="text-[10px] font-black uppercase tracking-widest text-zinc-500">{{ __('Attach File') }}</span>
                            </label>
                        </div>

                        <button type="submit" class="bg-emerald-600 hover:bg-emerald-500 text-white px-10 py-4 rounded-xl font-black uppercase tracking-widest text-[11px] shadow-[0_10px_20px_-10px_rgba(16,185,129,0.4)] transition-all active:scale-95">
                            <i class="bi bi-reply-fill mr-2"></i> {{ __('Post Reply') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="space-y-6 mt-12">
            <div class="flex items-center gap-4">
                <div class="h-px bg-zinc-800 flex-1"></div>
                <span class="text-[10px] font-black uppercase tracking-[0.3em] text-zinc-600">{{ __('Conversation History') }}</span>
                <div class="h-px bg-zinc-800 flex-1"></div>
            </div>

            <div class="space-y-4">
                @forelse(@$ticket_reply as $reply)
                    <div class="relative flex flex-col {{ $reply->admin_id != null ? 'items-start' : 'items-end' }}">
                        <div class="max-w-[85%] md:max-w-[75%] space-y-1">
                            <div class="flex items-center gap-2 px-2 {{ $reply->admin_id != null ? 'flex-row' : 'flex-row-reverse' }}">
                                <span class="text-[9px] font-bold text-zinc-600 uppercase tracking-tighter">
                                    {{ $reply->admin_id != null ? __('Support Team') : __('You') }}
                                </span>
                                <span class="text-[9px] text-zinc-700 font-mono">
                                    {{ $reply->created_at->format('M d, H:i') }}
                                </span>
                            </div>

                            <div class="p-5 rounded-2xl border {{ $reply->admin_id != null ? 'bg-zinc-900 border-zinc-800 text-zinc-300 rounded-tl-none' : 'bg-emerald-600 border-emerald-500 text-white rounded-tr-none' }}">
                                <p class="text-sm leading-relaxed whitespace-pre-line">{{ $reply->message }}</p>
                                
                                @if ($reply->file)
                                    <div class="mt-4 pt-3 border-t {{ $reply->admin_id != null ? 'border-zinc-800' : 'border-emerald-500/50' }}">
                                        <a href="{{ route('user.ticket.download', $reply->id) }}" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest {{ $reply->admin_id != null ? 'text-emerald-500' : 'text-white' }} hover:opacity-70">
                                            <i class="bi bi-paperclip"></i>
                                            {{ __('View Attachment') }}
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12">
                        <p class="text-zinc-600 text-[10px] font-black uppercase tracking-widest">{{ __('No history found for this ticket.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection