@extends('backend.layouts.transporter.app')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Chats</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
    
  </div>
  
</section>
<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="row">
    <div class="col-md-12">
      <div class="border rounded-4 overflow-hidden">
          <div class="row">
            <div class="col-md-6 col-xl-4 border-end pe-0">
              <ul class="nav nav-tabs profile-tabs chat-tabs justify-content-between" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active fs-16" id="All-tab" data-bs-toggle="tab" data-bs-target="#All" type="button" role="tab" aria-controls="All" aria-selected="true">All</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link fs-16" id="Unread-tab" data-bs-toggle="tab" data-bs-target="#Unread" type="button" role="tab" aria-controls="Unread" aria-selected="false">Unread <span class="notification-value position-static">2</span></button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link fs-16" id="Read-tab" data-bs-toggle="tab" data-bs-target="#Read" type="button" role="tab" aria-controls="Read" aria-selected="false">Read</button>
                </li>
                
              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="All" role="tabpanel" aria-labelledby="All-tab">
                  <ul class="chat-list">
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="tab-pane fade" id="Unread" role="tabpanel" aria-labelledby="Unread-tab">
                  <ul class="chat-list">
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="tab-pane fade" id="Read" role="tabpanel" aria-labelledby="Read-tab">
                  <ul class="chat-list">
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                    <li>
                      <div class="d-flex justify-content-between">
                        <div class="">
                          <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                          <div class="text-gray fs-13">Job #12345</div>
                        </div>
                        <div class="text-gray fs-13">07:35 PM</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-8 ps-0 chat-bg">
              <div class="p-3 d-flex justify-content-between bg-white align-items-center flex-wrap">
                <div class="fs-17 fw-bold text-black">
                  Job #12346 
                  <span class="fw-bold bg-body-tertiary fs-13 d-inline-block px-3 py-1 rounded-4 ms-2">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.1064 7.74634C6.0864 7.74634 6.07307 7.74634 6.05307 7.74634C6.01973 7.73967 5.97307 7.73967 5.93307 7.74634C3.99973 7.68634 2.53973 6.16634 2.53973 4.29301C2.53973 2.38634 4.09307 0.833008 5.99973 0.833008C7.9064 0.833008 9.45973 2.38634 9.45973 4.29301C9.45307 6.16634 7.9864 7.68634 6.1264 7.74634C6.11973 7.74634 6.11307 7.74634 6.1064 7.74634ZM5.99973 1.83301C4.6464 1.83301 3.53973 2.93967 3.53973 4.29301C3.53973 5.62634 4.57973 6.69967 5.9064 6.74634C5.9464 6.73967 6.03307 6.73967 6.11973 6.74634C7.4264 6.68634 8.45307 5.61301 8.45973 4.29301C8.45973 2.93967 7.35307 1.83301 5.99973 1.83301Z" fill="black"/>
                    <path d="M13.2615 5.23438C13.1495 6.37745 12.2243 7.26993 11.0584 7.33105L11.0467 7.32715H11.0535L11.0672 7.32617C12.3034 7.25837 13.27 6.24265 13.2733 5L13.2615 5.23438Z" fill="black" stroke="black"/>
                    <path d="M6.11307 15.0337C4.80641 15.0337 3.49307 14.7003 2.49974 14.0337C1.57307 13.4203 1.06641 12.5803 1.06641 11.667C1.06641 10.7537 1.57307 9.90699 2.49974 9.28699C4.49974 7.96033 7.73974 7.96033 9.72641 9.28699C10.6464 9.90033 11.1597 10.7403 11.1597 11.6537C11.1597 12.567 10.6531 13.4137 9.72641 14.0337C8.72641 14.7003 7.41974 15.0337 6.11307 15.0337ZM3.05307 10.127C2.41307 10.5537 2.06641 11.1003 2.06641 11.6737C2.06641 12.2403 2.41974 12.787 3.05307 13.207C4.71307 14.3203 7.51307 14.3203 9.17307 13.207C9.81307 12.7803 10.1597 12.2337 10.1597 11.6603C10.1597 11.0937 9.80641 10.547 9.17307 10.127C7.51307 9.02033 4.71307 9.02033 3.05307 10.127Z" fill="black"/>
                    <path d="M12.2264 13.8333C11.9931 13.8333 11.7864 13.6733 11.7397 13.4333C11.6864 13.16 11.8597 12.9 12.1264 12.84C12.5464 12.7533 12.9331 12.5867 13.2331 12.3533C13.6131 12.0667 13.8197 11.7067 13.8197 11.3267C13.8197 10.9467 13.6131 10.5867 13.2397 10.3067C12.9464 10.08 12.5797 9.92001 12.1464 9.82001C11.8797 9.76001 11.7064 9.49335 11.7664 9.22001C11.8264 8.95335 12.0931 8.78001 12.3664 8.84001C12.9397 8.96668 13.4397 9.19335 13.8464 9.50668C14.4664 9.97335 14.8197 10.6333 14.8197 11.3267C14.8197 12.02 14.4597 12.68 13.8397 13.1533C13.4264 13.4733 12.9064 13.7067 12.3331 13.82C12.2931 13.8333 12.2597 13.8333 12.2264 13.8333Z" fill="black"/>
                    </svg>
                    5 Members</span>
                  </div>
                <span class="in-progress-tag">In Progress</span>
              </div>
              <div class="chat-scroll">
                <div class="p-3 pt-5">
                  <div class="chat-message-date position-relative mb-4">
                    <div class="chat-message-date-inner"><span class="text-gray fs-13 d-inline-block chat-bg">May 28, 2025</span></div>
                  </div>
                  <div class="message-receive mb-3">
                    <div class="text-gray fs-13 mb-1">
                      <div class="chat-user-name">Bruce Wayne </div>
                      <span class="chat-dot"></span> 
                      12:45 PM
                    </div>
                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >Yes, whats the status of this job?</div>
                  </div>
                  <div class="message-receive mb-3">
                    <div class="text-gray fs-13 mb-1">
                      <div class="chat-user-name">Bruce Wayne </div>
                      <span class="chat-dot"></span> 
                      12:45 PM
                    </div>
                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >Yes, whats the status of this job?</div>
                  </div>
                  <div class="message-receive mb-3">
                    <div class="text-gray fs-13 mb-1">
                      <div class="chat-user-name">Bruce Wayne </div>
                      <span class="chat-dot"></span> 
                      12:45 PM
                    </div>
                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >
                      <div class="d-flex p-3 rounded-3 border-light bg-light-gray mb-2 align-items-center justify-content-between">
                        <div class="d-flex align-items-center">  
                          <div class="">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H14C14.41 1.25 14.75 1.59 14.75 2C14.75 2.41 14.41 2.75 14 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V10C21.25 9.59 21.59 9.25 22 9.25C22.41 9.25 22.75 9.59 22.75 10V15C22.75 20.43 20.43 22.75 15 22.75Z" fill="#8E8E93"/>
                              <path d="M13.9072 1.77051C13.9884 1.73577 14.0974 1.74898 14.1846 1.83203L22.1768 9.82422C22.2461 9.89376 22.2676 10.007 22.2305 10.0938C22.1876 10.1935 22.0959 10.25 22 10.25H18C16.3361 10.25 15.3152 9.92344 14.6963 9.30469C14.0774 8.68577 13.75 7.6641 13.75 6V2C13.7502 1.89358 13.8152 1.80582 13.8926 1.77539L13.9004 1.77344L13.9072 1.77051ZM14.25 6C14.25 7.29018 14.4061 8.29851 15.0537 8.94629C15.7015 9.59406 16.7097 9.75 18 9.75H21.3975L20.5439 8.89648L15.1035 3.45703L14.25 2.60352V6Z" fill="#8E8E93" stroke="#8E8E93"/>
                              <path d="M13 13.75H7C6.59 13.75 6.25 13.41 6.25 13C6.25 12.59 6.59 12.25 7 12.25H13C13.41 12.25 13.75 12.59 13.75 13C13.75 13.41 13.41 13.75 13 13.75Z" fill="#8E8E93"/>
                              <path d="M11 17.75H7C6.59 17.75 6.25 17.41 6.25 17C6.25 16.59 6.59 16.25 7 16.25H11C11.41 16.25 11.75 16.59 11.75 17C11.75 17.41 11.41 17.75 11 17.75Z" fill="#8E8E93"/>
                            </svg>

                          </div>
                          <div class="fs-13 fw-semibold text-black ms-2">Insights of Lading</div>
                        </div>
                        <div class="">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M12.7167 18.5412H7.28332C3.19165 18.5412 1.44165 16.7912 1.44165 12.6996V12.5912C1.44165 8.89124 2.89998 7.10791 6.16665 6.79957C6.49998 6.77457 6.81665 7.02457 6.84998 7.36624C6.88332 7.70791 6.63332 8.01624 6.28332 8.04957C3.66665 8.29124 2.69165 9.52457 2.69165 12.5996V12.7079C2.69165 16.0996 3.89165 17.2996 7.28332 17.2996H12.7167C16.1083 17.2996 17.3083 16.0996 17.3083 12.7079V12.5996C17.3083 9.50791 16.3166 8.27457 13.65 8.04957C13.3083 8.01624 13.05 7.71624 13.0833 7.37457C13.1166 7.03291 13.4083 6.77457 13.7583 6.80791C17.075 7.09124 18.5583 8.88291 18.5583 12.6079V12.7162C18.5583 16.7912 16.8083 18.5412 12.7167 18.5412Z" fill="#007AFF"/>
                          <path d="M10 1.54199C10.0301 1.54199 10.0613 1.55443 10.0869 1.58008C10.1126 1.60572 10.125 1.63684 10.125 1.66699V12.4004C10.125 12.4699 10.0699 12.5254 10 12.5254C9.96987 12.5254 9.93872 12.5129 9.91309 12.4873C9.88746 12.4617 9.87502 12.4305 9.875 12.4004V1.66699C9.875 1.63684 9.88744 1.60572 9.91309 1.58008C9.93873 1.55443 9.96985 1.54199 10 1.54199Z" fill="#007AFF" stroke="#007AFF"/>
                          <path d="M9.99997 13.9585C9.84164 13.9585 9.68331 13.9002 9.55831 13.7752L6.76664 10.9835C6.52497 10.7419 6.52497 10.3419 6.76664 10.1002C7.0083 9.85853 7.40831 9.85853 7.64997 10.1002L9.99997 12.4502L12.35 10.1002C12.5916 9.85853 12.9916 9.85853 13.2333 10.1002C13.475 10.3419 13.475 10.7419 13.2333 10.9835L10.4416 13.7752C10.3166 13.9002 10.1583 13.9585 9.99997 13.9585Z" fill="#007AFF"/>
                          </svg>

                        </div>
                      </div>
                      I have some insights that could change our approach.
                    </div>
                  </div>
                  <div class="message-sender mb-3">
                    <div class="text-gray fs-13 mb-1">
                      <div class="chat-user-name">Bruce Wayne </div>
                      <span class="chat-dot"></span> 
                      12:45 PM
                    </div>
                    <div class="bg-ligt-primary p-3 fs-13 rounded-4 rounded-top-end-0 d-inline-block text-black" >Yes, whats the status of this job?</div>
                  </div>
                  <div class="message-receive mb-3">
                    <div class="text-gray fs-13 mb-1">
                      <div class="chat-user-name">Bruce Wayne </div>
                      <span class="chat-dot"></span> 
                      12:45 PM
                    </div>
                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >Yes, whats the status of this job?</div>
                  </div>
                </div>
                
              </div>
              <div class="p-3 position-relative">
                  <button class="chat-btn position-absolute  chat-plus-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.99969 1.54199C14.6651 1.54199 18.4585 5.33462 18.4587 10C18.4587 14.6655 14.6652 18.459 9.99969 18.459C5.33432 18.4588 1.54169 14.6654 1.54169 10C1.54186 5.33473 5.33443 1.54217 9.99969 1.54199ZM9.99969 1.79199C5.47381 1.79217 1.79186 5.47412 1.79169 10C1.79169 14.526 5.4737 18.2088 9.99969 18.209C14.5258 18.209 18.2087 14.5261 18.2087 10C18.2085 5.47401 14.5257 1.79199 9.99969 1.79199Z" fill="#292D32" stroke="#6C757D"/>
                    <path d="M6.66669 9.875H13.3337C13.3637 9.87509 13.395 9.88753 13.4206 9.91309C13.4461 9.9387 13.4587 9.96992 13.4587 10C13.4587 10.0301 13.4461 10.0613 13.4206 10.0869C13.395 10.1125 13.3637 10.1249 13.3337 10.125H6.66669C6.63654 10.125 6.60542 10.1126 6.57977 10.0869C6.55413 10.0613 6.54169 10.0301 6.54169 10C6.54169 9.96985 6.55413 9.93873 6.57977 9.91309C6.60542 9.88744 6.63654 9.875 6.66669 9.875Z" fill="#292D32" stroke="#6C757D"/>
                    <path d="M10 13.9587C9.65833 13.9587 9.375 13.6753 9.375 13.3337V6.66699C9.375 6.32533 9.65833 6.04199 10 6.04199C10.3417 6.04199 10.625 6.32533 10.625 6.66699V13.3337C10.625 13.6753 10.3417 13.9587 10 13.9587Z" fill="#292D32"/>
                    </svg>
                  </button>

                  <input type="text" class="form-control chat-input rounded-1 border-1 " placeholder="Enter message"/>
                  <button class="chat-btn position-absolute chat-submit-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.0583 7.09154L7.92498 3.52487C3.13331 1.12487 1.16664 3.09153 3.56664 7.8832L4.29164 9.3332C4.49998 9.7582 4.49998 10.2499 4.29164 10.6749L3.56664 12.1165C1.16664 16.9082 3.12498 18.8749 7.92498 16.4749L15.0583 12.9082C18.2583 11.3082 18.2583 8.69153 15.0583 7.09154ZM12.3666 10.6249H7.86664C7.52498 10.6249 7.24164 10.3415 7.24164 9.99987C7.24164 9.6582 7.52498 9.37487 7.86664 9.37487H12.3666C12.7083 9.37487 12.9916 9.6582 12.9916 9.99987C12.9916 10.3415 12.7083 10.6249 12.3666 10.6249Z" fill="#007AFF"/>
                    </svg>
                  </button>
                </div>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- /.box -->

</section>




<script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <select id="roleFilter" class="form-control max-w-200">
      <option value="">Status</option>
      <option value="Admin">Admin</option>
      <option value="User">User</option>
      <option value="Guest">Guest</option>
    </select>
  `);

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });
  });

  
  

  // function to show auto login popup with update link
  $(document).on('click', '.auto-login-link', function() {

    let id = $(this).attr('data-id');

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      type: 'POST',
      
      dataType: "html",
      data: {
        id: id
      },
      success: function(response) {
        $('#autologin').modal('show');
        $(".model-content-autologin").html(response);
      },
      beforeSend: function() {}
    });
  });

  $(document).on('click', '.copy-to-clipboard', function() {
    var copyText = document.getElementById("autologin_url_field");
    $("#autologin_url_field").focus();
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
  });
</script>

@endsection