@extends('layouts/layoutMaster')

@section('title', __('locale.Chat'))

@section('vendor-style')
  @vite('resources/assets/vendor/libs/maxLength/maxLength.scss')
@endsection

@section('page-style')
  @vite('resources/assets/vendor/scss/pages/app-chat.scss')
  <style>
    .app-chat .app-chat-history .chat-history-body {
      overflow: auto;
      block-size: calc(100vh - 21rem);
      padding-block: 1.5rem;
      padding-inline: 1.5rem;
    }
  </style>

@endsection

@section('content')
  <div class="app-chat card overflow-hidden">
    <div class="row g-0">
      <!-- Sidebar Left -->
      <div class="col app-chat-sidebar-left app-sidebar overflow-hidden" id="app-chat-sidebar-left">
        <div
          class="chat-sidebar-left-user sidebar-header d-flex flex-column justify-content-center align-items-center flex-wrap px-6 pt-12">
          <div class="avatar avatar-xl avatar-online chat-sidebar-avatar">
            <img src="{{ Auth::user() ? Auth::user()->profile_photo_url : asset('assets/img/default.png') }}" alt="Avatar"
              class="rounded-circle" />
          </div>
          <h5 class="mt-4 mb-0">{{ Auth::user()->name }}</h5>
          <span>{{ Auth::user()->getRoleNames() }}</span>
          <i class="icon-base ti tabler-x icon-lg cursor-pointer close-sidebar" data-bs-toggle="sidebar" data-overlay
            data-target="#app-chat-sidebar-left"></i>
        </div>
        <div class="sidebar-body px-6 pb-6">
          <div class="my-6">
            <div class="maxLength-wrapper">
              <label for="chat-sidebar-left-user-about"
                class="text-uppercase text-body-secondary mb-1">{{ __('locale.About') }}</label>
              <textarea id="chat-sidebar-left-user-about" class="form-control chat-sidebar-left-user-about maxLength-example"
                rows="3" maxlength="120">{{ Auth::user()->about }}</textarea>
              <small id="textarea-maxlength-info"></small>
            </div>
          </div>
          <div class="my-6 d-none">
            <p class="text-uppercase text-body-secondary mb-1">{{ __('locale.Status') }}</p>
            <div class="d-grid gap-2 pt-2 text-heading ms-2">
              <div class="form-check form-check-success">
                <input name="chat-user-status" class="form-check-input" type="radio" value="active" id="user-active"
                  checked />
                <label class="form-check-label" for="user-active">Online</label>
              </div>
              <div class="form-check form-check-warning">
                <input name="chat-user-status" class="form-check-input" type="radio" value="away" id="user-away" />
                <label class="form-check-label" for="user-away">Away</label>
              </div>
              <div class="form-check form-check-danger">
                <input name="chat-user-status" class="form-check-input" type="radio" value="busy" id="user-busy" />
                <label class="form-check-label" for="user-busy">Do not Disturb</label>
              </div>
              <div class="form-check form-check-secondary">
                <input name="chat-user-status" class="form-check-input" type="radio" value="offline"
                  id="user-offline" />
                <label class="form-check-label" for="user-offline">Offline</label>
              </div>
            </div>
          </div>
          <div class="my-6 d-none">
            <p class="text-uppercase text-body-secondary mb-1">{{ __('locale.Settings') }}</p>
            <ul class="list-unstyled d-grid gap-4 ms-2 pt-2 text-heading">
              <li class="d-flex justify-content-between align-items-center">
                <div>
                  <i class="icon-base ti tabler-lock icon-md me-1"></i>
                  <span class="align-middle">Two-step Verification</span>
                </div>
                <div class="form-check form-switch mb-0 me-1">
                  <input type="checkbox" class="form-check-input" checked />
                </div>
              </li>
              <li class="d-flex justify-content-between align-items-center">
                <div>
                  <i class="icon-base ti tabler-bell icon-md me-1"></i>
                  <span class="align-middle">Notification</span>
                </div>
                <div class="form-check form-switch mb-0 me-1">
                  <input type="checkbox" class="form-check-input" />
                </div>
              </li>
              <li>
                <i class="icon-base ti tabler-user-plus icon-md me-1"></i>
                <span class="align-middle">Invite Friends</span>
              </li>
              <li>
                <i class="icon-base ti tabler-trash icon-md me-1"></i>
                <span class="align-middle">Delete Account</span>
              </li>
            </ul>
          </div>
          <div class="d-flex mt-6 d-none">
            <a class="btn btn-primary w-100" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-left"
              href="{{ route('logout') }}"
              onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
              <i class='icon-base ti tabler-power'></i> Logout
            </a>
            <form method="POST" id="logout-form" action="{{ route('logout') }}">
              @csrf
            </form>
          </div>
        </div>
      </div>
      <!-- /Sidebar Left-->

      <!-- Chat & Contacts -->
      <div class="col app-chat-contacts app-sidebar flex-grow-0 overflow-hidden border-end" id="app-chat-contacts">
        <div class="sidebar-header h-px-75 px-5 border-bottom d-flex align-items-center">
          <div class="d-flex align-items-center me-6 me-lg-0">
            <div class="flex-shrink-0 avatar avatar-online me-4" data-bs-toggle="sidebar" data-overlay="app-overlay-ex"
              data-target="#app-chat-sidebar-left">
              <img class="user-avatar rounded-circle cursor-pointer"
                src="{{ Auth::user() ? Auth::user()->profile_photo_url : asset('images/default.png') }}" alt="Avatar" />
            </div>
            <div class="flex-grow-1 input-group input-group-merge">
              <span class="input-group-text" id="basic-addon-search31"><i
                  class="icon-base ti tabler-search icon-xs"></i></span>
              <input type="text" class="form-control chat-search-input" placeholder="Search..."
                aria-label="Search..." aria-describedby="basic-addon-search31" />
            </div>
          </div>
          <i class="icon-base ti tabler-x icon-lg cursor-pointer position-absolute top-50 end-0 translate-middle d-lg-none d-block"
            data-overlay data-bs-toggle="sidebar" data-target="#app-chat-contacts"></i>
        </div>
        <div class="sidebar-body">
          <!-- Chats -->
          <ul class="list-unstyled chat-contact-list py-2 mb-0" id="chat-list">
            <li class="chat-contact-list-item chat-contact-list-item-title mt-0">
              <h5 class="text-primary mb-0">{{ __('locale.Chats') }}</h5>
            </li>
            @forelse($users as $key => $value)
              <li class="chat-contact-list-item mb-1">
                <a data-url="{{ url($adminConfigData['prefix'] . 'chat/list') }}/{{ $value['user_id'] }}/{{ $value['convo_id'] }}"
                  class="d-flex align-items-center click_me">
                  <div
                    class="flex-shrink-0 avatar @if ($value['block'] == 1) avatar-busy @else @if (\Illuminate\Support\Facades\Cache::has('user-is-online-' . $value['id'])) avatar-online @else avatar-offline @endif @endif">
                    <img src="{{ App\Models\User::find($value['user_id'])->profile_photo_url }}" alt="Avatar"
                      class="rounded-circle"
                      onerror='this.onerror=null; this.src="{{ asset('assets/img/default.png') }}"' />
                  </div>
                  <div class="chat-contact-info flex-grow-1 ms-4">
                    <div class="d-flex justify-content-between align-items-center">
                      <h6 class="chat-contact-name text-truncate m-0 fw-normal">{{ @$value['name'] }}</h6>
                      <small class="chat-contact-list-item-time">{{ @$value['last_time'] }} <br><span
                          style="font-size:11px">
                          {{ $value['last_date'] }} </span></small>
                      @if ($value['count'] > 0)
                        <span class="badge bg-danger rounded-pill float-end">{{ $value['count'] }}</span>
                      @endif
                    </div>
                    <small class="chat-contact-status text-truncate"> {!! \Illuminate\Support\Str::limit($value['last_message'], 25) !!}</small>

                  </div>
                </a>
              </li>
            @empty
              <li class="chat-contact-list-item chat-list-item-0 d-none">
                <h6 class="text-body-secondary mb-0">{{ __('locale.No Chats Found') }}</h6>
              </li>
            @endforelse
          </ul>
          <!-- Contacts -->
          <ul class="list-unstyled chat-contact-list mb-0 py-2" id="contact-list">
            <li class="chat-contact-list-item chat-contact-list-item-title mt-0">
              <h5 class="text-primary mb-0">{{ __('locale.Contacts') }}</h5>
            </li>
            @forelse($new_users as $key => $value)
              <li class="chat-contact-list-item mb-1">
                <a data-url="{{ url($adminConfigData['prefix'] . 'chat/start') }}/{{ $value['id'] }}"
                  class="d-flex align-items-center click_me">
                  <div
                    class="flex-shrink-0 avatar @if ($value['block'] == 1) avatar-busy @else @if (\Illuminate\Support\Facades\Cache::has('user-is-online-' . $value['id'])) avatar-online @else avatar-offline @endif @endif">
                    <img src="{{ $value->profile_photo_url }}" alt="Avatar" class="rounded-circle"
                      onerror='this.onerror=null; this.src="{{ asset('assets/img/default.png') }}"' />
                  </div>
                  <div class="chat-contact-info flex-grow-1 ms-4">
                    <div class="d-flex justify-content-between align-items-center">
                      <h6 class="chat-contact-name text-truncate m-0 fw-normal">{{ @$value['name'] }}</h6>
                      <small class="chat-contact-list-item-time">{{ @$value['last_time'] }} <br><span
                          style="font-size:11px">
                          {{ $value['last_date'] }} </span></small>
                    </div>
                    <small class="chat-contact-status text-truncate"> {!! \Illuminate\Support\Str::limit($value['last_message'], 25) !!}</small>



                  </div>
                </a>
              </li>
            @empty
              <li class="chat-contact-list-item contact-list-item-0 d-none">
                <h6 class="text-body-secondary mb-0">{{ __('locale.No Contacts Found') }}</h6>
              </li>
            @endforelse

          </ul>
        </div>
      </div>
      <!-- /Chat contacts -->

      <!-- Chat conversation -->
      <div class="col app-chat-conversation d-flex align-items-center justify-content-center flex-column"
        id="app-chat-conversation">
        <div class="bg-label-primary p-8 rounded-circle">
          <i class="icon-base ti tabler-message-2 icon-50px"></i>
        </div>
        <p class="my-4">{{ __('locale.Select a contact to start a conversation.') }}</p>
        <button class="btn btn-primary app-chat-conversation-btn"
          id="app-chat-conversation-btn">{{ __('locale.Select Contact') }}</button>
      </div>
      <!-- /Chat conversation -->

      <!-- Chat History -->
      <div class="col app-chat-history d-none" id="app-chat-history" data-page="1" data-has-more="true"
        style="position:relative">
        <div id="active-chat">

        </div>

        <!-- Chat message form -->
        <div class="chat-history-footer shadow-xs">
          <form class="form-send-message d-flex justify-content-between align-items-center "
            action="javascript:void(0);" enctype="multipart/form-data">
            <input class="form-control message-input border-0 me-4 shadow-none"
              placeholder="Type your message here..." />
            <div class="message-actions d-flex align-items-center">
              <span class="btn btn-text-secondary btn-icon rounded-pill cursor-pointer d-none">
                <i class="speech-to-text icon-base ti tabler-microphone icon-22px text-heading"></i>
              </span>
              <label for="attach-doc" class="form-label mb-0">
                <span class="btn btn-text-secondary btn-icon rounded-pill cursor-pointer mx-1">
                  <i class="icon-base ti tabler-paperclip icon-22px text-heading"></i>
                </span>
                <input onchange="mySubmit(this.form)" accept="video/*,image/*" type="file" name="icon"
                  id="attach-doc" hidden />
              </label>
              <button class="btn btn-primary d-flex send-msg-btn" onclick="enterChat();">
                <span class="align-middle d-md-inline-block d-none">{{ __('locale.Send') }}</span>
                <i class="icon-base ti tabler-send icon-16px ms-md-2 ms-0"></i>
              </button>
              <input name="_token" value="{{ csrf_token() }}" type="hidden">
              <input type="hidden" name="receiverid" value="" id="receiverid">
              <input type="hidden" name="url" value="{{ url('') }}" id="url">
            </div>
          </form>
        </div>

      </div>
      <!-- /Chat History -->



      <div class="app-overlay"></div>
    </div>
  </div>
@endsection
@section('page-script')
  @vite('resources/assets/js/app-chat.js')
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).on("click", ".click_me", function() {
      event.preventDefault();
      isRtl = $('html').attr('data-textdirection') === 'rtl';
      $.ajax({
        url: $(this).attr('data-url'),
        success: function(data) {
          if (data.status == 400) {
            window.showToast({
              title: 'Chat 💬',
              message: data.message,
              type: 'bg-warning',
              animation: 'animate__fadeInUp',
              time: 'Just now',
              delay: 3000
            });
          } else {
            // console.log(data.data);
            $('#active-chat').html(data.data); // Fix this line
            $('#receiverid').val(data.user_id);
            $('.chat-history-body').css('overflow-y', 'scroll');
            var chatContainer = $(".chat-history-body");
            if (chatContainer.length > 0) {
              chatContainer.animate({
                scrollTop: chatContainer[0].scrollHeight
              });
            }
            var messageWrapper = $('#userChats');
            var list = messageWrapper.find('.chat-history');
            // Enable pusher logging - don't include this in production
            var conversationId = data.convo;
            if (window.Echo && typeof window.Echo.private === 'function') {
              if (conversationId) {
                window.Echo.private(`mc-chat-conversation.${conversationId}`)
                  .notification(e => {
                    console.log('💬 Message event:', e);
                  })
                  .listenForWhisper('MessageWasSent', e => {
                    console.log('🌀 Whispered event:', e);
                  })
                  .listen('.Musonza\\Chat\\Eventing\\MessageWasSent', function(e) {
                    console.log('New message:', e.message);
                    appendChatMessage(e.message, authID, baseUrl, conversationId);
                  });
              }
            }
          }
        },
        error: function(data, e, ts, et) {
          window.showToast({
            title: 'Chat 💬',
            message: 'Error in loading Chat',
            type: 'bg-warning',
            animation: 'animate__fadeInUp',
            time: 'Just now',
            delay: 3000
          });
        }
      });
      return false; // for good measure
    });

    function appendChatMessage(message, authID, assetBase, conversationId) {
      const isSender = message.sender.id == authID;
      const alignClass = isSender ? 'chat-message-right' : '';
      const avatarImg = message.sender.profile_photo_url ?? '/default.png';
      const attachmentPath = `${assetBase}/storage/Chat/${conversationId}/`;
      let body = '';

      // Determine message body type
      if (message.type === 'attachment' || message.data?.file_name) {
        const file = message.data?.file_name ?? message.body;
        const fileType = message.data?.file_type ?? 'Image'; // Default to image
        const fileSrc = `${attachmentPath}${file}`;

        body += `<p class='mb-1'>${file}</p>`;

        if (fileType === 'Video') {
          body += `<video style='max-width:55%' controls><source src='${fileSrc}' type='video/mp4'></video>`;
        } else {
          body += `<img src='${fileSrc}' class='img-fluid rounded' alt='Attachment' />`;
        }

        body += `
      <div class='mt-1'>
        <button class='copy-btn' data-message-id='message-${message.id}' style='background:none;border:none;color:#999;'>
          <i class='icon-base ti tabler-copy'></i>
        </button>
        <a href='${fileSrc}' download style='background:none;border:none;color:#999;'>
          <iclass='icon-base ti tabler-download'></iclass=>
        </a>
      </div>`;
      } else if (message.type === 'Image') {
        const src = `${attachmentPath}${message.body}`;
        body = `<img src='${src}' class='img-fluid rounded' alt='Image' />`;
      } else if (message.type === 'Video') {
        const src = `${attachmentPath}${message.body}`;
        body = `<video style='max-width:55%' controls><source src='${src}' type='video/mp4'></video>`;
      } else {
        // Text message
        body = `<p class='mb-0'>${$('<div>').text(message.body).html()}</p>`;
      }

      const createdAt = new Date(message.created_at);
      const time = createdAt.toLocaleTimeString([], {
        hour: '2-digit',
        minute: '2-digit'
      });

      // Build final HTML
      let html = `
    <li class="chat-message ${alignClass}">
      <div class="d-flex overflow-hidden" style="max-width: 80%; width: fit-content;">
        ${!isSender ? `
                                            <div class="user-avatar flex-shrink-0 me-4">
                                              <div class="avatar avatar-sm">
                                                <img src="${avatarImg}" class="rounded-circle" alt="Avatar" />
                                              </div>
                                            </div>` : ''
        }

        <div class="chat-message-wrapper flex-grow-1">
          <div class="chat-message-text mt-2">${body}<div class="text-${isSender ? 'end' : 'start'} text-body-secondary mt-0">
            <i class="icon-base ti tabler-checks icon-16px ${isSender ? 'text-muted' : 'd-none'} me-1"></i>
            <small>${time}</small>
          </div></div>
        </div>

        ${isSender ? `
                                            <div class="user-avatar flex-shrink-0 ms-4">
                                              <div class="avatar avatar-sm">
                                                <img src="${avatarImg}" class="rounded-circle" alt="Avatar" />
                                              </div>
                                            </div>` : ''
        }
      </div>
    </li>
  `;

      $('.chat-history').append(html);

      setTimeout(() => {
        const chatContainer = $(".chat-history-body");
        if (chatContainer.length) {
          chatContainer.animate({
            scrollTop: chatContainer[0].scrollHeight
          }, 300); // smooth scroll
        }
      }, 50);
    }



    $(document).on("click", ".copy-btn", function() {
      // Get the message ID from the button's data attribute
      var messageId = $(this).data('message-id');

      // Get the text content of the message to copy
      var messageText = $('#' + messageId).text();

      // Create a temporary textarea to select and copy the text
      var tempTextArea = $('<textarea>');
      $('body').append(tempTextArea);
      tempTextArea.val(messageText).select();
      document.execCommand('copy');
      tempTextArea.remove();

      // Optional: Show a success message (e.g., tooltip or alert)
      window.showToast({
        title: 'Chat 💬',
        message: 'Message copied to clipboard!',
        type: 'bg-success',
        animation: 'animate__fadeInUp',
        time: 'Just now',
        delay: 3000
      });

    });

    // pagination in chat
    let currentPage = 1;
    const chatContainer = document.getElementById('app-chat-history');

    function loadMessages(conversationId, userId) {
      $.ajax({
        url: `${baseURL}/chat/list/${userId}/${conversationId}/load`,
        type: 'GET',
        data: {
          page: currentPage,
        },
        success: function(response) {
          if (response.data && response.load_data) {
            const $chatContainer = $('#userChats .chats');

            // Save the current scroll height
            const initialScrollHeight = $chatContainer[0].scrollHeight;

            // Prepend new messages
            $chatContainer.prepend(response.data);

            // Calculate new scroll height and maintain user position
            const newScrollHeight = $chatContainer[0].scrollHeight;
            const scrollOffset = newScrollHeight - initialScrollHeight;
            $chatContainer.scrollTop(scrollOffset);
          }
        },
        error: function(xhr, status, error) {
          console.log(xhr);
        }
      });
    }

    // Attach scroll event to native DOM element
    chatContainer.addEventListener('scroll', function() {
      if (chatContainer.scrollTop === 0) {
        currentPage++;
        const conversationId = document.getElementById('conversationid').value;
        const userId = document.getElementById('userid').value; // Dynamic
        loadMessages(conversationId, userId);
      }
    });

    function enterChat(e) {
      var s = $(".message-input").val();
      if ("" != s) {
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const ampm = hours >= 12 ? 'PM' : 'AM';
        const formattedTime = ((hours % 12) || 12) + ':' + minutes + ' ' + ampm;
        var a = '<div class="chat-content"><p>' + s + "</p><span class='timer'>" + formattedTime + "</span></div>";
        // If no chat exists yet, create the base .chats container if needed
        if ($('.chats .chat').length === 0) {
          $('.chats').html('<div class="chat"><div class="chat-body" style="margin-top:25px"></div></div>');
        }
        $(".chat:last-child .chat-body").append(a), $(".message").val(""), $(".user-chats").scrollTop($(
          ".user-chats > .chats").height());
      }
      var o = baseURL,
        t = $("#receiverid").val(),
        n = $("#conversationid").val(),
        i = $("#typeid").val();
      $.ajax({
        type: "POST",
        url: o + "/chat/sendmessage",
        header: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        async: !1,
        data: {
          _token: $('meta[name="csrf-token"]').attr("content"),
          userid: t,
          conversationid: n,
          type: i,
          textmessage: s
        },
        success: function(e) {},
        error: function(e, s, a, o) {
          console.log(e);
        },
        complete: function(e) {},
      });
    }

    function mySubmit(e) {
      var s = baseURL,
        a = $("#attach-doc").get(0).files[0];
      if (a) {
        var o = s + "/assets/img/video.png",
          t = new FileReader();
        (t.onload = function() {
          var e = '<div class="chat-content" onerror="this.onerror=null;this.src=' + o +
            ';" style="width:75%"> <img style="max-width:75%" id="previewImg" src="' + t.result + '" alt=""> </div>';
          $(".chat:last-child .chat-body").append(e), $(".message").val(""), $(".user-chats").scrollTop($(
            ".user-chats > .chats").height());
        }),
        t.readAsDataURL(a);
      }
      s = baseURL;
      var n = $("#receiverid").val(),
        i = $("#conversationid").val(),
        l = new FormData(e);
      l.append("userid", n),
        l.append("conversationid", i),
        (isRtl = "rtl" === $("html").attr("data-textdirection")),
        $.ajax({
          type: "POST",
          url: s + "/chat/image-send",
          header: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
          },
          data: l,
          dataType: "JSON",
          contentType: !1,
          cache: !1,
          processData: !1,
          beforeSend: function() {
            $(".display-error").html(""), $(".display-error").hide(), $(".message_box_modal").html(
              '<img src="{{ asset('images/source.gif') }}" width="25" height="25"/>');
          },
          success: function(e) {
            setTimeout(function() {
                $(".message_box_modal").html(e);
              }, 200),
              $("#imgRefresh").attr("src", e.img),
              $("#imgRefreshNavbar").attr("src", e.img),
              401 == e.code ?
              ($(".display-error").html("<ul>" + e.msg + "</ul>"), $(".display-error").css("display", "block"), toastr
                .warning(e.msg, "Chat", {
                  closeButton: !0,
                  tapToDismiss: !1,
                  rtl: isRtl
                })) :
              "Video" == e.typ && location.reload();
          },
          error: function(e, s, a, o) {
            console.log(e),
              setTimeout(function() {
                $(".message_box_modal").html(e);
              }, 200),
              $(".display-error").html("<ul>Error in uploading data!</ul>"),
              $(".display-error").css("display", "block");
          },
        });
    }
  </script>
@endsection