{% 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 %}
                        {# {{ form.as_p }} #}

                        {% 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"
                                       value="{{ obj.biodata.name|default_if_none:'' }}" required>

                            </div>
                            <div class="mb-2 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 {% if obj.role.id == role.id %} selected{% endif %}
                                                                                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 }}"
                                                            {% if country.code == contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                                {% endfor %}
                                            </select>
                                            <input id="contact" type="text" class="form-control"
                                                   value="{{ obj.biodata.local_contact|default_if_none:'' }}"
                                                   name="contact" placeholder="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"
                                                    style="width:18%; display:inline-block;">
                                                {% for country in countries %}
                                                    <option value="{{ country.code }}"
                                                            {% if country.code == other_contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                                {% endfor %}
                                            </select>
                                            <input id="other_contact" type="text"
                                                   class="form-control"
                                                   name="other_contact" placeholder="Other Contact"
                                                   value="{{ obj.biodata.local_other_contact|default_if_none:'' }}"
                                                   required style="width:80%; display:inline-block;">
                                        </div>

                                    </div>

                                </div>
                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="title">Salutation</label>
                                <select class="form-control" id="title" name="title">
                                    <option value="" selected disabled>Select Salutation</option>
                                    {% for salute in salutations %}
                                        <option {% if obj.biodata.title.id == salute.id %}selected{% endif %}
                                                value="{{ salute.id }}">{{ salute.name }}</option>
                                    {% endfor %}

                                </select>

                            </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" {% if obj.biodata.gender == 'M' %}selected{% endif %}>Male
                                    </option>
                                    <option value="F" {% if obj.biodata.gender == 'F' %}selected{% endif %}>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="other_contact">Mobile Money Number</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 }}"
                                                    {% if country.code == mm_contact_dial %}selected{% endif %}>{{ country.code }}</option>
                                        {% endfor %}
                                    </select>
                                    <input id="mm" type="text" class="form-control"
                                           name="mm" placeholder="Mobile Money Number"
                                           value="{{ obj.biodata.local_mm|default_if_none:'' }}"
                                           style="width:80%; display:inline-block;">
                                </div>

                            </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"
                                       value="{{ obj.biodata.email|default_if_none:'' }}" 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"
                                       value="{{ obj.biodata.nin|default_if_none:'' }}" 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" {% if obj.biodata.marital_status == 1 %}selected{% endif %}>
                                        Single
                                    </option>
                                    <option value="2" {% if obj.biodata.marital_status == 2 %}selected{% endif %}>
                                        Married
                                    </option>
                                    <option value="3" {% if obj.biodata.marital_status == 3 %}selected{% endif %}>
                                        Divorced
                                    </option>
                                    <option value="4" {% if obj.biodata.marital_status == 4 %}selected{% endif %}>
                                        Cohabitation
                                    </option>
                                    <option value="5" {% if obj.biodata.marital_status == 5 %}selected{% endif %}>
                                        Widowed
                                    </option>

                                </select>

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="account">Nationality</label>
                                <select class="form-control" name="country" id="account"
                                        required>
                                    <option value="">Select Account</option>
                                    {% for country in countries %}
                                        <option value="{{ country.code }}"
                                                {% if obj.biodata.country.code == country.code %}selected{% endif %}>{{ country.name }}</option>
                                    {% endfor %}

                                </select>

                            </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="1"
                                          placeholder="Location">{{ obj.biodata.location }}</textarea>
                            </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"
                                       value="{{ obj.biodata.nok|default_if_none:'' }}">

                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="nok_contact">Next of kin contact</label>
                                <input type="text" class="form-control" id="nok_contact"
                                       name="nok_contacts" placeholder="Enter Next of kin's contact"
                                       value="{{ obj.biodata.nok_contacts|default_if_none:'' }}">

                            </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"
                                       value="{{ obj.biodata.employee_no|default_if_none:'' }}" required>
                            </div>



                            {% if can_access_central_point and can_edit_staff_central %}
                                <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="{{ True }}"
                                                {% if obj.can_access_central == True %}selected{% endif %}
                                        >
                                            Yes
                                        </option>
                                        <option
                                                value="{{ False }}"
                                                {% if obj.can_access_central == False %}selected{% endif %}
                                        >
                                            No
                                        </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 }}"
                                                    {% if business.business in staff_businesses %}selected{% endif %}
                                            >
                                                {{ business.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    </div>
                                    <div class="alert alert-primary mt-2" role="alert">
                                      <span><span style="font-weight: bold">Note: </span><span>Default branch <span style="font-weight: bold">({{ business_context.branch.name }})</span> already accessible by this staff</span></span>
                                    </div>
                                    <!-- <small id="businessesHelp" class="form-text text-muted">Hold down “Control”, or
                                        “Command” on a Mac, to select more than one.</small> -->
                                </div>
                            {% endif %}
                        </div>

                        <div class="modal-footer">
                            <button type="reset" class="btn btn-success"
                                    onclick="location.href='{{ obj.get_absolute_url }}'"><i class="fa fa-eye"></i>
                                Back to detail
                            </button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>

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

        {% comment %}
        {% for business in staff_businesses %}
            {{ business.id }}. {{ business.name }} - {{ business.code }}
        {% empty %}
            NO BUSINESSES
        {% endfor %}
        {% endcomment %}
        <!-- End col -->
    </div>
{% endblock %}