@extends('theme::layouts.app', ['title' => $title ?? __('tickets.title|Create Ticket')])

@section('content')
    <main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
        <div class="flex flex-col lg:flex-row gap-10">
            @include('theme::partials.account.nav')

            <section class="flex-grow">
                @if(isset($pageHeader))
                <div class="mb-8 flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                        <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
                    </div>
                    <a class="text-sm font-medium text-primary hover:underline flex items-center gap-1" href="{{ route('helpdesk.tickets.index') }}">
                        <span class="material-symbols-outlined text-sm">arrow_back</span>
                        {{ __('tickets.Back to Tickets') }}
                    </a>
                </div>
                @endif

                @if(session('warning'))
                    <div class="mb-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 flex items-start gap-3">
                        <span class="material-symbols-outlined text-yellow-600 dark:text-yellow-400 text-[20px]">warning</span>
                        <p class="text-sm text-yellow-800 dark:text-yellow-200">{{ session('warning') }}</p>
                    </div>
                @endif

                <form action="{{ route('helpdesk.tickets.store') }}" method="POST" class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 overflow-hidden shadow-soft">
                    @csrf
                    <div class="p-6 md:p-8 space-y-8">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-1.5">
                                <label class="text-sm font-semibold text-text-main dark:text-gray-200" for="subject">{{ __('tickets.Subject') }} <span class="text-red-500">*</span></label>
                                <input name="subject" value="{{ old('subject') }}" class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-1 focus:ring-primary focus:border-primary focus:outline-none transition-all @error('subject') border-red-500 @enderror"
                                       id="subject" placeholder="{{ __('tickets.e.g., Cannot access my download') }}" required type="text"/>
                                @error('subject')
                                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="space-y-1.5">
                                <label class="text-sm font-semibold text-text-main dark:text-gray-200" for="category_id">{{ __('tickets.Category') }} <span class="text-red-500">*</span></label>
                                <select name="category_id" class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-1 focus:ring-primary focus:border-primary focus:outline-none transition-all @error('category_id') border-red-500 @enderror"
                                        id="category_id" required>
                                    <option value="">{{ __('tickets.Select a category') }}</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id', setting('ticket_system.default_category_id', 4)) == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="space-y-1.5">
                            <label class="text-sm font-semibold text-text-main dark:text-gray-200" for="order_id">{{ __('tickets.Related Order (Optional)') }}</label>
                            <select name="order_id" class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-1 focus:ring-primary focus:border-primary focus:outline-none transition-all @error('order_id') border-red-500 @enderror"
                                    id="order_id">
                                <option value="">{{ __('tickets.Select an order you purchased') }}</option>
                                @foreach($orders as $order)
                                    <option value="{{ $order->id }}" {{ old('order_id') == $order->id ? 'selected' : '' }}>
                                        {{ $order->order_reference }}
                                    </option>
                                @endforeach
                            </select>
                            @error('order_id')
                                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-1.5">
                            <label class="text-sm font-semibold text-text-main dark:text-gray-200" for="message">{{ __('tickets.Message') }} <span class="text-red-500">*</span></label>
                            <textarea name="message"
                                    class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-1 focus:ring-primary focus:border-primary focus:outline-none transition-all min-h-[200px] @error('message') border-red-500 @enderror"
                                    id="message" placeholder="{{ __('tickets.Please describe your issue in detail...') }}" required>{{ old('message') }}</textarea>
                            @error('message')
                                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        @if(setting('ticket_system.file_attachments', 1))
                            <div class="space-y-1.5">
                                <label class="text-sm font-semibold text-text-main dark:text-gray-200">{{ __('tickets.Attachments (Optional)') }}</label>
                                <div class="uploader">
                                    <button
                                        id="logo-uploader"
                                        data-media-config='{
                                            "key": "attachments",
                                            "container": ".attachments-container",
                                            "maxFiles": {{ setting('ticket_system.max_file_attachments', 1) }},
                                            "maxFilesize": {{ setting('ticket_system.file_size', 2) * 1048576 }},
                                            "previewsContainer": ".attachments-container-preview",
                                            "disk": "local"
                                        }'
                                        data-upload-url='{{ route('upload_attachments') }}'
                                        data-delete-url='{{ route('delete_attachments') }}'
                                        type="button"
                                        class="dropzone relative border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-xl p-8 transition-colors hover:border-primary/50 group bg-gray-50/50 dark:bg-gray-800/30 w-full cursor-pointer text-left block"
                                        style="min-height: 150px;">
                                        <div class="flex flex-col items-center justify-center text-center pointer-events-none">
                                            <div class="w-12 h-12 bg-white dark:bg-surface-dark rounded-full shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                                                <span class="material-symbols-outlined text-primary">upload_file</span>
                                            </div>
                                            <p class="text-sm font-medium text-text-main dark:text-white">
                                                {{ __('tickets.Click to upload or drag and drop') }}
                                            </p>
                                            <p class="text-xs text-text-muted mt-1">
                                                {{ __('tickets.PNG, JPG or PDF up to :sizeMB each (max :count files)', ['size' => setting('ticket_system.file_size', 2), 'count' => setting('ticket_system.max_file_attachments', 1)]) }}
                                            </p>
                                        </div>
                                    </button>
                                    <div class="attachments-container"></div>
                                    <div class="attachments-container-preview mt-3"></div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="px-6 md:px-8 py-6 bg-gray-50/50 dark:bg-gray-800/20 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-gray-100 dark:border-gray-800">
                        <p class="text-xs text-text-muted max-w-sm">&nbsp;</p>
                        <div class="flex items-center gap-4 w-full sm:w-auto">
                            <a class="px-6 py-2.5 text-sm font-medium text-text-muted hover:text-text-main transition-colors text-center w-full sm:w-auto" href="{{ route('helpdesk.tickets.index') }}">{{ __('tickets.Cancel') }}</a>
                            <button class="px-8 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm text-sm w-full sm:w-auto" type="submit">{{ __('tickets.Submit Ticket') }}</button>
                        </div>
                    </div>
                </form>
                <div class="mt-8 bg-accent/10 border border-accent/20 rounded-lg p-4 flex items-start gap-3">
                    <span class="material-symbols-outlined text-accent text-[20px]">info</span>
                    <p class="text-xs text-gray-700 dark:text-gray-300 leading-relaxed">
                        <strong>{{ __('tickets.Tip:') }}</strong> {{ __('tickets.Including a screenshot of the error or your console logs helps us resolve technical issues much faster.') }}
                    </p>
                </div>
            </section>
        </div>
    </main>
@endsection

@push('ch_footer')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    @include('theme::pages.account.tickets.upload')
    <script src="{{ url('assets/backend/js/vendors/dropzone.min.js') }}"></script>
    <script src="{{ url('assets/backend/js/media.js') }}"></script>
@endpush