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


<h4 class="fw-bold py-3 mb-4"> My Profile</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="" autocomplete="off">
                    {% csrf_token %}
                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-12 row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Employee Id</label>
                                <input type="text" class="form-control" id="employee_id" placeholder="Employee Id" name="employee_id" value='{{gate_keeper_user.employee_code}}' required disabled>
                             </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Email address<span style="color:red">*</span></label>
                                <input type="text" class="form-control"  placeholder="Email" name="Email" value='{{gate_keeper_user.email}}'>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" >First name  <span style="color:red">*</span></label>
                                <input type="text" class="form-control"  placeholder="Enter Firstname" name="Firstname" value='{{gate_keeper_user.first_name}}' required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Last name<span style="color:red">*</span></label>
                                <input type="text" class="form-control"  placeholder="Enter Lastname" name="Lastname" value='{{gate_keeper_user.last_name}}' required>
                            </div>

                            


                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Password</label>
                                <input type="password" class="form-control"  placeholder="Password" name="Password">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Confirm Password</label>
                                <input type="password" class="form-control"  placeholder="Confirm Password" name="Confirm_Password">
                            </div>
                             

                            

                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Mobile Number<span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="mobileNumberInput" placeholder="Enter Mobile Number" pattern="[0-9]*" inputmode="numeric" maxlength= "11" minlength= "10" name="mobile" value='{{gate_keeper_user.mobile}}' required oninput="validateNumericInput(this)">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label" >Choose Gender<span style="color:red">*</span></label>
                                <select class="form-control" name="gender" required>
                                    <option>Choose Gender</option>
                                    <option value="Male"{% if gate_keeper_user.gender == 'Male' %}selected{% endif %}>Male</option>
                                    <option value="Female" {% if gate_keeper_user.gender == 'Female' %}selected{% endif %}>Female</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" >Address <span style="color:red">*</span></label>
                                <textarea  class="form-control" rows="3" placeholder="Enter your address ..." name="Address" required>{{gate_keeper_user.address}}</textarea>
                            </div>
                            <div class="mb-3">
                               {% if gate_keeper_data.image  %}
                                  <img src="{{ gate_keeper_data.users_images  }}{{ gate_keeper_data.image }}" alt="Visitor Image"  class="w-px-30 h-auto rounded-circle">
                              {% else %}
                                  <img src="{{gate_keeper_data.default_image}}" alt="Default Image" style="width: 100px; height: 97px;" class="img-circle">
                              {% endif %}
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Profile Image</label>
                                <input type="file" id="exampleInputFile" class='form-control'  name="image">
                            </div>
                            {% if employee_user.document %}
                                {% with file_extension=gate_keeper_user.document.name|slice:'-4:' %}
                                    {% if file_extension == '.pdf' %}
                                        <p>Uploaded Document:
                                            <a href="{{ gate_keeper_user.document.url }}" target="_blank">
                                                 {{ gate_keeper_user.document.name }}
                                            </a>
                                        </p>
                                    {% elif file_extension in '.jpg .png .jpeg' %}
                                        <p>Uploaded Image:
                                            <a href="{{user_data.document}}{{ gate_keeper_user.document.url }}" target="_blank">
                                                <img src="{{user_data.document}}{{ gate_keeper_user.document.url }}" alt="Uploaded Image" style="width: 100px; height: auto;">
                                            </a>
                                            <br>
                                            {{ gate_keeper_user.document.name }}
                                        </p>
                                    {% else %}
                                        <p>Uploaded Document:
                                            <a href="{{gate_keeper_user.document}}" target="_blank">
                                                {{ gate_keeper_user.document.name }}
                                            </a>
                                        </p>
                                    {% endif %}
                                {% endwith %}
                            {% else %}
                                <p>No document uploaded.</p>
                            {% endif %}
                            <div class="mb-3">
                                <label class="form-label" >Upload Document</label>
                                <input type="file" class="form-control" name="document">
                            </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">Update</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>


{% endblock %}