@php
$websocketConfig = getIpAndPort();
$languageCode = session('locale') ?? auth()->user()->default_language;
@endphp
@include("loader.loader")
<section id="inbox_main" class="messageMainbox_ ">
    {{-- <button id="enable-alerts" class="btn btn-success">🔔 Enable Notification with Sound</button> --}}
    <audio id="admin-alert-sound" src="{{ asset('sound/alert.mp3') }}" preload="auto"></audio>
    {{-- <div id="alert-messages"></div> --}}
    <div class="container-fluid p-0">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-xl-4 col-xxl-3">
                <div class="inbox_ leftinbox__">
                    <div class="main-inbox px-0">
                        <h2 class="messageHead_">Topics</h2>
                        <a href="{{ route('support.create.topic') }}" class="coversationBtn_">Start New Conversation</a>
                    </div>
                    <div class="inbox_tabs">
                        @php
                            $status = !empty(request()->get('status'))
                                ? request()->get('status')
                                : \App\Models\SupportTopic::STATUS_OPEN;
                        @endphp
                        <ul class="listtabs_">
                            <li
                                class="tabhead_ {{ $status == \App\Models\SupportTopic::STATUS_OPEN ? 'active' : '' }}">
                                <a
                                    href="{{ route('users.support', ['status' => \App\Models\SupportTopic::STATUS_OPEN]) }}">Active</a>
                            </li>
                            <li
                                class="tabhead_ {{ $status == \App\Models\SupportTopic::STATUS_CLOSED ? 'active' : '' }}">
                                <a
                                    href="{{ route('users.support', ['status' => \App\Models\SupportTopic::STATUS_CLOSED]) }}">Closed</a>
                            </li>
                        </ul>
                    </div>
                    @php
                        $timezone = auth()->user()->getTimezone();
                    @endphp
                    <div class="searchbox p-0">
                        <input class="search-txt" id="textSearch" type="text" name=""
                            placeholder="Search by User Name">
                        <span class="chatsearchClose" id="clearText" onclick="$('#textSearch').val('')"><img
                                src="frontend/img/search.png" class="img-fluid" /></span>
                    </div>
                    <div class="nav flex-column nav-pills" 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 mb-3 openChat"
                                    data-id="{{ encrypt($topic->id) }}"
                                    data-href="{{ route('users.support', ['status' => !empty(request()->get('status')) ? request()->get('status') : \App\Models\SupportTopic::STATUS_OPEN]) }}">
                                    <div class="left_sideChatbox openChatPanel openChatcVjB9lUr2v4iAsFzuY51"
                                        id="ad142" data-doc="cVjB9lUr2v4iAsFzuY51" data-id="17" data-ad="142"
                                        data-sellerid="16" data-buyerid="17" data-count="0">
                                        <ul>
                                            <li class="admin-detail">

                                                <h5 class="latestMessage">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:s');

                                                    $chatUserName = auth()->user()->isAdmin()
                                                        ? ($topic->user_id == getIdFromSlug('admin')
                                                            ? (!empty($topic->createdBy)
                                                                ? $topic->createdBy->getSellerName()
                                                                : '')
                                                            : ($topic->user
                                                                ? $topic->user->getSellerName()
                                                                : ''))
                                                        : ($topic->user_id == getIdFromSlug('admin')
                                                            ? $topic->user->getSellerName()
                                                            : $topic->createdBy->getSellerName());
                                                    $topicSenderName = auth()->user()->isAdmin()
                                                        ? ($firstOpenTopic->user_id == getIdFromSlug('admin')
                                                            ? (!empty($firstOpenTopic->createdBy)
                                                                ? $firstOpenTopic->createdBy->getSellerName()
                                                                : '')
                                                            : (!empty($firstOpenTopic->user)
                                                                ? $firstOpenTopic->user->getSellerName()
                                                                : ''))
                                                        : ($firstOpenTopic->user_id == getIdFromSlug('admin')
                                                            ? (!empty($firstOpenTopic->user)
                                                                ? $firstOpenTopic->user->getSellerName()
                                                                : '')
                                                            : (!empty($firstOpenTopic->createdBy)
                                                                ? $firstOpenTopic->createdBy->getSellerName()
                                                                : ''));
                                                    $profileImage = auth()->user()->isAdmin()
                                                        ? ($topic->user_id == getIdFromSlug('admin')
                                                            ? (!empty($topic->createdBy)
                                                                ? $topic->createdBy->profile_image
                                                                : '')
                                                            : ($topic->user
                                                                ? $topic->user->profile_image
                                                                : ''))
                                                        : ($topic->user_id == getIdFromSlug('admin')
                                                            ? $topic->user->profile_image
                                                            : $topic->createdBy->profile_image);

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

                                                </span>
                                                <div class="admin-detailin">
                                                    <a href="javascript:void(0);" class="admin_icon">
                                                        <img src="{{ $profileImage }}" class="img-fluid">
                                                    </a>
                                                    <div class="rightText_">
                                                        <span class="smallContent_">by :</span>
                                                        <h5 class="subname_">{{ $chatUserName }}</h5>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-12  col-xl-8 col-xxl-9">
                <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" doc-id="cVjB9lUr2v4iAsFzuY51"
                            data-seller="16" data-buyer="17">
                            <div class="right_sideChatbox">
                                <div class="main-chat d-flex">
                                    <a href="#" class="adUrl reasondiv">
                                        <span id="replaceName">Reason: {{ $firstOpenTopic->subject }}
                                        </span>
                                    </a>
                                    <div class="admin-detailin">
                                        <div class="rightText_">
                                            <span class="smallContent_">by :</span>
                                            <h5 class="subname_ bb">{{ $topicSenderName }}</h5>
                                        </div>
                                    </div>
                                </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="acionBtns_">
                                    <button class="approvebtn_ me-1" type="submit">Approved</button>
                                    <button class="rejeactBtn_ me-1" type="submit">Reject</button>
                                    <button class="approvebtn_ me-1" type="submit">Allow try again</button>
                                </div> --}}
                                <div class="uploadOutBoxs" id="fileContainer" style="display: none">

                                </div>

                                <div
                                    class="closedChat_ {{ $firstOpenTopic->status != \App\Models\SupportTopic::STATUS_CLOSED ? 'd-none' : '' }}">
                                    <p class="greyText_">
                                        @if (auth()->user()->isUser())
                                            Chat has been closed by admin, you are not able to send message
                                        @else
                                            Chat has been closed, you are not able to send message
                                        @endif
                                    </p>
                                </div>

                                @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" action="{{ route('support.send.message') }}"
                                            enctype="multipart/form-data" method="POST"
                                            style="display: flex; flex-direction: column; flex: 1; gap: 10px;">
                                            @csrf

                                            <!-- File input -->
                                            <div class="message-file-input"
                                                style="display: flex; align-items: center; gap: 10px;">
                                                <input type="file" name="file_input[]" id="file-input"
                                                    class="file-input__input adminMessages" style="display: none;"
                                                    multiple />
                                                <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> Browse Images
                                                </label>
                                            </div>

                                        <div class="message-section d-flex" style="gap: 20px; align-items: center;">
                                            <!-- Textarea -->
                                            <textarea rows="2" cols="30" id="messageBox" placeholder="Type a message" name="message"
                                                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 adminSendButton" type="button" onclick="sendMessage()">Send</button>
                                            </div>
                                        </div>
                                        <small id="charCount">0 / 500</small>
                                            <!-- 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 }}">
                                            <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>

                                        <!-- Send Button -->
                                        {{-- <span style="display: flex; align-items: flex-end;justify-content: end;">
                                            <img id="sendButton" src="{{ asset('frontend/img/sendBtn_.png') }}"
                                                class="img-fluid adminSendButton"
                                                style="cursor: pointer; width: 20px; height: 20px;" onclick="sendMessage()"
                                            >
                                        </span> --}}
                                    </div>

                                @endif
                            </div>
                        </div>


                    </div>

                </div>

            </div>
        </div>
    </div>
    @push('page_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 languageCode = @json($languageCode);
            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');
                }
            }



        </script>
    @endpush
</section>