{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block body %}
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!--begin::Card-->
                    <div class="card card-custom">
                        <div class="card-header">
                            <h3 class="card-title">
                                ویرایش
                                {{ object }}
                            </h3>
                        </div>
                        <form id="form" method="post">
                            {% csrf_token %}
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {% include 'component/image-field.html' with field=form.picture label='Picture' %}
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="col-form-label">نام کاربری:</label>
                                                    {{ form.username }}
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="col-form-label">نام:</label>
                                                    {{ form.first_name }}
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="col-form-label">نام خانوادگی:</label>
                                                    {{ form.last_name }}
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="col-form-label">شماره تماس:</label>
                                                    {{ form.mobile_number }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="../list" class="btn ml-2 btn-secondary">{% trans "Back" %}</a>
                                <button class="btn btn-primary">{% trans "Submit" %}</button>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>


{% endblock %}

{% block script %}
    <script src="{% static 'custom/image-field.js' %}"></script>
    <script>

        const formV = FormValidation.formValidation(
            document.getElementById('form'),
            {
                fields: {
                    first_name: {
                        validators: {
                            stringLength: {
                                max: 20,
                                min: 2,
                                message:'{% trans "must be between 2 and 20 character" %}'
                            },
                            notEmpty: {
                                message: '{% trans "This Field is required" %}'
                            },
                        }
                    },
                    last_name: {
                        validators: {
                            stringLength: {
                                max: 20,
                                min: 2,
                                message:'{% trans "must be between 2 and 20 character" %}'
                            },
                            notEmpty: {
                                message: '{% trans "This Field is required" %}'
                            },
                        }
                    }
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap()
                },

            }
        );

        $('#form').submit(function (e) {
            e.preventDefault()
            const button = $(this).find('button');
            formV.validate().then(function (status) {
                if (status === 'Valid') {
                    ApiAjax({
                        success_url: '../list',
                        url: '{{ api_url }}0',
                        form: 'form',
                        method: 'PUT',
                        file:true,
                        pk: '{{object.id}}',
                        button: document.querySelector('#form button'),
                        success_message: 'کاربر ({{ form.first_name.value }} {{ form.last_name.value }}) با موفقیت ویرایش شد!',
                    })
                } else {
                    Swal.fire({
                        text: '{% trans "Seems some error exists" %}',
                        icon: "error",
                        confirmButtonText: '{% trans "Got it" %}',
                        customClass: {
                            confirmButton: "btn font-weight-bold btn-secondary"
                        }
                    }).then(function () {
                        KTUtil.scrollTop();
                    });
                }
            });
        });
    </script>
{% endblock %}
