@extends('Common::admin.layout.index')
@section('title', $title)
@section('page')

<main class="chat_page default_page__">
    <div class="container">
        <div class="page_head_wrapper large_margin_bottom__ small_size_flex__">
            <div class="title_wrapper">
                <h1 class="page_main_title__">{{ __("Messages") }}</h1>
                <p class="page_sub_title__">{{ __("All your messages") }}</p>
            </div>
            <button class="button__ toggle_chat_contacts">
                {{ __("Show contacts") }}
            </button>
        </div>
       @if($chats->count() > 0)
        <div class="row">
            <div class="col-lg-4">
                <div class="chat_contacts__ content_scroll_y">
                    <button class="button__ close_chat_contacts close-button__"></button>

                    @foreach($chats as $chat)
                    <a href="javascript:void(0)" data-chat-id="{{ $chat->id }}"
                     onclick="openChat({{ $chat->id }})" class="global_card__ chat_contact_card__">
                        <div class="card_head__">

                            <div class="img_wrapper__">
                                <figure class="figure__ asp-om loading-omd">
                                    <img class="img-om lazy-omd" data-src="@if($chat->from_id == auth()->id()) {{ $chat->to?->image }} @else {{ $chat->from?->image }} @endif " alt="" />
                                </figure>
                            </div>
                            <div class="info__">
                                <h3 class="name__">@if($chat->from_id == auth()->id() ) {{ $chat->to?->name }} @else {{ $chat->from?->name }} @endif</h3>
                                <div class="time__">
                                    <img src="{{ url('assets/site/assets/images/shapes/time_icon2.svg')}}" alt="" />
                                    {{ $chat->updated_at ? $chat->updated_at?->diffForHumans() : $chat->created_at?->diffForHumans() }}
                                </div>
                                <p class="parag__">{{ Str::limit($chat->message, 50) }}</p>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
                <div class="overlay__"></div>
            </div>
            <div class="col-lg-8">
            </div>
        </div>
        @else
         <!-- ========================================================= -->
        <!-- ======================== No Data ======================== -->
        <!-- ========================================================= -->
       <div class="no_data__">
          <figure class="figure__ center">
            <img
              class="img-om lazy-omd"
              data-src="{{ url('assets/site/assets/images/shapes/chat_no_data.webp') }}"
              alt="" />
          </figure>
          <h2 class="no_data_title">
           {{ __("No messages yet") }}
          </h2>
        </div>
        <!-- ========================================================= -->
        @endif
    </div>
</main>
@include("Chats::partials.chat_delete")
@stop

@push('js')

<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/dayjs.min.js"></script>
<script>
  // Function to open chat and load messages via AJAX
  function openChat(id) {
    $.ajax({
      url: "{{ route('chats.showChat', ['chatId' => ':chatId']) }}".replace(':chatId', id),
      type: 'GET',
      data: { id: id },
      success: function(data) {
        $('.chat_content__').html(data.html);
        scrollToBottom();
        console.log(data.order_id)
        subscribeToPusher(data.order_id); // Subscribe to Pusher channel after chat content is loaded
      }
    });
  }

  // Function to subscribe to Pusher and bind events
  function subscribeToPusher(orderId) {

    Pusher.logToConsole = true;
    var pusher = new Pusher('{{ env("PUSHER_APP_KEY") }}', {
      cluster: '{{ env("PUSHER_APP_CLUSTER") }}',
      encrypted: true
    });
  if(orderId){
      var channel_name = 'private-Order-'+orderId;
      var listener = 'OrderChat';
  }
    var channel = pusher.subscribe(channel_name);

    channel.bind(listener, function(data) {
      const formattedTime = dayjs(data.message.updated_at).format('h:mm A');
      const messageElement = `
        <div class="message__ ${data.message.from_id == {{ auth()->id() }} ? 'sender__' : 'recipient__'}">
          <div class="message_content__">${data.message.message}</div>
          <div class="time__">${formattedTime}</div>
        </div>
      `;

      $('.messages_wrapper__').append(messageElement);
      $('.messages_wrapper__').animate({ scrollTop: $('.messages_wrapper__').prop("scrollHeight") }, 1000);
    });
    channel.bind('pusher:subscription_succeeded', function() {
      console.log("Successfully subscribed to Pusher channel:", 'order-' + orderId); // Debugging statement
    });

    channel.bind('pusher:subscription_error', function(status) {
      console.error("Failed to subscribe to Pusher channel:", status); // Debugging statement
    });
  }

  // Function to scroll chat to bottom
  function scrollToBottom() {
    $('.messages_wrapper__').animate({ scrollTop: $('.messages_wrapper__').prop("scrollHeight") }, 1000);
  }

  // Bind submit event to chat form
function submitForm(e) {
    e.preventDefault();
    var id = e.target.getAttribute('data-id');
    var message = $('input[name="message"]').val();
    var url = "{{ route('send_message', ['chatId' => ':chatId']) }}".replace(':chatId', id);

    $.ajax({
      url: url,
      type: 'POST',
      data: {
        message: message,
        _token: '{{ csrf_token() }}'
      },
      success: function(response) {
        $('input[name="message"]').val(''); // Clear the input field
      },
      error: function(xhr, status, error) {
        console.log('Error:', error);
        console.log('Status:', status);
        console.log('Response:', xhr.responseText);
      }
    });
  };


    function deleteChat(chatId) {
        $('#deleteChatButton').attr('href', "{{ route('delete_chat', ['chatId' => ':chatId']) }}".replace(':chatId', chatId));
        $('#deleteChatModal').modal('show');
    }
</script>
@endpush