@extends('admin.layouts.master')

@section('content')
    @php
        $userId = request()->user;
        if ($userId) {
            $user = App\Models\User::find($userId);
        }
    @endphp

    <div class="app-body-wrapper">

        <div class="app-body-content">
            <div class="add-ticket-wrapper mt-4 mx-auto">
                <form action="{{ route('admin.ticket.store') }}" class="add-ticket-form custom-select-wrapper editorForm"
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card mb-10">
                        <div class="card-header">
                            <p class="card-title">@lang('Ticket Information')</p>
                        </div>
                        <div class="card-body">
                            <div class="row c-gx-4 gy-4">

                                <div class="col-md-6">
                                    <label for="email" class="form--label style-two">@lang('Email') </label>
                                    <input type="email" name="user_email"
                                        value="{{ old('user_email', $user->email ?? '') }}"
                                        class="form--control form-control md-style" placeholder="@lang('Email')"
                                        required />
                                </div>

                                <div class="col-md-6">
                                    <label for="mobile" class="form--label style-two">@lang('Mobile')
                                        (@lang('Optional'))</label>
                                    <input type="text" name="mobile" value="{{ old('mobile', $user->mobile ?? '') }}"
                                        class="form--control form-control md-style" placeholder="@lang('Mobile')" />
                                </div>
                                <div class="col-md-6">
                                    <label for="first_name" class="form--label style-two">@lang('First Name') </label>
                                    <input type="text" name="firstname"
                                        value="{{ old('firstname', $user->firstname ?? '') }}"
                                        class="form--control form-control md-style" placeholder="@lang('First Name')"
                                        required />
                                </div>

                                <div class="col-md-6">
                                    <label for="last_name" class="form--label style-two">@lang('Last Name') </label>
                                    <input type="text" name="lastname"
                                        value="{{ old('lastname', $user->lastname ?? '') }}"
                                        class="form--control form-control md-style" placeholder="@lang('Last Name')"
                                        required />
                                </div>

                                <div class="col-12">
                                    <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-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>
                                </div>
                                <input type="hidden" name="description">

                                <div class="col-xl-4 col-12">
                                    <label for="department" class="form--label style-two">@lang('Department') </label>
                                    <select name="department" class="form--control form-control md-style select2" required>
                                        <option value="">@lang('Select One')</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}" @selected(old('department') == $department->id)>
                                                {{ __($department->name) }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xl-4 col-md-6">
                                    <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-xl-4 col-md-6">
                                    <label for="status" class="form--label style-two">@lang('Status') </label>
                                    <select name="status" class="form--control form-control md-style select2" required>
                                        <option value="">@lang('Select One')</option>
                                        @foreach ($ticketStatuses as $status)
                                            <option value="{{ $status->id }}" @selected(old('status', $ticketStatuses->where('slug', 'open')->first()->id) == $status->id)
                                                data-status_badge="{{ $status->statusBadge }}">{{ __($status->name) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

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

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


@push('script')
    <script>
        (function($) {
            "use strict";

            $('[name=user_email]').on('input', function() {
                $('[name=firstname]').val('');
                $('[name=lastname]').val('');
                $('[name=mobile]').val('');
            });


            $('[name=user_email]').on('change', function() {
                let email = $(this).val();
                let actionUrl = `{{ route('admin.customer.info') }}`;
                let data = {
                    _token: `{{ csrf_token() }}`,
                    email
                }

                $.post(actionUrl, data,
                    function(response) {
                        if (response.remark == 'customer_info') {
                            let customer = response.data.customer;
                            $('[name=firstname]').val(customer.firstname);
                            $('[name=lastname]').val(customer.lastname);
                            $('[name=mobile]').val(customer.mobile);
                        }
                    }
                );
            });


            $('[name=department]').on('change', function() {
                let department = $(this).val();
                let url = `{{ route('department.form.load', '') }}`;
                if (department) {
                    url = url + '/' + department;
                    $.get(url, function(response) {
                        $('.formBuilder').html(response.html);
                    });
                } else {
                    $('.formBuilder').html('');
                }
            });

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

@push('style')
    <style>
        .form-group {
            margin: 0;
        }

        pre {
            margin: 0;
        }
    </style>
@endpush
