@extends('Admin.layout')

@section('content')
    <style>
        .reset-password-page {
            padding-bottom: 30px;
        }

        .reset-page-header {
            margin-bottom: 28px;
        }

        .reset-page-header h4 {
            font-size: 23px;
            font-weight: 800;
            color: #4e4038;
            margin-bottom: 4px;
        }

        .reset-page-header p {
            font-size: 13px;
            color: #89786c;
            margin-bottom: 0;
        }

        .reset-breadcrumb {
            font-size: 12px;
            color: #89786c;
        }

        .reset-breadcrumb a {
            color: #6d1b2b;
            text-decoration: none;
            font-weight: 700;
        }

        .reset-breadcrumb i {
            margin: 0 7px;
            color: #aaa;
        }

        .password-card {
            width: 100%;
            max-width: 1050px;
            margin: 0 auto;

            background: #ffffff;

            border: 1px solid rgba(109, 27, 43, 0.13);

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 15px 45px rgba(78, 64, 56, 0.08);
        }


        .security-panel {
            height: 100%;

            min-height: 560px;

            padding: 42px 32px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            text-align: center;

            background:
                linear-gradient(145deg,
                    #fdf5f6,
                    #f8edef);

            border-right: 1px solid rgba(109, 27, 43, 0.12);

            position: relative;

            overflow: hidden;
        }

        .security-panel::before {
            content: "";

            position: absolute;

            width: 220px;

            height: 220px;

            border-radius: 50%;

            top: -110px;

            left: -100px;

            background:
                radial-gradient(circle,
                    rgba(109, 27, 43, 0.13),
                    transparent 70%);
        }

        .security-panel::after {
            content: "";

            position: absolute;

            width: 180px;

            height: 180px;

            border-radius: 50%;

            bottom: -90px;

            right: -80px;

            background:
                radial-gradient(circle,
                    rgba(109, 27, 43, 0.11),
                    transparent 70%);
        }

        .security-illustration {
            width: 230px;
            height: 230px;

            border-radius: 18px;

            background:
                linear-gradient(145deg,
                    #fdf5f6,
                    #f4e7ea);

            display: flex;

            align-items: center;

            justify-content: center;

            position: relative;

            margin-bottom: 30px;

            z-index: 1;
        }

        .lock-wrapper {
            position: relative;

            width: 125px;
            height: 145px;
        }

        .lock-body {
            position: absolute;

            left: 12px;
            bottom: 0;

            width: 101px;
            height: 88px;

            border-radius: 14px;

            background:
                linear-gradient(145deg,
                    #9a3044,
                    #6d1b2b,
                    #4a0f1c);

            box-shadow:
                0 15px 28px rgba(109, 27, 43, 0.25);
        }


        /* Lock Keyhole */

        .lock-body::after {
            content: "";

            position: absolute;

            left: 43px;
            top: 34px;

            width: 16px;
            height: 25px;

            border-radius: 10px;

            background: #3d0c17;
        }

        .lock-body::before {
            content: "";

            position: absolute;

            left: 47px;
            top: 49px;

            width: 8px;
            height: 19px;

            background: #3d0c17;

            border-radius: 0 0 5px 5px;
        }


        /* Lock Shackle */

        .lock-shackle {
            position: absolute;

            left: 34px;
            top: 5px;

            width: 58px;
            height: 65px;

            border: 13px solid #8a2638;

            border-bottom: 0;

            border-radius: 35px 35px 0 0;
        }


        /* Outer Shield */

        .shield {
            position: absolute;

            right: -4px;
            bottom: -7px;

            width: 58px;
            height: 68px;

            background:
                linear-gradient(145deg,
                    #fffafb,
                    #f3e1e6);

            clip-path: polygon(50% 0%,
                    91% 14%,
                    86% 62%,
                    50% 100%,
                    14% 62%,
                    9% 14%);

            filter:
                drop-shadow(0 7px 8px rgba(74, 15, 28, 0.18));

            display: flex;

            align-items: center;

            justify-content: center;
        }


        /* Inner Shield */

        .shield-inner {
            width: 45px;
            height: 53px;

            background:
                linear-gradient(145deg,
                    #9a3044,
                    #6d1b2b,
                    #4a0f1c);

            clip-path: polygon(50% 0%,
                    91% 14%,
                    86% 62%,
                    50% 100%,
                    14% 62%,
                    9% 14%);

            display: flex;

            align-items: center;

            justify-content: center;

            color: #ffffff;

            font-size: 21px;

            filter:
                drop-shadow(0 4px 6px rgba(109, 27, 43, 0.18));
        }


        /* =========================================================
                                           SECURITY TEXT
                                        ========================================================= */

        .security-title {
            position: relative;

            z-index: 2;

            color: #4e4038;

            font-size: 19px;

            font-weight: 800;

            margin-bottom: 10px;
        }

        .security-text {
            position: relative;

            z-index: 2;

            max-width: 250px;

            color: #89786c;

            font-size: 13px;

            line-height: 1.7;

            margin: 0;
        }


        /* =========================================================
                                           RIGHT FORM PANEL
                                        ========================================================= */

        .password-form-panel {
            min-height: 560px;

            padding: 42px 42px 38px;

            background: #ffffff;
        }


        /* =========================================================
                                           FORM HEADER
                                        ========================================================= */

        .password-form-header {
            display: flex;

            align-items: center;

            gap: 15px;

            padding-bottom: 22px;

            margin-bottom: 26px;

            border-bottom: 1px solid #eee8e2;
        }

        .password-key-icon {
            width: 43px;
            height: 43px;

            min-width: 43px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(109, 27, 43, 0.10);

            color: #6d1b2b;

            font-size: 20px;
        }

        .password-form-header h5 {
            margin: 0 0 4px;

            font-size: 17px;

            font-weight: 800;

            color: #4e4038;
        }

        .password-form-header p {
            margin: 0;

            font-size: 12px;

            color: #89786c;
        }


        /* =========================================================
                                           FORM GROUP
                                        ========================================================= */

        .password-group {
            margin-bottom: 21px;
        }

        .password-label {
            display: block;

            margin-bottom: 8px;

            font-size: 13px;

            font-weight: 700;

            color: #4e4038;
        }


        /* =========================================================
                                           PASSWORD INPUT
                                        ========================================================= */

        .password-input-wrapper {
            position: relative;
        }

        .password-input {
            width: 100%;

            height: 48px;

            border-radius: 8px;

            border: 1px solid #ddd5ce;

            background: #ffffff;

            padding: 0 45px 0 14px;

            font-size: 13px;

            color: #4e4038;

            outline: none;

            transition: all 0.2s ease;
        }

        .password-input::placeholder {
            color: #aaa098;
        }

        .password-input:focus {
            border-color: #6d1b2b;

            box-shadow:
                0 0 0 3px rgba(109, 27, 43, 0.10);
        }

        .password-input.is-invalid {
            border-color: #dc3545;
        }

        .password-toggle {
            position: absolute;

            right: 13px;

            top: 50%;

            transform: translateY(-50%);

            border: none;

            background: transparent;

            padding: 4px;

            color: #8e8178;

            cursor: pointer;

            font-size: 15px;

            z-index: 2;
        }

        .password-toggle:hover {
            color: #6d1b2b;
        }

        .invalid-feedback {
            font-size: 11px;

            margin-top: 5px;
        }


        /* =========================================================
                                           PASSWORD INFO
                                        ========================================================= */

        .password-info {
            display: flex;

            align-items: flex-start;

            gap: 9px;

            padding: 12px 13px;

            margin-top: 3px;

            margin-bottom: 25px;

            border: 1px solid rgba(109, 27, 43, 0.30);

            border-radius: 7px;

            background: #fdf3f5;

            color: #6d1b2b;

            font-size: 11px;

            line-height: 1.5;
        }

        .password-info i {
            font-size: 14px;

            margin-top: 1px;

            color: #8a2638;
        }


        /* =========================================================
                                           BUTTONS
                                        ========================================================= */

        .password-actions {
            display: flex;

            justify-content: flex-end;

            align-items: center;

            gap: 12px;

            margin-top: 5px;
        }

        .cancel-btn {
            min-width: 105px;

            height: 44px;

            border: none;

            border-radius: 7px;

            background: #eceff2;

            color: #4e4038;

            font-size: 13px;

            font-weight: 700;

            text-decoration: none;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            transition: all 0.2s ease;
        }

        .cancel-btn:hover {
            background: #e1e4e7;

            color: #4e4038;
        }

        .reset-btn {
            min-width: 155px;

            height: 44px;

            border: none;

            border-radius: 7px;

            background:
                linear-gradient(135deg,
                    #4a0f1c,
                    #6d1b2b,
                    #9a3044);

            color: #ffffff;

            font-size: 13px;

            font-weight: 800;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            box-shadow:
                0 7px 18px rgba(74, 15, 28, 0.25);

            transition: all 0.2s ease;
        }

        .reset-btn:hover {
            color: #ffffff;

            transform: translateY(-1px);

            box-shadow:
                0 10px 22px rgba(74, 15, 28, 0.35);
        }

        .reset-btn:disabled {
            opacity: 0.7;

            transform: none;

            cursor: not-allowed;
        }


        /* =========================================================
                                           TOAST
                                        ========================================================= */

        .reset-toast-container {
            position: fixed;

            top: 20px;

            right: 20px;

            z-index: 99999;

            width: auto;

            max-width: calc(100% - 40px);

            pointer-events: none;
        }

        .reset-toast {
            display: flex;

            align-items: center;

            gap: 13px;

            min-width: 300px;

            max-width: 390px;

            padding: 14px 16px;

            border-radius: 14px;

            background: #ffffff;

            border: 1px solid rgba(109, 27, 43, 0.18);

            box-shadow:
                0 18px 45px rgba(78, 64, 56, 0.16);

            color: #4e4038;

            opacity: 0;

            transform: translateX(120%);

            transition:
                opacity 0.35s ease,
                transform 0.35s ease;

            pointer-events: auto;

            position: relative;

            overflow: hidden;
        }

        .reset-toast.show {
            opacity: 1;

            transform: translateX(0);
        }

        .reset-toast::before {
            content: "";

            position: absolute;

            left: 0;

            top: 0;

            bottom: 0;

            width: 4px;

            background: #6d1b2b;
        }

        .reset-toast.toast-error::before {
            background: #dc3545;
        }

        .reset-toast-icon {
            width: 38px;

            height: 38px;

            min-width: 38px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(109, 27, 43, 0.10);

            color: #6d1b2b;

            font-size: 18px;
        }

        .reset-toast.toast-error .reset-toast-icon {
            background: rgba(220, 53, 69, 0.10);

            color: #dc3545;
        }

        .reset-toast-content {
            flex: 1;

            min-width: 0;
        }

        .reset-toast-title {
            margin: 0 0 2px;

            font-size: 13px;

            font-weight: 800;

            color: #4e4038;
        }

        .reset-toast-message {
            margin: 0;

            font-size: 12px;

            line-height: 1.5;

            color: #89786c;

            word-break: break-word;
        }

        .reset-toast-close {
            width: 28px;

            height: 28px;

            min-width: 28px;

            border: none;

            background: transparent;

            color: #9a8b80;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            cursor: pointer;
        }

        .reset-toast-close:hover {
            background: rgba(109, 27, 43, 0.07);

            color: #6d1b2b;
        }

        .reset-toast-progress {
            position: absolute;

            bottom: 0;

            left: 0;

            height: 3px;

            width: 100%;

            background: #6d1b2b;

            transform-origin: left;
        }

        .reset-toast.toast-error .reset-toast-progress {
            background: #dc3545;
        }

        .reset-toast.show .reset-toast-progress {
            animation: resetToastProgress 4s linear forwards;
        }

        @keyframes resetToastProgress {
            from {
                transform: scaleX(1);
            }

            to {
                transform: scaleX(0);
            }
        }


        /* =========================================================
                                           RESPONSIVE
                                        ========================================================= */

        @media (max-width: 991.98px) {

            .password-card {
                max-width: 760px;
            }

            .security-panel {
                min-height: 420px;

                padding: 35px 25px;
            }

            .security-illustration {
                width: 190px;
                height: 190px;

                margin-bottom: 20px;
            }

            .password-form-panel {
                padding: 35px 30px;
            }
        }


        @media (max-width: 767.98px) {

            .reset-page-header {
                margin-bottom: 20px;
            }

            .reset-page-header h4 {
                font-size: 20px;
            }

            .reset-breadcrumb {
                display: none;
            }

            .security-panel {
                min-height: auto;

                padding: 30px 20px;

                border-right: none;

                border-bottom:
                    1px solid rgba(109, 27, 43, 0.12);
            }

            .security-illustration {
                width: 180px;
                height: 180px;
            }

            .security-title {
                font-size: 17px;
            }

            .security-text {
                font-size: 12px;
            }

            .password-form-panel {
                min-height: auto;

                padding: 30px 22px;
            }

            .password-form-header {
                padding-bottom: 18px;

                margin-bottom: 22px;
            }

            .password-actions {
                flex-direction: column-reverse;

                align-items: stretch;
            }

            .cancel-btn,
            .reset-btn {
                width: 100%;
            }

            .reset-toast-container {
                top: 12px;

                left: 12px;

                right: 12px;

                max-width: none;
            }

            .reset-toast {
                width: 100%;

                min-width: 0;

                max-width: none;
            }
        }


        @media (max-width: 400px) {

            .password-form-panel {
                padding: 25px 16px;
            }

            .security-panel {
                padding: 25px 16px;
            }

            .password-form-header h5 {
                font-size: 15px;
            }

            .password-form-header p {
                font-size: 11px;
            }
        }


        /* =========================================================
                                           DARK MODE - RESET PASSWORD CARD
                                        ========================================================= */

        [data-bs-theme="dark"] .password-card,
        body.dark-mode .password-card,
        body.dark .password-card,
        .dark-mode .password-card {
            background: #1b1114;

            border-color:
                rgba(109, 27, 43, 0.35);

            box-shadow:
                0 18px 50px rgba(0, 0, 0, 0.35);
        }


        /* =========================================================
                                           LEFT SECURITY PANEL - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .security-panel,
        body.dark-mode .security-panel,
        body.dark .security-panel,
        .dark-mode .security-panel {
            background:
                linear-gradient(145deg,
                    #24161a,
                    #191113);

            border-right-color:
                rgba(109, 27, 43, 0.30);
        }


        /* Decorative circles */

        [data-bs-theme="dark"] .security-panel::before,
        body.dark-mode .security-panel::before,
        body.dark .security-panel::before,
        .dark-mode .security-panel::before {
            background:
                radial-gradient(circle,
                    rgba(109, 27, 43, 0.16),
                    transparent 70%);
        }

        [data-bs-theme="dark"] .security-panel::after,
        body.dark-mode .security-panel::after,
        body.dark .security-panel::after,
        .dark-mode .security-panel::after {
            background:
                radial-gradient(circle,
                    rgba(109, 27, 43, 0.12),
                    transparent 70%);
        }


        /* =========================================================
                                           SECURITY ILLUSTRATION - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .security-illustration,
        body.dark-mode .security-illustration,
        body.dark .security-illustration,
        .dark-mode .security-illustration {
            background:
                linear-gradient(145deg,
                    #2a181d,
                    #1e1216);

            border:
                1px solid rgba(255, 255, 255, 0.06);

            box-shadow:
                0 15px 35px rgba(0, 0, 0, 0.25);
        }


        /* =========================================================
                                           SECURITY TEXT - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .security-title,
        body.dark-mode .security-title,
        body.dark .security-title,
        .dark-mode .security-title {
            color: #f3eee7;
        }

        [data-bs-theme="dark"] .security-text,
        body.dark-mode .security-text,
        body.dark .security-text,
        .dark-mode .security-text {
            color: #aaa097;
        }


        /* =========================================================
                                           RIGHT FORM PANEL - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .password-form-panel,
        body.dark-mode .password-form-panel,
        body.dark .password-form-panel,
        .dark-mode .password-form-panel {
            background: #1b1114;
        }


        /* =========================================================
                                           FORM HEADER - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .password-form-header,
        body.dark-mode .password-form-header,
        body.dark .password-form-header,
        .dark-mode .password-form-header {
            border-bottom-color:
                rgba(255, 255, 255, 0.08);
        }


        /* =========================================================
                                           PASSWORD KEY ICON - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .password-key-icon,
        body.dark-mode .password-key-icon,
        body.dark .password-key-icon,
        .dark-mode .password-key-icon {
            background:
                rgba(109, 27, 43, 0.18);

            color: #9a3044;
        }

        [data-bs-theme="dark"] .password-form-header h5,
        body.dark-mode .password-form-header h5,
        body.dark .password-form-header h5,
        .dark-mode .password-form-header h5 {
            color: #f3eee7;
        }

        [data-bs-theme="dark"] .password-form-header p,
        body.dark-mode .password-form-header p,
        body.dark .password-form-header p,
        .dark-mode .password-form-header p {
            color: #a99e94;
        }


        /* =========================================================
                                           FORM LABELS - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .password-label,
        body.dark-mode .password-label,
        body.dark .password-label,
        .dark-mode .password-label {
            color: #eee7df;
        }


        /* =========================================================
                                           PASSWORD INPUTS - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .password-input,
        body.dark-mode .password-input,
        body.dark .password-input,
        .dark-mode .password-input {
            background: #171315;

            border-color: #393033;

            color: #f3eee7;
        }

        [data-bs-theme="dark"] .password-input::placeholder,
        body.dark-mode .password-input::placeholder,
        body.dark .password-input::placeholder,
        .dark-mode .password-input::placeholder {
            color: #81777f;
        }

        [data-bs-theme="dark"] .password-input:focus,
        body.dark-mode .password-input:focus,
        body.dark .password-input:focus,
        .dark-mode .password-input:focus {
            background: #191214;

            border-color: #8a2638;

            color: #ffffff;

            box-shadow:
                0 0 0 3px rgba(109, 27, 43, 0.18);
        }


        /* Password eye icon */

        [data-bs-theme="dark"] .password-toggle,
        body.dark-mode .password-toggle,
        body.dark .password-toggle,
        .dark-mode .password-toggle {
            color: #8f857d;
        }

        [data-bs-theme="dark"] .password-toggle:hover,
        body.dark-mode .password-toggle:hover,
        body.dark .password-toggle:hover,
        .dark-mode .password-toggle:hover {
            color: #9a3044;
        }


        /* =========================================================
                                           PASSWORD INFO BOX - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .password-info,
        body.dark-mode .password-info,
        body.dark .password-info,
        .dark-mode .password-info {
            background:
                rgba(109, 27, 43, 0.14);

            border-color:
                rgba(154, 48, 68, 0.35);

            color: #e0a0ad;
        }

        [data-bs-theme="dark"] .password-info i,
        body.dark-mode .password-info i,
        body.dark .password-info i,
        .dark-mode .password-info i {
            color: #9a3044;
        }


        /* =========================================================
                                           CANCEL BUTTON - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .cancel-btn,
        body.dark-mode .cancel-btn,
        body.dark .cancel-btn,
        .dark-mode .cancel-btn {
            background: #30262a;

            color: #eee7df;
        }

        [data-bs-theme="dark"] .cancel-btn:hover,
        body.dark-mode .cancel-btn:hover,
        body.dark .cancel-btn:hover,
        .dark-mode .cancel-btn:hover {
            background: #3a2e33;

            color: #ffffff;
        }


        /* =========================================================
                                           RESET BUTTON - DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .reset-btn,
        body.dark-mode .reset-btn,
        body.dark .reset-btn,
        .dark-mode .reset-btn {
            background:
                linear-gradient(135deg,
                    #4a0f1c,
                    #6d1b2b,
                    #9a3044);

            color: #ffffff;

            box-shadow:
                0 8px 22px rgba(74, 15, 28, 0.35);
        }

        [data-bs-theme="dark"] .reset-btn:hover,
        body.dark-mode .reset-btn:hover,
        body.dark .reset-btn:hover,
        .dark-mode .reset-btn:hover {
            box-shadow:
                0 12px 28px rgba(74, 15, 28, 0.45);
        }


        /* =========================================================
                                           VALIDATION ERROR
                                        ========================================================= */

        [data-bs-theme="dark"] .password-input.is-invalid,
        body.dark-mode .password-input.is-invalid,
        body.dark .password-input.is-invalid,
        .dark-mode .password-input.is-invalid {
            border-color: #dc3545;
        }


        /* =========================================================
                                           TOAST DARK MODE
                                        ========================================================= */

        [data-bs-theme="dark"] .reset-toast,
        body.dark-mode .reset-toast,
        body.dark .reset-toast,
        .dark-mode .reset-toast {
            background: #21161a;

            border-color:
                rgba(109, 27, 43, 0.30);

            box-shadow:
                0 18px 45px rgba(0, 0, 0, 0.40);
        }

        [data-bs-theme="dark"] .reset-toast::before,
        body.dark-mode .reset-toast::before,
        body.dark .reset-toast::before,
        .dark-mode .reset-toast::before {
            background: #8a2638;
        }

        [data-bs-theme="dark"] .reset-toast-icon,
        body.dark-mode .reset-toast-icon,
        body.dark .reset-toast-icon,
        .dark-mode .reset-toast-icon {
            background:
                rgba(109, 27, 43, 0.18);

            color: #9a3044;
        }

        [data-bs-theme="dark"] .reset-toast-title,
        body.dark-mode .reset-toast-title,
        body.dark .reset-toast-title,
        .dark-mode .reset-toast-title {
            color: #f3eee7;
        }

        [data-bs-theme="dark"] .reset-toast-message,
        body.dark-mode .reset-toast-message,
        body.dark .reset-toast-message,
        .dark-mode .reset-toast-message {
            color: #aaa097;
        }

        [data-bs-theme="dark"] .reset-toast-close,
        body.dark-mode .reset-toast-close,
        body.dark .reset-toast-close,
        .dark-mode .reset-toast-close {
            color: #8f857d;
        }

        [data-bs-theme="dark"] .reset-toast-close:hover,
        body.dark-mode .reset-toast-close:hover,
        body.dark .reset-toast-close:hover,
        .dark-mode .reset-toast-close:hover {
            background:
                rgba(109, 27, 43, 0.15);

            color: #ffffff;
        }

        [data-bs-theme="dark"] .reset-toast-progress,
        body.dark-mode .reset-toast-progress,
        body.dark .reset-toast-progress,
        .dark-mode .reset-toast-progress {
            background: #6d1b2b;
        }
    </style>



    <div class="container-fluid reset-password-page">


        <div class="reset-page-header">

            <div class="d-flex justify-content-between align-items-start">

                <div>

                    <h4>
                        Reset Password
                    </h4>

                </div>


            </div>

        </div>


        <div class="password-card">

            <div class="row g-0">

                <div class="col-lg-5">

                    <div class="security-panel">


                        <!-- Lock Illustration -->

                        <div class="security-illustration">

                            <div class="lock-wrapper">

                                <div class="lock-shackle"></div>

                                <div class="lock-body"></div>

                                <div class="shield">

                                    <div class="shield-inner">

                                        <i class="bi bi-check-lg"></i>

                                    </div>

                                </div>

                            </div>

                        </div>


                        <h3 class="security-title">
                            Keep Your Account Secure
                        </h3>


                        <p class="security-text">

                            Use a strong password that you
                            don't use on other websites.

                        </p>

                    </div>

                </div>


                <div class="col-lg-7">

                    <div class="password-form-panel">


                        <!-- Form Header -->

                        <div class="password-form-header">

                            <div class="password-key-icon">

                                <i class="bi bi-key-fill"></i>

                            </div>


                            <div>

                                <h5>
                                    Change Password
                                </h5>

                                <p>
                                    Please enter your current password and choose a new one.
                                </p>

                            </div>

                        </div>

                        <form action="{{ route('reset_password_form') }}" method="POST" id="SubmitForm">

                            @csrf

                            <div class="password-group">

                                <label for="oldpass" class="password-label">

                                    Old Password

                                </label>


                                <div class="password-input-wrapper">

                                    <!-- Old Password -->
                                    <input type="password" name="oldpass" id="oldpass"
                                        class="password-input @error('oldpass') is-invalid @enderror"
                                        placeholder="Enter your old password" autocomplete="off" value="">

                                    <button type="button" class="password-toggle" onclick="togglePassword('oldpass', this)"
                                        aria-label="Show password">

                                        <i class="bi bi-eye-slash"></i>

                                    </button>

                                </div>


                                @error('oldpass')
                                    <div class="invalid-feedback d-block">

                                        {{ $message }}

                                    </div>
                                @enderror

                            </div>

                            <div class="password-group">

                                <label for="newpass" class="password-label">

                                    New Password

                                </label>


                                <div class="password-input-wrapper">

                                    <!-- New Password -->
                                    <input type="password" name="newpass" id="newpass"
                                        class="password-input @error('newpass') is-invalid @enderror"
                                        placeholder="Enter your new password" autocomplete="new-password" value="">

                                    <button type="button" class="password-toggle" onclick="togglePassword('newpass', this)"
                                        aria-label="Show password">

                                        <i class="bi bi-eye-slash"></i>

                                    </button>

                                </div>


                                @error('newpass')
                                    <div class="invalid-feedback d-block">

                                        {{ $message }}

                                    </div>
                                @enderror

                            </div>

                            <div class="password-group">

                                <label for="conpass" class="password-label">

                                    Confirm New Password

                                </label>


                                <div class="password-input-wrapper">

                                    <!-- Confirm New Password -->
                                    <input type="password" name="conpass" id="conpass"
                                        class="password-input @error('conpass') is-invalid @enderror"
                                        placeholder="Confirm your new password" autocomplete="new-password"
                                        value="">

                                    <button type="button" class="password-toggle"
                                        onclick="togglePassword('conpass', this)" aria-label="Show password">

                                        <i class="bi bi-eye-slash"></i>

                                    </button>

                                </div>


                                @error('conpass')
                                    <div class="invalid-feedback d-block">

                                        {{ $message }}

                                    </div>
                                @enderror

                            </div>

                            <div class="password-info">

                                <i class="bi bi-info-circle-fill"></i>

                                <span>

                                    Password should be at least 5 characters long
                                    and include a combination of letters,
                                    numbers and symbols.

                                </span>

                            </div>

                            <div class="password-actions">

                                <a href="{{ route('dashboard') }}" class="cancel-btn">

                                    Cancel

                                </a>


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

                                    <i class="bi bi-check-circle me-2"></i>

                                    Reset Password

                                </button>

                            </div>


                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>
        function togglePassword(inputId, button) {

            const input = document.getElementById(inputId);
            const icon = button.querySelector('i');

            if (input.type === 'password') {

                input.type = 'text';

                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');

                button.setAttribute(
                    'aria-label',
                    'Hide password'
                );

            } else {

                input.type = 'password';

                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');

                button.setAttribute(
                    'aria-label',
                    'Show password'
                );
            }
        }


        document.addEventListener('DOMContentLoaded', function() {

            const resetForm = document.getElementById('SubmitForm');
            const submitButton = document.getElementById('submit_btn');

            const oldPassword = document.getElementById('oldpass');
            const newPassword = document.getElementById('newpass');
            const confirmPassword = document.getElementById('conpass');

            const savedOldPassword =
                sessionStorage.getItem('reset_oldpass');

            const savedNewPassword =
                sessionStorage.getItem('reset_newpass');

            const savedConfirmPassword =
                sessionStorage.getItem('reset_conpass');


            if (savedOldPassword !== null && oldPassword) {
                oldPassword.value = savedOldPassword;
            }

            if (savedNewPassword !== null && newPassword) {
                newPassword.value = savedNewPassword;
            }

            if (savedConfirmPassword !== null && confirmPassword) {
                confirmPassword.value = savedConfirmPassword;
            }

            if (resetForm && submitButton) {

                resetForm.addEventListener('submit', function(e) {


                    if (!resetForm.checkValidity()) {


                        sessionStorage.setItem(
                            'reset_oldpass',
                            oldPassword ? oldPassword.value : ''
                        );

                        sessionStorage.setItem(
                            'reset_newpass',
                            newPassword ? newPassword.value : ''
                        );

                        sessionStorage.setItem(
                            'reset_conpass',
                            confirmPassword ? confirmPassword.value : ''
                        );

                        return;
                    }


                    if (submitButton.disabled) {

                        e.preventDefault();

                        return;
                    }



                    sessionStorage.setItem(
                        'reset_oldpass',
                        oldPassword ? oldPassword.value : ''
                    );

                    sessionStorage.setItem(
                        'reset_newpass',
                        newPassword ? newPassword.value : ''
                    );

                    sessionStorage.setItem(
                        'reset_conpass',
                        confirmPassword ? confirmPassword.value : ''
                    );


                    submitButton.disabled = true;

                    submitButton.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-2"></span>' +
                        'Processing...';

                });
            }


            @if (session('success'))

                sessionStorage.removeItem('reset_oldpass');
                sessionStorage.removeItem('reset_newpass');
                sessionStorage.removeItem('reset_conpass');
            @endif

            const resetToast =
                document.getElementById('resetToast');

            let resetToastTimer;


            function closeResetToast() {

                if (!resetToast) {
                    return;
                }

                resetToast.classList.remove('show');
            }


            function showResetToast() {

                if (!resetToast) {
                    return;
                }

                clearTimeout(resetToastTimer);

                resetToast.classList.remove('show');




                const progress =
                    resetToast.querySelector(
                        '.reset-toast-progress'
                    );

                if (progress) {

                    progress.style.animation = 'none';

                    void progress.offsetWidth;

                    progress.style.animation = '';

                }


                void resetToast.offsetWidth;

                resetToast.classList.add('show');


                resetToastTimer = setTimeout(
                    function() {

                        closeResetToast();

                    },
                    4000
                );
            }


            @if (session('success') || session('error') || $errors->any())

                showResetToast();
            @endif

        });
    </script>
    <script>
        window.addEventListener('pageshow', function() {

            const form = document.getElementById('SubmitForm');

            if (!form) {
                return;
            }

            // Clear password fields whenever the page is shown again
            document.getElementById('oldpass').value = '';
            document.getElementById('newpass').value = '';
            document.getElementById('conpass').value = '';

        });
    </script>
@endsection