@extends('admin.layouts.app')

@section('content')
<!--begin::Content container-->
<div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
    <!--begin::Card-->
    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="panel-heading edit-theme-title">
                @if($ticketMessages->count() > 0)
                    <strong>{{$ticket->subject}}</strong>
                    @if( $ticketMessages[0]->canmessage == 1 )
                        <span class="badge"><span class="fa fa-lock"></span> Ticket is locked so user cannot answer</span>
                    @endif
                @endif
             </div>
            <!--begin::Card title-->
        </div>
        <div id="alertMessages"></div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body py-4" id="kt_drawer_chat_messenger_body">
            <!--begin::Messages-->
            <div class="scroll-y me-n5 pe-5" data-kt-element="messages" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer" data-kt-scroll-wrappers="#kt_drawer_chat_messenger_body" data-kt-scroll-offset="0px">
                @if($ticketMessages->count() > 0)
                    @foreach ($ticketMessages as $message)
                        @if( $message->support == 1 )
                            <!--begin::Message(in)-->
                            <div class="d-flex justify-content-start mb-10">
                                <!--begin::Wrapper-->
                                <div class="d-flex flex-column align-items-start">
                                    <!--begin::User-->
                                    <div class="d-flex align-items-center mb-2">
                                        <!--begin::Avatar-->
                                        {{-- <div class="symbol symbol-35px symbol-circle">
                                            <img alt="Pic" src="assets/media/avatars/300-25.jpg" />
                                        </div> --}}
                                        <!--end::Avatar-->
                                        <!--begin::Details-->
                                        <div class="ms-3">
                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary me-1">{{$message->username}}</a>
                                            <span class="text-muted fs-7 mb-1">{{$message->time}}</span>
                                        </div>
                                        <!--end::Details-->
                                    </div>
                                    <!--end::User-->
                                    <!--begin::Text-->
                                    <div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">{{str_replace("</script>","</ script >",str_replace("<script>","< script >",$message["message"]))}}</div>
                                    <!--end::Text-->
                                </div>
                                <!--end::Wrapper-->
                            </div>
                            <!--end::Message(in)-->
                        @else
                            <!--begin::Message(out)-->
                            <div class="d-flex justify-content-end mb-10">
                                <!--begin::Wrapper-->
                                <div class="d-flex flex-column align-items-end">
                                    <!--begin::User-->
                                    <div class="d-flex align-items-center mb-2">
                                        <!--begin::Details-->
                                        <div class="me-3">
                                            <span class="text-muted fs-7 mb-1">{{$message->time}}</span>
                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary ms-1">Support Team</a>
                                        </div>
                                        <!--end::Details-->
                                        <!--begin::Avatar-->
                                        {{-- <div class="symbol symbol-35px symbol-circle">
                                            <img alt="Pic" src="assets/media/avatars/300-1.jpg" />
                                        </div> --}}
                                        <!--end::Avatar-->
                                    </div>
                                    <!--end::User-->
                                    <!--begin::Text-->
                                    <div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end" data-kt-element="message-text">{{str_replace("</script>","</ script >",str_replace("<script>","< script >",$message["message"]))}}</div>
                                    <!--end::Text-->
                                </div>
                                <!--end::Wrapper-->
                            </div>
                            <!--end::Message(out)-->
                        @endif
                    @endforeach
                @endif
            </div>
            <!--end::Messages-->
        </div>
        <!--end::Card body-->
        <!--begin::Card footer-->
        <div class="card-footer pt-4" id="kt_drawer_chat_messenger_footer">
            <form action="{{route('admin.tickets.read_ticket_post')}}" method="post">
                @csrf
                @method('POST')
                <input type="hidden" name="ticket_id" value="{{$ticket->primary_ticket_id}}" />
                <!--begin::Input-->
                <textarea class="form-control form-control-flush mb-3" rows="1" name="message" placeholder="Type a message" required></textarea>
                <!--end::Input-->
                <!--begin:Toolbar-->
                <div class="d-flex flex-stack">
                    <!--begin::Actions-->
                    {{-- <div class="d-flex align-items-center me-2">
                        <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button" data-bs-toggle="tooltip" title="Coming soon">
                            <i class="bi bi-paperclip fs-3"></i>
                        </button>
                        <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button" data-bs-toggle="tooltip" title="Coming soon">
                            <i class="bi bi-upload fs-3"></i>
                        </button>
                    </div> --}}
                    <!--end::Actions-->
                    <!--begin::Send-->
                    <button class="btn btn-dark" type="submit" name="send">Send</button>
                    <!--end::Send-->
                </div>
                <div class="col-md-12">
                   <div class="btn-group">
                     @if( $ticket->client_new == 1 )
                        <a href="javascript:void(0);" class="btn btn-light-primary change-ticket-data-btn" data-action="unread" data-id="{{$ticket->primary_ticket_id}}" title="Mark as unread">Mark as Unread</a>
                     @endif
                     @if( $ticket->canmessage == 2 )
                        <a href="javascript:void(0);" class="btn btn-light-info change-ticket-data-btn" data-action="lock" data-id="{{$ticket->primary_ticket_id}}" title="Lock Support Request">Lock Support Request</a>
                     @else
                        <a href="javascript:void(0);" class="btn btn-active-secondary change-ticket-data-btn" data-action="unlock" data-id="{{$ticket->primary_ticket_id}}" title="Unlock Support Request">Unlock Support Request</a>
                     @endif
                     @if( $ticket->status != "closed" )
                        <a href="javascript:void(0);" class="btn btn-light-warning change-ticket-data-btn" data-action="close" data-id="{{$ticket->primary_ticket_id}}" title="Close Support Request">Close Support Request</a>
                     @endif
                   </div>
                </div>
                <!--end::Toolbar-->
            </form>
        </div>
        <!--end::Card footer-->
    </div>
    <!--end::Card-->
</div>
<!--end::Content container-->
@endsection

@section('script')
<script>
var table = $('#kt_table_tickets').DataTable({

    ajax: {
        url: "{{ route('admin.tickets') }}",
        data: function (d) {
        }
    },
    columns: [
        {data: 'primary_ticket_id', name: 'primary_ticket_id', orderable: true},
        {data: 'username', name: 'username', orderable: false},
        {data: 'subject', name: 'subject', orderable: false},
        {data: 'status', name: 'status', orderable: false},
        {data: 'time', name: 'time', orderable: false},
        {data: 'lastupdate_time', name: 'lastupdate_time', orderable: false},
        {data: 'action', name: 'action', orderable: false},
    ]
});

var currentRequest = null;
$(document).on('click', '.change-ticket-data-btn', function() {
    //$.LoadingOverlay("show");
    var id = $(this).attr('data-id');
    var action = $(this).attr('data-action');
    var statusText = 'Mark as Unread';
    if(action == 'lock') { statusText = 'Lock support request'; }
    if(action == 'unlock') { statusText = 'Unlock support request'; }
    if(action == 'close') { statusText = 'Close support request'; }
    swal({
        title: 'Are you sure?',
        text: "You want to "+statusText,
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "Cancel",
        closeOnConfirm: true,
        closeOnCancel: true
    }, function (isConfirm) {
        if (isConfirm) {
            var formData = new FormData();
            formData.append('id', id);
            formData.append('action', action);

            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('admin.tickets.change_ticket_data') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend : function()    {
                    if(currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    //$.LoadingOverlay("hide");
                    // swal({'title': data.message, 'type': 'success'});
                    
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(data.message);
                        
                    window.location.reload();
                },
                error:function(e){
                // Error
                    //$.LoadingOverlay("hide");
                    return false;
                }
            });
        }
    });
})
</script>
@endsection