@extends('admin.layouts.master')

@section('content')
    <div class="ticket-details">
        <div class="ticket-details-topbar">
            <a href="{{ route('admin.ticket.list') }}" class="back-btn">
                <i class="las la-arrow-left"></i>
                @lang('Ticket List')
            </a>
            <button class="ticket-details-topbar-btn">
                <i class="las la-bars"></i>
            </button>
        </div>

        <div class="ticket-details-wrapper">
            <div class="ticket-details-body">
                @include('admin.ticket.details_top_bar')
                @yield('sub_content')
            </div>

            @include('admin.ticket.sidebar')
        </div>
    </div>

    @stack('sub_content')

    <x-confirmation-modal />
@endsection


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

            let modal = $('#snippetAddModal');
            let action = `{{ route('admin.predefined.reply.save') }}`;

            $('.addSnippet').on('click', function() {
                modal.find('.modalTitle').text(`@lang('Add New Snippet')`);
                modal.find('form').attr('action', action);
                modal.modal('show');
            });

            $(document).on('click', '.editSnippet', function() {
                let snippet = $(this).data('snippet');
                modal.find('.modalTitle').text(`@lang('Update Snippet')`);
                modal.find('[name=title]').val(snippet.title);
                modal.find('[name=message]').val(snippet.message);
                modal.find('#snippet-editor').find('.ql-editor').html(snippet.message)
                modal.find('[name=global]').prop('checked', snippet.global);
                modal.find('[name=favorite]').prop('checked', snippet.favorite);
                modal.find('form').attr('action', action + '/' + snippet.id);
                modal.modal('show');
            });

            modal.on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
            });

            $(document).on('click', '.pasteIcon', function() {
                let message = $(this).data('message');
                $('#editor').find('.ql-editor').html(message)
                $('.snippet_offcanvas_close').click();
            });

            let snippetTimer;
            let searchRoute = `{{ route('admin.predefined.reply.list') }}`;

            $('.snippetSearch').on('input', function() {

                let query = $(this).val();

                clearTimeout(snippetTimer);
                snippetTimer = setTimeout(function() {
                    $.ajax({
                        url: searchRoute,
                        method: 'GET',
                        data: {
                            search: query
                        },
                        success: function(response) {
                            $('.snippetList').html(response.html);
                        }
                    });
                }, 300);
            });



            const editor = document.getElementById('snippet-editor');
            if (editor) {
                const quill = new Quill(editor, {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{
                                header: [1, 2, false]
                            }],
                            [{
                                'size': ['small', 'normal', 'large', 'huge']
                            }],
                            [{
                                list: 'ordered'
                            }, {
                                list: 'bullet'
                            }],
                            ['link', 'clean'],
                        ]
                    }
                });

                document.querySelector('.snippetForm').addEventListener('submit', function() {
                    document.querySelector('[name="message"]').value = quill.root.innerHTML;
                });
            }

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

@push('style')
    <style>
        body:has(.modal-backdrop.fade.show) {
            padding-right: 0 !important;
        }
    </style>
@endpush
