@extends('customer/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 scroll !important;
        max-width: 100%;
        max-height: 100%;
        scrollbar-width: none;
        padding: 0 !important;
    }

    .chat-input {
      border-radius: .6rem !important;
    }
    .img-thumbnail{
        width: 72px;
    } 

    .nav {
        padding: 10px 0;
        width: -moz-fit-content;
        width: fit-content;
        border-radius: 0.8rem;
        background-color: #f1f5fe;
    }

    li.nav-item {
        border-right: 1px solid #074193;
        padding: 0 15px;
    }

    li.nav-item:last-child {
        border-right: none;
    }

    .nav-tabs {
        border-bottom: 0;
    }

    .nav-link {
        padding: 0.5rem 1.2rem;
        font-weight: 500;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border-color: unset;
        border: none;
        color: #fff !important;
        background-color: var(--bs-blue);
        border-radius: 0.6rem;
    }

    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: unset;
        border: 0;
    }

    .nav-tabs .nav-link {
        border-radius: 0.6rem;
        border: none;
    }

    @media (max-width: 490px) {
        #myTab {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto !important;
        }

        .navbaar {
            margin-left: 10px !important;
            margin-right: 10px !important;
        }
        
        #ticket {
            margin-top: 10px !important;
        }
    }
    /*   #continue-chat {
            overflow-y: hidden;
            height: auto;
        } */
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-center d-flex navbaar">
                        <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect active" id="ticket" data-bs-toggle="tab" data-bs-target="#new_ticket" type="button" role="tab" aria-controls="profile" aria-selected="false">Create Ticket</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="history_1" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controls="contact" aria-selected="false">History
                                    @if(agentTicketsReplay($data['agent_code'],$data['data']['id']) != 0)
                                        <span class="badge rounded-pill bg-danger float-end ml-2" id="notification_count_2">{{ agentTicketsReplay($data['agent_code'],$data['data']['id']) }}</span>
                                    @endif
                            </button>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="new_ticket" role="tabpanel" aria-labelledby="ticket">
                            <form id="formTicket" action="{{route('customer.ticket.save')}}" method="POST" class="needs-validation m-0" novalidate>
                                @csrf
                                <input type="hidden" id="agentCode" name="agent_code" value="">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="title" class="form-label">Title<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="title" name="title" placeholder="Enter title" value="" required maxlength="64" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="attachment" class="form-label">Attachment</label>
                                            <input type="file" class="form-control" id="attachment" name="attachment" value="" autocomplete="off" accept="image/jpeg,image/png,application/pdf">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="description" class="form-label">Description<span class="text-danger">*</span></label>
                                            <textarea type="text" class="form-control" id="description" name="description" placeholder="Enter description" value="" required maxlength="200" autocomplete="off"></textarea>
                                        </div>
                                    </div>
                                </div>
            
                                <div class="row">
                                    <div class="col-md-10"></div>
                                    <div class="col-md-2">
                                        <div class="my-4">
                                            <button type="submit" id="btnSaveTicket" class="btn btn-primary form-control">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                   
                        <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history_1">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped border border-3 default_data">
                                    <tbody>                                       
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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">
                                <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" id="abc">
                                                <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-horizontal" style="visibility: hidden;">
                                        <div class="simplebar-scrollbar" style="transform: translate3d(0px, 0px, 0px); display: none;"></div>
                                    </div>
                                    <div class="simplebar-track simplebar-vertical" style="visibility: visible;">
                                        <div class="simplebar-scrollbar" style=""></div>
                                    </div>
                                </ul>
                            </div>

                            <div class="p-3 chat-input-section" id="chat-input-selection">
                                <div class="row">
                                    <div class="col">
                                        <div class="position-relative">
                                            <form id="formTicket_1" action="{{route('customer.ticket.save')}}" method="POST" class="needs-validation m-0" novalidate>
                                                @csrf
                                                <input type="hidden" id="agentCode1" name="agent_code">
                                                <input type="hidden" id="id" name="id">

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="title" class="form-label">Title<span class="text-danger">*</span></label>
                                                            <input type="text" class="form-control chat-input" id="title" name="title" placeholder="Enter title" value="" required maxlength="64" autocomplete="off">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="attachment" class="form-label">Attachment</label>
                                                            <input type="file" class="form-control chat-input" id="attachment" name="attachment" value="" autocomplete="off" accept="image/jpeg,image/png,application/pdf">
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label for="description" class="form-label">Description<span class="text-danger">*</span></label>
                                                            <textarea type="text" class="form-control chat-input" id="description" name="description" placeholder="Enter description" value="" required maxlength="200" autocomplete="off"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-auto d-flex justify-content-end">
                                                    {{-- <button type="button" class="btn btn-secondary btn-rounded waves-effect waves-light me-2" 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>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </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'] !!}`;

  /*  $('#history_detail_modal').on('shown.bs.modal', function () {
        var chatContainer = $('#continue-chat');
        setTimeout(function() {
            chatContainer.scrollTop(chatContainer[0].scrollHeight);
        }, 100); // Adjust the timeout as needed
    }); */
 
    $(document).ready(function() {
        $("#agentCode, #agentCode1").val(agentCode);

        // $("#history_1").trigger('click');

        $("#history_1").on('click',function(){
            var ajaxHistoryList = "{{route('support.history.list')}}";

            $.ajax({
                url: ajaxHistoryList +"?agent_code="+agentCode,
                type: "GET",
                success:function(response){
                    if(response['status']==1){
                        notification(response['notification']);

                        var defaultDataElement = $(".default_data");
                        var Body = document.createElement('tbody');
                        defaultDataElement.html('').append(Body);
                        
                        if(response['data'].length == 0){
                            var img= '<div class="d-flex justify-content-center noRecord"><img src="{{asset('assets/images/norecordfound.png')}}" alt=""></div>';
                            Body.innerHTML=img;
                        }else{
                            var tableBody = document.querySelector('.default_data tbody');

                            response.data.forEach(function(history) {
                                if(history.title != '' && history.description != ''){

                                    var row = document.createElement('tr');

                                    // Id
                                    var IdHeader = document.createElement('th');
                                    IdHeader.style.width = '5%';
                                    IdHeader.textContent = '#' + history.id;
                                    row.appendChild(IdHeader);
        
                                    // Title
                                    var TitleHeader = document.createElement('th');
                                    TitleHeader.style.width = '5%';
                                    TitleHeader.textContent = 'Title';
                                    row.appendChild(TitleHeader);
        
                                    var TitleCell = document.createElement('td');
                                    TitleCell.style.width = '10%';
                                    TitleCell.textContent = history.title;
                                    row.appendChild(TitleCell);
        
                                    // Ticket Number
                                    var TicketNumHeader = document.createElement('th');
                                    TicketNumHeader.style.width = '10%';
                                    TicketNumHeader.textContent = 'Ticket Number';
                                    row.appendChild(TicketNumHeader);
        
                                    var TicketNumCell = document.createElement('td');
                                    TicketNumCell.style.width = '15%';
                                    TicketNumCell.textContent = history.ticket_number;
                                    row.appendChild(TicketNumCell);
        
                                    // Status
                                    var StatusHeader = document.createElement('th');
                                    StatusHeader.style.width = '10%';
                                    StatusHeader.textContent = 'Status';
                                    row.appendChild(StatusHeader);
        
                                    var StatusCell = document.createElement('td');
                                    StatusCell.style.width = '10%';
                                    if (StatusHeader.textContent === 'Status') {
                                        if(history.status == 0){
                                            if(history.open_status == 0){
                                                var avatarHtml = '<li class="list-inline-item px-2 pos-middle"><span class="badge badge-pill badge-soft-warning font-size-12">Open</span> - You Replied</li>';
                                            }else{
                                                var avatarHtml = '<li class="list-inline-item px-2 pos-middle"><span class="badge badge-pill badge-soft-warning font-size-12">Open</span> - Agent replayed</li>';
                                            }
                                        }else{
                                            var avatarHtml = '<li class="list-inline-item px-2 pos-middle"><span class="badge badge-pill badge-soft-success font-size-12">Close</span></li>';
                                        }
                                        StatusCell.innerHTML = avatarHtml;
                                    }
                                    row.appendChild(StatusCell);
        
                                    // Details
                                    var DetailsHeader = document.createElement('th');
                                    DetailsHeader.style.width = '5%';
                                    DetailsHeader.innerHTML =  '<ul class="list-inline contact-links mb-0" style="justify-content: center;display: flex;"><li class="list-inline-item font-size-20 px-2 pos-middle"><a href="javascript:void(0);" onclick="supportChat('+ history.id +')" title="View"><i class="mdi mdi-eye"></i></a></li></ul';
                                    row.appendChild(DetailsHeader);
        
                                    tableBody.appendChild(row);

                                }
                            });
                        }
                    }
                }
            });
        });

        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

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

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

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

    function showResponse(responseText, statusText, xhr, $form) {
        // hideLoader();
        
        if (responseText['status'] == 1) {
            $("#formTicket, #formTicket_1").trigger('reset').removeClass('was-validated');
            $("#history_1").trigger('click');

            showHistory(responseText['data']['ticket_number']);   

            notification(responseText['notification']);

            if(responseText['data']['ticket_replay_id'] != 0){
                supportChat(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 {
                if(responseText['msg'] == "This ticket close by support"){
                    supportChat(responseText['data'])
                }
                toastr["error"](responseText['msg']);
            }
        }
    }

    function showHistory(ticket) {
        Swal.fire({
            position: "top-end",
            icon: "success",
            title: "Your Ticket Generated",
            text:ticket,
            showConfirmButton: false,
            timer: 2500
        });
    }  

    function supportChat(id){
        $("#id").val(id);
        var ajaxHistoryDetails = "{{route('history.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');
                $("#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.formatted_created_at);
                    // var updatedDate = new Date(value.formatted_updated_at);
                   
                    // var yesterday = currentDate.getDate() - 1;
                    // var currentDay = currentDate.getDate();
                    // var supportDay = supportDate.getDate();

                    // var dayText;
                    // if (currentDay > supportDay) {
                    //     if (yesterday == supportDate.getDate()) {
                    //         dayText = "Yesterday";
                    //     } else {
                    //         var setDate = supportDate.getDate() + '/' + (supportDate.getMonth() + 1) + '/' + supportDate.getFullYear(); // Note: Months are zero-based
                    //         dayText = setDate;
                    //     }
                    // } else {
                    //     dayText = "Today";
                    // }

                    // if (dayText !== lastAddedDayText) {
                    //     var chatHtml = `<li><div class="chat-day-title"><span class="title" id="day">${dayText}</span></div></li>`;

                    //     $("#continue-chat").append(chatHtml);

                    //     lastAddedDayText = dayText;
                    // }

                    var supportDate = value.formatted_created_at.split(' ')[1] + ' ' + value.formatted_created_at.split(' ')[2];
                    var updatedDate = value.formatted_updated_at.split(' ')[1] + ' ' + value.formatted_updated_at.split(' ')[2];

                    if(value.title != '' && value.description != ''){
                        var chatHtml =
                            `<li class="right">
                                <div class="conversation-list">
                                    <div class="ctext-wrap">
                                        <div class="conversation-name">You</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-start 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>${supportDate}</p>
                                    </div>
                                </div>
                            </li>`;

                        $("#continue-chat").append(chatHtml);
                    }

                    if(value.ticket_replay !== ''){
                        var chatHtml =
                            `<li>
                                <div class="conversation-list">
                                    <div class="ctext-wrap">
                                        <div class="conversation-name">Support</div>
                                        <p>${value.ticket_replay}</p>
                                        <p class="chat-time mb-0"><i class="bx bx-time-five align-middle me-1"></i>${updatedDate}</p>
                                    </div>
                                </div>
                            </li>`;

                        $("#continue-chat").append(chatHtml);
                    }
                });
            }
        });
    }

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

    function notification(notification){
        $('#notification_count, #notification_count_1, #notification_count_2').html(notification);

        if(notification == 0){
            $('#notification_count, #notification_count_1, #notification_count_2').hide();
        }else{
            $('#notification_count, #notification_count_1, #notification_count_2').show();
        }
    }
</script>
@endsection