<!DOCTYPE html>
<html lang="en">
<head>
    <?php $this->load->view('templates/components/head'); ?>
</head>
<body>
	<?php $this->load->view('templates/components/footer-scripts'); ?>
    <script src="<?php echo base_url().'assets/js/parsley.js'; ?>"></script>
    <?php $this->load->view('templates/components/header'); ?>

    <div class="PageLoaderHolder">
        <div class="PageLoader"></div>
    </div>

    <main>

        <section class="files py-2 h-100">
            <div class="container h-100">
                <div class="card">
                    <div class="files__grid h-100">
                        <div class="sidebar">
                            <div id="menuBtnClose" class="d-none">
                                <svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"></path></svg>
                            </div>
                            <div class="sidebar__list">
                                <div class="sidebar__item">
                                    <a href="<?php echo base_url(); ?>profile" class="sidebar__link">
                                        <svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m5 3.8c0 1.4 0.1 2.4 0.8 3.5 0.2 0.286 0.5 0.35 0.7 0.6 0.135 0.5 0.24 0.98 0.1 1.5-1.275 0.45-2.49 1-3.6 1.6-0.85 0.6-0.785 0.31-1 2.3-0.16 1.59 3.5 1.7 6 1.7s6.163-0.1 6-1.7c-0.215-2-0.23-1.71-1-2.3-1.1-0.654-2.45-1.167-3.6-1.6-0.15-0.56-0.04-0.973 0.1-1.5 0.235-0.25 0.5-0.363 0.7-0.6 0.69-0.885 0.8-2.425 0.8-3.5 0-1.59-1.43-2.8-3-2.8-1.75 0-3 1.43-3 2.8z"/></svg>
                                        Personal Info
                                    </a>
                                </div>
                                <div class="sidebar__item">
                                    <a href="<?php echo base_url(); ?>change-password" class="sidebar__link active">
                                        <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="16" height="16"><path d="M 12 1 C 8.6761905 1 6 3.6761905 6 7 L 6 8 L 4 8 L 4 22 L 20 22 L 20 8 L 18 8 L 18 7 C 18 3.6761905 15.32381 1 12 1 z M 12 3 C 14.27619 3 16 4.7238095 16 7 L 16 8 L 8 8 L 8 7 C 8 4.7238095 9.7238095 3 12 3 z M 12 13 C 13.1 13 14 13.9 14 15 C 14 16.1 13.1 17 12 17 C 10.9 17 10 16.1 10 15 C 10 13.9 10.9 13 12 13 z"/></svg>
                                        Security
                                    </a>
                                </div>
                                <div class="sidebar__item">
                                    <a href="<?php echo base_url(); ?>logout" class="sidebar__link">
                                        <svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"><path d="m10.75 3.9862a5.5 5.5 0 0 1 2.563 6.1868 5.5 5.5 0 0 1-5.3131 4.077 5.5 5.5 0 0 1-5.3127-4.077 5.5 5.5 0 0 1 2.5627-6.1867"/><path d="m8 1.7637v5.972"/></g></svg>
                                        Log out
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body h-100">
                            <?php
                                echo form_open('javascript:;', 'name="password_submit" id="password_submit" class="p-3" method="POST" data-parsley-validate=""');
                            ?>
                                <div id="menuBtnOpen" class="cursor-pointer">
                                    <svg class="d-lg-none mb-3" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" class="material-design-icon__svg"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"></path></svg>
                                </div>
                                <h4 class="mb-3">Password</h4>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label for="old_password">Current password<span class="required">*</span></label>
                                            <input 
                                                type="password" 
                                                class="form-control" 
                                                id="old_password" 
                                                name="old_password" 
                                                required="" 
                                                data-parsley-trigger="keyup"
                                                data-parsley-errors-container="#old_password_error"
                                            />
                                            <p class="error" id="old_password_error"></p>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label for="password">New password<span class="required">*</span></label>
                                            <input 
                                                type="password" 
                                                class="w-100 form-control" 
                                                id="password"
                                                name="password"
                                                data-parsley-trigger="keyup"
                                                data-parsley-errors-container="#password_error"
                                                required
                                            />
                                            <p class="error" id="password_error"></p>
                                        </div>
                                        <button type="submit" class="btn btn-primary mt-2">Update password</button>

                                        <div class="alert alert_message alert-success mt-3 d-none" role="alert"></div>
                                        <div class="alert alert_message alert-danger mt-3 d-none" role="alert"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
    
    <?php $this->load->view('templates/components/footer'); ?>

    <script type="text/javascript">
        $(document).ajaxStart(function(){
            // Show image container
            $(".PageLoaderHolder").fadeIn('slow');
        });

        $(document).ajaxComplete(function(){
            // Hide image container
            $(".PageLoaderHolder").fadeOut('slow');
        });

        $(document).ready(function(){
            $("#password_submit").attr("action", 'javascript:;');
        });
        $('#password_submit').parsley().on('field:validated', function() {
            var ok = $('.parsley-error').length === 0;
            $('.bs-callout-info').toggleClass('hidden', !ok);
            $('.bs-callout-warning').toggleClass('hidden', ok);
        })
        .on('form:submit', function() {
            var formData = new FormData($("#password_submit")[0]);
            var base_url = '<?php echo base_url(); ?>';
            var url = base_url+"change-password";

            $(".error").html("");
            $(".alert").html("");
            $(".alert").addClass("d-none");

            $.ajax({
                type: "POST",
                dataType: "json",
                url: url,
                data: formData,
                //async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend:function(){
                    
                },
                success: function(result) {

                    if(result["status"] === false){
                        $(".alert-danger").html(result['message']);
                        $(".alert-danger").removeClass("d-none");
                    }else{

                        $(".alert-success").html(result['message']);
                        $(".alert-success").removeClass("d-none");

                        $("#password_submit")[0].reset();
                    }

                },
                error: function(result) {
                    $(".alert-danger").html("Failed to perform this action.");
                    $(".alert-danger").removeClass("d-none");
                }
            });
        });
    </script>
</body>
</html>