@extends('layouts.index')

@section('content')
<style>
.dataTables_info{display:none}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.min.js"></script>
<div class="content-body">
  <!-- row -->
  <div class="container-fluid">
    <div class="form-head d-flex mb-3 mb-md-2 align-items-start">
      <div class="me-auto d-none d-lg-block">
        <h3 class="font-w600 m-0 p-0">Contact Us List</h3>
      </div>
      <!-- <div class="form-group">
        <input type="text" id="searchInput" class="form-control" placeholder="Search...">
      </div> -->
      <!--<div style="text-align: end;"> <a href="{{route('admin.news-add')}}" class="btn btn-success">Add News</a> </div>-->
      @if(session('success'))
      <div class="alert alert-success"> {{ session('success') }} </div>
      @endif
      @if(session('error'))
      <div class="alert alert-danger"> {{ session('error') }} </div>
      @endif </div>
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body news-List">
            <div class="table-responsive">
              <table id="example5" class="table table-hover mb-0">
                <thead>
                  <tr>
                    <th>Sr. No.</th>
                    <!-- <th>Type</th> -->
                    <!-- <th>Location</th> -->
                    <!-- <th>Doctor</th> -->
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Message</th>
                    <!-- <th>Date</th>
                    <th>Time</th>  -->
                  </tr>
                </thead>
                <tbody>
                
                @foreach($appoint_list as $appoint)
                <tr>
                  <td>{{ $appoint_list->firstItem() + $loop->index }}</td>

                  <td>{{$appoint->name}}</td>
                  <td>{{$appoint->email}}</td>
                  <td>{{$appoint->phone}}</td>
                  <td style="max-width: 300px;">
                      <div style="overflow-x: auto; white-space: nowrap;">
                          {{ $appoint->department }}
                      </div>
                  </td>
                </tr>
                @endforeach
                </tbody>
                
              </table>
            </div>
            <div class="col-12">
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {!! $appoint_list->links('pagination::bootstrap-4') !!}
        </ul>
    </nav>
</div>

          </div>
        </div>
      </div>
    </div>
    <div class="row">
      
    </div>
  </div>
</div>

@endsection