{% extends 'dashboard/gate_keeper_dashboard/main.html' %}
{% load static %}

{% block content %}
<!-- jQuery (Required for your scripts) -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

<!-- Flatpickr (Time Picker) -->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">-->
<!--<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>-->

<!-- Bootstrap JS (Optional, required for alert close buttons, modals, etc.) -->
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>-->
<!-- Select2 CSS -->
<!--<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />-->

<!-- Select2 JS (AFTER jQuery) -->
<!--<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>-->
<!-- Order matters: jQuery first, then Select2 -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<!--<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />-->
<!--<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>-->
<!-- Styles for Autocomplete Suggestions -->
<style>
    #mobileSuggestions, #emailSuggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
        max-height: 179px;
        overflow-y: auto;
        z-index: 1001;
        display: none;
        width: 100%;
    }

    #mobileSuggestions option, #emailSuggestions option {
        padding: 10px;
        cursor: pointer;
    }

    #mobileSuggestions option:hover, #emailSuggestions option:hover {
        background-color: #f0f0f0;
    }

    /* Media Queries for Responsiveness */
    @media (max-width: 768px) {
        #mobileSuggestions, #emailSuggestions {
            max-width: 90%;
            left: 5%;
            right: 5%;
        }
    }

    @media (max-width: 576px) {
        #mobileSuggestions, #emailSuggestions {
            max-height: 150px;
        }
    }

    #timepicker, #timepickere {
        background-color: #fff !important;
    }
</style>

<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Forms/</span> Add Appointment</h4>

<!-- Messages Section -->
{% 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">
        {{ message }}
        <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    {% endfor %}
{% endif %}

<!-- Form Section -->
<div class="row">
    <div class="col-xl">
        <div class="card mb-4">
        
            <div class="card-body">
                <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="card-body">
                <div class="mt-3 mb-3">
                  <label class="form-label">Visitor's Name:</label>
                  {{ all_user.first_name }} {{ all_user.last_name }}
                </div>
                <div class="mt-3 mb-3">
                  <label class="form-label">Visitor's Email:</label>
                  {{ all_user.email |default:'' }}
                </div>
                <div class="mt-3 mb-3">
                  <label class="form-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="mt-3 mb-3">
                  <label for="exampleInputDate1" class="form-label">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="mt-3 mb-3">
                  <label for="exampleInputTime1" class="form-label">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="time" class="form-control" id="timepicker" placeholder="Select time" name="time" required>
                  </div>
                </div>
                <div class="mt-3 mb-3">
                  <label for="exampleInputTime1" class="form-label">Visitors Timing </label>
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-fw fa-clock-o"></i></span>
                    <input type="time" class="form-control" id="timepickeres" placeholder="Select time" name="visitors_timing">
                  </div>
                </div>
                <div class="mt-3 mb-3">
                  <label class="form-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 %}>Interviewer</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="mb-3">
                    <label class="form-label" for="visitor_company_name">Visitor Company Name</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="visitor_company_name" name="visitor_company_name" placeholder="Enter Visitor Company Name" value="{{ all_user.visitor_company_name }}">
                    </div>
                </div>
                <div class="mt-3 mb-3">
                  <label class="form-label">Purpose <span style="color:red">*</span></label>
                  <textarea class="form-control" rows="3" placeholder="Purpose ..." name="Purpose" required></textarea>
                </div>
                <div class="mt-3 mb-3">
                  <label class="form-label">Other Detail</label>
                  <textarea class="form-control" rows="3" placeholder="Other Detail ..." name="detail"></textarea>
                </div>

              <div class="mt-3 d-flex justify-content-end">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
            </div>
        </form>

            </div>
        </div>
    </div>
</div>
<script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'default/header/flatpickr.min.css' %}">
<script src="{% static 'default/header/flatpickr.js' %}"></script>
<script src="{% static 'plugins/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'select2/js/select2.min.js' %}"></script>
<!-- Scripts -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Flatpickr for all time pickers
        flatpickr("#timepicker, #timepickere", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K",  // 12-hour format with AM/PM
            time_24hr: false,
            defaultDate: new Date()  // Set current time by default
        });

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


    });
</script>


{% endblock %}