{% extends 'admin/layout/admin_app.html' %}

{% block content %}
    {% if messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            {% for message in messages %}
                showToastr("{{ message }}", "{{ message.tags }}");
            {% endfor %}
        });
    </script>
    {% endif %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="card">
                    <div class="row m-1">
                        <div class="col-sm-6">
                            <h1 class="ml-2">Sub Admin Edit</h1>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right mr-2">
                                <li class="breadcrumb-item">
                                    <a href="/admin/sub-admin-list/">Sub Admin</a>
                                </li>
                                <li class="breadcrumb-item active">Sub Admin Edit</li>
                            </ol>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Sub Admin Edit</h3>
                    </div>
                    <form action="/admin/sub-admin-update/" method="post" id="sub_admin_edit_form">
                        {% csrf_token %}
                        <input type="hidden" name="subAdminId" id="subAdminId" value="{{subAdmin.id}}">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="firstName">First Name</label>
                                        <input type="text" name="firstName" class="form-control" placeholder="Enter first name" value="{{ subAdmin.first_name }}" />
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="lastName">Last Name</label>
                                        <input type="text" name="lastName" class="form-control" placeholder="Enter last name" value="{{ subAdmin.last_name }}" />
                                        <div class="errorMsg"></div>
                                    </div>        
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <input type="email" id="email" name="email" class="form-control" placeholder="Enter email" value="{{ subAdmin.email }}" />
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone">Phone No.</label>
                                        <input type="text" name="phone" class="form-control" placeholder="Enter phone no." value="{{ subAdmin.userprofile.phone }}">
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="role">Role</label>
                                        <select class="form-control" name="role">
                                            <option value="">Select Role</option>
                                            {% for role in roles %}
                                                <option value="{{role.id}}" {% if role.id == subAdmin.userprofile.role.id %}selected{% endif %}>{{role.name}}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status">Status</label>
                                        <select class="form-control" name="status">
                                            <option value="1" {% if subAdmin.is_active %} selected {% endif %}>Active</option>
                                            <option value="0" {% if not subAdmin.is_active %} selected {% endif %}>Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary" id="sub_admin_edit_btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

{% endblock %}

{% block custom_js %}
<script>
    $(function(){
        $.validator.addMethod("checkDigitCase", function(value) {
            return /[0-9]/.test(value);
        });

        $.validator.addMethod("checkAlphabetCase", function(value) {
            return /^[a-zA-Z\s]+$/.test(value);
        });
    });

    $("#sub_admin_edit_btn").click(function(){
        $("#sub_admin_edit_form").validate({
            rules:{
                "firstName":{
                    required:true,
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                    minlength: 2,
                    maxlength: 50,
                    checkAlphabetCase: true,
                },
                "lastName":{
                    required:true,
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                    minlength: 2,
                    maxlength: 50,
                    checkAlphabetCase: true,
                },
                "email":{
                    required:true,
                    email:true,
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                    maxlength: 50,
                    remote: {
                        url: '{% url "sub_admin_unique_email" %}',
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{ csrf_token }}',
                            email: function() {
                                return $("#email").val();
                            },
                            id: function(){
                                return $("#subAdminId").val();
                            },
                        },
                        dataFilter: function(data) {
                            var jsonResponse = JSON.parse(data);
                            if (jsonResponse.valid) {
                                return 'true';
                            } else {
                                return 'false';
                            }
                        },
                    },
                },
                "phone":{
                    required:true,
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                    checkDigitCase: true,
                    minlength:10,
                    maxlength: 15,
                },
                "role":{
                    required:true,
                },
            },
            messages:{
                "firstName":{
                    required:"Please enter first name",
                    minlength: "First name required minimum 2 characters",
                    maxlength: "First name required maximum 50 characters",
                    checkAlphabetCase: "First name allow only alphabets",
                },
                "lastName":{
                    required:"Please enter last name",
                    minlength: "Last name required minimum 2 characters",
                    maxlength: "Last name required maximum 50 characters",
                    checkAlphabetCase: "Last name allow only alphabets",
                },
                "email":{
                    required:"Please enter email",
                    email:"Enter valid email",
                    maxlength: "Email required maximum 50 characters",
                    remote: "Email is already used",
                },
                "phone":{
                    required:"Please enter phone no.",
                    checkDigitCase: "Phone no. allow only digits",
                    minlength: "Phone no. required minimum 10 digits",
                    maxlength: "Phone no. required maximum 15 digits",
                },
                "role":{
                    required:"Please select role",
                },
            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest(".form-group").find('.errorMsg'));
                error.addClass(['error-msg', 'error-msg-font-size']);
            },
            submitHandler: function(form) {
                if($(form).valid()){
                    form.submit(); 
                }
            }
        });
    });
    
</script>  
{% endblock %}