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

@section('content2')
<div class="min-h-screen py-12 px-4">
    <div class="max-w-4xl mx-auto space-y-8">

        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-slate-200 dark:border-slate-800/60 pb-8">
            <div>
                <nav class="flex items-center gap-2 mb-3">
                    <a href="{{ route('user.dashboard') }}" class="text-[9px] font-black uppercase tracking-[0.2em] text-slate-400 hover:text-blue-600 transition-colors">{{ __('Dashboard') }}</a>
                    <span class="text-slate-300 dark:text-slate-700 text-xs">/</span>
                    <span class="text-[9px] font-black uppercase tracking-[0.2em] text-slate-500">{{ __($pageTitle) }}</span>
                </nav>
                <h2 class="text-slate-900 dark:text-white text-3xl font-black tracking-tighter uppercase italic">{{ __($pageTitle) }}</h2>
            </div>

            <a href="{{ route('user.ticket.index') }}" class="inline-flex items-center text-slate-500 hover:text-blue-600 transition-colors group">
                <i data-lucide="arrow-left" class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform"></i> 
                <span class="text-[10px] font-black uppercase tracking-[0.2em]">{{ __('Back to List') }}</span>
            </a>
        </div>

        <div class="relative bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[2.5rem] overflow-hidden shadow-2xl">
            <div class="absolute -top-24 -left-24 w-64 h-64 bg-blue-600/5 blur-[100px] rounded-full pointer-events-none"></div>

            <form action="{{ route('user.ticket.update', $ticket->id) }}" enctype="multipart/form-data" method="POST" class="relative z-10 p-8 md:p-12 space-y-10">
                @csrf
                {{ method_field('PUT') }}

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="group">
                        <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-3 ml-1 group-focus-within:text-blue-600 transition-colors">{{ __('Subject') }}</label>
                        <div class="relative">
                            <input type="text" name="subject" required
                                class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-2xl p-5 focus:outline-none focus:border-blue-500 transition-all font-bold text-sm shadow-sm" 
                                value="{{ $ticket->subject }}">
                            <i data-lucide="edit-3" class="absolute right-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 dark:text-slate-700"></i>
                        </div>
                    </div>

                    <div class="group">
                        <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-3 ml-1 group-focus-within:text-blue-600 transition-colors">{{ __('Priority') }}</label>
                        <div class="relative">
                            <select name="priority" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-2xl p-5 appearance-none focus:outline-none focus:border-blue-500 transition-all font-bold text-sm cursor-pointer shadow-sm">
                                <option value="1" @if($ticket->priority == 1) selected @endif>{{ __('High - Urgent') }}</option>
                                <option value="2" @if($ticket->priority == 2) selected @endif>{{ __('Medium - Normal') }}</option>
                                <option value="3" @if($ticket->priority == 3) selected @endif>{{ __('Low - Question') }}</option>
                            </select>
                            <i data-lucide="chevron-down" class="absolute right-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
                        </div>
                    </div>
                </div>

                <div class="group">
                    <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-3 ml-1 group-focus-within:text-blue-600 transition-colors">{{ __('Update Message') }}</label>
                    <textarea name="message" rows="6" required
                        class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white rounded-[2rem] p-6 focus:outline-none focus:border-blue-500 transition-all resize-none font-medium text-sm leading-relaxed shadow-sm">{{ $ticket_reply->message }}</textarea>
                </div>

                <div class="space-y-4">
                    <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 ml-1">{{ __('Current Attachment') }}</label>
                    <div id="image-preview" 
                         class="relative flex flex-col items-center justify-center w-full h-64 bg-slate-100 dark:bg-slate-950 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-[2.5rem] overflow-hidden group hover:border-blue-600/50 transition-all bg-cover bg-center"
                         style="background-image: url({{ getFile('Ticket', $ticket_reply->file) }});">
                        
                        <div class="absolute inset-0 bg-slate-900/60 group-hover:bg-slate-900/40 transition-colors"></div>

                        <div class="relative z-10 flex flex-col items-center gap-4">
                            <div class="w-16 h-16 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-blue-400 border border-white/20">
                                <i data-lucide="image-plus" class="w-8 h-8"></i>
                            </div>
                            <label for="image-upload" class="cursor-pointer bg-white text-slate-900 hover:bg-blue-600 hover:text-white px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all shadow-lg active:scale-95">
                                {{ __('Change File') }}
                            </label>
                            <input type="file" name="file" id="image-upload" class="hidden" />
                        </div>
                    </div>
                </div>

                <div class="pt-6 border-t border-slate-100 dark:border-slate-800/60 flex justify-end">
                    <button type="submit" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-16 py-5 rounded-2xl font-black uppercase tracking-[0.3em] text-[11px] shadow-xl shadow-blue-600/20 transition-all active:scale-95 flex items-center justify-center gap-3 group">
                        {{ __('Update Support Ticket') }}
                        <i data-lucide="refresh-cw" class="w-4 h-4 group-hover:rotate-180 transition-transform duration-500"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script')
    <script>
        $(function(){
            'use strict'
            $.uploadPreview({
                input_field: "#image-upload",
                preview_box: "#image-preview",
                label_default: "{{__('Choose File')}}",
                label_selected: "{{__('Update Image')}}",
                no_label: false,
                success_callback: null
            });
        })
    </script>
@endpush