<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ManiPal</title>
  <!-- CSS only -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link href="/css/formstyle.css" rel="stylesheet" />
  
</head>

<body>
  <!-- Navbar-->

  <!-- Signup Form -->
  <div class="container forbox ">
    <div class="p-4 m-4 ">
      <div class="col-lg-5 mx-auto border rounded mt-20">
        <h3>
          <div class="alert hello one" role="alert" >
            Receiver Form
          </div>
        </h3>

        <form class="bg-light" method="post" action="/formPost">
          <!-- Hospital Name -->
          <div id="filter" data-name="check">
            <h2>Select filter</h2>
                      Emergency
                      <input class="form-check-input mt-0 checkbox" id="check" type="checkbox" value=1 aria-label="Checkbox for following text input"  name="follow[1][]" >
          
          
          Rating
                      <input class="form-check-input mt-0 checkbox" id="check" type="checkbox" value=1 aria-label="Checkbox for following text input"  name="follow[1][]" >
          
          no of Equipment
                      <input class="form-check-input mt-0 checkbox" id="check" type="checkbox" value=1 aria-label="Checkbox for following text input"  name="follow[1][]" >
          
                    </div>
          <div class="form-group m-1">
            <label for="firstname"><b>Hospital Name</b></label>
            <input class="form-control-sm form-control" id="" value="<%=hospitalName%>" name="firstname" placeholder="<%=hospitalName%>" type="text" readonly/>
          </div>

          <!-- Category -->
          <div class="form-group m-1">
            <label for="lastname"><b>Category</b></label>
            <input class="form-control-sm form-control" id="" value="<%=category%>" name="lastname" placeholder="<%=category%>" type="text" readonly/>
          </div>

          <!-- Contact number -->
          <div class="form-group m-1">
            <label for="equipmentName"><b>Equipment Name</b></label>
            <input class="form-control-sm form-control" id="" value="<%=equipmentName%>" name="equipmentName" placeholder="<%=equipmentName%>" type="text" readonly/>
          </div>

          <!-- email -->
          <div class="form-group m-1">
            <label for="quantity"><b>Quantity</b></label>
            <input required class="form-control-sm form-control" id="" value="" name="quantity" placeholder="for example:8" type="number" autocomplete="off" />
          </div>

          <div class="form-group m-1">
            <label for="date"><b>Due Date</b></label>
            <input required class="form-control-sm form-control" id="" value="" name="date" placeholder="YYYY-MM-DD" type="date" autocomplete="off" />
          </div>

          <div class="form-group m-1">
            <label for="rent"><b>Rent As</b></label>
            <input required class="form-control-sm form-control" id="" value="<%=rent%>" name="rent" placeholder="<%=rent%>" type="text" autocomplete="off" readonly/>
          </div>

          <!-- password -->
          <!-- <div class="form-group m-1">
            <label for=""><b>Password</b></label>
            <input class="form-control-sm form-control" id="" name="password" placeholder="*******" type="password" />
          </div> -->
          <div data-name="check">
          <div class="btns" role="group" aria-label="Basic example">
            <a href="/home#rental">Back</a>
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
        </form>
      </div>
    </div>
  </div>

<script>
  var group_=(el,callback)=>{
  el.forEach((checkbox)=>{
  callback(checkbox)
       })
  }
  var group_el=document.querySelectorAll("*[data-name] > input")
  group_(group_el,(item)=>{
  item.onclick=(e)=>{
  group_(group_el,(item)=>{
  item.checked=false;
  })
  
  e.target.checked=true;
  }
  })
</script>
<script>
  // the selector will match all input controls of type :checkbox
// and attach a click event handler 
// the selector will match all input controls of type :checkbox
// and attach a click event handler 
$("input:checkbox").on('click', function() {
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});    
</script>
</body>
</html>