{% extends 'base.html' %}
{% load static %}
{% load widget_tweaks %}
{% 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">
							{% trans "Create" %}
							{{ model_name }}
						</h3>
						<div class="card-toolbar">
							<div class="example-tools justify-content-center">
								<span class="example-toggle" data-toggle="tooltip" title="View code"></span>
								<span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
							</div>
						</div>
					</div>
					<!--begin::Form-->
					<form class="form" id="form" method="POST">
						<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">{{ form.username.label }}:</label>
												{{ form.username }}
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-form-label">{{ form.password.label }}:</label>
												{% render_field form.password type='password' %}
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label class="col-form-label">{% trans "Repeat Password" %}:</label>
												{% render_field form.password type='password' name='repeat_password' id='id_repeat_password' %}
											</div>
										</div>
										<div class="col-lg-6 col-md-6">
											<div class="form-group">
												<label class="col-form-label">{{ form.first_name.label }}:</label>
												{{ form.first_name }}
											</div>
										</div>
										<div class="col-lg-6 col-md-6">
											<div class="form-group">
												<label class="col-form-label">{{ form.last_name.label }}:</label>
												{{ form.last_name }}
											</div>
										</div>
										{% if form.mobile_number %}
											<div class="col-md-4">
												<div class="form-group">
													<label class="col-form-label">{{ form.mobile_number.label }}:</label>
													{{ form.mobile_number }}
												</div>
											</div>
										{% endif %}
										{% if form.email %}
											<div class="col-md-4">
												<div class="form-group">
													<label class="col-form-label">{{ form.email.label }}:</label>
													{{ form.email }}
												</div>
											</div>
										{% endif %}
									</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 'badi_utils/js/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" %}'
                        },
                    }
                },
                password: {
                    validators: {
                        stringLength: {
                            min: 6,
                            max: 20,
                            message: '{% trans "must be between 6 and 20 character" %}'
                        },
                        notEmpty: {
                            message: '{% trans "This Field is required" %}'
                        },
                    }
                },
                repeat_password: {
                    validators: {
                        notEmpty: {
                            message: '{% trans "This Field is required" %}'
                        },
                        callback: {
                            message: 'رمز عبور با تکرار رمز عبور مطابقت ندارد!',
                            callback: function (input) {
                                return input.value === document.querySelector('#id_password').value
                            }

                        }
                    }
                },
            },
            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 }}',
                    form: 'form',
                    method: 'POST',
                    file: true,
                    button: button,
                    success_message: '{% trans "Done successfully" %}',
                })
            } 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 %}
