@extends($activeTemplate . 'layouts.frontend')
@section('content')
    <section class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-area-content">
                <h3 class="breadcrumb-area-title">
                    @lang('Create a new support ticket')
                </h3>
                <p class="breadcrumb-area-desc mt-3">
                    @lang('Please provide a detailed description of your issue, and our support team will assist you promptly.')
                </p>
            </div>
        </div>
    </section>

    <section class="py-60">
        <div class="container">
            <div class="add-ticket-wrapper mx-auto">
                <form action="{{ route('user.ticket.store') }}" class="add-ticket-form custom-select-wrapper editorForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="description">
                    <input type="hidden" name="department" value="{{ $department->id }}">
                    <div class="card mb-10">
                        <div class="card-header">
                            <p class="card-title">@lang('Ticket - ') {{ __($department->name) }}</p>
                        </div>
                        <div class="card-body">
                            <div class="row c-gx-4 gy-4">
                                <div class="col-lg-9">
                                    <label for="subject" class="form--label style-two">@lang('Subject') </label>
                                    <input type="text" name="subject" value="{{ old('subject') }}" class="form--control form-control md-style" placeholder="@lang('Subject')" required />
                                </div>

                                <div class="col-lg-3">
                                    <label for="priority" class="form--label style-two">@lang('Priority') </label>
                                    <select name="priority" class="form--control form-control md-style select2" required>
                                        <option value="">@lang('Select One')</option>
                                        @foreach ($priorities as $priority)
                                            <option value="{{ $priority->id }}" @selected(old('priority') == $priority->id)>{{ __($priority->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label for="description" class="form--label style-two">@lang('Description')</label>
                                    <div class="editor-wrapper">
                                        <div id="editor">
                                            @php
                                                echo old('description');
                                            @endphp
                                        </div>

                                        <div class="ql-attachments-area d-none">
                                            <span class="ql-attachments-area-collapse">
                                                <i class="fa-solid fa-chevron-down"></i>
                                            </span>
                                        </div>
                                        <div class="editor-options">
                                            <div class="editor-options-wrapper">
                                                <div class="editor-options-component">
                                                    <label for="ql-attachment" class="ql-attachment">
                                                        <input hidden type="file" multiple name="attachments[]" id="ql-attachment" class="ql-attachment-input" accept="{{ $acceptAttribute }}" />
                                                        @include('admin.partials.svg.attachment')
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <x-viser-form identifier="department_id" identifierValue="{{ $department->id }}" />

                                <div class="col-12">
                                    <button class="submitBtn btn btn--base btn--md w-100">@lang('Submit')</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </section>
@endsection

@include('Template::user.ticket.upload_js')

@push('script')
    <script>
        (function($) {
            "use strict";
            
            // ========================= Select2 Js Start ==============
            (() => {
                $('.select2').each((index, select) => {
                    $(select).select2();
                });

                $('.select2-basic').each(function(index, element) {
                    $(element).select2({
                        dropdownParent: $(element).closest('.form-group'),
                    });
                });

                $('.select2-multiple').each(function(index, element) {
                    $(element).select2({
                        multiple: true,
                    });
                });
            })();
            // ========================= Select2 Js End ==============

        })(jQuery);
    </script>
@endpush
