{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>Add Attendance</title>
{% endblock title %}
{% block Style %}

{% endblock Style %}


{% block MainContent %}

{% if messages %}
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}
{% endif %}


<div class="contents">

  {% if request.user.is_superuser == True %}
  {% include 'attendance_app/attendance_log/create/super_admin_forms.html' %}
  {% endif %}

  {% if request.user.user_type == 'Mother_Organization_admin' %}
  {% include 'attendance_app/attendance_log/create/mother_admin_forms.html' %}
  {% endif %}

  {% if request.user.user_type == 'Sister_Organization_admin' %}
  {% include 'attendance_app/attendance_log/create/sister_admin_forms.html' %}
  {% endif %}

  {% if request.user.user_type == 'Branch' or request.user.user_type == 'Regular' %}
  {% include 'attendance_app/attendance_log/create/branch_admin_forms.html' %}
  {% endif %}
  
</div>


{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}

{% block JS %}
<script type=text/javascript>
    var load_branch_url = "{% url 'ajax_load_branchs' %}"
    var load_emp = "{% url 'salary-employee-load' %}"
    var load_sister_organization_url = "{% url 'sister-organization-load' %}"
    var load_branch_organization_url = "{% url 'load-branch-organization' %}"
    var load_department_url = "{% url 'ajax-load-department' %}"
    var load_attendance_device_url = "{% url 'branch-attendance-device-load' %}"
    var ajax_load_employee_log_url = "{% url 'ajax-load-employee-log' %}"
    $("#id_datetime").attr("required", "True");
   



  $("#id_date").change(function () { 
    var date = $(this).val();  
    var employee = $("#id_employee").val()
    console.log(date)
    if (employee){
      console.log(employee)
    

    $.ajax({                       
    url: ajax_load_employee_log_url,
    
    data: {
        'employee_id': employee,
        'date': date,
          
    },
    success: function (data) { 
        console.log(data['department']);
        // $("#id_sister_organization").html(data);  
        $("#employee-name").html(`${data['employee']}`);  
        const employee_card = 
          `
          <div class="card h-5"  > 
          <div class="card-body">
              <h5 class="card-title" >Employee Name : ${data['employee']} </h5>
             
              <h6 class="card-subtitle mb-2 text-muted" >Department : ${data['department']}</h6>
              <h6 class="card-subtitle mb-2 text-muted" >Designation : ${data['designation']}</h6>
              
              <h6 class="card-subtitle mb-2 text-muted" >Date : ${data['date']}</h6>
              <h6 class="card-subtitle mb-2 text-muted" >In Time : ${data['in_time']}</h6>
              <h6 class="card-subtitle mb-2 text-muted" >Out Time :${data['out_time']}</h6>



         
            </div>
            </div>
            
            `
          
          $(employee_card).appendTo('#log-card');

        }
    });
  }
});


$("#id_employee").change(function () { 
    var employee = $(this).val();  
    var date = $("#id_date").val()
    console.log(date)
    if (date){

    

    $.ajax({                       
    url: ajax_load_employee_log_url,
    
    data: {
        'employee_id': employee,
        'date': date,
          
    },
    success: function (data) { 
        console.log(data['department']);
        // $("#id_sister_organization").html(data);  
        $("#employee-name").html(`${data['employee']}`);  
        const employee_card = 
          `
          <div class="card h-5"  >
            <div class="card-header">
                    Featured
            </div> 
          <div class="card-body">
              <h5 class="card-title" >Employee Name : ${data['employee']} </h5>
             
              <h6 class="card-subtitle mb-2 text-muted" >Department : ${data['department']}</h6>
              <h6 class="card-subtitle mb-2 text-muted" >Designation : ${data['designation']}</h6>
              
              <h6 class="card-subtitle mb-2 text-muted" >Date : ${data['date']}</h6>
              <h6 class="card-subtitle mb-2 text-muted" >In Time : ${data['in_time'].toLocaleString('en-US', { hour: 'numeric', hour12: true })}</h6>
              <h6 class="card-subtitle mb-2 text-muted" >Out Time :${data['out_time'].toLocaleString('en-US', { hour: 'numeric', hour12: true })}</h6>



         
            </div>
            </div>
            
            `
          
          $(employee_card).appendTo('#log-card');

        }
    });
  }
});


  
  
  $('#id_date').attr("type","date");
  $('#id_time').attr("type","time");









</script>

<script src="{% static 'js/attendance_app/attendance_log/create.js' %} "></script>

{% endblock JS %}