@extends('profile.partials.master')
@section('content')
<style>
   .dataTables_length{
    margin-bottom: 30px !important; 
  }
  table.dataTable.no-footer{
    border-bottom: 1px solid white  !important;
  }
</style>
<div class="container">
<table class="table" id="example">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Full name</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th scope="col">Message</th>
      <th scope="col">Service</th>

    </tr>
  </thead>
  <tbody>
    @foreach ($leads as $key => $lead)
      <tr>
        <th scope="row">{{ $key+1 }}</th>
        <td>{{ $lead->fullname }}</td>
        <td>{{ $lead->email }}</td>
        <td>{{ $lead->phone }}</td>
        <td>{{ $lead->message }}</td>
        <td>{{ $lead->service }}</td>

       
        
      </tr>
    @endforeach
   
   
  </tbody>
</table>
</div>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
  $(document).ready(function() {
    $('#example').DataTable({
      "paging": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "lengthMenu": [10, 25, 50, 75, 100]
    });
  });
</script>

@endsection