@extends('admin.layouts.app')
@section('content')

{{-- show ticket modal / --}}
<div class="modal fade" id="showTicketModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCenterTitle">My ticket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="ticketResponseHtml">
                <div class="row">
                    <div class="col text-center">
                        <div class="spinner-border spinner-border-lg text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 col-md-10">
        <div class="card shadow-sm">
            <div class="card-body">
                <h5 class="card-title mb-4">Submit a Ticket</h5>
                <form action="{{ route('promoter.contact-us.send') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="uuid" class="form-label">Ticket ID <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('uuid') is-invalid @enderror" id="uuid" name="uuid" value="{{ 'TICKET-' . strtoupper(Str::random(8)) . '-' . time() }}" readonly>
                        @error('uuid')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                        @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                        @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('subject') is-invalid @enderror" id="subject" name="subject" value="{{ old('subject') }}" required>
                        @error('subject')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="priority" class="form-label">Priority <span class="text-danger">*</span></label>
                        <select class="form-select @error('priority') is-invalid @enderror" id="priority" name="priority" required>
                            <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>
                        </select>
                        @error('priority')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('message') is-invalid @enderror" id="message" name="message" rows="5">{{ old('message') }}</textarea>
                        @error('message')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">Submit Ticket</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    My Tickets
                </h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    @forelse ($user->tickets as $ticket)
                    <a href="javascript: void(0);" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1">{{ $ticket->subject }}</h5>
                            <small class="text-muted">Priority: {{ ucfirst($ticket->priority) }}</small>
                        </div>
                        <div class="">
                            <button onclick="showTicket({{ $ticket->id }})" class="btn btn-icon btn-label-{{ $ticket->isResponse() == true ? 'success' : 'primary' }} waves-effect" @disabled(!$ticket->isResponse())>
                                <i class="fa fa-eye text-{{ $ticket->isResponse() == true ? 'success' : 'primary' }}"></i>
                            </button>
                        </div>
                    </a>
                    @empty
                    <div class="text-center mt-3">
                        <p>No responded tickets available.</p>
                    </div>
                    @endforelse
                </div>

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

@section('script')
<script src="{{ asset('dashboard/libs/tinymce/tinymce.min.js') }}"></script>
<script>
    tinymce.init({
        selector: '#message'
        , plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss'
        , toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat'
        , tinycomments_mode: 'embedded'
        , tinycomments_author: 'Author name'
        , mergetags_list: [{
                value: 'First.Name'
                , title: 'First Name'
            }
            , {
                value: 'Email'
                , title: 'Email'
            }
        , ]
        , ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant"))
    , });

</script>

{{-- Show Ticket --}}
<script>
    function showTicket(ticketId) {
        $("#showTicketModal").modal('show');
        $.post("{{ route('promoter.contact-us.show-ticket') }}", {
                "_token": "{{ csrf_token() }}"
                , "ticket_id": ticketId
            })
            .done(function(response) {
                $("#ticketResponseHtml").html(response.htmlContent);
            })
            .fail(function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest)
            })
    }

    const myModalEl = document.getElementById('showTicketModal')
    myModalEl.addEventListener('hidden.bs.modal', event => {
        $("#ticketResponseHtml").html("<div class='row'><div class='col text-center'><div class='spinner-border spinner-border-lg text-primary' role='status'><span class='visually-hidden'>Loading...</span></div></div></div>");
    })

</script>
@endsection