@extends('layouts.app')

@section('content')
<!-- start page title -->
<div class="row">
  <div class="col-12">
    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
      <h4 class="mb-sm-0 font-size-18">New Members</h4>

      <div class="page-title-right">
        <ol class="breadcrumb m-0">
          <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Invoices</a></li> -->
          <li class="breadcrumb-item active">New Members</li>
        </ol>
      </div>

    </div>
  </div>
</div>
<!-- end page title -->

<div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-sm">
          </div>
        </div>
        <!-- end row -->
        <table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
          <thead>
            <tr class="bg-transparent">
              <th style="width: 30px;">
                <div class="form-check font-size-16">
                  <input type="checkbox" name="check" class="form-check-input" id="checkAll">
                  <label class="form-check-label" for="checkAll"></label>
                </div>
              </th>
              <th style="width: 120px;">S.No.</th>
              <th>Members Name</th>
              <th> Date of Birth </th>
              <th>Father Name</th>
              <th>Mother Name</th>
              <th>Level</th>
              <th>Specialization</th>
              <th>Add</th>
            </tr>
          </thead>
          <tbody>

            @foreach($memberName as $sn=> $data)

            <tr>
              <td>
                <div class="form-check font-size-16">
                  <input type="checkbox" class="form-check-input">
                  <label class="form-check-label"></label>
                </div>
              </td>

              <td style="width: 120px;">{{ ++$sn }}</td>
              <td>{{$data->member->nameeng}}</td>
              <td> {{$data->member->dob}} </td>
              <td>{{$data->member->fname}} </td>
              <td>{{$data->member->mname}}</td>
              <td>{{$data->member->level->level}}</td>
              <td>{{$data->member->specialization->specialization}}</td>
              <td>
                <a href="{{route('member.details', $data->member_id)}}" class="btn btn-success waves-effect waves-light"><i class="bx bx-plus me-1"></i> Details</a>
              </td>
            </tr>

            @endforeach



          </tbody>
        </table>

        <!-- end table responsive -->
      </div>
      <!-- end card body -->
    </div>
    <!-- end card -->
  </div>
  <!-- end col -->
</div>
<!-- end row -->

<script>
  // Wait for the document to be fully loaded
  document.addEventListener('DOMContentLoaded', function() {
    // Find all elements with class 'delete-link'
    var deleteLinks = document.querySelectorAll('.delete-link');

    // Attach event listener to each delete link
    deleteLinks.forEach(function(link) {
      link.addEventListener('click', function(event) {
        // Prevent the default action of the link
        event.preventDefault();

        // Display a confirmation dialog
        var confirmDelete = confirm("Do you really want to delete this?");

        // If user confirms deletion, proceed with the deletion action
        if (confirmDelete) {
          // Redirect to the delete URL
          window.location.href = link.href;
        }
      });
    });
  });
</script>

@endsection