{% extends 'basic.html' %}
{% load humanize i18n static %}
{% block title %}
Profil
{% endblock %}
{% block head %}
{% endblock %}

{% block content %}
{% comment %} <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> {% endcomment %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>

{% language 'id' %}
<main class="h-100">

  {% include "header.html" %}
  <!-- main page content -->
  <div class="main-container container">
    <!--card pelayanan-->
    <div class="row mb-2">
      {% for x in messages %}
      <button class="btn btn-primary col-lg-12">{{ x }}</button>
      {% endfor %}
    </div>

<div class="container mt-5">
  <h2>Biodata saya</h2>
  <form action="{% url 'profil' %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row">

      <!-- TTD -->
      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="first_name" class="form-label">Nama Depan</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="first_name" name="first_name" value="{{biodata.first_name}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="last_name" class="form-label">Nama Belakang</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="last_name" name="last_name" value="{{biodata.last_name}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="nomor_induk_kependudukan" class="form-label">NIK</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="nomor_induk_kependudukan" name="nomor_induk_kependudukan" value="{{biodata.nomor_induk_kependudukan}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="alamat" class="form-label">Alamat</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="alamat" name="alamat" value="{{biodata.alamat}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="kontak" class="form-label">Kontak</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="kontak" name="kontak" value="{{biodata.kontak}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="pekerjaan" class="form-label">Profesi</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="pekerjaan" name="pekerjaan" value="{{biodata.pekerjaan}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="email" class="form-label">Email</label>
        <div style="display:flex">
          <input type="text" class="form-control" id="email" name="email" value="{{biodata.email}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
          <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
        <div style="display:flex">
          <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir" value="{{biodata.tanggal_lahir}}">
        </div>
      </div>

      <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
        <label for="ttd" class="form-label">Tanda Tangan Digital <span>(jpeg,jpg,png)</span></label>
        <div style="display:flex">
          <input type="text" class="form-control" id="ttd_file" name="ttd" readonly accept="image/png, image/jpeg">
          <div style="margin-left:10px">
              <button class="btn btn-info btn-ttd text-white" type="button" onclick="btnttd()">ubah</button>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <div class="row">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-primary" id="submit">Submit</button>
        </div>
      </div>
    </div>

  </form>
</div>

  {% include 'footer.html' %}


</main>
<script>
 function btnttd(){
    $('#ttd_file').prop('type', 'text');
    $('#ttd_file').prop('value', '')
     ttd = $('#ttd_file').val()
     ttdMD5 = CryptoJS.MD5(ttd).toString()
    if($('#ttd_file').prop('readonly')) {
        $('#ttd_file').prop('readonly', false);
        $('#ttd_file').prop('type', 'file');
      } else {
        $('#ttd_file').prop('readonly', true);
        $('#ttd_file').prop('value', ttdMD5)
      }
      updateSubmitVisibility();
 }
 $(document).ready(function(){
    ttd = $('#ttd_file').val()
    ttdMD5 = CryptoJS.MD5(ttd).toString()
    $('#ttd_file').prop('value', ttdMD5)

    updateSubmitVisibility();
 })
 function updateSubmitVisibility() {
    var first_name = $('#first_name');
    var last_name = $('#last_name');
    var ttd_file = $('#ttd_file');
    
    if (first_name.prop('readonly') && last_name.prop('readonly') && ttd_file.prop('readonly')) {
      $('#submit').hide();
    } else {
      $('#submit').show();
    }
  }

</script>

{% endlanguage %}
{% endblock %}