{% extends 'extends/layout.html' %}
{% load static %}
{% load countries %}
{% block content %}
    {% get_countries as countries %}
    {% block styles %}
        <link rel="stylesheet" href="{% static 'flags/sprite.css' %}">

    {% endblock %}
    {% block scripts %}
        <script>
            $("textarea").each(function () {
                this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
            }).on("input", function () {
                this.style.height = "auto";
                this.style.height = (this.scrollHeight) + "px";
            });

            $(document).ready(function () {
                $('#businesses').select2({
                    placeholder: "Select branches",
                    allowClear: true,
                    width: '100%'
                });
            });
        </script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        {% if form.errors %}
                            <div class="row w-100">
                                {% for field in form %}
                                    {% if field.errors %}
                                        <div class="alert alert-danger col w-100" role="alert">
                                            <span class="fw-bold">{{ field.label }}:</span>
                                            {{ field.errors }}
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}

                        <div class="row">
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="name">Full Name</label>
                                <input type="text" class="form-control" id="name" name="name"
                                       placeholder="Enter Full name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="role">Staff Role</label>
                                <select class="form-control" name="role" id="role"
                                        required>
                                    <option value="" selected disabled>Select Role</option>
                                    {% for role in roles %}
                                        <option value="{{ role.id }}">{{ role.title }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="mb-2 col-md-6">
                                        <label class="form-label" for="contact">Primary Contact</label>
                                        <div class="form-spacing form-inline">
                                            <select name="code" class="form-control" required
                                                    style="width:18%; display:inline-block;">
                                                {% for country in countries %}
                                                    <option value="{{ country.code }}">{{ country.name }}</option>
                                                {% endfor %}
                                            </select>
                                            <input id="contact" type="text" class="form-control"
                                                   name="contact" placeholder="Primary Contact"
                                                   required style="width:80%; display:inline-block;">
                                        </div>

                                    </div>


                                    <div class="mb-2 col-md-6">
                                        <label class="form-label" for="other_contact">Other Contact</label>
                                        <div class="form-spacing form-inline">
                                            <select name="code1" class="form-control" required
                                                    style="width:18%; display:inline-block;">
                                                {% for country in countries %}
                                                    <option value="{{ country.code }}">{{ country.name }}</option>
                                                {% endfor %}
                                            </select>
                                            <input id="other_contact" type="text"
                                                   class="form-control"
                                                   name="other_contact" placeholder="Other Contact"
                                                   style="width:80%; display:inline-block;">
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="gender">Gender</label>
                                <select class="form-control" id="gender" name="gender" required>
                                    <option value="" selected disabled>Select Gender</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>

                                </select>

                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="dob">Date of birth</label>
                                <br>
                                {{ form.dob }}

                            </div>
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="email">Email</label>
                                <input type="email" class="form-control" id="email" name="email"
                                       placeholder="Enter Email">

                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="nin">NIN</label>
                                <input type="text" class="form-control" id="nin" name="nin"
                                       placeholder="Enter NIN">

                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="marital">Marital Status</label>
                                <select class="form-control" name="marital_status" id="marital"
                                        required>
                                    <option value="" selected disabled>Select Marital</option>
                                    <option value="1">Single</option>
                                    <option value="2">Married</option>
                                    <option value="3">Widowed</option>
                                    <option value="4">Divorced</option>

                                </select>

                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="nok">Next of kin</label>
                                <input type="text" class="form-control" id="nok" name="nok"
                                       placeholder="Enter Next of kin">
                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="location">Location</label>
                                <textarea id="location" name="location" class="form-control"
                                          cols="4" rows="2" placeholder="Location"></textarea>
                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="nok_contact">Next of kin contact</label>
                                <div class="form-spacing form-inline">
                                    <select name="code2" class="form-control" required
                                            style="width:18%; display:inline-block;">
                                        {% for country in countries %}
                                            <option value="{{ country.code }}">{{ country.code }}</option>
                                        {% endfor %}
                                    </select>
                                    <input id="nok_contacts" type="text" class="form-control"
                                           name="nok_contacts" placeholder="Next of kin Contact"
                                           required style="width:80%; display:inline-block;">
                                </div>
                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="name">Employee number</label>
                                <input type="text" class="form-control" id="employee_no" name="employee_no"
                                       placeholder="Enter employee number" required>
                            </div>

                            {% if can_access_central_point %}

                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="can_access_central">Central Access</label>
                                    <select class="form-control" name="can_access_central" id="can_access_central" required>
                                        <option value="{{ False }}">No</option>
                                        <option value="{{ True }}">Yes</option>
                                    </select>
                                </div>

                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="businesses">Other Accessible Branches</label>
                                    <div>
                                    <select class="form-control select2" data-toggle="select2" name="businesses" id="businesses" multiple="multiple"
                                            >
                                        {% for business in businesses %}
                                            <option
                                                    value="{{ business.business.id }}"
                                            >{{ business.name }}</option>
                                        {% endfor %}
                                    </select>
                                    </div>
                                    <div class="alert alert-primary mt-2" role="alert">
                                      <span><span style="font-weight: bold">Note: </span><span>Current branch will be attached automatically.</span></span>
                                    </div>
                                </div>
                            {% endif %}

                        </div>


                        <div class="modal-footer">
                            <button type="reset" class="btn btn-warning">Clear</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <!-- End col -->

        <!-- End col -->
    </div>
{% endblock %}