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

@section('content2')
<div x-data="{ 
        ticketModal: false, 
        deleteModal: false,
        modalTitle: '{{ __('New Support Case') }}',
        action: '{{ route('user.ticket.store') }}',
        isEdit: false,
        subject: '',
        message: '',
        deleteAction: '',
        
        openNew() {
            this.isEdit = false;
            this.modalTitle = '{{ __('New Support Case') }}';
            this.action = '{{ route('user.ticket.store') }}';
            this.subject = '';
            this.message = '';
            this.ticketModal = true;
        },
        
        openEdit(route, ticket, msg) {
            this.isEdit = true;
            this.modalTitle = '{{ __('Modify Ticket') }}';
            this.action = route;
            this.subject = ticket.subject;
            this.message = msg.message;
            this.ticketModal = true;
        },

        openDelete(route) {
            this.deleteAction = route;
            this.deleteModal = true;
        }
    }" 
    class="min-h-screen py-8 px-4"
>
    
    <div class="max-w-6xl mx-auto mb-8">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[2.5rem] shadow-xl relative overflow-hidden">
            <div class="absolute -right-10 -top-10 w-32 h-32 bg-blue-600/5 blur-3xl rounded-full"></div>

            <div class="flex flex-wrap items-center gap-3 relative z-10">
                <a href="{{ route('user.ticket.index') }}"
                   class="flex items-center gap-2 px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all {{ request()->status == '' ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'bg-slate-50 dark:bg-slate-950 text-slate-500 hover:text-blue-600 border border-slate-200 dark:border-slate-800' }}">
                    <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i>
                    {{ __('All') }} 
                    <span class="{{ request()->status == '' ? 'bg-white/20' : 'bg-slate-200 dark:bg-slate-800' }} px-2 py-0.5 rounded text-[10px]">{{ $tickets_all }}</span>
                </a>

                <a href="{{ route('user.ticket.status', 'answered') }}"
                   class="flex items-center gap-2 px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all {{ request()->status == 'answered' ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'bg-slate-50 dark:bg-slate-950 text-slate-500 hover:text-blue-600 border border-slate-200 dark:border-slate-800' }}">
                    <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
                    {{ __('Answered') }}
                    <span class="{{ request()->status == 'answered' ? 'bg-white/20' : 'bg-slate-200 dark:bg-slate-800' }} px-2 py-0.5 rounded text-[10px]">{{ $tickets_answered }}</span>
                </a>

                <a href="{{ route('user.ticket.status', 'pending') }}"
                   class="flex items-center gap-2 px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all {{ request()->status == 'pending' ? 'bg-amber-500 text-white shadow-lg shadow-amber-500/20' : 'bg-slate-50 dark:bg-slate-950 text-slate-500 hover:text-amber-500 border border-slate-200 dark:border-slate-800' }}">
                    <i data-lucide="clock" class="w-3.5 h-3.5"></i>
                    {{ __('Pending') }}
                    <span class="{{ request()->status == 'pending' ? 'bg-white/20' : 'bg-slate-200 dark:bg-slate-800' }} px-2 py-0.5 rounded text-[10px]">{{ $tickets_pending }}</span>
                </a>
            </div>

            <button @click="openNew()" class="relative z-10 flex items-center justify-center gap-3 px-8 py-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-blue-600 dark:hover:bg-blue-600 hover:text-white dark:hover:text-white rounded-[1.5rem] font-black text-[10px] uppercase tracking-[0.2em] transition-all transform active:scale-95 shadow-xl">
                {{ __('New Ticket') }}
                <i data-lucide="plus" class="w-4 h-4"></i>
            </button>
        </div>
    </div>

    <div class="max-w-6xl mx-auto">
        <div class="bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-200 dark:border-slate-800/50 overflow-hidden shadow-2xl">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50/50 dark:bg-slate-950/50 text-slate-400 dark:text-slate-500 uppercase text-[10px] font-black tracking-[0.2em] border-b border-slate-100 dark:border-slate-800/60">
                            <th class="px-8 py-7">{{ __('Reference') }}</th>
                            <th class="px-8 py-7">{{ __('Subject') }}</th>
                            <th class="px-8 py-7 text-center">{{ __('Activity') }}</th>
                            <th class="px-8 py-7 text-right">{{ __('Options') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60">
                        @forelse(@$tickets as $ticket)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors group">
                            <td class="px-8 py-6">
                                <span class="text-blue-600 dark:text-blue-400 font-mono font-bold text-xs tracking-tighter bg-blue-50 dark:bg-blue-900/20 px-3 py-1 rounded-lg">#{{ $ticket->support_id }}</span>
                            </td>
                            <td class="px-8 py-6">
                                <p class="text-slate-900 dark:text-slate-200 font-bold text-sm mb-1 group-hover:text-blue-600 transition-colors">{{ $ticket->subject }}</p>
                                <div class="flex items-center gap-2">
                                    <span class="text-[9px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-600">{{ $ticket->created_at->diffForHumans() }}</span>
                                    <span class="w-1 h-1 rounded-full bg-slate-200 dark:bg-slate-800"></span>
                                    <span class="text-[9px] font-bold text-slate-400 uppercase italic">{{ $ticket->priority == 1 ? 'Urgent' : ($ticket->priority == 2 ? 'Normal' : 'Low') }}</span>
                                </div>
                            </td>
                            <td class="px-8 py-6 text-center">
                                <div class="inline-flex items-center gap-2 bg-slate-100 dark:bg-slate-950 px-4 py-1.5 rounded-full border border-slate-200 dark:border-slate-800">
                                    <i data-lucide="message-square" class="w-3 h-3 text-slate-400"></i>
                                    <span class="text-slate-600 dark:text-slate-400 text-[10px] font-black uppercase">{{ $ticket->ticketReplies->count() }}</span>
                                </div>
                            </td>
                            <td class="px-8 py-6">
                                <div class="flex justify-end gap-3">
                                    <button @click="openEdit('{{ route('user.ticket.update', $ticket->id) }}', {{ $ticket }}, {{ $ticket->ticketReplies()->where('ticket_id',$ticket->id)->first() }})"
                                            class="h-10 w-10 flex items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:bg-blue-600 hover:text-white transition-all group/btn shadow-sm">
                                        <i data-lucide="pencil" class="w-4 h-4 transition-transform group-hover/btn:scale-110"></i>
                                    </button>

                                    <a href="{{ route('user.ticket.show', $ticket->id) }}"
                                       class="h-10 w-10 flex items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:bg-blue-600 hover:text-white transition-all group/btn shadow-sm">
                                        <i data-lucide="eye" class="w-4 h-4 transition-transform group-hover/btn:scale-110"></i>
                                    </a>

                                    <button @click="openDelete('{{ route('user.ticket.destroy', $ticket->id) }}')"
                                            class="h-10 w-10 flex items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:bg-red-500 hover:text-white transition-all group/btn shadow-sm">
                                        <i data-lucide="trash-2" class="w-4 h-4 transition-transform group-hover/btn:scale-110"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-8 py-32 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-20 h-20 bg-slate-50 dark:bg-slate-950 rounded-[2rem] flex items-center justify-center mb-6 border border-slate-100 dark:border-slate-800">
                                        <i data-lucide="ghost" class="w-10 h-10 text-slate-200 dark:text-slate-800"></i>
                                    </div>
                                    <span class="text-slate-400 dark:text-slate-600 text-[10px] font-black uppercase tracking-[0.3em]">{{ __('No communication detected') }}</span>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div x-show="ticketModal" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 scale-90"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-90"
         class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-xl"
         x-cloak>
        
        <div @click.away="ticketModal = false" class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-lg rounded-[3rem] overflow-hidden shadow-2xl relative">
            <div class="absolute -top-24 -right-24 w-64 h-64 bg-blue-600/5 blur-3xl rounded-full pointer-events-none"></div>
            
            <form :action="action" enctype="multipart/form-data" method="post" class="relative z-10 p-10">
                @csrf
                <template x-if="isEdit">
                    <input type="hidden" name="_method" value="PUT">
                </template>
                
                <div class="flex justify-between items-center mb-10">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg bg-blue-600/10 flex items-center justify-center text-blue-600">
                            <i data-lucide="plus-circle" class="w-4 h-4"></i>
                        </div>
                        <h5 x-text="modalTitle" class="text-xl font-black uppercase tracking-tighter dark:text-white italic"></h5>
                    </div>
                    <button type="button" @click="ticketModal = false" class="w-10 h-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 hover:text-red-500 transition-all text-xl">&times;</button>
                </div>
                
                <div class="space-y-8">
                    <div class="group">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3 ml-1 group-focus-within:text-blue-600 transition-colors">{{ __('Subject') }}</label>
                        <input type="text" name="subject" x-model="subject" required class="w-full bg-slate-50 dark:bg-slate-950 border-slate-200 dark:border-slate-800 border rounded-2xl py-4 px-6 text-slate-900 dark:text-white focus:border-blue-600 outline-none transition-all font-bold text-sm" placeholder="Brief summary of issue">
                    </div>
                    <div class="group">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3 ml-1 group-focus-within:text-blue-600 transition-colors">{{ __('Message') }}</label>
                        <textarea name="message" x-model="message" rows="5" required class="w-full bg-slate-50 dark:bg-slate-950 border-slate-200 dark:border-slate-800 border rounded-[2rem] py-4 px-6 text-slate-900 dark:text-white focus:border-blue-600 outline-none transition-all resize-none font-medium text-sm leading-relaxed" placeholder="Describe how we can assist you..."></textarea>
                    </div>
                    <div class="group">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3 ml-1">{{ __('Upload Image - if needed') }}</label>
                        <input type="file" name="file" class="w-full text-slate-400 text-[10px] font-black uppercase file:mr-4 file:py-2.5 file:px-6 file:rounded-xl file:border-0 file:bg-slate-900 dark:file:bg-white file:text-white dark:file:text-slate-900 hover:file:bg-blue-600 dark:hover:file:bg-blue-600 cursor-pointer">
                    </div>
                </div>

                <div class="mt-12 flex gap-4">
                    <button type="button" @click="ticketModal = false" class="flex-1 py-4 bg-slate-100 dark:bg-slate-800 text-slate-500 font-black uppercase tracking-widest text-[10px] rounded-2xl hover:bg-slate-200 transition-all transform active:scale-95">{{ __('Cancel') }}</button>
                    <button type="submit" class="flex-1 py-4 bg-blue-600 text-white font-black uppercase tracking-widest text-[10px] rounded-2xl shadow-xl shadow-blue-600/20 hover:bg-blue-700 transition-all transform active:scale-95 flex items-center justify-center gap-2">
                        {{ __('Confirm') }}
                        <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="deleteModal" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 scale-90"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-90"
         class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-xl"
         x-cloak>
        
        <div @click.away="deleteModal = false" class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-sm rounded-[3rem] p-10 text-center shadow-2xl relative overflow-hidden">
            <div class="absolute -top-10 -left-10 w-32 h-32 bg-red-500/5 blur-[50px] rounded-full pointer-events-none"></div>
            
            <div class="relative z-10">
                <div class="h-20 w-20 bg-red-50 dark:bg-red-500/10 text-red-500 rounded-[2rem] flex items-center justify-center mx-auto mb-8 border border-red-100 dark:border-red-500/20">
                    <i data-lucide="alert-triangle" class="w-8 h-8"></i>
                </div>
                <h2 class="text-xl font-black uppercase tracking-tighter dark:text-white mb-3 italic">{{ __('System Deletion') }}</h2>
                <p class="text-slate-400 dark:text-slate-500 mb-10 text-[11px] uppercase tracking-[0.2em] font-bold leading-relaxed">{{ __('This request will be purged from our records permanently.') }}</p>
                
                <form :action="deleteAction" method="POST" class="flex gap-4">
                    @csrf
                    @method('DELETE')
                    <button type="button" @click="deleteModal = false" class="flex-1 py-4 bg-slate-100 dark:bg-slate-800 text-slate-500 font-black uppercase tracking-widest text-[10px] rounded-2xl hover:bg-slate-200 transition-all">{{ __('Abort') }}</button>
                    <button type="submit" class="flex-1 py-4 bg-red-500 text-white font-black uppercase tracking-widest text-[10px] rounded-2xl hover:bg-red-600 transition-all shadow-lg shadow-red-500/20">{{ __('Delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        if (window.lucide) {
            window.lucide.createIcons();
        }
    });
</script>
@endpush