@extends('layouts.auth')

@php
use Illuminate\Support\Str;
@endphp

@section('title') {{__("words.Chat")}} @endsection

@section('content')

<section id="inbox_main">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-4">
                <div class="inbox_">
                    <div class="main-inbox">
                        <h2>{{__("words.Inbox")}}</h2>
                        <a href="javascript:void(0);" class="search_icon" onclick="$('.searchbox').toggleClass('d-none')">
                            <img src="{{asset('frontend/img/search.png')}}" class="img-fluid">
                        </a>

                    </div>
                    <div class="searchbox d-none">
                        <input class="search-txt" id="textSearch" type="text" name="" placeholder="{{__('words.Search..')}}">
                        <span class="chatsearchClose" id="clearText"><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">

                        </ul>
                    </div>
                </div>
            </div>
            @php
            if(!empty($model->unique_id)){
            $uniqueId = '{' .$model->unique_id . '}';
            }
            @endphp
            <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  {{!empty($model->id) ? 'd-none' : ''}}">
                            <div class="chatbigText">
                            <img src="{{asset('frontend/img/chatbigicon.png')}}" class="img-fluid mb-4">
                            <h4>{{__("words.Select a chat to view conversation")}}</h4>
                            </div>
                            <!-- <img src="{{asset('frontend/img/nochat.png')}}" class="img-fluid"> -->
                        </div>
                        <div class="tab-pane fade show active {{empty($model->id) ? 'd-none' : ''}}" id="chatOne">
                            <div class="right_sideChatbox">
                                <div class="main-chat d-flex">
                                    <a href="javascript:void(0);" class="search_icon adUrl" target="_blank">
                                        <img id="replaceProfile" src="{{!empty($model->getCreatedBy->profile_image) ? $model->getCreatedBy->profile_image : asset('frontend/img/editProfile.svg')}}" class="img-fluid userProfile me-3">
                                        @php
                                        $target = getDefaultTargetLanguage();
                                        // session()->put('locale',$target);
                                        $code = getcountryCode();
                                        @endphp

                                        <input type="hidden" value="{{$target}}" id="getDefaultTargetLanguage">
                                        <input type="hidden" value="{{$code}}" id="getcountryCode">
                                        <input type="hidden" value="{{__("words.No Result Found")}}" id="noFound">
                                        @if (!empty($model->title))
                                        <a href="{{url($code.'/'.$target .'/'.str::slug($model->title).'/'.$model->id)}}" target="_blank"><span id="replaceName">{{!empty($model->unique_id) ?   $uniqueId : ''}}</span></a>
                                        @else
                                        <a href="#" class="adUrl" target="_blank"> <span id="replaceName"></span></a>
                                        @endif

                                    </a>
                                    <div class="dropdown chatDrp">

                                        <div class="dropdown">
                                            <a id="dropdownMenuButton1" data-bs-toggle="dropdown" href="javascript:void(0);" class="more_icon">
                                                <img src="{{asset('frontend/img/more.svg')}}" class="img-fulid">
                                            </a>
                                            </button>
                                            <ul class="dropdown-menu chatDropDown " aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item deleteChatMessage dropDownDelete" href="javascript:void(0);">
                                                        <figure><img src="{{asset('frontend/img/delete.svg')}}" class="img-fluid"></figure> <span>{{__("words.Delete Chat")}}</span>
                                                    </a></li>
                                                <li><a class="dropdown-item blockUnBlock" href="javaScript:void(0);" data-bs-toggle="modal" data-bs-target="#exampleModalToggle">
                                                        <figure> <img src="{{asset('frontend/img/block.svg')}}" class="img-fluid blockText" id="blockText"></figure><span>{{__("words.Block User")}}</span>
                                                    </a>
                                                </li>
                                                <li><a class="dropdown-item" href="javaScript:void(0);" id="reportArea" data-bs-toggle="modal" data-bs-target="#reportMain">
                                                        <figure> <img src="{{asset('frontend/img/ReportBg.svg')}}" class="img-fluid"></figure><span>{{__("words.Report")}}
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>


                                    </div>


                                </div>
                                <div id="headerMain">
                                    @if(!empty($model))

                                    <div class="aboutCar-price d-flex">
                                        <p>{{!empty($model->title) ? $model->title : ''}} </p>
                                        <span>{{!empty($model->price) ? $model->price_with_currency : ''}}</span>
                                    </div>
                                    @endif
                                </div>

                                <section class="chat-window">

                                </section>
                                <div class="type-message d-flex">
                                    {{-- <input type="text" id="messageBox" placeholder="Type a message"> --}}
                                    <textarea rows="2" cols="30" id="messageBox" placeholder="{{__("words.Type a message")}}"></textarea>

                                    <input type="hidden" name="sender_id" id="senderId" value="{{$user->id}}">
                                    <input type="hidden" name="ad_id" id="adId" value="{{!empty($model->id) ? $model->id : ''}}">
                                    @php
                                    if(!empty($model->unique_id)){
                                    $uniqueId = '{' .$model->unique_id . '}';
                                    }
                                    @endphp
                                    <input type="hidden" name="ad_unique_id" id="adUniqueId" value='{{!empty($model->unique_id) ?   $uniqueId : ''}}'>
                                    <input type="hidden" name="receiver_id" id="receiverId" value="{{!empty($model->created_by_id) ? $model->created_by_id : ''}}">
                                    <input type="hidden" name="ads_title" id="adTitle" value="{{!empty($model->title) ? $model->title : ''}}">
                                    <input type="hidden" name="ads_price" id="adPrice" value="{{!empty($model->price) ? $model->price_with_currency : ''}}">
                                    <input type="hidden" name="login_user" id="logedInUser" value="{{auth()->user()->id}}">
                                    <input type="hidden" name="target_language" id="defaultTargetLanguage" value="{{getDefaultTargetLanguage()}}">
                                    <input type="hidden" name="buyer_id" id="buyerId" value="{{$user->id}}">

                                    <input type="hidden" name="seller_id" id="sellerId" value="{{!empty($model->created_by_id) ? $model->created_by_id : ''}}">
                                    <input type="hidden" name="ad_url" id="adUrl" value="{{!empty($model->image) ? $model->image : ''}}">

                                    <input type="hidden" name="buyer_name" id="buyerName" value="{{$user->full_name}}">
                                    <input type="hidden" name="profile_image" id="buyerProfile" value="{{$user->profile_image}}">
                                    <input type="hidden" name="buyer_phone_number" id="buyerPhoneNumber" value="{{$user->getPhoneNumber()}}">

                                    <input type="hidden" name="seller_name" id="sellerName" value="{{!empty($seller->full_name) ?$seller->full_name : ''}}">
                                    <input type="hidden" name="seller_phone_number" id="sellerPhoneNumber" value="{{!empty($seller->phone_number) ?  $seller->getPhoneNumber() : ''}}">
                                    <input type="hidden" name="seller_profile" id="sellerProfile" value="{{!empty($seller->profile_image) ?$seller->profile_image : ''}}">

                                    <span><img id="sendButton" src="{{asset('frontend/img/sendIcon.svg')}}" class="img-fluid"></span>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Block User Model -->
    <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-header">
                    <img src="{{asset('frontend/img/BlockUser.svg')}}" class="img-fluid">
                </div>
                <div class="modal-body">
                    <p>{{__("words.Are you sure you want to Block the User?")}}</p>
                    <button class="block-button-text blockUnBlock blockUser" id="block-button-chat">
                        <a href="javascript:void(0);">{{__("words.Yes, Block")}}</a>
                    </button>
                    <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.No, Cancel")}}</a>
                    </button>

                </div>
            </div>
        </div>
    </div>
    <!-- End Block user model -->


    <!-- Start Block User Model -->
    <div class="modal modalCustom fade" id="exampleModalToggleUnBlock" aria-hidden="true" aria-labelledby="exampleModalToggleUnBlockLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-header">
                    <img src="{{asset('frontend/img/BlockUser.svg')}}" class="img-fluid">
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to UnBlock the User?</p>
                    <button class="block-button-text blockUnBlock unblock" id="block-button-chat">
                        <a href="javascript:void(0);">Yes, UnBlock</a>
                    </button>
                    <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);">No, Cancel</a>
                    </button>

                </div>
            </div>
        </div>
    </div>
    <!-- End Block user model -->


    <!-- Start Report User Model -->

    <div class="report_ads">
        <div class="modal modalCustom fade" id="reportMain" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="model_header">
                        <div class="model_main">
                            <img src="{{asset('frontend/img/Report.svg')}}" alt="Comments">
                            <h4>{{__("words.User Report")}}</h4>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal_body">
                        <form id="report-form" method="GET">
                            @csrf
                            @foreach ($reportReasons as $key => $reasons)
                            <label class="checkbox_" for="{{$key}}">{{$reasons}}
                                <input type="radio" id="{{$key}}" name="reason_id" value="{{$key}}">
                                <span class="checkmarks"></span>
                            </label>

                            @endforeach
                            <span class="text-danger error-text reason_id_err" id="spanError"></span>

                            <input type="hidden" name="model_type" value="{{\App\Models\Report::TYPE_CHAT}}" />
                            <input type="hidden" name="model_id" id="UserId" value="{{!empty($model->getCreatedBy->id) ? $model->getCreatedBy->id : ''}}" />
                            <div class="reasonReport">
                                <label class="reasonReportlabel d-none">{{__("words.Reason")}}</label>
                                <textarea rows="4" cols="31" class="otherReason d-none" placeholder="{{__('words.Type here')}}" name="comment"></textarea>
                            </div>
                            <span class="text-danger error-text comment_err" id="spanErrors"></span>

                            <input type="submit" class="Submit-report-btn" value="{{__('words.Submit Report')}}">

                        </form>
                    </div>
                </div>
            </div>
            <!-- End Block user model -->


            <!-- Start Report User Model -->

            <div class="report_ads">
                <div class="modal modalCustom fade" id="reportMain" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="model_header">
                                <div class="model_main">
                                    <img src="{{asset('frontend/img/Report.svg')}}" alt="Comments">
                                    <h4>{{__("words.User Report")}}</h4>
                                </div>
                                <div class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <img src="{{asset('frontend/img/Cancel.svg')}}" alt="cancel">
                                </div>
                            </div>
                            <div class="modal_body">
                                <form id="report-form" method="GET">
                                    @csrf
                                    @foreach ($reportReasons as $key => $reasons)
                                    <label class="checkbox_" for="{{$key}}">{{$reasons}}
                                        <input type="radio" id="{{$key}}" name="reason_id" value="{{$key}}">
                                        <span class="checkmarks"></span>
                                    </label>

                                    @endforeach
                                    <span class="text-danger error-text reason_id_err"></span>

                                    <input type="hidden" name="model_type" value="{{\App\Models\Report::TYPE_CHAT}}" />
                                    <input type="hidden" name="model_id" id="UserId" value="{{!empty($model->getCreatedBy->id) ? $model->getCreatedBy->id : ''}}" />
                                    <div class="reasonReport">
                                        <label class="reasonReportlabel">{{__("words.Reason")}}</label>
                                        <textarea rows="4" cols="31" class="otherReason d-none" placeholder={{__('words.Type here')}} name="comment"></textarea>
                                    </div>
                                    <span class="text-danger error-text comment_err"></span>

                                    <input type="submit" class="Submit-report-btn" value="{{__('words.Submit Report')}}">

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" value="{{__("words.Delete Chat")}}" id="ChatDeleteTranslation">
            <input type="hidden" value="{{__("words.View Ad")}}" id="ViewAdTranslation">
            <input type="hidden" value="{{__('words.Chat deleted sucessfully.')}}" id="ChatDeleteMessage">
            <input type="hidden" value="{{__('words.Success!')}}" id="ChatDeleteSuccessMessage">
            <input type="hidden" value="{{__("words.You've blocked this user.")}}" id="cantSendMessageUserBlockText">
            <input type="hidden" value="{{__("words.You've been blocked by this user.")}}" id="cantSendMessageYouAreBlockText">
        </div>
            <!-- End Report user model -->
    </div>

</section>
@endsection
@push('page_script')
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
<script src="{{ asset('js/chat.js') }}"></script>
<script src="{{ asset('js/messageTranslation.js') }}"></script>

<script>
    $('#reportArea').on('click',function()
    {
        $("input[name=reason_id]").each(function() {
            $(this).prop('checked', false);
        })
        var firstSpan = document.getElementById("spanError");
        var secondSpan = document.getElementById("spanErrors");
        firstSpan.innerHTML = "";
        secondSpan.innerHTML = "";
    })
</script>
@endpush