@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .simplebar-content-wrapper {
        direction: inherit;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
        position: relative;
        display: block;
        height: auto !important;
        width: auto;
        visibility: visible;
        overflow: auto !important;
        max-width: 100%;
        max-height: 100%;
        scrollbar-width: none;
        padding: 0 !important;
    }

    button.btn.clearSearch,
    button.btn.downloadPdf,
    button.btn.openFullScreen,
    button#dropdownMenuButton1,
    button#dropdownMenuButton2{
        color: #fff;
        width: 34px;    
        height: 30px;
        font-size: 16px;
        line-height: 14px;
        padding: 0.5rem !important;
    }

    button.btn.downloadPdf {
        --bs-bg-opacity: 1;
        background-color: #0c63e4 !important;
    }
    .chat-input {
      border-radius: .6rem !important;
    }
    
    @media only screen and (max-width:680px) {
        .card-body {
            padding: 1.25rem 0.2rem !important;
        }
        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 30px calc(24px / 2);
        }
    }

    tr th,
    tr td {
        font-size: 14px;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">
                    <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                </h4>
            </div>
        </div>
        <!-- end page title -->

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        <!-- start row -->
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Id</th>
                                    <th>Client Name</th>
                                    <th>Mobile Number</th>
                                    <th>Ticket Number</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->

<div class="modal fade" id="history_detail_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_history_detail_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_history_detail_lable">History</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="w-100 user-chat">
                    <div class="card">
                        <div>
                            <div class="chat-conversation p-3" id="chat-container">
                                <ul class="list-unstyled mb-0" data-simplebar="init" style="max-height: 486px;">
                                    <div class="simplebar-wrapper" style="margin: 0px;">
                                        <div class="simplebar-height-auto-observer-wrapper">
                                            <div class="simplebar-height-auto-observer"></div>
                                        </div>
                                        <div class="simplebar-mask">
                                            <div class="simplebar-offset" style="bottom: 0px;">
                                                <div class="simplebar-content-wrapper">
                                                    <div class="simplebar-content" id="continue-chat" style="padding: 0px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="simplebar-placeholder" style="width: auto; height: 645px;"></div>
                                    </div>
                                    <div class="simplebar-track simplebar-vertical" style="visibility: visible;">
                                        <div class="simplebar-scrollbar" style="height: 366px; transform: translate3d(0px, 0px, 0px); display: block;"></div>
                                    </div>
                                </ul>
                            </div>

                            <div class="p-3 chat-input-section" id="chat-input-selection">
                                <form id="formTicket" action="{{route('customer.support.replay.save')}}" method="POST" class="needs-validation m-0" novalidate>
                                    @csrf
                                    <input type="hidden" id="id" name="id">

                                    <div class="row">
                                        <div class="col">
                                            <div class="position-relative">
                                                <input type="text" class="form-control chat-input" id="ticket_replay" name="ticket_replay" placeholder="Enter replay text" value="" required maxlength="160" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <button type="button" class="btn btn-secondary btn-rounded waves-effect waves-light" onclick="ticketClose();">Close This Ticket</button>
                                            <button type="submit" class="btn btn-primary btn-rounded chat-send w-md waves-effect waves-light" id="btnSaveTicket"><span class="d-none d-sm-inline-block me-2">Send</span><i class="mdi mdi-send"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var agentCode = `{!! $data['agent_code'] !!}`;
    var ajaxURL = "{{ route('support.ajax') }}";
    var csrfToken = $("[name=_token").val();

    $(document).ready(function(){
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

        $('#formTicket').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{ "bSortable": true, "aTargets": [ 0, 1, 2, 3, 4]}],
        "order": [[2, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 400;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURL,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "status"},
            {"mData": "id"},
            {"mData": "full_name", },
            {"mData": "mobile_number"},
            {"mData": "ticket_number","bSortable": false},
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();
        
        if(responseData['totalNotification'] == 0){
            $('#notification').hide();
        }else{
            $('#notification').show();
        }
        $("#notification").html(responseData['totalNotification']);

        if(responseData['notification'] == 0){
            $('#notification_1').hide();
        }else{
            $('#notification_1').show();
        }
        $("#notification_1").html(responseData['notification']);

    });

    function showRequest(formData, jqForm, options) {
        // showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        // hideLoader();

        if (responseText['status'] == 1) {
            $("#formTicket").trigger('reset').removeClass('was-validated');

            $('#notification').html(responseText['notification']);

            if(responseText['notification'] == 0){
                $('#notification, #notification_1').hide();
            }else{
                $('#notification, #notification_1').show();
            }

            $('#datatable').DataTable().ajax.reload(null, false);
            // if(responseText['data']['ticket_replay_id'] != 0){
                viewChat(parseInt(responseText['data']['ticket_replay_id']));                
            // }

        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    function viewChat(id){
        $("#id").val(id);

        var ajaxHistoryDetails = "{{route('ticket.details')}}";
        var currentDate = new Date();

        $.ajax({
            url: ajaxHistoryDetails +"?agent_code=" + agentCode + "&id=" + id,
            type: "GET",
            beforeSend: function() {
                showLoader();
            },
            success:function(response){
                hideLoader();

                $("#history_detail_modal").modal('show');
                $("#formTicket").trigger('reset').removeClass('was-validated');
                $("#continue-chat").html(''); 

                let lastAddedDayText = null;

                $("#modal_history_detail_lable").text('#' + response.data[0].ticket_number);

                if(response.data[0].status == 1 && response.data[0].close_status == 1){
                    $("div#chat-input-selection").hide();
                }else{
                    $("div#chat-input-selection").show();
                }

                response.data.forEach((value) => {                    
                    var supportDate = new Date(value.created_at);
                    var supportUpdatedDate = new Date(value.updated_at);

                    var currentDay = currentDate.getDate();
                    var supportDay = supportDate.getDate();
                    var supportUpdatedDay = supportUpdatedDate.getDate();
                   
                    if(value.title != '' && value.description != ''){
                        var chatHtml =
                            `<li>
                                <div class="conversation-list">
                                    <div class="ctext-wrap">
                                        <div class="conversation-name">Customer</div>
                                        <label class="form-label d-flex justify-content-start">Title : </label>
                                        <div class="d-flex justify-content-start">
                                            <p>${value.title}</p>
                                        </div>
                                        <label class="form-label d-flex justify-content-start">Description : </label>
                                        <div class="d-flex justify-content-start">
                                            <p>${value.description}</p>
                                        </div>`;
                                        if(value.attachment != ''){
                                            chatHtml+= `<button class="btn downloadPdf tooltipMsg d-flex justify-content-end mb-3" onclick="return downloadPdf('${value.attachment}');" type="button"><span class="mdi mdi-download"></span><span class="tooltiptext">Download</span></button>`;
                                        }
                                        chatHtml+= `<p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>${value.created_at_time}</p>
                                    </div>
                                </div>
                            </li>`;
    
                        $("#continue-chat").append(chatHtml);
                    }
                    
                    if(value.ticket_replay != ''){
                        var chatHtml =
                            `<li class="right">
                                <div class="conversation-list">
                                    <div class="ctext-wrap">
                                        <div class="conversation-name">You</div>
                                        <p>${value.ticket_replay}</p>
                                        <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>${value.updated_at_time}</p>
                                    </div>
                                </div>
                            </li>`;
                        $("#continue-chat").append(chatHtml);
                    }
                });
                
                scrollToBottom();
            }
        });
    }

    function ticketClose(){
        swal.fire({
            title: "Are you sure want to close this ticket?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, close it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                close();
            }
        });
    }

    function close(){
        var id = $("#id").val();
        var ajaxTicketClose = "{{route('ticket.close')}}";

        $.ajax({
            url: ajaxTicketClose +"?id=" + id,
            type: "GET",
            success:function(response){
                viewChat(response.data);
                customerTicketsReplay();
            }
        });
    }

    function downloadPdf(path) {
        window.open(path, '_blank');
    }  

    const chatContainer = document.querySelector("#chat-container .simplebar-content-wrapper");

    function scrollToBottom() {
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }    
</script>
@endsection