{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block styles %}

    {% endblock %}
    {% block scripts %}
        <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/select2/select2.min.js' %}"></script>
        <script src="{% static 'sacco/assets/custom_js/custom_transfers.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js' %}"></script>
        <script src="{% static 'sacco/assets/plugins/bootstrap-tagsinput/typeahead.bundle.js' %}"></script>
        <script src="{% static 'sacco/assets/js/vertical-menu.js' %}"></script>
        <script>
            $('#form').on('submit', function (e) {
                let loader_ = document.querySelector('#submitting');
                let btn_ = document.querySelector('#subBtn');
                loader_.style.display = 'block';
                btn_.style.display = 'none';
                e.preventDefault();

                $.ajax({
                    type: "POST",
                    url: "{% url 'member_transfers' %}",
                    data: $('#form').serialize(),

                    success: function (data) {
                        if (data.msg === 'success') {
                            console.log(data)
                            clearform();
                            new PNotify({
                                title: "Success", text: data.extra, type: data.msg
                            });
                            window.location.href = '{% url 'withdraw_receipt' %}'
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';
                        } else {
                            new PNotify({
                                title: "Error", text: data.extra, type: data.msg
                            });
                            loader_.style.display = 'none';
                            btn_.style.display = 'block';

                        }
                    },

                    failure: function () {
                    }

                });

            });

            function clearform() {
                console.log('haha')
                var $select = $('.selDiv .opts');
                var $option = $select.children().first();
                $option.prop('selected', true);
            }
        </script>

        <script>
            $(document).ready(function () {
                $('#account_from').change(function () {
                    if ($(this).val() === "") {
                        $('#account_to').prop("disabled", true);
                    } else {
                        $('#account_to').prop("disabled", false);
                    }
                });

            });
        </script>
    {% endblock %}

    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <h5 class="card-title">Fund transfer</h5>
                </div>
                <div class="card-body">
                    <h6 class="card-subtitle"></h6>
                    <form method="post" id="form">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="date">Transfer Date</label>
                            <input name="date" id="date" type="date" class="form-control"
                                   style="width: 50%">
                        </div>
                        <div class="form-group">
                            <label for="account_from">Select From</label>
                            <div class="border border-primary selDiv">
                                <select class="select2" data-toggle="select2"
                                        id="account_from"
                                        name="account_from" required onchange="onSelectDropdown1()" style="width: 50%">
                                    <option value="">Please select an account</option>
                                    {% for accounts in biz_accounts %}
                                        <option value="{{ accounts.the_account_id }}">
                                            {{ accounts.acc_number }}
                                            ({{ accounts.name }})
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                                else.</small>
                        </div>
                        <div class="form-group">
                            <label for="account_to">Select To</label>
                            <div class="border border-primary">
                                <select class="select2" data-toggle="select2" id="account_to"
                                        name="account_to" required disabled style="width: 50%">
                                    <option></option>
                                    {% for accounts in biz_accounts %}
                                        <option value="{{ accounts.the_account_id }}">
                                            {{ accounts.acc_number }}
                                            ({{ accounts.name }})
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="amount">Amount to transfer</label>
                            <input name="amount" id="amount" type="text" data-type="currency" class="form-control"
                                   style="width: 50%">
                        </div>
                        <button id="subBtn" class="btn btn-primary btn-md" type="submit">Submit</button>
                        <div class="spinner-border text-danger" role="status" id="submitting"
                             style="display: none">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- End col -->

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