{% 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";
            });
        </script>


        <script>
            function showDiv(divId, element) {
                document.getElementById(divId).style.display = element.value === '2' ? 'block' : 'none';
            }
        </script>



        <script type="text/javascript">
            const form = document.querySelector('#new_member');
            let loader_ = document.querySelector('#submitting');
            let btn_ = document.querySelector('#sub_me');
            form.addEventListener('submit', submitHandler);

            function showErrorsOnSubmit(errorFields) {
                errorFields.forEach((fieldId) => {
                    let theId = `#error_${fieldId}`
                    document.querySelector(theId).style.display = 'block'
                })
            }

            function handleSubmit() {
                let loader_ = document.querySelector('#submitting');
                let btn_ = document.querySelector('#sub_me');
                let name_input = document.querySelector('#name');
                let gender = document.querySelector('#gender');
                let contact = document.querySelector('#contact');
                let marital_status = document.querySelector('#marital');
                let country = document.querySelector('#country');
                let location = document.querySelector('#location');
                let account_type = document.querySelector('#account_type');
                let initial_deposit_input = document.querySelector('#initial_deposit_input');

                let member_type = document.querySelector('#member_type');
                let is_a_shareholder_select = document.querySelector('#is_a_shareholder_select');
                let initial_shares_input = document.querySelector('#initial_shares_input');

                let noErrors = true
                let errorsArray = []

                console.log(is_a_shareholder_select.value)


                if (name_input.value.trim() === '') {
                    errorsArray.push('name')
                    noErrors = false
                }
                if (contact.value.trim() === '') {
                    errorsArray.push('contact')
                    noErrors = false
                }
                if (marital_status.value.trim() === '') {
                    errorsArray.push('marital')
                    noErrors = false
                }

                if (country.value.trim() === '') {
                    errorsArray.push('country')
                    noErrors = false
                }
                if (location.value.trim() === '') {
                    errorsArray.push('location')
                    noErrors = false
                }
                if (account_type.value.trim() === '') {
                    errorsArray.push('account_type')
                    noErrors = false
                }
                if (gender.value.trim() === '') {
                    errorsArray.push('gender')
                    noErrors = false
                }
                if (initial_deposit_input.value.trim() === '') {
                    errorsArray.push('initial_deposit_input')
                    noErrors = false
                }
                //conditional errors
                if (member_type.value !== '') {
                    let onRegistration = '{{ onRegistration|safe }}'
                    if (member_type.value === '1') { // existing member
                        if (is_a_shareholder_select.value === '') {
                            errorsArray.push('is_a_shareholder_select')
                            noErrors = false
                        } else {
                            if (is_a_shareholder_select.value === '1') {
                                if (initial_shares_input.value.trim() === '') {
                                    errorsArray.push('initial_shares_input')
                                    noErrors = false
                                }
                            }
                        }
                    } else if (member_type.value === '2') { // new member
                        console.log('onRegistration', onRegistration)

                        if (onRegistration === 'False') {
                            if (is_a_shareholder_select.value === '') {
                                errorsArray.push('is_a_shareholder_select')
                                noErrors = false
                            } else {
                                if (is_a_shareholder_select.value === '1') {
                                    if (initial_shares_input.value.trim() === '') {
                                        errorsArray.push('initial_shares_input')
                                        noErrors = false
                                    }
                                }

                            }

                        }

                        if (credited_account.value.trim() === '') {
                            errorsArray.push('credited_account')
                            noErrors = false
                        }
                    }
                } else {
                    errorsArray.push('member_type')
                    noErrors = false
                }

                if (!noErrors) {
                    new PNotify({
                        title: "Error", text: 'Fields with (*) are required', type: 'error'
                    })

                    console.log(errorsArray)

                    showErrorsOnSubmit(errorsArray)
                } else {
                    loader_.style.display = 'block'
                    btn_.style.display = 'none'
                    submitHandler()
                }
            }

            function submitHandler() {
                let loader_ = document.querySelector('#submitting');
                let btn_ = document.querySelector('#sub_me');

                $.ajax({
                    type: 'post',
                    url: '{% url 'add_member_new' %}',
                    data: $('#new_member').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        if (data.msg === 'error') {
                            console.log('error here' + data.extra);
                            new PNotify({
                                title: "Error",
                                text: data.extra,
                                type: data.msg
                            });
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';
                        } else if (data.msg === 'balance') {
                            console.log('error here' + data.extra);
                            new PNotify({
                                title: "Error",
                                text: data.extra,
                                type: data.type
                            });
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';
                        } else {
                            new PNotify({
                                title: "Member Registered",
                                text: data.extra,
                                type: 'success'
                            });
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';
                            $("#new_member")[0].reset();
                            // Redirect to another page upon success
                            // window.location.href = '{% url 'members' %}';
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log('Server Error:', textStatus, errorThrown);
                        new PNotify({
                            title: "Server Error",
                            text: "An error occurred on the server. Please try again later.",
                            type: 'error'
                        });
                        loader_.style.display = 'none';
                        btn_.style.display = 'block';
                    }
                });
            }

        </script>


        <script>
            function activateInit() {
                console.log(document.querySelector('#account_type').value)
                document.querySelector('#initial_deposit_input').disabled = false;
            }
        </script>

        <script>
            let global_state = {
                onRegistration: '{{ onRegistration|safe }}'
            };
        </script>


        <script src="{% static 'sacco/assets/custom_js/custom_add_member.js' %}"></script>

    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <label id="status" style="color: #f80d0d"></label>

                    <form method="post" id="new_member" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="row">
                            {% if not biz.auto_acc_no %}
                                <div class="mb-2 col-md-6">
                                    <label class="form-label" for="account_number">Account Number *</label>
                                    <input type="text" class="form-control"
                                           id="account_number" name="account_number"
                                           placeholder="Account Number" {% if not biz.auto_acc_no %}required{% endif %}>
                                </div>
                            {% endif %}
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="member_type">Member type *</label>
                                <select class="form-control" name="member_type"
                                        id="member_type" onchange="onSelectMemberType()">
                                    <option value="" selected disabled>Select Membership</option>
                                    <option value="1">Existing Member</option>
                                    <option value="2">New Member</option>
                                </select>
                                <label id="error_member_type" style="color: tomato; display: none">
                                    Field required
                                </label>

                            </div>
                            <div class="mb-2 col-md-6" id="is_shareholder_div" style="display:none">
                                <label class="form-label" for="member_type">Is a shareholder *</label>
                                <select class="form-control" name="share_select"
                                        id="is_a_shareholder_select" onchange="onSelectIsAShareholder()">
                                <option value="" selected disabled>Select</option>
                                    {% if request.user.staff.biodata.business.has_shares == 1 %}
                                        <option value="1">True</option>
                                        <option value="2">False</option>
                                    {% else %}
                                        <option value="2" selected>False</option>
                                    {% endif %}

                                </select>
                                <label id="error_is_a_shareholder_select" style="color: tomato; display: none">
                                    Field required
                                </label>
                            </div>

                            <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" oninput="onChangeOfFields('name')" required>
                                <label id="error_name" style="color: tomato; display: none">
                                    Field required
                                </label>
                            </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 }}">{{ 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"
                                        onchange="onChangeOfFields('gender')" required>
                                    <option value="" selected disabled>Select Gender</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>

                                </select>
                                <label id="error_gender" style="color: tomato; display: none">
                                    Field required
                                </label>
                            </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" required
                                            style="width:18%; display:inline-block;">
                                        {% for country in countries %}
                                            <option value="{{ country.code }}">{{ country.code }}</option>
                                        {% endfor %}
                                    </select>
                                    <input id="contact" type="text" class="form-control"
                                           name="contact" placeholder="Contact" oninput="onChangeOfFields('contact')"
                                           required style="width:80%; display:inline-block;">
                                    <label id="error_contact" style="color: tomato; display: none">
                                        Field required
                                    </label>
                                </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 }}">{{ country.code }}</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 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"
                                            style="width:18%; display:inline-block;">
                                        {% for country in countries %}
                                            <option value="{{ country.code }}">{{ country.code }}</option>
                                        {% endfor %}
                                    </select>
                                    <input id="mm" type="text" class="form-control"
                                           name="mm" placeholder="Mobile Money Number"
                                           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"
                                       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"
                                        onchange="onChangeOfFields('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>
                                <label id="error_marital" style="color: tomato; display: none">
                                    Field required
                                </label>

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="country">Nationality *</label>
                                <select class="form-control select2" data-toggle="select2" name="country" id="country"
                                        onchange="onChangeOfFields('country')"
                                        required>
                                    <option value="" selected disabled>Select Country</option>
                                    {% for country in countries %}
                                        <option {% if country.code == 'UG' %}selected{% endif %}
                                                value="{{ country.code }}">{{ country.name }}</option>
                                    {% endfor %}

                                </select>

                                <label id="error_country" style="color: tomato; display: none">
                                    Field required
                                </label>

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="location">Address *</label>
                                <textarea id="location" name="location" class="form-control"
                                          oninput="onChangeOfFields('location')"
                                          cols="4" rows="1" placeholder="Location" required></textarea>
                                <label id="error_location" style="color: tomato; display: none">
                                    Field required
                                </label>
                            </div>

                            <div class="col-md-12">
                                <div class="row">
                                    <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="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">
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-12">
                                <div class="row">

                                    <div class="mb-2 col-md-6">
                                        <label class="form-label" for="account_type">
                                            {% if request.user.staff.biodata.business.type == 1 %}
                                            Saving Product {% else %} Account Type {% endif %}*</label>
                                        <select class="form-control" name="account_type"
                                                onchange="onChangeOfFields('account_type')"
                                                id="account_type" onchange="activateInit()" required>
                                            <option value="" selected disabled>Select Account</option>
                                            {% for item in acc_types %}
                                                <option value="{{ item.id }}">{{ item.name }}</option>
                                            {% endfor %}
                                        </select>

                                        <label id="error_account_type" style="color: tomato; display: none">
                                            Field required
                                        </label>

                                    </div>
                                    <div class="mb-2 col-md-6" id="initial_deposit_div">
                                        <label class="form-label" for="initial" id="initial_deposit_label">Initial
                                            deposit *</label>
                                        <input type="text" data-type="currency"
                                               class="form-control"
                                               id="initial_deposit_input"
                                               oninput="onChangeOfFields('initial_deposit_input')"
                                               name="initial"
                                               placeholder="Initial Deposit"
                                               required title="Select account type">
                                        <label id="error_initial_deposit_input" style="color: tomato; display: none">
                                            Field required
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-2 col-md-6" style="display: none" id="credited_amt_div">
                                <label class="form-label" for="account">Credited Account*</label>
                                <select class="form-control" name="the_account"
                                        onchange="onChangeOfFields('credited_account')"
                                        id="credited_account">
                                    <option value="" selected disabled>Select Account</option>
                                    {% for item in accounts_ %}
                                        <option value="{{ item.id }}">{{ item.name }}</option>
                                    {% endfor %}
                                </select>

                                <label id="error_credited_account" style="color: tomato; display: none">
                                    Field required
                                </label>

                            </div>
                            <div class="mb-2 col-md-6" id="initial_shares_div" style="display: none">
                                <label class="form-label" for="initial" id="initial_shares_label">Initial shares
                                    *</label>
                                <input type="number" class="form-control"
                                       id="initial_shares_input" oninput="onChangeOfFields('initial_shares_input')"
                                       name="initial_shares"
                                       placeholder="Initial Shares">
                                <label id="share" style="color: #f80d0d"></label>
                                <label id="error_initial_shares_input" style="color: tomato; display: none">
                                    Field required
                                </label>
                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="upload_date">Date Joined (Optional)</label>
                                <input type="date" class="form-control" id="upload_date"
                                       name="upload_date" placeholder="Date Joined">
                            </div>

                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-warning">Clear</button>
                        <button id="sub_me" onclick="handleSubmit()" type="submit" class="btn btn-primary">Submit
                        </button>
                        <div class="spinner-border text-danger" role="status" id="submitting"
                             style="display: none">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->

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