@extends("layouts.dashboard")

@section("wrapper")
    <div class="page-wrapper">
    @include("layouts.second-header")
<div class="container-fluid p-4">

    <div class="card">
        <div class="card-header bg-rouge d-flex justify-content-sm-start align-items-center" style="margin-top: -50px;">
            <div class="d-flex align-items-center" style="margin-right: 1.5rem !important;">
                <a href="@if(Auth::user()->annonceur_id!=null){{route("reclamation.index")}}@else{{route("reclamation_a.index")}} @endif" class="btn mr-4 text-white">
                    <i class="lni lni-chevron-left"></i>@lang("Retour")
                </a>
                <h4 class="mb-0 text-white"><i class=""></i>  {{ $title ?? "" }}</h4>
            </div>
            <div class="col-4 d-flex justify-content-sm-center align-items-end">
                <div></div>
            </div>
            <!--div class="d-flex col-4 justify-content-sm-end align-items-end">
            @if(Auth::user()->annonceur_id!=null)
                <a href="{{ route("reclamation.create") }}" class="btn mr-4 text-white">
                    <i class="lni lni-plus"></i>@lang("Ajouter")
                </a>
                @endif
            </div-->
        </div>
    </div>
    @if(session()->has('error'))
        @include("layouts.alert")
    @endif
<div>

    <div class="chat_container">

       {{-- <div class="chat_list_container">

            @livewire('chat.chat-list')

        </div>--}}

        <div class="chat_box_container">



<div>
    {{-- Stop trying to control. --}}

    {{--@if ($selectedConversation)--}}
        <div class="chatbox_header">



           {{-- <div class="img_container">
                <img src="https://ui-avatars.com/api/?name={{ $receiverInstance->name }}" alt="">

            </div>


            <div class="name">
                {{ $receiverInstance->name }}
            </div>



        </div>--}}

        <div class="chatbox_body">
            @if(isset($messages))
            @foreach ($messages as $message)
                <div class="msg_body  {{ Auth::user()->id == $message->user_id ?  'msg_body_receiver' : 'msg_body_me'}}"
                    style="width:80%;max-width:80%;max-width:max-content">

                    {{ $message->message }}
                    <div class="msg_body_footer">
                        <div class="date">
                            {{ $message->creation_date }}
                        </div>

                        <div class="read">
                            @php

                          if($message->user === null){


                                    if($message->read == 0){


                                        echo'<i class="bi bi-check2 status_tick "></i> ';
                                    }
                                    else {
                                        echo'<i class="bi bi-check2-all text-primary  "></i> ';
                                    }

                          }


                            @endphp


                        </div>
                    </div>
                </div>
            @endforeach
                @endif
        </div>


        <script>
            $(".chatbox_body").on('scroll', function() {
                // alert('aahsd');
                var top = $('.chatbox_body').scrollTop();
                //   alert('aasd');
                if (top == 0) {

                    window.livewire.emit('loadmore');
                }

            });
        </script>


        <script>
            window.addEventListener('updatedHeight', event => {

                let old = event.detail.height;
                let newHeight = $('.chatbox_body')[0].scrollHeight;

                let height = $('.chatbox_body').scrollTop(newHeight - old);


                window.livewire.emit('updateHeight', {
                    height: height,
                });


            });
        </script>
   {{-- @else
        <div class="fs-4 text-center text-primary mt-5">
            Selectionner un chat
        </div>




    @endif--}}


    <script>
        window.addEventListener('rowChatToBottom', event => {

            $('.chatbox_body').scrollTop($('.chatbox_body')[0].scrollHeight);

        });
    </script>


<script>
    $(document).on('click','.return',function(){


window.livewire.emit('resetComponent');

    });
</script>


<script>

window.addEventListener('markMessageAsRead',event=>{
 var value= document.querySelectorAll('.status_tick');

 value.array.forEach(element, index => {


    element.classList.remove('bi bi-check2');
    element.classList.add('bi bi-check2-all','text-primary');
 });

});

</script>
</div>


          <div>
    {{-- The whole world belongs to you. --}}

   {{-- @if ($selectedConversation)--}}

        <form method='post' action="{{ route("sendsms") }}">
               @csrf
            <div class="chatbox_footer">
            <div class="custom_form_group">
                 <input hidden type="text" id="reclamation" name="reclamation" value={{$reclamation}} class="control" placeholder="Write message">
                <input  type="text" id="sendMessage" name="body" class="control" placeholder="Write message">
            <button class="btn btn-primary" type="submit" >Send</button>
            </div>

            </div>
        </form>


   {{-- @endif--}}

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


    <script>
        window.addEventListener('chatSelected', event => {

            if (window.innerWidth < 768) {

                $('.chat_list_container').hide();
                $('.chat_box_container').show();

            }

            $('.chatbox_body').scrollTop($('.chatbox_body')[0].scrollHeight);
        let height= $('.chatbox_body')[0].scrollHeight;
    //alert(height);
    window.livewire.emit('updateHeight',{

height:height,


    });
        });


        $(window).resize(function() {

            if (window.innerWidth > 768) {
                $('.chat_list_container').show();
                $('.chat_box_container').show();

            }

        });


        $(document).on('click', '.return', function() {

            $('.chat_list_container').show();
            $('.chat_box_container').hide();


        });
    </script>

<script>
    // //let el= $('#chatBody');
    // let el = document.querySelector('#chatBody');
    // window.addEventListener('scroll', (event) => {
    //     // handle the scroll event
    //     alert('aasd');

    // });
    $(document).on('scroll','#chatBody',function() {
        alert('aasd');

        var top = $('.chatbox_body').scrollTop();
        if (top == 0) {

            window.livewire.emit('loadmore');
        }


    });

    </script>
</div>