{% extends 'extends/layout.html' %}
{% load static %}
{% load countries %}

{% block content %}
    {% get_countries as countries %}
    <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 %}

                        <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="{{ member.biodata.name|default_if_none:'' }}" required>
                            </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 value="{{ salute.id }}"
                                                {% if member.biodata.title.id == salute.id %}selected{% endif %}>{{ 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 member.biodata.gender == 'M' %}selected{% endif %}>Male
                                    </option>
                                    <option value="F" {% if member.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="contact">Primary Contact *</label>
                                <div class="form-spacing form-inline">
                                    <select name="code" class="form-control" 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="{{ member.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="{{ member.biodata.local_other_contact|default_if_none:'' }}"
                                           style="width:80%; display:inline-block;">
                                </div>

                            </div>


                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="mm">Mobile Money Number</label>
                                <div class="form-spacing form-inline">
                                    <select name="code2" class="form-control"
                                            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="{{ member.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="{{ member.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="{{ member.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 member.biodata.marital_status == 1 %}selected{% endif %}>
                                        Single
                                    </option>
                                    <option value="2" {% if member.biodata.marital_status == 2 %}selected{% endif %}>
                                        Married
                                    </option>
                                    <option value="3" {% if member.biodata.marital_status == 3 %}selected{% endif %}>
                                        Divorced
                                    </option>
                                    <option value="4" {% if member.biodata.marital_status == 4 %}selected{% endif %}>
                                        Cohabitation
                                    </option>
                                    <option value="5" {% if member.biodata.marital_status == 5 %}selected{% endif %}>
                                        Widowed
                                    </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"
                                       value="{{ member.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="{{ member.biodata.nok_contacts|default_if_none:'' }}">

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="account">Nationality</label>
                                <select class="form-control" name="country" id="account">
                                    <option value="">Select Account</option>
                                    {% for country in countries %}
                                        <option value="{{ country.code }}"
                                                {% if member.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">{{ member.biodata.location|default_if_none:'' }}</textarea>
                            </div>

                        </div>

                        <div class="modal-footer d-flex justify-content-between">
                            <a href="{{ member.get_absolute_url }}" class="btn btn-success">
                                <i class="fa fa-backward"></i> Back to detail</a>
                            <button type="submit" class="btn btn-primary"> Save Changes</button>
                        </div>

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

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