{% extends 'dashboard/employee_dashboard/main.html' %}
{% load static %}
{% block content %}


<h4 class="fw-bold py-3 mb-4"> 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="btn-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-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Quick Add Appointment</h5>
                <small class="text-muted float-end">Control Panel</small>
            </div>
            <div class="card-body">
                <form role="form" method="POST" enctype="multipart/form-data" action="" autocomplete="off" onsubmit="const btn=this.querySelector('button[type=submit]'); btn.disabled=true; btn.innerText='Processing...';">
                    {% csrf_token %}
                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Visitor's Name:</label>
                                <div class="input-group input-group-merge">
                                    {{ all_user.first_name }} {{ all_user.last_name }}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Visitor's Email:</label>
                                <div class="input-group input-group-merge">
                                    {{ all_user.email |default:''}}
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="employee-dropdown">Employee <span style="color:red">*</span></label>
                                <select class="form-control select2" id="employee-dropdown" name="employee" required>
                                    <option value="">Choose employee</option>
                                    <option value="{{ user_id }}" selected>{{employee_code}}{{ first_name }} {{ user_last_name }}</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="datepicker">Check In Date <span style="color:red">*</span></label>
                                <div class="input-group">
                                    <input type="date" class="form-control" id="datepicker" name="date" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="timepicker">Check In Time <span style="color:red">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="timepicker" name="time" placeholder="Select time" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="visitorsTiming">Visitors Timing</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="visitorsTiming" name="visitors_timing" placeholder="Select time">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="vtd">Visitors Type <span style="color:red">*</span></label>
                                <select class="form-control" id="vtd" name="visitors_type" required>
                                    <option value="">Choose visitors type</option>
<!--                                    <option value="auditor">Auditor</option>-->
<!--                                    <option value="candidate">Candidate</option>-->
<!--                                    <option value="customer">Customer</option>-->
<!--                                    <option value="general">General</option>-->
<!--                                    <option value="government officer">Government Officer</option>-->
<!--                                    <option value="interviewer">Interviewer</option>-->
<!--                                    <option value="vendor">Vendor</option>-->
<!--                                    <option value="other">Other</option>-->
                                    <option value="auditor"{% if all_appointmentes.visitors_type == 'auditor'  %} selected {% endif %}>Auditor</option>
                                    <option value="candidate"{% if all_appointmentes.visitors_type == 'candidate'  %} selected {% endif %}>Candidate </option>
                                    <option value="customer"{% if all_appointmentes.visitors_type == 'customer'  %} selected {% endif %}>Customer</option>
                                    <option value="general"{% if all_appointmentes.visitors_type == 'general'  %} selected {% endif %}>General</option>
                                    <option value="government officer"{% if all_appointmentes.visitors_type  == 'government officer'  %} selected {% endif %}>Government Officer</option>
                                    <option value="interviewer"{% if all_appointmentes.visitors_type == 'interviewer'  %} selected {% endif %}>Inter viewer</option>
                                    <option value="vendor"{% if all_appointmentes.visitors_type == 'vendor'  %} selected {% endif %}>vendor</option>
                                    <option value="other"{% if all_appointmentes.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_appointmentes.visitor_company_name|default_if_none:'' }}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="Purpose">Purpose <span style="color:red">*</span></label>
                                <textarea class="form-control" id="Purpose" name="Purpose" rows="3" placeholder="Purpose ..." required>{{all_appointmentes.purpose}}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="detail">Other Detail</label>
                                <textarea class="form-control" id="detail" name="detail" rows="3" placeholder="Other Detail ...">{{all_appointmentes.detail}}</textarea>
                            </div>
                            <div class="mt-3 mb-3">
                              <label class="form-label">Device</label>
                              <textarea class="form-control" rows="3" placeholder="Device ..." name="devices">{{all_appointmentes.devices|default_if_none:""}}</textarea>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="user_id" value="">
                    <div class="mt-3 d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary" id="btn_submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Scripts -->
<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>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // === Flatpickr Initialization ===
    flatpickr("#timepicker", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K",
        time_24hr: false,
        defaultDate: new Date()
    });

    flatpickr("#visitorsTiming", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K",
        time_24hr: false
    });

    // === Datepicker: Set Min Date and Default to Today ===
    const dateInput = document.getElementById('datepicker');
    const today = new Date().toISOString().split('T')[0];
    dateInput.min = today;
    dateInput.value = today;

    // === Initialize Select2 ===
    $('.select2').select2({
        placeholder: "Select an option",
        allowClear: false // REMOVE clear (x) button
    });

    $('#employee-dropdown').select2({
        placeholder: "Select an employee",
        allowClear: false // REMOVE clear (x) button
    });

    // === Handle Employee Change and Load Company/Dept/Location ===
    $('#employee-dropdown').on('change', function () {
        const url = "{% url 'gate_keeper_ajax_load_employee' %}";
        const employeeId = $(this).val();

        if (!employeeId) {
            $("#company_ide").html('<option value="">-- Select Company --</option>');
            $("#department_ide").html('<option value="">-- Select Department --</option>');
            $("#location_id").html('<option value="">-- Select Location --</option>');
            return;
        }

        $.ajax({
            url: url,
            data: { employee_id: employeeId },
            success: function (data) {
                $("#company_ide").html('');
                $("#department_ide").html('');
                $("#location_id").html('');

                if (data.company[0]?.id) {
                    $("#company_ide").append(`<option value="${data.company[0].id}" selected>${data.company[0].company_name}</option>`);
                }
                if (data.departments[0]?.id) {
                    $("#department_ide").append(`<option value="${data.departments[0].id}" selected>${data.departments[0].department_name}</option>`);
                }
                if (data.location[0]?.id) {
                    $("#location_id").append(`<option value="${data.location[0].id}" selected>${data.location[0].location_name}</option>`);
                }
            },
            error: function (xhr, status, error) {
                console.error('AJAX Error:', error);
            }
        });
    });

});
</script>
{% endblock %}