@extends('admin.layouts.app')
@section('style')
<style>
    /* new */
    .text-gray-900{
        font-size: 12px !important;
    }
    [data-bs-theme=light] body, [data-bs-theme=light] .app-default {
        background-color: #f5f8fa !important;
    }
    [data-bs-theme=dark] body, [data-bs-theme=dark] .app-default {
        background-color: #151521 !important;
    }
    .form-control.form-control-flush{
        background-color: #47404017;
    }
    .btn.btn-light-primary:hover:not(.btn-active){
        background-color: #239cf5 !important;
    }
    /* old */
    .chat-container {
        width: 100%;
        float: left;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
    }

    /* Message Bubble */
    .message {
        display: flex;
        flex-direction: column;
        max-width: 70%;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 15px;
        position: relative;
    }

    /* Sender Styling */
    .message.sender {
        background-color: #e3f2fd;
        align-self: flex-end;
        color: #0d47a1;
        text-align: left;
        float: left;
        width: 100%;
    }

    /* Receiver Styling */
    .message.receiver {
        background-color: #f1f8e9;
        align-self: flex-start;
        color: #33691e;
        text-align: left;
        float: right;
        width: 100%;
    }

    /* Message Text */
    .message p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Timestamp */
    .timestamp {
        font-size: 10px;
        color: #757575;
        margin-top: 5px;
        align-self: flex-end;
    }

    .scroll-y.me-n5.pe-5 {
        height: auto !important;
    }
</style>
@endsection
@section('content')
<!-- <div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
</div> -->
<div class="container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <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>
        </div>
        <div id="alertMessages"></div>
        <div class="card-body" id="kt_drawer_chat_messenger_body">
            <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">
                <div class="chat-container">
                @if($ticketMessages->count() > 0)
                    @foreach ($ticketMessages as $message)
                        @if( $message->support == 1 )
                            <div class="message sender">
                                <div class="">
                                    <div class="">
                                        <div class="d-flex align-items-center mb-2">
                                            <!-- <div class="symbol symbol-35px symbol-circle">
                                                <img alt="Pic" src="assets/media/avatars/300-25.jpg" />
                                            </div> -->
                                            <div class="ms-3">
                                                <a href="javascript:void(0)" class="fs-5 fw-bold text-dark text-hover-primary me-1">{{$message->username}}</a>
                                                <span class="timestamp">{{$message->time}}</span>
                                            </div>
                                        </div>
                                        <p class="" data-kt-element="message-text">{{str_replace("</script>","</ script >",str_replace("<script>","< script >",$message["message"]))}}</p>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="message receiver">
                                <div class="">
                                    <div class="">
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="me-3">
                                                <a href="javascript:void(0)" class="fs-5 fw-bold text-gray-900 text-hover-primary ms-1">Support Team</a>
                                                <span class="timestamp">{{$message->time}}</span>
                                            </div>
                                            <!-- <div class="symbol symbol-35px symbol-circle">
                                                <img alt="Pic" src="assets/media/avatars/300-1.jpg" />
                                            </div> -->
                                        </div>
                                        <p class="" data-kt-element="message-text">{{str_replace("</script>","</ script >",str_replace("<script>","< script >",$message["message"]))}}</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endif
                </div>
            </div>
        </div>
        <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}}" />
                <textarea class="form-control form-control-flush mb-3" rows="1" name="message" placeholder="Type a message" required></textarea>
                <!-- <div class="d-flex flex-stack">
                    {{-- <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> --}}
                </div> -->
                <div class="col-md-12">
                    <button class="btn btn-primary" type="submit" name="send">Send</button>
                    @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>
            </form>
        </div>
    </div>
</div>
@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