@extends('layouts.support')
@section('title') {{__("words.Support")}} @endsection

@section('page_title') Support @endsection

@section('content')

@php
$timezone = auth()->user()->getTimezone();
@endphp
    <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">
                                        <a href="#" class="adUrl reasondiv" target="_blank"> <span id="replaceName">{{__("words.Reason")}}: {{$firstOpenTopic->subject}}
                                        </span></a>
                                        
                                    </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">
                                        
                                        @php
                                           $firstOpenTopic->messages()->where('to_id' , auth()->id())->update(['is_read' => \App\Models\Message::MARK_READ]);
                                           $adminSideMessages = $firstOpenTopic->messages()->get();
                                           $loginUserMsgs = \App\Models\Message::where('from_id',auth()->user()->id)->where('to_id',getIdFromSlug('admin'))->get()->pluck('id')
                                           ->last();
                                           $adminReplyToLoginUser = 0;
                                           if(!empty($loginUserMsgs))
                                           {
                                               $adminReplyToLoginUser = \App\Models\Message::where('from_id',getIdFromSlug('admin'))->where('to_id',auth()->user()->id)->where('id','>',$loginUserMsgs)->count();
                                           }
                                           else {
                                                $adminReplyToLoginUser=1;
                                           }
                                           @endphp
                                        <input type="hidden" id="adminResponse" value="{{$adminReplyToLoginUser == 0 ? 0 : 1}}">
                                        <input type="hidden" id="userMsg" value="{{!empty($firstOpenTopic->messages()->get()) ? 1 :0}}">
                                        @foreach ($firstOpenTopic->messages()->get() as $message)

                                        @if ($message->from_id == auth()->id())
                                        <div class="senderrOuter__">
                                            <article class="msg-container msg-self" id="msg-undefined">
                                                <div class="">

                                                    <div class="msg-box">
                                                        <div class="flr">
                                                            <div class="messages">
                                                            @if ($message->message_type == \App\Models\Message::MESSAGE_TYPE_TEXT)
                                                            <p class="msg" id="msg-{{$message->id}}">
                                                                {{$message->message}}
                                                             </p>
                                                           
                                                           @include('message.parent')
                                                            @else
                                                            @php
                                                                $file = $message->getFileMessage();
                                                            @endphp
                                                            <div class="file-box-wrapper">
                                                                @foreach ($file as $fileItem)
                                                                <div class="fileBox_ mt-3 mb-3">
                                                                    <img src="{{ !empty($fileItem->path) ? $fileItem->path : '#' }}" alt = "{{ !empty($fileItem->file_name) ? $fileItem->file_name: '' }}" width="100%">
                                                                    
                                                                    <span onclick="downloadImage('{{ $fileItem->path }}','{{ $fileItem->file_name }}')" style="cursor: pointer" class="downloadIcon_">
                                                                        <i class="fas fa-download"></i>
                                                                    </span>
                                                                    {{-- <a href="{{!empty($fileItem->path) ? $fileItem->path: '#' }}" target="_blank" class="downloadIcon_"><i class="fas fa-download"></i></a> --}}
                                                                </div>
                                                                @endforeach
                                                            </div>
                                                            @include('message.parent')

                                                            @endif 
                                                            
                                                            </div>
                                                        </div>
                                                      
                                                    </div>
                                                    <p class="datetext"> 
                                                        @php
                                                        $timestamp = strtotime($message->created_at);
                                                        if (date("Y-m-d", $timestamp) == date("Y-m-d")) {
                                                            $formattedTime = "Today, ";
                                                            $formattedTime .= Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $message->created_at, 'UTC')
                                                        ->setTimezone($timezone)
                                                        ->format('h:i a');
                                                        } else {
                                                            $formattedTime = Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $message->created_at, 'UTC')
                                                        ->setTimezone($timezone)
                                                        ->format('F j, Y, h:i a');
                                                        }
                                                        @endphp 
                                                        
                                                        {{$formattedTime}}</p>
                                                </div>

                                            </article>
                                            <a href="#" class="search_icon adUrl">
                                                <img id="replaceProfile" src="{{$message->fromUser->profile_image}}" class="img-fluid userProfile  me-3">
                                                <span class="smallText_"> 
                                                    You
                                                </span>
                                            </a>

                                        </div>
                                        @else
                                        <div class="receiverOuter__">
                                            <a href="#" class="search_icon adUrl">
                                                <img id="replaceProfile" src="{{$message->fromUser->profile_image}}" class="img-fluid userProfile ">
                                                <span class="smallText_">{{$message->fromUser->getSellerName()}}</span>
                                            </a>
                                            <article class="msg-container msg-remote" id="msg-MNrSvV6oZEDPaee34cNG">
                                                <div class="">
                                                    <div class="msg-box m-0">
                                                        <div class="flr">
                                                            
                                                            <div class="messages">
                                                                @if ($message->message_type == \App\Models\Message::MESSAGE_TYPE_TEXT)
                                                                <p class="msg" id="msg-{{$message->id}}">
                                                                    {{$message->message}}
                                                                </p>
                                                                @include('message.parent')
                                                                @else
                                                                @php
                                                                $file = $message->getFileMessage();
                                                                @endphp
                                                                <div class="file-box-wrapper">
                                                                    @foreach($file as $image)
                                                                        <div class="fileBox_ mt-3">
                                                                            <img src="{{ !empty($image->path) ? $image->path: '#' }}" alt = "{{ !empty($image->file_name) ? $image->file_name: '' }}" width="100%">
                                                                            <span onclick="downloadImage('{{ $image->path }}','{{ $image->file_name }}')" style="cursor: pointer" class="downloadIcon_">
                                                                                <i class="fas fa-download"></i>
                                                                            </span>
                                                                            {{-- <a href="{{!empty($image->path) ? $image->path: '#' }}" target="_blank" class="downloadIcon_"><i class="fas fa-download"></i></a> --}}
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                                @include('message.parent')
                                                                @endif 
                                                            </div>
                                                        </div>

                                                    </div>


                                                </div>
                                                <p class="datetext p-0">
                                                    @php
                                                    $timestamp = strtotime($message->created_at);
                                                    if (date("Y-m-d", $timestamp) == date("Y-m-d")) {
                                                            $formattedTime = "Today, ";
                                                            $formattedTime .= Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $message->created_at, 'UTC')
                                                        ->setTimezone($timezone)
                                                        ->format('h:i a');
                                                        } else {
                                                            $formattedTime = Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $message->created_at, 'UTC')
                                                        ->setTimezone($timezone)
                                                        ->format('F j, Y, h:i a');
                                                        }
                                                    @endphp 
                                                    
                                                    {{$formattedTime}}</p>
                                            </article>

                                        </div>
                                        @endif

                                        @endforeach
                                    
                                      
                                      

                                    </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" 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;">
                                                <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> Browse Images
                                                </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>
                                    
                                            <!-- Textarea -->
                                            <textarea
                                                id="messageBox" 
                                                name="message" 
                                                placeholder="{{ __('words.Type a message') }}" 
                                                rows="3"
                                                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>

                                            <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 class="sendbtn_">
                            <button id="sendButton" class="btn-commom userSendBtns" type="button">Send</button>
                            {{-- <button  class="btn-commom" type="button">Send</button> --}}
                        </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>
            </div>
        </div>
    </section>
  
@push('page_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');
        }
    }
</script>
@endpush


@endsection