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

{% block content %}
    {% get_countries as countries %}
    {% block scripts %}
        <script>
            $('#new_password1, #new_password2').on('keyup', function () {
                if ($('#new_password1').val() == $('#new_password2').val()) {
                    $('#message').html('Matching').css('color', 'green');
                    document.getElementById("pass").disabled = false;
                } else
                    $('#message').html('Not Matching').css('color', 'red');
            });
        </script>
    {% endblock %}
    <div class="row">
        <div class="modal fade" id="edit_profile" tabindex="-1" role="dialog"
             aria-labelledby="pass_change" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pass_change">Edit Profile</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            {% csrf_token %}
                            <div class="form-group col-md-12">
                                <label for="name">Full Names</label>
                                <input type="text" class="form-control"
                                       id="name"
                                       name="name" placeholder="Full Names"
                                       value="{{ request.user.staff.biodata.name|default_if_none:'' }}"
                                       required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="contact">Primary Contact</label>
                                <div class="form-spacing form-inline">
                                    <select name="code" class="form-control"
                                            required
                                            style="width:25%; 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="{{ request.user.staff.biodata.contact|default_if_none:'https://www.bcc-phil.com/wp-content/uploads/2020/08/facebookanon.jpg' }}"
                                           name="contact" placeholder="Contact"
                                           required style="width:65%; display:inline-block;">
                                </div>

                            </div>

                            <div class="form-group">
                                <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 request.user.staff.biodata.gender == 'M' %}selected{% endif %}>
                                        Male
                                    </option>
                                    <option value="F"
                                            {% if request.user.staff.biodata.gender == 'F' %}selected{% endif %}>
                                        Female
                                    </option>

                                </select>
                            </div>
                            <div class="form-group">
                                <label for="contact">NIN</label>
                                <input type="text" class="form-control"
                                       id="contact" value="{{ request.user.staff.biodata.nin }}"
                                       name="nin" placeholder="NIN" minlength="14"
                                       maxlength="14">
                            </div>
                            <div class="form-group">
                                <label for="dob">Date Of birth</label>
                                <br>
                                {{ form2.dob }}
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" name="profile_update" class="btn btn-primary">
                                Save changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade" id="change_password" tabindex="-1" role="dialog"
             aria-labelledby="pass_change" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pass_change">Change Password</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="old_password">Old Password</label>
                                <input type="password" class="form-control"
                                       id="old_password"
                                       name="old_password" placeholder="Old Password" required>
                            </div>
                            <div class="form-group">
                                <label for="new_password1">New Password</label>
                                <input type="password" class="form-control"
                                       id="new_password1"
                                       name="new_password1" placeholder="New Password" required>
                            </div>
                            <div class="form-group">
                                <label for="new_password2">Confirm Password</label>
                                <input type="password" class="form-control"
                                       id="new_password2"
                                       name="new_password2" placeholder="Confirm Password" required>
                            </div>
                            <span id='message'></span>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" id="pass" name="change_password" class="btn btn-primary" disabled>
                                Save changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card m-b-30">
                <div class="card-body text-center">
                    <div class="user-slider">
                        <div class="user-slider-item">
                            <img src="{{ request.user.staff.biodata.photo_url|default_if_none:'https://www.bcc-phil.com/wp-content/uploads/2020/08/facebookanon.jpg' }}" alt="avatar" width="100"
                                 class="rounded-circle mt-3 mb-4">
                            <h5>{{ request.user.staff.biodata.name }}</h5>
                            <p>{{ request.user.staff.position.title }}</p>
                            <p>{{ request.user.staff.biodata.email }}</p>
                            <p>Username: {{ request.user.username }}</p>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <div class="row">
                        <div class="col-6 border-right">
                            <p class="my-2"><a href="javaScript:void(0);" data-bs-toggle="modal"
                                               data-bs-target="#change_password">Change Password</a></p>
                        </div>
                        <div class="col-6">
                            <p class="my-2"><a href="javaScript:void(0);" data-bs-toggle="modal"
                                               data-bs-target="#edit_profile">Edit Profile</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card m-b-30">
                <div class="card-body text-center">
                    <caption>Other Details</caption>
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                            <tr>
                                <td>Contact</td>
                                <td>{{ request.user.staff.biodata.contact }}</td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td>{{ request.user.staff.biodata.get_gender_display }}</td>
                            </tr>
                            <tr>
                                <td>NIN</td>
                                <td>{{ request.user.staff.biodata.nin }}</td>
                            </tr>
                            <tr>
                                <td>Date of Birth</td>
                                <td>{{ request.user.staff.biodata.dob }}</td>
                            </tr>


                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

        </div>

    </div>
{% endblock %}