{% load static %}
{% include 'dashboard/gate_keeper_dashboard/header.html' %}
{% include 'dashboard/gate_keeper_dashboard/body.html' %}
<!-- Right side column. Contains the navbar and content of the page -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div style="padding: 10px;">
      {% if messages %}
          {% for message in messages %}
          <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% endif %}" role="alert" id="success-alert">
  <!--                            <div class="alert alert-success" role="alert" id="success-alert">-->
              {{message}}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          {% endfor %}
      {% endif %}
    </div>
    <section class="content-header">
      <h1>
        Add Appointment
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Add Appointment</li>
      </ol>
    </section>
    <section class="content">
    <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-md-6">
                <!-- general form elements -->
                <div class="box box-primary">
                  <div class="box-header">
                    <h3 class="box-title">Quick Add Appointment</h3>
                  </div><!-- /.box-header -->
                  <!-- form start -->
                  <form role="form" method="POST" enctype="multipart/form-data" action="" onsubmit="const btn=this.querySelector('button[type=submit]'); btn.disabled=true; btn.innerText='Processing...';">
                    {% csrf_token %}
                    <div class="box-body">
                      <div class="form-group">
                          <label>Visitor's Name:</label>
                      
                        {{ all_user.first_name }} {{ all_user.last_name }}
                        
                      </div>
                      <div class="form-group">
                        <label>Visitor's Email:</label>
                      
                        {{ all_user.email |default:'' }}
                        
                      </div>
                        <div class="form-group">
                            <label>Employee <span style="color:red">*</span></label>
                            <select class="form-control select2" name="employee">
                                <option value="">Choose employee</option>
                                {% for i in all_employee %}
                                    <option value="{{ i.id }}">{{i.employee_code}} {{ i.first_name }} {{ i.last_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputDate1">Date <span style="color:red">*</span></label>
                            <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="date" class="form-control"  id="datepicker" placeholder="" name="date" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputTime1">Time <span style="color:red">*</span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-fw fa-clock-o"></i></span>
                                <input type="text" class="form-control" id="timepicker" placeholder="Select time" name="time" required>
                            </div>
                        </div>
                        <div class="form-group">
                          <label for="exampleInputTime1">Visitors Timing </label>
                          <div class="input-group">
                              <span class="input-group-addon"><i class="fa fa-fw fa-clock-o"></i></span>
                              <input type="text" class="form-control" id="timepickere" placeholder="Select time" name="visitors_timing">
                          </div>
                        </div>
                        <div class="form-group">
                            <label>Visitors Type <span style="color:red">*</span></label>
                            <select class="form-control select2" name="visitors_type">
                                <option value="">Choose visitors type</option>
                                <option value="auditor"{% if all_user.visitors_type == 'auditor'  %} selected {% endif %}>Auditor</option>
                                <option value="candidate"{% if all_user.visitors_type == 'candidate'  %} selected {% endif %}>Candidate </option>
                                <option value="customer"{% if all_user.visitors_type == 'customer'  %} selected {% endif %}>Customer</option>
                                <option value="general"{% if all_user.visitors_type == 'general'  %} selected {% endif %}>General</option>
                                <option value="government officer"{% if all_user.visitors_type == 'government officer'  %} selected {% endif %}>Government Officer</option>
                                <option value="interviewer"{% if all_user.visitors_type == 'interviewer'  %} selected {% endif %}>Inter viewer</option>
                                <option value="vendor"{% if all_user.visitors_type == 'vendor'  %} selected {% endif %}>vendor</option>
                                <option value="other"{% if all_user.visitors_type == 'other'  %} selected {% endif %}>Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                          <label>Purpose <span style="color:red">*</span></label>
                          <textarea class="form-control" rows="3" placeholder="Purpose ..." name="Purpose" required></textarea>
                        </div>
                        <div class="form-group">
                          <label>Other Detail</label>
                          <textarea class="form-control" rows="3" placeholder="Other Detail ..." name="detail"></textarea>
                        </div>
                        
						<!--<div class="form-group col-lg-6">-->
						<!--	<label>Access Card <span style="color:red">*</span></label>-->
						<!--	<select name="employe_API" id="employe_API" class="form-control" required>-->
						<!--	{% for employees in employees_without_areas.data  %}-->
		
						<!--		<option value="{{employees.id}}">{{employees.first_name}}</option>-->
						<!--	{% endfor %}-->
						<!--	</select>-->
						<!--</div>-->
						<!--<div class="form-group col-lg-6">-->
						<!--	<label>Area </label>-->
						<!--	<select name="Area[]" id="emp_area" class="form-control" multiple="multiple">-->
						<!--	{% for area in api_data.data  %}-->
						<!--		<option value="{{area.id}}">{{area.area_name}}</option>-->
						<!--	{% endfor %}-->
						<!--	</select>-->
						<!--</div>-->
                        
                    </div>
  
                    <div class="box-footer">
                      <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                  </form>
                </div><!-- /.box -->
  
  
              </div>
            </div>   <!-- /.row -->
        </div>
    </section>
</div>
{% include 'dashboard/visitors_dashboard/footer.html' %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Flatpickr for timepicker
        flatpickr("#timepicker", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // AM/PM format
            time_24hr: false, // Use 12-hour format
            defaultDate: new Date()
        });

        // Set the minimum date for datepicker
        var dateInput = document.getElementById('datepicker');
        var today = new Date().toISOString().split('T')[0];
        dateInput.setAttribute('min', today);
        dateInput.value = today;

        // Initialize Select2
        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#emp_area').multiselect({search: true,});
    });
</script>
