@extends('layouts.admin.admin-app')
@section('title','Settings')
@section('content')
<div class="main-content settings">
    <div class="content_wrapper">
        <div class="content_header">
            <div class="page_title">
                <h2 class="d-inline-block pr-3 mr-3">Settings</h2>
            </div>
        </div>
        <div class="content">
            <div class="add_details mx-auto add_form">
                <div class="card">
                    <div class="card-header">Settings</div>
                    <div class="card-body">
                        <div class="edit_profile">
                            <form id="editProfileForm" method="POST" action="javascript:void(0);" enctype="multipart/form-data">
                                <div class="upload_img">
                                    <img src="{{getImage(Auth::guard('admin')->user()->profile_image,'admin')}}" class="rounded-circle profileImage" id="uploadimg"  alt="user img">
                                    <label for="UploadImg">
                                        <i class="fas fa-pencil-alt"></i>
                                        <input type="file" onchange="setImage(this)" hidden id="UploadImg">
                                    </label>
                                </div>
                            </form>
                        </div>
                        <div class="change_password">
                            <h3 class="sub_title">Change Password</h3>
                            <form class="form-horizontal" id="passwordForm" method="POST" action="{{(url('/admin/password-change'))}}">
                                <input type="hidden" name="guard" value="{{$guard}}">
                                {{ csrf_field() }}
                                <div class="row">
                                    <div class="col-sm-6 ">
                                        <div class="form-group">
                                            <label>Current password</label>
                                            <input type="password" class="form-control" name="current_password" placeholder="Current Password">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 ">
                                        <div class="form-group">
                                            <label>New password</label>
                                            <input type="password" class="form-control" name="new_password" placeholder="New Password">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 ">
                                        <div class="form-group">
                                            <label>Confirm new password</label>
                                            <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password">
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group action mb-0 text-right">
                                            <button type="reset" class="btn btn-light mr-sm-2  ripple-effect">
                                                Reset
                                            </button>
                                            <button id="btnPassword" type="submit" class="btn btn-warning  ripple-effect">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            {!! JsValidator::formRequest('App\Http\Requests\ChangePasswordRequest','#passwordForm') !!}
                        </div>
                        <div class="change_emailid">
                            <h3 class="sub_title">Change Email</h3>
                            <form class="form-horizontal" id="emailForm" method="POST" action="{{(url('/admin/send-email-otp'))}}">
                                <input type="hidden" name="guard" value="{{$guard}}">
                                {{ csrf_field() }}
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Current Email</label>
                                            <input type="email" name="current_email" class="form-control" placeholder="Current Email">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>New Email</label>
                                            <input type="email" id="newEmail" name="new_email" class="form-control" placeholder="New Email">
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group action text-right">
                                            <button id="btnEmail" type="submit" class="btn btn-warning  ripple-effect">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            {!! JsValidator::formRequest('App\Http\Requests\ChangeEmailRequest','#emailForm') !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade img-crop-modal otp_modal " id="imageCropperModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="imageCropperModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addindustyModal">Profile Image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="image_container">
                    <img alt="image" src="" id="crop_image" class="img-responsive" height="auto" width="100%"/>
                </div>
                <input type="hidden" id="imageBaseCode">
                <input type="hidden" id="imageType" value="profile_image">
                <div class="clearfix"></div>
                <div class="progress progress123 mt-3" style="display: none;">
                    <div  class="progress-bar progress-bar-striped progress-bar-animated bar bar123" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light mr-sm-2  ripple-effect" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning  ripple-effect" id="cropbutton">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- otp password -->
<div id="verifyOtpModal" class="modal fade otp_modal" tabindex="-1" role="dialog" id="OTP_Modal" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="">
                    <h5 class="modal-title text-center">Enter OTP</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form id="changeEmailOtpFrm" method="POST" action="javascript:void(0);">
                    {{csrf_field()}}
                    <input id="email"type="hidden" name="email" value="">
                    <input id="newChangeEmail"type="hidden" name="new-email" value="">
                    <div class="form-group">
                        <label>Enter OTP received on email</label>
                        <input type="text" name="otp" class="form-control rounded-pill" placeholder="Enter OTP">
                    </div>
                    <button type="submit" id="changeEmailOtpBtn" class="btn btn-warning btn-shadow ripple-effect" >VERIFY</button>
                </form>
                <a href="javascript:void(0);" id="resendOtp" onclick="resendOtp()" class="resend_link d-block position-relative">Resend OTP</a>
                {!! JsValidator::formRequest('App\Http\Requests\VerifyOtpRequest','#changeEmailOtpFrm') !!}
            </div>
        </div>
    </div>
</div>
<link href="{{ url('public/css/cropper.min.css') }}" rel="stylesheet">
<script src="{{ url('public/js/cropper.min.js') }}"></script>
<script>
                    $("#btnPassword").on('click', (function (e) {
                        e.preventDefault();
                        var btn = $('#btnPassword');
                        var form = $('#passwordForm');
                        if (form.valid()) {
                            btn.html('Save {{buttonLoader()}}');
                            btn.prop('disabled', true);
                            $.ajax({
                                url: "{{(url('/admin/password-change'))}}",
                                type: "POST",
                                data: form.serialize(),
                                success: function (data)
                                {
                                    btn.prop('disabled', false);
                                    window.location.href = "{{(url('/admin/dashboard'))}}";
                                },
                                error: function (data) {
                                    var obj = jQuery.parseJSON(data.responseText);
                                    for (var x in obj) {
                                        btn.prop('disabled', false);
                                        btn.html('Change Password');
                                        var errors = obj[x].length
                                        $('#' + x + '-error').html(obj[x]);
                                        $('#' + x + '-error').css("color", '#721c24');
                                        $('#' + x + '-error').parent('.form-group').removeClass('has-success').addClass('has-error');
                                    }
                                },
                            });
                        }
                    }));

                    $("#btnEmail").on('click', (function (e) {
                        e.preventDefault();
                        var btn = $('#btnEmail');
                        var form = $('#emailForm');
                        var newEmail = document.getElementById("newEmail").value;
                        if (form.valid()) {
                            btn.html('Submit {{buttonLoader()}}');
                            btn.prop('disabled', true);
                            $.ajax({
                                url: "{{(url('/admin/send-email-otp'))}}",
                                type: "POST",
                                data: form.serialize(),
                                success: function (data)
                                {
                                    btn.prop('disabled', false);
                                    btn.html('Submit');
                                    $('#email').val(data.email)
                                    $('#newChangeEmail').val(newEmail)
                                    $('#verifyOtpModal').modal('show');
                                },
                                error: function (data) {
                                    var obj = jQuery.parseJSON(data.responseText);
                                    for (var x in obj) {
                                        btn.prop('disabled', false);
                                        btn.html('Submit');
                                        var errors = obj[x].length
                                        $('#' + x + '-error').html(obj[x]);
                                        $('#' + x + '-error').css("color", '#721c24');
                                        $('#' + x + '-error').parent('.form-group').removeClass('has-success').addClass('has-error');
                                    }
                                },
                            });
                        }
                    }));

                    $("#changeEmailOtpBtn").on('click', (function (e) {
                        e.preventDefault();
                        var btn = $('#changeEmailOtpBtn');
                        var form = $('#changeEmailOtpFrm');
                        if (form.valid()) {
                            btn.html('VERIFY {{buttonLoader()}}');
                            btn.prop('disabled', true);
                            $.ajax({
                                url: "{{(url('/admin/email-change'))}}",
                                type: "POST",
                                data: form.serialize(),
                                success: function (data)
                                {
                                    if (data.status) {
                                        successToaster(data.message, 'Change Email');
                                        setTimeout(function () {
                                            window.location.href = "{{(url('/admin/dashboard'))}}";
                                        }, 2000);
                                    } else {
                                        errorToaster(data.message, 'Change Email');
                                        btn.prop('disabled', false);
                                        btn.html('VERIFY');
                                    }
                                },
                                error: function (data) {
                                    var obj = jQuery.parseJSON(data.responseText);
                                    for (var x in obj) {
                                        btn.prop('disabled', false);
                                        btn.html('Submit');
                                        var errors = obj[x].length
                                        $('#' + x + '-error').html(obj[x]);
                                        $('#' + x + '-error').css("color", '#721c24');
                                        $('#' + x + '-error').parent('.form-group').removeClass('has-success').addClass('has-error');
                                    }
                                },
                            });
                        }
                    }));

                    function resendOtp() {
                        $("#resendOtp").css("pointer-events", "none");
                        var btn = $('#resendOtp');
                        var form = $('#changeEmailOtpFrm');
                        btn.html('Resend OTP {{buttonLoader()}}');
                        $.ajax({
                            type: "POST",
                            url: "{{ url('/admin/resend-email-otp') }}",
                            data: form.serialize(),
                            success: function (response) {
                                if (response.status) {
                                    successToaster(response.message, 'Change Email');
                                    $("#resendOtp").css("pointer-events", "visible");
                                }
                                btn.html('Resend OTP');
                            }
                        });
                    }

                    function setImage(input) {
                        var fileTypes = ['jpg', 'jpeg', 'png'];  //acceptable file types
                        $('#crop_image').attr('src', '');
                        if (input.files && input.files[0]) {

                            var extension = input.files[0].name.split('.').pop().toLowerCase(), //file extension from input file
                                    isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types
                            if (isSuccess) { //yes
                                if (input.files[0].size >= 5120000) {
                                    errorToaster('Image may not be greater than 5MB.');
                                } else {
                                    var reader = new FileReader();
                                    reader.onload = function (e) {
                                        $("#imageCropperModal").modal("show");
                                        $('#crop_image').attr('src', e.target.result);
                                        $('#imageBaseCode').val(e.target.result);

                                        setTimeout(function () {
                                            loadCropper();
                                        }, 150);
                                    };
                                    reader.readAsDataURL(input.files[0]);
                                }
                            } else {
                                errorToaster('Please select jpg, jpeg, png image only.');
                            }

                        }
                    }
                    $('#imageCropperModal').on('hidden.bs.modal', function (e) {
                        var $image = $("#crop_image");
                        var input = $("#cropImageInput");
                        input.replaceWith(input.val('').clone(true));
                        $image.cropper("destroy");
                    })

                    //cropper
                    function loadCropper() {
                        var $image = $("#crop_image");
                        $image.cropper({
                            viewMode: 1,
                            dragMode: 'move',
                            aspectRatio: 1,
                            movable: false,
                            zoomable: true,
                            rotatable: true,
                            center: true,
                            responsive: true,
                            cropBoxResizable: true,
                        });
                    }
                    $("#cropbutton").click(function () {
                        var $image = $("#crop_image");

                        $("#cropbutton").html('Save {{buttonLoader()}}');
                        $("#cropbutton").attr('disabled', true);
                        var imageBaseCode = $('#imageBaseCode').val();
                        var imageType = $("#imageType").val();
                        var imageCropedData = $image.cropper('getData');
                        var croppedWidth = imageCropedData.width;
                        var croppedHeight = imageCropedData.height;
                        var croppedX = imageCropedData.x;
                        var croppedY = imageCropedData.y;
                        var rotate = imageCropedData.rotate;
                        var url = "{{url('/admin/save-profile-image')}}";
                        var bar = $('.bar123');
                        //var percent = $('.percent');
                        var status = $('.progress123');
                        $.ajax({
                            type: "POST",
                            url: url,
                            dataType: 'JSON',
                            data: {
                                imageBaseCode: imageBaseCode,
                                imageType: imageType,
                                croppedWidth: croppedWidth,
                                croppedHeight: croppedHeight,
                                croppedX: croppedX,
                                croppedY: croppedY,
                                rotate: rotate,
                                _token: '{{csrf_token()}}'
                            },
                            beforeSend: function () {
                                status.show();
                                var percentVal = '0%';
//                                console.log(percentVal);
                                bar.width(percentVal);
                                //percent.html(percentVal);
                            },
                            xhr: function () {
                                var myXhr = $.ajaxSettings.xhr();
                                if (myXhr.upload) {
                                    myXhr.upload.addEventListener('progress', progress, false);
                                }
                                return myXhr;
                            },
                            success: function (response) {
//                console.log(response);
                                status.hide();

                                bar.width('0%');
                                if (response.success) {
                                    $("#imageCropperModal").modal("hide");
                                    $image.cropper('destroy');
                                    $("#cropbutton").attr('disabled', false);
                                    $("#cropbutton").html('Save');
                                    $('.profileImage').attr('src', response.filename);
                                    successToaster('Profile image is changed successfully.');
                                }
                            }
                        });
                    });
                    function progress(e) {
                        var bar = $('.bar123');
                        //var percent = $('.percent');
                        var status = $('.progress123');
                        if (e.lengthComputable) {
                            var max = e.total;
                            var current = e.loaded;
                            var Percentage = (current * 100) / max;
//                            console.log(Percentage);
                            var percentVal = Percentage + '%';
                            bar.width(percentVal);
                            if (Percentage >= 100)
                            {

                            }
                        }
                    }
                    $('#imageCropperModal').on('hidden.bs.modal', function (e) {
                        $('#crop_image').attr('src', '');
                        var $image = $("#crop_image");
                        var input = $("#cropImageInput");
                        input.replaceWith(input.val('').clone(true));
                        $image.cropper("destroy");
                    });


</script>
@endsection