@extends('user.layouts.user')
@section('title', 'المحادثة')
@section('content')
<section class="section chat-section py-5">
    <div class="container-md" id="app">

        <div class="info d-flex flex-column gap-2 align-items-center">
            @if ($user->photo)
            <img src="{{ display_file($user->photo) }}" alt="{{ $user->name }}" class="img">
            @else
            <img src="{{ asset('front-asset/img/jobs/rferfef.png') }}" alt="" class="img">
            @endif
            <div class="name">
                {{ $user->name }}
            </div>
        </div>

        <div id="chat-area">
            {{-- <div class="box-chat box-chat-from">
                    <div class="msg">
                        اهلا بك اخي
                    </div>
                    <div class="msg">
                        كيف حالك عسي تكون طيب ان شاء الله
                    </div>
                </div>  --}}


        </div>

        {{-- <div class="box-chat">
        <div class="msg">
          هلا بالغالي
        </div>
        <div class="msg">
          انا بخير حال الحمد الله
        </div>
        <i class="fas fa-check-double seen-color"></i>
      </div> --}}

        <div class="typing">
            <div>
                @if ($user->photo)
                <img src="{{ display_file($user->photo) }}" alt="{{ $user->name }}" class="img">
                @else
                <img src="{{ asset('front-asset/img/jobs/rferfef.png') }}" alt="" class="img">
                @endif
            </div>
            <div class="snippet">
                <div class="stage">
                    <div class="dot-flashing"></div>
                </div>
            </div>
        </div>

        <div action="" class="box-send">
            <div class="inp-msg">
                <div class="d-flex align-items-center ">
                    <button class="btn-icon ms-2">
                        <i class="fa-solid fa-paperclip icon"></i>
                    </button>
                    <button class="btn-icon ms-1">
                        <i class="fa-solid fa-camera icon"></i>
                    </button>
                </div>
                <textarea class="inp" id="message" placeholder="أكتب رسالتك"></textarea>
            </div>
            <a class="btn-send" type="button" id="send">
                <i class="fa-solid fa-microphone-lines"></i>
            </a>
        </div>

    </div>
</section>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://js.pusher.com/7.2/pusher.min.js"></script>

<script>
    $(document).ready(function() {
        $('#send').click(function() {
            $.post("/chat/{{ $user->id }}", {
                    message: $('#message').val()
                }
                , function(data, status) {
                    let senderMessage = '' +
                        '<div class="box-chat">' +
                        '<div class="msg">' + $('#message').val() + '</div>' +
                        '<i class="fas fa-check-double seen-color"></i></div>';
                    $('#chat-area').append(senderMessage);
                });
        });
    });
    Pusher.logToConsole = true;
    var pusher = new Pusher('1b9b13a904605e55e657', {
        cluster: 'eu'
    });
    var channel = pusher.subscribe('chat{{auth()->user()->id}}');
    channel.bind('chatMessage', function(data) {

        let receiver_message = '<div class="box-chat box-chat-from">' +
            '<div class="msg">' +
            data.message +
            '</div></div>';
        $('#chat-area').append(receiver_message);
    });

</script>