{% 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">User Edit</h1>
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right mr-2">
                                <li class="breadcrumb-item">
                                    <a href="/admin/user-list/">User Management</a>
                                </li>
                                <li class="breadcrumb-item active">User 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">User Edit</h3>
                    </div>
                    <form action="/admin/user-update/" method="post" id="user_edit_form" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="userId" id="userId" value="{{user.id}}">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="Enter name" value="{{ user.name }}" />
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                                <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="{{ user.email }}" />
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="profile">Profile</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" id="profile" name="profile" class="custom-file-input">
                                                <label class="custom-file-label" for="" id="fileName">Choose file</label>
                                            </div>
                                        </div>
                                        <div class="errorMsg"></div>
                                    </div>
                                    {% if user.profile_picture %}
                                        <img class="profile-user-img img-fluid img-circle" src="{{ user.profile_picture.url }}" alt="User profile picture">
                                    {% else %}
                                        {% load static %}
                                        <img class="profile-user-img img-fluid img-circle" src="{% static 'dist/img/default-user.jpg' %}" alt="User profile picture">
                                    {% endif %}
                                </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 user.status %} selected {% endif %}>Live</option>
                                            <option value="0" {% if not user.status %} selected {% endif %} >Paused</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary" id="user_edit_btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

{% endblock %}

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

    $('#profile').change(function(e){
        var fileName = e.target.files[0].name;
        $("#fileName").text(fileName);
    });

    $("#user_edit_btn").click(function(){
        $("#user_edit_form").validate({
            rules:{
                "name":{
                    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 "check_unique_user_email" %}',
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{ csrf_token }}',
                            email: function() {
                                return $("#email").val();
                            },
                            id: function(){
                                return $("#userId").val();
                            },
                        },
                        dataFilter: function(data) {
                            var jsonResponse = JSON.parse(data);
                            if (jsonResponse.valid) {
                                return 'true';
                            } else {
                                return 'false';
                            }
                        },
                    },
                },
                "profile":{
                    required: false,
                    extension:"jpg|jpeg|png",
                },
            },
            messages:{
                "name":{
                    required:"Please enter name",
                    minlength: "Name required minimum 2 characters",
                    maxlength: "Name required maximum 50 characters",
                    checkAlphabetCase: "Name allow only alphabets",
                },
                "email":{
                    required:"Please enter email",
                    email:"Enter valid email",
                    maxlength: "Email required maximum 50 characters",
                    remote: "Email is already used",
                },
                "profile":{
                    extension:"Profile allow only jpg,jpeg or png file",
                }
            },
            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 %}