@extends(template().'layout.master2')
@push('style')
   
@endpush
@section('content2')

<div class="max-w-5xl mx-auto space-y-8">
    
    <header class="flex items-center justify-between px-2">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-blue-600/10 flex items-center justify-center text-blue-600">
                <i data-lucide="life-buoy" class="w-5 h-5"></i>
            </div>
            <h1 class="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tighter italic">{{ __('Create Ticket') }}</h1>
        </div>
        <a href="{{ route('user.ticket.index') }}" 
           class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-blue-600 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {{ __('Back to List') }}
        </a>
    </header>

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

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

            <div class="grid 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">
                        {{ __('Issue 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 rounded-2xl py-4 px-6 text-sm font-bold text-slate-900 dark:text-white focus:border-blue-500 focus:ring-0 transition-all placeholder:text-slate-300 dark:placeholder:text-slate-700"
                               placeholder="{{ __('e.g., Withdrawal Pending') }}"
                               value="{{ old('subject') }}">
                        <i data-lucide="type" class="absolute right-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 dark:text-slate-700 group-focus-within:text-blue-600 transition-colors"></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 Level') }}
                    </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 rounded-2xl py-4 px-6 text-sm font-bold text-slate-900 dark:text-white appearance-none focus:border-blue-500 focus:ring-0 transition-all">
                            <option value="1">{{ __('High - Urgent') }}</option>
                            <option value="2" selected>{{ __('Medium - Normal') }}</option>
                            <option value="3">{{ __('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="grid md:grid-cols-12 gap-8">
                <div class="md:col-span-8 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">
                        {{ __('Detailed Message') }}
                    </label>
                    <textarea name="message" rows="8" required
                              class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-[2rem] py-5 px-6 text-sm font-medium text-slate-900 dark:text-white focus:border-blue-500 focus:ring-0 transition-all placeholder:text-slate-300 dark:placeholder:text-slate-700"
                              placeholder="{{ __('Describe your issue in detail...') }}">{{ old('message') }}</textarea>
                </div>

                <div class="md:col-span-4 group">
                    <label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-3 ml-1">
                        {{ __('Attachments') }}
                    </label>
                    <div class="relative h-full">
                        <label for="image-upload" class="flex flex-col items-center justify-center w-full h-[calc(100%-2.5rem)] min-h-[200px] border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-[2rem] cursor-pointer bg-slate-50/50 dark:bg-slate-950/50 hover:bg-blue-600/5 hover:border-blue-600/30 transition-all group/upload">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6 px-4 text-center">
                                <div class="w-12 h-12 bg-white dark:bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 dark:text-slate-600 shadow-sm mb-4 group-hover/upload:text-blue-600 transition-colors">
                                    <i data-lucide="upload-cloud" class="w-6 h-6"></i>
                                </div>
                                <p class="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ __('Drop File') }}</p>
                                <p class="text-[9px] text-slate-400 mt-1 uppercase">{{ __('JPG, PNG, PDF (Max 5MB)') }}</p>
                            </div>
                            <input type="file" name="file" id="image-upload" class="hidden" />
                        </label>
                    </div>
                </div>
            </div>

            <div class="pt-10 border-t border-slate-100 dark:border-slate-800/60 flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="flex items-start gap-3 max-w-md">
                    <i data-lucide="info" class="w-4 h-4 text-blue-600 mt-0.5"></i>
                    <p class="text-[9px] font-bold text-slate-400 uppercase tracking-wider leading-relaxed">
                        {{ __('Our support team typically responds within 2-4 hours. Please provide as much detail as possible to speed up the resolution.') }}
                    </p>
                </div>

                <button type="submit" 
                        class="w-full md:w-auto px-10 py-5 bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-[0.3em] text-xs rounded-2xl shadow-xl shadow-blue-600/20 active:scale-[0.98] transition-all flex items-center justify-center gap-3 group">
                    {{ __('Open Ticket') }}
                    <i data-lucide="send" class="w-4 h-4 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
                </button>
            </div>
        </form>
    </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
