<div class="table-responsive">
  <div class="d-flex justify-content-between">
    <h5 class="mb-0">Birth Register Details</h5>

    <button type="button" class="btn btn-primary" id="addBirthRegister" data-bs-toggle="modal" data-bs-target="#commonModal"><i class="bx bx-plus-circle"></i> Add New</button>
  </div>
  <hr class="mb-2">
  <table id="example" class="table table-bordered align-middle" style="width:100%">
    <thead class="table-light">
      <tr>
        <th class="thbutton">Serial No</th>
        <th>Child Name</th>
        <th>Gender</th>
        <th>Birth Date</th>
        <th>Birth Time</th>
        <th>Mother Name</th>
        <th>Father Name</th>
        <th>Report</th>
        <th class="thbutton">Edit</th>
        <th class="thbutton">Delete</th>
      </tr>
    </thead>
    <tbody>
      @php 
      $i = 1;  
      @endphp

       @if(isset($birth_registers) && count($birth_registers)>0)
        @foreach ($birth_registers as $list)
        <tr>
          <td class="text-left">{{ $i++ }}</td>
          <td class="text-left">{{ $list->child_name ? $list->child_name : ''}} </td>
          <td class="text-left">{{ $list->gender_name ? $list->gender_name : ''}} </td>
          <td class="text-left">{{ FormatedDate($list->birth_date ? $list->birth_date : '') }} </td>
          <td class="text-left">{{ FormatedTime($list->birth_time ? $list->birth_time : '') }} </td>
          <td class="text-left">{{ $list->mother_name ? $list->mother_name : ''}} </td>
          <td class="text-left">{{ $list->father_name ? $list->father_name : ''}} </td>
          <td class="text-left">{{ $list->birth_report ? $list->birth_report : ''}} </td>


          <td class="text-center">
              <button data-id="{{ $list->id }}" class="btn btn-sm btn-outline-secondary editBirthRegister" data-bs-toggle="modal" id="editBirthRegister" data-bs-target="#commonModal" title="Edit">
                <i class="bi bi-pencil-square"></i>
              </button>
          </td>

          <td class="text-center">
            <a data-url="{{route('birth-registers.destroy' , $list->id)}}" class="btn btn-sm btn-danger deleteDataCustom" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
              <i class="bi bi-trash text-white"></i>
            </a>
          </td>
        </tr>
        @endforeach
        @else
          <tr>
              <td colspan="4">No Data Found</td>
          </tr>
        @endif
    </tbody>
  </table>
</div>