@php
$websocketConfig = getIpAndPort();
$languageCode = session('locale') ?? auth()->user()->default_language;
@endphp
@extends('layouts.support')
@section('title') {{__("words.Support")}} @endsection

@section('page_title') Support @endsection

@section('content')

@php
$timezone = auth()->user()->getTimezone();
@endphp
@include("loader.loader")
    <section id="inbox_main" class="messageMainbox_ supportchat_">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-4">
                    <div class="inbox_ leftinbox__">
                        <div class="main-inbox px-0">
                            <h2 class="messageHead_">{{__("words.Topics")}}</h2>

                        </div>
                        @php
                        $status = !empty(request()->get('status')) ? request()->get('status') : \App\Models\SupportTopic::STATUS_OPEN;
                        $type = !empty(request()->get('type')) ? request()->get('type') : \App\Models\SupportTopic::TYPE_GENERAL_SUPPORT;

                        @endphp

                        <input type="hidden" name="topic_type" id="topicType" value="{{$type}}">

                        <div class="inbox_tabs">
                            <ul class="listtabs_">
                                <li class="tabhead_ {{ ($status == \App\Models\SupportTopic::STATUS_OPEN) ?  'active' : ''}}"><a href="{{route('users.support',['status' => \App\Models\SupportTopic::STATUS_OPEN])}}">{{__("words.Active")}}</a></li>
                                <li class="tabhead_ {{ ($status == \App\Models\SupportTopic::STATUS_CLOSED) ?  'active' : ''}}"><a href="{{route('users.support',['status' => \App\Models\SupportTopic::STATUS_CLOSED])}}">{{__("words.Closed")}}</a></li>
                            </ul>
                        </div>
                        <div class="searchbox d-none">
                            <input class="search-txt" id="textSearch" type="text" name="" placeholder="Search..">
                            <span class="chatsearchClose" id="clearText" onclick="$('#textSearch').val('')"><i class="fas fa-times"></i></span>
                        </div>
                        <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <ul class="chat_sidebar">
                                @foreach ($topics as $topic)

                                <li class="nav-link {{($topic->id == $firstOpenTopic->id) ? 'active': ''}} moveTop openChat mb-3"  data-id="{{encrypt($topic->id)}}" data-href="{{route('users.support',['type'=>$topic->type,'status' => !empty(request()->get('status')) ? request()->get('status') : \App\Models\SupportTopic::STATUS_OPEN ])}}">
                                    <div class="left_sideChatbox openChatPanel">
                                        <ul>
                                            <li class="admin-detail">

                                                <h5 class="latestMessage">{{__("words.Reason")}}:</h5>
                                                <h6 class="p-0">{{$topic->subject}}<br>
                                                </h6>
                                                @php
                                                       $formattedTime  = Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $topic->created_at, 'UTC')
                                                        ->setTimezone($timezone)
                                                        ->format('M d, Y');

                                                        $formattedTimeOne  = Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $topic->created_at, 'UTC')
                                                        ->setTimezone($timezone)
                                                        ->format('H:i a');

                                                @endphp
                                            <span class="latestMessage">{{$formattedTime}} at {{ $formattedTimeOne}}
                                            </span>

                                            <span class="countUser d-none">0</span>

                                        </li>


                                    </ul>
                                </div>

                            </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-8 ">
                    <div class="inbox_">

                        <div class="tab-content" id="v-pills-tabContent">

                            <div class="nochatFound d-none">
                                <img src="{{asset('frontend/img/nochat.png')}}" class="img-fluid">
                            </div>
                            <div class="tab-pane fade show active" id="chatOne">

                                <div class="right_sideChatbox">
                                    <div class="main-chat d-flex justify-content-between">
                                        <a href="#" class="adUrl reasondiv" target="_blank"> <span  id="replaceName">{{__("words.Reason")}}: {{$firstOpenTopic->subject}}
                                        </span></a>
                                        @if($firstOpenTopic->status == 1)
                                        <div class="rightnavsupport" >
                                            <button type="button" class="btn btn-danger closeChat" style="cursor:pointer;">
                                                Close Chat
                                            </button>
                                        </div>
                                        @endif
                                    </div>
                                    <div id="loader" style="position: absolute; width: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); z-index: 9999; display: none;">
                                        <div style="
                                          content: '';
                                          display: block;
                                          position: absolute;
                                          left: 48%;
                                          top: 40%;
                                          width: 40px;
                                          height: 40px;
                                          border-style: solid;
                                          border-color: #e63c2f;
                                          border-top-color: transparent;
                                          border-width: 4px;
                                          border-radius: 50%;
                                          animation: spin 0.8s linear infinite;
                                          -webkit-animation: spin 0.8s linear infinite;">
                                        </div>
                                    </div>
                                    <section class="chat-window newchant_window">

                                    </section>
                                    <div class="uploadOutBoxs" id="fileContainer" style="display: none">
                                    {{-- <div class="uploadOutBoxs" style="bottom: 10px !important; position: relative !important;"> --}}

                                    </div>
                                    <div class="closedChat_ {{($firstOpenTopic->status!=\App\Models\SupportTopic::STATUS_CLOSED) ? 'd-none': ''}}">
                                        <p class="greyText_">{{__("words.Chat has been closed by admin, you are not able to send message")}}</p>
                                    </div>
                                    {{-- {{Dd($firstOpenTopic)}} --}}
                                    <input type="hidden" id="hiddenTopic" value="{{!empty($firstOpenTopic) ? 1 : 0}}">

                                    @if($firstOpenTopic->status != \App\Models\SupportTopic::STATUS_CLOSED)

                                    <div class="type-message d-flex" style="align-items: flex-start; gap: 10px; width: 100%; padding: 15px; background: #f9f9f9; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                                        <input type="hidden" name="topic_id" id="topicId" value="{{ encrypt($firstOpenTopic->id) }}">

                                        <form id="messageSendForm" enctype="multipart/form-data" method="POST" style="display: flex; flex-direction: column; flex: 1; gap: 10px;">
                                            @csrf

                                            <!-- File input -->
                                            <div class="message-file-input user_file_upload" style="display: flex; align-items: center; gap: 10px;">
                                                <div class="file-container d-none">
                                                    <!-- Dynamically added file items will go here -->
                                                </div>

                                                <label class="file-input__label" for="file-input"
                                                    style="cursor: pointer;">
                                                    <i id="addFilesBtn" class="fas fa-paperclip"
                                                        style="font-size: 18px; color: #555;"></i> <b>Browse Images</b>
                                                </label>
                                                 <!-- Image preview container -->

                                                <input type="file" name="file_input[]" id="file-input" class="file-input__input userMessages d-none" multiple>
                                                <input type="file" class="d-none" id="hiddenSuport" name="hidden[]" multiple>
                                            </div>
                                            <div class="message-section d-flex" style="gap: 20px; align-items: center;">
                                                <textarea
                                                    id="messageBox"
                                                    name="message"
                                                    placeholder="{{ __('words.Type a message') }}"
                                                    rows="3"
                                                    maxlength="500"
                                                    style="
                                                        resize: vertical;
                                                        min-height: 80px;
                                                        padding: 10px;
                                                        font-size: 14px;
                                                        line-height: 1.5;
                                                        border: 1px solid #ccc;
                                                        border-radius: 6px;
                                                        width: 100%;
                                                        box-sizing: border-box;
                                                        background-color: #fff;
                                                        overflow: auto;
                                                    ">
                                                </textarea>
                                                <div class="sendbtn_">
                                                    <button id="sendButton" class="btn-commom userSendBtns" type="button" onclick="sendMessage()">Send</button>
                                                </div>
                                            </div>
                                            <small id="charCount">0 / 500</small>

                                            <span class="text-danger error-text message_err" style="font-size: 13px;"></span>

                                            <!-- Hidden fields -->
                                            <input type="hidden" name="model_id" value="{{ $firstOpenTopic->id }}">
                                            <input type="hidden" name="model_type" value="{{ \App\Models\Message::TYPE_USER_SUPPORT }}">
                                            <input type="hidden" name="from_id" value="{{ auth()->id() }}">
                                            <input type="hidden" name="to_id" value="{{ ($firstOpenTopic->user_id != auth()->id()) ? $firstOpenTopic->user_id : $firstOpenTopic->created_by }}">

                                            <!-- Validation messages -->
                                            <input type="hidden" id="imageUploadValidationMessage" value="{{ __('words.Image file should be in jpeg,jpg,png,pdf,docx,doc.') }}">
                                            <input type="hidden" id="imageUploadValidationErrorMessage" value="{{ __('words.Error!') }}">
                                            <input type="hidden" id="imageUploadFileSizeValidationMessage" value="{{ __('words.File may not be greater than 5MB.') }}">

                                            @if ($errors->has('message'))
                                                <span class="invalid-feedback" role="alert" style="color: red; font-size: 13px;">
                                                    <strong>{{ $errors->first('message') }}</strong>
                                                </span>
                                            @endif
                                        </form>
                                    </div>

                                    @endif
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="userchatNotes_">
                        <div class="notes_text_">
                            <h4>Notes</h4>
                            @if($type== \App\Models\SupportTopic::TYPE_GENERAL_SUPPORT)
                            <p>It may take up to 72 hours to receive a response. We appreciate your patience during this time. </p>
                            <p>Additionally, you are welcome to send a single message initially.</p>
                            @else
                            <p>File Upload: Format in JPG, Png, Word or PDF up to 5MB.</p>
                            <p>You can attach up to 5 files.</p>
                            <p>It may take some time for your request or documents to be reviewed, usually up to 72 hours. </p>
                            @endif
                        </div>


                    </div>

                    <input type="hidden" id="maxFileMessage" value="{{__("You Can Select upto 5 files Only")}}">
                    <input type="hidden" id="userEmail" value="{{auth()->user()->email}}">
                    <div class="modal modalCustom deleteProfile fade" id="alertSupportMessage" aria-hidden="true" aria-labelledby="deactiveMain" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content notranslate">
                                <div class="model_header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal_body">


                                    <h5 class="alertFileMessage"></h5>


                                    <div class="deletepropbtn">

                                        <button class="cancel-button-text logout-btn" id="block-button" type="button" class="btn btn-secondary" data-bs-dismiss="modal" ss>
                                            <a href="javascript:void(0)">{{__("words.Ok")}}</a>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="modal modalCustom deleteProfile fade" id="closeChatSupportMessage" aria-hidden="true" aria-labelledby="deactiveMain" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content notranslate">
                                <div class="model_header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal_body">


                                    <h5 class="chatCloseMessage"></h5>


                                    <div class="deletepropbtn">

                                        <button class="cancel-button-text logout-btn" id="closeChatButton" type="button" class="btn btn-secondary closeChatButton" data-bs-dismiss="modal"
                                        data-url="{{ route('support.close.chat', ['topic' => !empty(request()->get('topic')) ? request()->get('topic') : (!empty($firstOpenTopic->id) ? encrypt($firstOpenTopic->id) : '')]) }}"
                                        >
                                            <a href="{{route('support.close.chat',['topic' => !empty(request()->get('topic')) ? request()->get('topic') : (!empty($firstOpenTopic->id) ? encrypt($firstOpenTopic->id) : '')])}}">{{__("words.Ok")}}</a>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@push('page_script')
<!-- Moment.js core library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<!-- Moment Timezone with full data (required for .tz() to work) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.40/moment-timezone-with-data.min.js"></script>

<script>
    var platform = "web";
    var reconnectAttempts = 0;
    var websocketConfig = @json($websocketConfig);
    var login_person_id = @json($login_person_id);
    var uid = @json($uid);
    var conversationId = @json($conversationId);
    var normalLogin_person_id = @json($normal_login_person_id);
    var is_sender_ai = @json($is_sender_ai);
    var languageCode = @json($languageCode);
    if(is_sender_ai == 0){
        $(document).find(".user_file_upload").css("display","flex");
    }else if(is_sender_ai == 1){
        $(document).find(".user_file_upload").hide();
    }
</script>
<script src="{{ asset('js/pages/support/index.js') }}"></script>
<script>
    document.getElementById("messageBox").value = "";

    async function downloadImage(filePath, fileName) {
        try {
            const response = await fetch(filePath);
            const blob = await response.blob();

            // Create blob URL
            const url = window.URL.createObjectURL(blob);

            // Create download link
            const link = document.createElement('a');
            link.href = url;
            link.download = fileName;

            // Trigger download
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // Clean up
            window.URL.revokeObjectURL(url);

        } catch (error) {
            console.error('Download failed:', error);
            // Fallback: open in new tab
            window.open(filePath, '_blank');
        }
    }
    $(document).find(".closeChat").click(function(e){
        e.preventDefault();
        $('.chatCloseMessage').text("Are you sure to close the chat?");
        $('#closeChatSupportMessage').modal('show');
    })
    $('#closeChatButton').on('click', function () {
        var url = $(this).data('url');
        $('#process-image-loader').css("display", "flex");
        $.ajax({
            url: url,
            type: 'GET',
            beforeSend: function() {
                $('#process-image-loader').css("display", "flex");
            },
            success: function (response) {
                console.log('Chat closed successfully:');
                window.location.reload();
            },
            complete: function() {
                $('#process-image-loader').fadeOut("slow");
            },
            error: function (xhr) {
                console.error('Error closing chat:', xhr.responseText);
            }
        });
    });
</script>
@endpush


@endsection