@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">

        <!-- Error Messages -->
        @include('admin.layouts.errors')

        <!-- Page Heading -->
        <div class="row mb-3">
            <h4 class="c-grey-900">{{ $title }}</h4>
        </div>

        <!-- Create Ticket Form -->
        <form method="POST" action="{{ route('ch-admin.ticket.store') }}">
            @csrf
            <div class="row">

                <!-- Left Section -->
                <div class="col-md-8">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <!-- Ticket Subject -->
                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject</label>
                            <input type="text" name="subject" id="subject" class="form-control" value="{{ old('subject') }}" required>
                        </div>

                        <!-- Message Content -->
                        <div class="mb-3">
                            <label for="message_content" class="form-label">Message Content</label>
                            <textarea id="message_content" name="message_content" rows="10" class="form-control">{{ old('message_content') }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Right Section -->
                <div class="col-md-4">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">

                        <!-- User Field -->
                        <div class="mb-3">
                            <label for="user_id" class="form-label">User</label>
                            <select name="user_id" id="user_id" class="form-control" required>
                                <option value="">Select User</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>{{ $user->first_name }} {{ $user->last_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Priority Field -->
                        <div class="mb-3">
                            <label for="priority" class="form-label">Priority</label>
                            <select name="priority" id="priority" class="form-control" required>
                                <option value="">Select Priority</option>
                                <option value="Low" {{ old('priority') == 'Low' ? 'selected' : '' }}>Low</option>
                                <option value="Medium" {{ old('priority') == 'Medium' ? 'selected' : '' }}>Medium</option>
                                <option value="High" {{ old('priority') == 'High' ? 'selected' : '' }}>High</option>
                                <option value="Critical" {{ old('priority') == 'Critical' ? 'selected' : '' }}>Critical</option>
                            </select>
                        </div>

                        <!-- Category Field -->
                        <div class="mb-3">
                            <label for="category_id" class="form-label">Category</label>
                            <select name="category_id" id="category_id" class="form-control">
                                <option value="">Select Category</option>
                                @foreach($ticketCategories as $ticketCategory)
                                    <option value="{{ $ticketCategory->id }}" {{ old('category_id') == $ticketCategory->id ? 'selected' : '' }}>{{ $ticketCategory->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Submission Buttons -->
                        <div class="mt-3">
                            <a href="{{ route('ch-admin.ticket.index') }}" class="btn btn-secondary">Cancel</a>
                            <button class="btn btn-primary">Submit</button>
                        </div>

                    </div>
                </div>

            </div>
        </form>

    </div>
@endsection

@push('head')
    <script src="{{ url('assets/backend/js/vendors/ckeditor.js') }}"></script>
@endpush

@push('scripts')
    <script>
        const textAreas = ['#message_content'];
        textAreas.forEach((el) => {
            ClassicEditor.create(document.querySelector(el), {
                removePlugins: ['EasyImage', 'ImageUpload'],
            }).then(editor => {
                const form = document.querySelector('form');
                form.addEventListener('submit', function () {
                    document.querySelector(el).value = editor.getData();
                });
            });
        });
    </script>
@endpush