@extends('backend.template.layouts.template-base')
@section('title', 'Change Password')
@section('content')
    <section>
        <div class="page-head-title mb-4">
            <div class="d-flex align-items-center justify-content-between">
                <a href="{{ route('backend.template.profile') }}" class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0 d-flex align-items-center"><i
                            class="ri-arrow-left-s-line fs-1 me-2"></i>Change password
                    </h2>
                </a>

            </div>
        </div>
        <div class="row me-1 ms-1">

            <div class="card">

                <!-- end card header -->
                <!-- Success Message -->
                <div class="card-body">
                    <div class="row ">
                        <div class="col-lg-4 col-md-6 col-12">
                            <div class="d-flex justify-content-between old-p ">
                                <label for="old_password" class="form-label old-pass">Old Password<span class="error"
                                        style="color: red;">*</span></label>
                                <a href="javascript:void(0)" style="white-space: nowrap" data-bs-toggle="modal"
                                    data-bs-target="#forgotPasswordModal">

                                    Forgot password?
                                </a>


                            </div>

                            <input type="text" name="old_password" class="form-control  password-field" id="old_password"
                                placeholder="Old Password" value="{{ old('old_password') }}">
                            @error('old_password')
                                <span class="error-message text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-lg-4 col-md-6 col-12">
                            <label for="new_password" class="form-label new-pass  ">New Password <span class="error"
                                    style="color: red;">*</span></label>
                            <div>
                                <div class="position-relative">

                                    <input type="password" name="new_password" class="form-control  password-field pe-5"
                                        id="new_password" placeholder="New Password">

                                    <span class="toggle-password" onclick="togglePassword()">
                                        <i class="ri-eye-off-line" id="eyeIcon"></i>
                                    </span>

                                </div>
                            </div>
                            @error('new_password')
                                <span class="error-message text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-lg-4 col-md-6 col-12">
                            <label for="confirm_password" class="form-label confirm-pass ">Confirm New Password <span
                                    class="error" style="color: red;">*</span></label>
                            <div class="position-relative">

                                <input type="password" class="form-control  password-field pe-5" name="confirm_password"
                                    id="confirm_password" placeholder="Confirm New Password"
                                    value="{{ old('confirm_password') }}">

                                <span class="toggle-password" onclick="toggleConfirmPassword()">

                                    <i class="ri-eye-off-line" id="confirmEyeIcon"></i>
                                </span>

                            </div>
                            @error('confirm_password')
                                <span class="error-message text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                    </div>
                </div>
                {{-- 
                    <form action="{{ route('backend.template.password.update', $user->id) }}" method="POST"
                        id="reset-password">
                        @csrf
                        <div class="card-body">
                            <div class="row gy-4">
                                <div class="col-xxl-3 col-md-6">
                                    <div>
                                        <label for="old_password" class="form-label">Old Password<span class="error"
                                                style="color: red;">*</span></label>
                                        <input type="text" name="old_password" class="form-control" id="old_password"
                                            placeholder="Old Password" value="{{ old('old_password') }}">
                                        @error('old_password')
                                            <span class="error-message text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!--end col-->

                                <!--end col-->
                                <div class="col-xxl-3 col-md-6">
                                    <div>
                                        <label for="new_password" class="form-label">New Password <span class="error"
                                                style="color: red;">*</span></label>

                                        <input type="text" name="new_password" class="form-control" id="new_password"
                                            placeholder="New Password" value="{{ old('new_password') }}">
                                        @error('new_password')
                                            <span class="error-message text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!--end col-->

                                <!--end col-->
                                <div class="col-xxl-3 col-md-6">
                                    <div>
                                        <label for="confirm_password" class="form-label">Confirm New Password <span
                                                class="error" style="color: red;">*</span></label>
                                        <input type="text" class="form-control" name="confirm_password"
                                            id="confirm_password" placeholder="Confirm New Password"
                                            value="{{ old('confirm_password') }}">
                                        @error('confirm_password')
                                            <span class="error-message text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!--end col-->


                                <!--end col-->

                            </div>
                            <!--end row-->
                        </div>
                    </form> --}}
            </div>
        </div>
        <!--end col-->
        </div>
        <!-- RIGHT -->
        <div class="d-flex gap-3 align-items-right btn-list mb-3">

            <button type="button" class="outline-button-green">Cancel</button>

            <!-- LEFT -->
            <button type="button" class="button-green" data-bs-toggle="modal" data-bs-target="#createProductModal">
                Change Password
            </button>
        </div>

        {{-- forget password modal  --}}
        <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-hidden="true">

            <div class="modal-dialog modal-dialog-centered">

                <div class="modal-content forgot-password-modal">

                    <!-- Header -->
                    <div class="modal-header forgot-header">

                        <h2 class="mb-0">Forget Password?</h2>

                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal">
                        </button>

                    </div>

                    <!-- Body -->
                    <div class="modal-body p-4">

                        <h4 class="fw-semibold mb-4">
                            Enter your registered email to get reset password link
                        </h4>

                        <div class="mb-4">

                            <label class="form-label">Email Address</label>

                            <input type="email" class="form-control form-control-lg" placeholder="admin@gmail.com">

                        </div>

                        <!-- Success Message -->
                        <div class="forgot-success-alert mb-4">

                            <i class="ri-information-line"></i>

                            Reset link has been sent successfully!
                            Check your registered email.

                        </div>

                        <div class="d-flex justify-content-end gap-2">

                            <button type="button" class="btn forgot-cancel-btn" data-bs-dismiss="modal">

                                Cancel
                            </button>

                            <button type="button" class="btn forgot-submit-btn" data-bs-dismiss="modal"
                                data-bs-toggle="modal" data-bs-target="#resetPasswordModal">

                                Send Link
                            </button>
                        </div>

                    </div>

                </div>

            </div>

        </div>
        {{-- Reset password modal  --}}
        <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-hidden="true">

            <div class="modal-dialog modal-dialog-centered">

                <div class="modal-content reset-password-modal">

                    <!-- Header -->
                    <div class="modal-header reset-header">

                        <h5 class="mb-0">Reset Password</h5>

                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal">
                        </button>

                    </div>

                    <!-- Body -->
                    <div class="modal-body">

                        <p class="reset-subtitle">
                            Create your new password to update the existing password
                        </p>

                        <!-- Password -->
                        <div class="mb-3">

                            <label class="form-label">New Password</label>

                            <div class="position-relative">

                                <input type="password" class="form-control pe-5" placeholder="Enter new password"
                                    id="newPassword">

                                <span class="toggle-password" onclick="toggleNewPassword()">

                                    <i class="ri-eye-off-line" id="newPasswordEye"></i>
                                </span>

                            </div>

                        </div>


                        <!-- Confirm Password -->
                        <div class="mb-4">

                            <label class="form-label">Confirm New Password</label>

                            <div class="position-relative">

                                <input type="password" class="form-control pe-5" placeholder="Enter new password"
                                    id="confirmPassword">

                                <span class="toggle-password" onclick="toggleModalConfirmPassword()">
                                    <i class="ri-eye-off-line" id="modalConfirmEyeIcon"></i>

                                </span>

                            </div>

                        </div>

                        <!-- Buttons -->
                        <div class="d-flex justify-content-end gap-2">

                            <button type="button" class="btn reset-cancel-btn" data-bs-dismiss="modal">

                                Cancel
                            </button>

                            <button type="button" class="btn reset-submit-btn">

                                Reset Password
                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </section>
@endsection

@section('scripts')
    <script>
        function togglePassword() {

            const password = document.getElementById("new_password");
            const eyeIcon = document.getElementById("eyeIcon");

            if (password.type === "password") {

                password.type = "text";

                eyeIcon.classList.remove("ri-eye-off-line");
                eyeIcon.classList.add("ri-eye-line");

            } else {

                password.type = "password";

                eyeIcon.classList.remove("ri-eye-line");
                eyeIcon.classList.add("ri-eye-off-line");
            }
        }

        function toggleConfirmPassword() {

            const password = document.getElementById("confirm_password");
            const eyeIcon = document.getElementById("confirmEyeIcon");

            if (password.type === "password") {

                password.type = "text";

                eyeIcon.classList.remove("ri-eye-off-line");
                eyeIcon.classList.add("ri-eye-line");

            } else {

                password.type = "password";

                eyeIcon.classList.remove("ri-eye-line");
                eyeIcon.classList.add("ri-eye-off-line");
            }
        }

        function toggleNewPassword() {

            const password = document.getElementById("newPassword");
            const eyeIcon = document.getElementById("newPasswordEye");

            if (password.type === "password") {

                password.type = "text";

                eyeIcon.classList.remove("ri-eye-off-line");
                eyeIcon.classList.add("ri-eye-line");

            } else {

                password.type = "password";

                eyeIcon.classList.remove("ri-eye-line");
                eyeIcon.classList.add("ri-eye-off-line");
            }
        }

        function toggleModalConfirmPassword() {

            const password = document.getElementById("confirmPassword");
            const eyeIcon = document.getElementById("modalConfirmEyeIcon");

            if (password.type === "password") {

                password.type = "text";

                eyeIcon.classList.remove("ri-eye-off-line");
                eyeIcon.classList.add("ri-eye-line");

            } else {

                password.type = "password";

                eyeIcon.classList.remove("ri-eye-line");
                eyeIcon.classList.add("ri-eye-off-line");
            }
        }
    </script>
@endsection