{% extends "index.html"%} {% block content%}
<div class="card">
  <div class="card-header text-light bg-gradient-danger">
    <h3>Edit Data Peminjaman {{peminjaman.member.nama}}</h3> </div>
  <hr>
  <div class="card-body">
    <div class="card-body col-5">
    <form method="post" action="{% url 'updatepeminjaman' peminjaman.id %}" id="yourForm"  enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-group row">
          <label for="tanggal_kembali" class="col-4 col-form-label"> Tanggal Kembali</label> 
          <div class="col-8">
            <input value="{{tanggal_kembali}}"  id="tanggal_kembali" name="tanggal_kembali" placeholder="Masukan  tanggal kembali" type="date" class="form-control" required="required">
          </div>
        </div> 
        <div class="form-group row">
            <label class="col-4 col-form-label" for="nama">Judul Buku</label> 
            <div class="col-8">
              <select class="form-control" aria-label="Default select example" name="buku_id">
                <option >Open this select menu</option>
                {% for buku in buku %}
                  {% if buku.id == peminjaman.buku_id %}
                    <option value="{{buku.id}}" selected>{{buku.judul}}</option>
                  {% else %}
                    <option value="{{buku.id}}">{{buku.judul}}</option>
                  {% endif %}
                {%endfor%}
              </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-4 col-form-label" for="nama">Nama Peminjam</label> 
            <div class="col-8">
              <select class="form-control" aria-label="Default select example" name="member_id">
                <option>Open this select menu</option>
                {% for member in member %}
                  {% if member.id == peminjaman.member_id %}
                    <option value="{{member.id}}" selected>{{member.username}}</option>
                  {% else %}
                    <option value="{{member.id}}">{{member.username}}</option>
                  {% endif %}
                  {%endfor%}
              </select>
            </div>
        </div>
        <div class="form-group row">
          <label for="tanggal_pengembalian" class="col-4 col-form-label"> Tanggal Pengembalian</label> 
          <div class="col-8">
            <input id="tanggal_pengembalian"  value="{{tanggal_pengembalian}}" name="tanggal_pengembalian"  type="date"  class="form-control" >
          </div>
        </div> 
        <div class="form-group row">
          <label for="status" class="col-4 col-form-label"> Status Peminjaman</label> 
          <div class="col-8">
            <input onchange="updateCheckboxValue()" {% if peminjaman.status %} checked {% endif %} id="status" name="status" type="checkbox" class="form-control" >
          </div>
        </div> 
        <hr>
        <a href="{% url 'datapeminjaman'%}" type="button" class="btn btn-primary">Back </a>
        <button type="submit" name="submit"  class="btn btn-warning align-items-center">Update </button>
      </form>
    </div>
  </div>  
</div>

<script>
  function updateCheckboxValue() {
      var checkbox = document.getElementById("status");
      if (checkbox.checked) {
          checkbox.value = "true";
      } else {
          checkbox.value = "false";
      }
  }  
  function updatevalue(){
    var tanggal_pengembalian = document.getElementById("tanggal_pengembalian");
    if (tanggal_pengembalian.value == ''){
        tanggal_pengembalian.value = null;
    }
  } 
  </script>
{% endblock content%}