@extends('front.layout.master')
@section('title', __('staticwords.HelpdeskandSupport') . ' | ')
@section('head-script')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css">
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <script src="{{ url('js/quill-editor-init.js') }}"></script>
@endsection

@section('body')
<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.HelpdeskandSupport') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    @auth
        <aside class="lg:sticky lg:top-28 lg:self-start">
            @include('user.sidebar')
        </aside>
    @endauth

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <div class="flex items-center gap-3 mb-5">
                <div class="w-12 h-12 bg-brand-50 rounded-xl grid place-items-center text-brand-600">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>
                </div>
                <div>
                    <h1 class="font-display font-extrabold text-2xl">{{ __('staticwords.HelpdeskandSupport') }}</h1>
                    <p class="text-[13px] text-slate-500">{{ __('Submit a support ticket and our team will get back to you shortly.') }}</p>
                </div>
            </div>

            <form novalidate action="{{ route('hdesk.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                @csrf
                <div class="grid sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Issue') }} <span class="text-rose-500">*</span></label>
                        <input required type="text" name="issue_title" value="{{ old('issue_title') }}"
                            class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] @error('issue_title') border-rose-400 @enderror">
                        @error('issue_title')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Image') }}</label>
                        <input type="file" name="image" class="w-full text-[13px] file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[13px] file:font-semibold file:bg-brand-50 file:text-brand-600 hover:file:bg-brand-100 cursor-pointer">
                        @error('image')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.DescribeyourIssue') }} <span class="text-rose-500">*</span></label>
                    <textarea required name="issue" id="editor1" rows="8" class="w-full px-3 py-2 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] @error('issue') border-rose-400 @enderror">{{ old('issue') }}</textarea>
                    @error('issue')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="flex items-center gap-3 flex-wrap">
                    <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-2.5 rounded-lg flex items-center gap-2">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
                        {{ __('staticwords.CreateTicket') }}
                    </button>
                    @auth
                        <a href="{{ route('user_t') }}" class="text-brand-600 hover:underline text-[13px] font-semibold">{{ __('View my tickets') }} →</a>
                    @endauth
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('script')
<script>
(function(){
    var forms = document.getElementsByClassName('form');
    Array.prototype.filter.call(forms, function(form){
        form.addEventListener('submit', function(event){
            if (form.checkValidity() === false){ event.preventDefault(); event.stopPropagation(); }
        }, false);
    });
})();
</script>
@endsection