@include('more.vendor.partials._header')

         {{-- Main content --}}
         <div class="main-content">
            <div class="row">
               <div class="col-lg-12">
                  <div class="main-content-title-profile mb-30">
                     <div class="main-content-title">
                        <h3>{{ $title }}</h3> 
                        <br />
                        {{-- @if ($message_tag == 2) --}}
                           <p><a href="/seller/messages">Back to messages</a></p>
                        {{-- @endif --}}
                        <span id="time_span"></span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
                           <path d="M6.669 2.27202L0.94102 8L0 7.05898L5.72731 1.331H0.679478V0H8V7.32052H6.669V2.27202Z" />
                        </svg>
                     </div>
                  </div>
               </div>
            </div>
            <div class="dashboard-message-wrapper">
               <div class="row">
                  {{-- @if ($message_tag == 1) --}}
                     <div 
                        @if ($message_tag == 1)
                           style="display: none;"
                        @endif
                        class="col-xl-12 col-md-12 col-12 s-d-p-0">

                        @if (count($messages) > 0)
                           <div class="conversation-wrap">
                              {{-- <div class="conversation-top">
                                 <div class="conversation-author-area">
                                    <div class="author-img">
                                       <img src="/more/media/favicon.png" alt>
                                       <span class="active-status"></span>
                                    </div>
                                    <div class="author-content">
                                       <h6>{{ $messages[0]['sender']['name'] }}</h6>
                                       <p>{{ $messages[0]['sender']['phone'] }} | {{ $messages[0]['sender']['email'] }}</p>
                                    </div>
                                 </div>
                              </div> --}}
                              <div class="conversation-area messages">
                                 {{-- <div class="conversation-date">
                                    <span>Today, 25 July</span>
                                 </div> --}}

                                 {{-- 9 => array:10 [▼
                                    "id" => 4
                                    "sender_id" => 1747
                                    "receiver_id" => 1577
                                    "content" => "You there...?"
                                    "created_at" => "2024-06-15T12:06:10.000000Z"
                                    "status" => "open"
                                    "updated_at" => "2024-06-15T12:06:10.000000Z"
                                    "attachments" => []
                                    "sender" => array:52 [▶]
                                    "receiver" => array:52 [▶]
                                 ] --}}

                                 @foreach ($messages as $m)
                                    @if ($vendor['id'] != $m['sender']['id'])
                                       <div class="single-conversation mb-30 message">
                                          <div class="author-img">
                                             @if (isset($m['sender']['photo']))
                                                <img src="{{ $m['sender']['photo'] }}" alt="{{ $m['sender']['name'] }}">
                                             @else
                                                <img src="/more/media/favicon.png" alt>
                                             @endif
                                          </div>
                                          <div class="author-content">
                                             <div class="author-name-and-date">
                                                <h6>{{ $m['sender']['name'] }}</h6>
                                                <span>{{ $m['created_at'] }}</span>
                                             </div>
                                             <ul class="conversation-list">
                                                <li>{{ $m['content'] }}</li>
                                             </ul>
                                          </div>
                                       </div>
                                    @endif

                                    @if ($vendor['id'] == $m['sender']['id'])
                                       <div class="single-conversation two mb-40 message">
                                          <div class="author-img">
                                             @if (isset($m['sender']['photo']))
                                                <img src="{{ $m['sender']['photo'] }}" alt="{{ $m['sender']['name'] }}">
                                             @else
                                                <img src="/more/media/favicon.png" alt>
                                             @endif
                                          </div>
                                          <div class="author-content">
                                             <div class="author-name-and-date">
                                                <h6>{{ $m['sender']['name'] }}</h6>
                                                <span>{{ $m['created_at'] }}</span>
                                             </div>
                                             <ul class="conversation-list">
                                                @if (isset($m['attachments']))
                                                   @foreach ($m['attachments'] as $at)
                                                      <li>
                                                         <img src="{{ $at['file_path'] }}" />
                                                      </li>
                                                   @endforeach
                                                @endif
                                                <li>{{ $m['content'] }}</li>
                                             </ul>
                                          </div>
                                       </div>
                                    @endif
                                 @endforeach
                                 
                                 @include('more.vendor.partials._receive_chat', ['message' => "..."])

                                 <form 
                                    class="from-wrapper"
                                    id="send_msg_reply"
                                    action="/seller/message/reply"
                                    method="POST"
                                    enctype="multipart/form-data"
                                >
                                    @csrf
                                    <div class="from-inner">
                                       <div class="input-area">
                                          {{-- <div class="add-icon">
                                             <i class="bi bi-plus-lg"></i>
                                          </div> --}}
                                          <input id="message" type="text" name="content" placeholder="Type your message">
                                          <input type="hidden" value="{{ $vendor['id'] }}" name="sender_id" />
                                          <input type="hidden" value="{{ $recepient_id }}" name="recepient_id" />
                                       </div>
                                       <ul class="icon-list">
                                          {{-- <li> --}}
                                             {{-- <button type="button"> --}}
                                                {{-- <img src="/more_new/assets/img/dashboard/icon/message-input-smile-emoji.svg" alt> --}}
                                                {{-- <i class="bi bi-emoji-smile-fill"></i> --}}
                                                {{-- <i class="bi bi-paperclip"></i> --}}
                                             {{-- </button> --}}
                                          {{-- </li> --}}
                                          <li>
                                             <button type="submit">
                                                {{-- <img src="/more_new/assets/img/dashboard/icon/message-input-send-icon.svg" alt> --}}
                                                <i class="bi bi-send"></i>
                                             </button>
                                          </li>
                                       </ul>
                                    </div>
                                 </form>
                              </div>
                           </div>
                        @endif
                     </div>   
                  {{-- @endif --}}
               </div>
            </div>
         </div>
         
         {{-- Footer Content --}}
@include('more.vendor.partials._footer')