@extends('Admin.layouts.app')
@section('title', 'chat')

@section('content')

         

<!-- Page Heading -->
<!-- <h1 class="page-title h3 mb-2 text-gray-800">
    Users
    <a href="{{route('admin.user.form')}}" class="btn-gazna" style="text-decoration:none;height:50px;font-size:14px;" >Add User</a>
</h1> -->
<!-- DataTales Example -->
<div  class="card-header py-2 border-bottom">

        <div class="d-flex align-items-center justify-content-between service-chat">
            <div class="d-flex">
                <h6 class="page-title h3 mb-2 ">Chats</h6> <span class="page-title  h3 mb-2 ">(421)</span>
            </div>
            <div>
                <ul class="nav nav-pills mb-3 btn-group" id="pills-tab" role="tablist">
                    <li class="nav-item " role="presentation">
                        <button class="nav-link btn-physical active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Service Seeker</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link btn-physical" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Service Provider</button>
                    </li>
                </ul>
            </div>
        </div>
</div>

<div class="chat-area">
    
 <div class="row">
   
    <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <div class="row">
                    <div class="col-12 col-md-4">
                       <div class="user-chat-sidebar border-right pt-4">
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                       </div>
                    </div>
                    <div class="col-12 col-md-8">
                        <div class="chat-body">
                                <div class="today-chat mt-4">
                                <div class="text-center">
                                    <p class="today text-center">Today</p>
                                </div>
                                <div class="chat-message">
                                    <div class="row">
                                        <div class="col-12 col-md-6 offset-md-6">
                                             <div class="my-message mt-3">
                                                <p class="msg-time">You, 11:30 PM</p>
                                                <p class="my-msg">The class was very interesting</p>
                                            </div>
                                            
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="user-message mt-3">
                                                <p class="msg-time text-right">David Phillips, 11:35 PM</p>
                                                <p class="my-msg">Thankyou so much looking forward to next </p>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 offset-md-6">
                                             <div class="my-message mt-3">
                                                <p class="msg-time">You, 11:30 PM</p>
                                                <p class="my-msg">Kindly share Notes for reading</p>
                                            </div>
                                            
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="user-message mt-3">
                                                <p class="msg-time text-right">David Phillips, 11:35 PM</p>
                                                <div class="chat-pdf">
                                                    <div class="d-flex align-items-center">
                                                        <div class="pdf-img">
                                                            <img src="{{ asset('admin/img/pdf.png') }}" alt="">
                                                        </div>
                                                        <div class="pdf-text ms-2">
                                                            <p>notes.pdf</p>
                                                            <p class="size">786 kb</p>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <img src="{{ asset('admin/img/export-img.png') }}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 offset-md-6">
                                             <div class="my-message mt-3">
                                                <p class="msg-time">You, 11:30 PM</p>
                                                <p class="my-msg">The class was very interesting</p>
                                            </div>
                                            
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="user-message mt-3">
                                                <p class="msg-time text-right">David Phillips, 11:35 PM</p>
                                                <p class="my-msg">Thankyou so much looking forward to next </p>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 offset-md-6">
                                             <div class="my-message mt-3">
                                                <p class="msg-time">You, 11:30 PM</p>
                                                <p class="my-msg">Kindly share Notes for reading</p>
                                            </div>
                                            
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="user-message mt-3">
                                                <p class="msg-time text-right">David Phillips, 11:35 PM</p>
                                                <div class="chat-pdf">
                                                    <div class="d-flex align-items-center">
                                                        <div class="pdf-img">
                                                            <img src="{{ asset('admin/img/pdf.png') }}" alt="">
                                                        </div>
                                                        <div class="pdf-text ms-2">
                                                            <p>notes.pdf</p>
                                                            <p class="size">786 kb</p>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <img src="{{ asset('admin/img/export-img.png') }}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-input-container mt-2">
                        <input type="text" placeholder="Write a message..." class="chat-input" />
                        <div class="chat-icons">
                            <span class="attachment">
                            <img src="{{ asset('admin/img/attachment-icon.png') }}" alt="">

                            </span> <!-- Attachment Icon -->
                            <span class="send">
                            <img src="{{ asset('admin/img/send-icon.png') }}" alt="">

                            </span> <!-- Send Icon -->
                        </div>
                    </div>
                    </div>
                </div>
            </div>
             <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
             <div class="row">
                    <div class="col-12 col-md-4">
                       <div class="user-chat-sidebar border-right pt-4">
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            <div class="user-chat">
                                <div class="d-flex align-items-center" >
                                    <div class="user-img">
                                        <img src="{{ asset('admin/img/chat-user.png') }}" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>John</p>
                                        <span>Math, English</span>
                                    </div>
                                </div>
                                <div>
                                    <p class="count">2</p>
                                </div>
                            </div>
                            
                       </div>
                    </div>
                    <div class="col-12 col-md-8">
                        <div class="chat-body">
                                <div class="today-chat mt-4">
                                <div class="text-center">
                                    <p class="today text-center">Today</p>
                                </div>
                                <div class="chat-message">
                                    <div class="row">
                                        <div class="col-12 col-md-6 offset-md-6">
                                             <div class="my-message mt-3">
                                                <p class="msg-time">You, 11:30 PM</p>
                                                <p class="my-msg">The class was very interesting</p>
                                            </div>
                                            
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="user-message mt-3">
                                                <p class="msg-time text-right">David Phillips, 11:35 PM</p>
                                                <p class="my-msg">Thankyou so much looking forward to next </p>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 offset-md-6">
                                             <div class="my-message mt-3">
                                                <p class="msg-time">You, 11:30 PM</p>
                                                <p class="my-msg">Kindly share Notes for reading</p>
                                            </div>
                                            
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="user-message mt-3">
                                                <p class="msg-time text-right">David Phillips, 11:35 PM</p>
                                                <div class="chat-pdf">
                                                    <div class="d-flex align-items-center">
                                                        <div class="pdf-img">
                                                            <img src="{{ asset('admin/img/pdf.png') }}" alt="">
                                                        </div>
                                                        <div class="pdf-text ms-2">
                                                            <p>notes.pdf</p>
                                                            <p class="size">786 kb</p>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <img src="{{ asset('admin/img/export-img.png') }}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-input-container mt-2">
                        <input type="text" placeholder="Write a message..." class="chat-input" />
                        <div class="chat-icons">
                            <span class="attachment">
                            <img src="{{ asset('admin/img/attachment-icon.png') }}" alt="">

                            </span> <!-- Attachment Icon -->
                            <span class="send">
                            <img src="{{ asset('admin/img/send-icon.png') }}" alt="">

                            </span> <!-- Send Icon -->
                        </div>
                    </div>
                    </div>
                </div>
            </div>
    </div>
  
 </div>
</div>
</div>

<!-- /.container-fluid -->
    @endsection


    @push('body-scripts')
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
   
<script>
$(document).ready(function(){
    // $('#laravel_datatable').DataTable({
    //     processing: true,
    //     serverSide: true,
    //     ajax: "{{ route('admin.seekers') }}",
    //     columns: [
    //         {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
    //         { data: 'name', name: 'name' },
    //         { data: 'email', name: 'email' },
    //         { data: 'phone', name: 'phone' },
    //         { data: 'status', name: 'status' },
    //         {data: 'action', name: 'action', orderable: false, searchable: false}
          
        
    //     ]
    // });
});
</script>
@endpush