@extends('admin.layout.master')
@section('title', 'Change Password')
@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin_dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Change Password</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl index-container">
            <div class="card mb-5 mb-xl-8">
                <div class="card-header mb-4">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3">Change Password</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    <form method="post" id="change_password" action="{{ route('change_password') }}">
                        @csrf
                        <div class="d-flex flex-column gap-7 gap-lg-10 w-100">
                            <div class="card">
                                <div class="card-body pt-0">
                                    <div class="mb-5 fv-row">
                                        <div class="position-relative">
                                        <label class="required form-label">Old Password</label>
                                        <input type="password" name="old_password" class="form-control login_eyes password_feild"
                                            placeholder="**********"  data-iconType="open" data-error="#old_password_error" />
                                            <span id="icon_class" class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 mt-4">
                                                <i class="bi bi-eye fs-4 change_icon" title="show"></i></span>

                                        </div>
                                        <span class="error" id="old_password_error"></span>
                                        @if ($errors->has('old_password'))
                                        <br/><span class="text-danger">{{ $errors->first('old_password') }}</span>
                                        @endif
                                    </div>
                                    <div class="mb-5 fv-row">
                                        <div class="position-relative">
                                        <label class="required form-label">New Password</label>
                                        <input type="password" name="new_password" id="new_password" class="form-control password_feild1 login_eyes"  data-iconType="open" placeholder="**********" data-error="#new_password_error" />
                                        <span id="icon_class1" class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 mt-4">
                                            <i class="bi bi-eye fs-4 change_icon1" title="show"></i></span>
                                        </div>
                                            <span class="error" id="new_password_error"></span>
                                        @if ($errors->has('new_password'))
                                        <br/><span class="text-danger">{{ $errors->first('new_password') }}</span>
                                        @endif
                                    </div>
                                    <div class="mb-5 fv-row">
                                        <div class="position-relative">
                                        <label class="required form-label">Confirm Password</label>
                                        <input type="password" name="confirm_new_password" class="form-control password_feild2 login_eyes"
                                            placeholder="**********"  data-iconType="open" data-error="#confirm_new_password_error" />
                                            <span id="icon_class2" class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 mt-4">
                                            <i class="bi bi-eye fs-4 change_icon2" title="show"></i></span>
                                        </div>
                                        <span class="error" id="confirm_new_password_error"></span>
                                        @if ($errors->has('confirm_new_password'))
                                        <br/><span
                                                class="text-danger">{{ $errors->first('confirm_new_password') }}</span>
                                        @endif
                                    </div>
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" id="kt_ecommerceproduct_submit"
                                            class="btn btn-primary me-3">
                                            <span class="indicator-label">Save & Continue</span>
                                        </button>
                                        <a href="{{ route('admin_dashboard') }}" id="kt_ecommerce_roduct_cancel"
                                            class="btn btn-light">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
         $(document).on('click', '.change_icon', function(){
            if($('.password_feild').attr('data-iconType') == "open"){
                $('.password_feild').attr('type', "text");
                $('.password_feild').attr('data-iconType', 'close');
                $('#icon_class').html('<i class="bi bi-eye-slash fs-4 change_icon" title="hide"></i>');
            }else{
                $('.password_feild').attr('type', "password");
                $('.password_feild').attr('data-iconType', 'open');
                $('#icon_class').html('<i class="bi bi-eye fs-4 change_icon" title="show"></i>');
            }
        });

        $(document).on('click', '.change_icon1', function(){
            if($('.password_feild1').attr('data-iconType') == "open"){
                $('.password_feild1').attr('type', "text");
                $('.password_feild1').attr('data-iconType', 'close');
                $('#icon_class1').html('<i class="bi bi-eye-slash fs-4 change_icon1" title="hide"></i>');
            }else{
                $('.password_feild1').attr('type', "password");
                $('.password_feild1').attr('data-iconType', 'open');
                $('#icon_class1').html('<i class="bi bi-eye fs-4 change_icon1" title="show"></i>');
            }
        });

        $(document).on('click', '.change_icon2', function(){
            if($('.password_feild2').attr('data-iconType') == "open"){
                $('.password_feild2').attr('type', "text");
                $('.password_feild2').attr('data-iconType', 'close');
                $('#icon_class2').html('<i class="bi bi-eye-slash fs-4 change_icon2" title="hide"></i>');
            }else{
                $('.password_feild2').attr('type', "password");
                $('.password_feild2').attr('data-iconType', 'open');
                $('#icon_class2').html('<i class="bi bi-eye fs-4 change_icon2" title="show"></i>');
            }
        });
        $(document).ready(function() {
            jQuery.validator.addMethod("alphanumeric", function(value, element) {
                    return this.optional(element) ||
                        /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i.test(value);
                },
                "Must contain at least one number and one uppercase and lowercase letter, and one symbol and  at least 8 or more characters"
            );

            $("#change_password").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    old_password: {
                        required: true,
                        minlength: 8,
                        alphanumeric: true
                    },
                    new_password: {
                        required: true,
                        minlength: 8,
                        alphanumeric: true
                    },
                    confirm_new_password: {
                        required: true,
                        minlength: 8,
                        equalTo: "#new_password"
                    },
                },
                messages: {
                    old_password: {
                        required: "Old password field is required.",
                        minlength: 'Old Password must be at least 8 characters long.',
                    },
                    new_password: {
                        required: "New password field is required.",
                        minlength: 'New password must be at least 8 characters long.',
                    },
                    confirm_new_password: {
                        required: "Confirm password field is required.",
                        minlength: 'Confirm password must be at least 8 characters long.',
                        equalTo: "Confirm password does not match."
                    },
                },
                submitHandler: function(form) {
                    document.getElementById('kt_ecommerceproduct_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();  
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });
        });
    </script>
@endpush