@extends('user.layout')

@section('content')
    <style>
        * {
            --hibiscus-love: #fc465c;
            --fine-ii: #f9b198;
            --afl: #f9b198;
            --mexican-sky: #cfdddd;
            --brasillia-peach: #133d45;
            --free: #ffd700;
            --captured: #2b2120;

            --form-bg: var(--brasillia-peach);
            --secondary-color: var(--hibiscus-love);
            --tertiary-color: var(--fine-ii);
            --quadrary-color: var(--afl);
            --bg-color: var(--mexican-sky);
            --text-color: var(--free);
            --header-color: var(--captured);
            --error-color: var(--hibiscus-love);
            --success-color: #73d12e;

            box-sizing: border-box;
        }

        .container {
            border-radius: 0.6em;
            padding: 20px;
            background-color: #133d45 !important;
            margin: 20px auto;
        }

        .form {
            padding: 30px 40px;
        }

        .form h2 {
            text-align: center;
            margin: 0 0 20px;
        }

        .form-control {
            margin-bottom: 10px;
            /* padding-bottom: 20px; */
            position: relative;
            color: var(--text-color) !important;

        }

        .form-label {
            color: White !important;
            display: block;
            margin-bottom: 5px;
        }

        .form-control {
            border-radius: 6px;
            border: var(--quadrary-color) solid 2px !important;
            display: block;
            width: 100%;
            color: var(--text-color) !important;

        }

        .form-select {
            border-radius: 6px;
            background-color: #133d45 !important;
            border: var(--quadrary-color) solid 2px !important;
            color: var(--text-color) !important;


        }

        input::placeholder,
        textarea::placeholder {
            color: #a8a6a6 !important;
            opacity: 0.7;
        }

        .form-control input:focus {
            outline: 0;
            border-color: var(--tertiary-color);
        }

        .form-control.success input {
            border-color: var(--success-color);
        }

        .form-control.error input {
            border-color: var(--error-color);
        }

        .form-control small {
            color: var(--error-color);
            position: absolute;
            bottom: 0;
            left: 0;
            visibility: hidden;
        }

        .form-control.error small {
            visibility: visible;
        }

        .btn-submit {
            cursor: pointer;
            background: #ffd700 !important;
            font-size: 16px;
            color: black !important;
            padding: 0.618em 1.2em;
            border-radius: 0.4em;

        }

        .btn-submit {
            outline: 0;
            background-color: #ffd700;
        }

        .card {
            background-color: #133d45 !important;
            color: White !important;
        }

        .form-label {
            color: White !important;
        }


        input:-webkit-autofill,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:hover,
        textarea:-webkit-autofill,
        select:-webkit-autofill {
            -webkit-text-fill-color: #ffc107 !important;
            transition: background-color 5000s ease-in-out 0s;
        }
    </style>

    <style>
        .reset-wrapper {
            min-height: 60vh !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .reset-card {
            border-radius: 12px;
            padding: 40px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .reset-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 30px;
            color: #333;
        }

        .password-group {
            position: relative;
            margin-bottom: 20px;
        }

        .password-group input {
            height: 55px;
            padding-left: 45px;
            padding-right: 45px;
            border-radius: 8px;
        }

        .password-icon-left {
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .btn-reset {
            height: 55px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 500;
            background: #2d93c1;
            border: none;
        }

        .password-group input:focus {
            padding-left: 45px !important;
        }
    </style>

    <h5>Reset Password</h5>

    <div class="reset-wrapper">
        <div class="reset-card card">
            <h5 class="text-center text-white">Reset Password</h5>

            <form action="{{ route('user.reset_password_post') }}" method="POST" id="SubmitForm">
                @csrf

                <!-- Current Password -->
                <!-- <div class="password-group">
                                <i class="icon-base ti tabler-lock password-icon-left"></i>
                                <input type="password" name="current_password" value="{{ old('current_password') }}"
                                    class="form-control" placeholder="Current Password">
                                @error('current_password')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div> -->
                <div class="password-group">
                    <i class="ti tabler-lock icon-base password-icon-left"></i>
                    <input type="password" class="form-control" name="current_password"
                        value="{{ old('current_password') }}" placeholder="Enter Current Password">
                    <i class="ti tabler-eye icon-base password-toggle toggle-password"></i>

                </div>
                @error('current_password')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
                <!-- New Password -->
                <div class="password-group">
                    <i class="ti tabler-lock icon-base password-icon-left"></i>
                    <input type="password" name="new_password" value="{{ old('new_password') }}" class="form-control"
                        placeholder="New Password">
                    <i class="ti tabler-eye icon-base password-toggle toggle-password"></i>

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

                <!-- Confirm Password -->
                <div class="password-group">
                    <i class="icon-base ti tabler-lock password-icon-left"></i>
                    <input type="password" name="confirm_password" value="{{ old('confirm_password') }}"
                        class="form-control" placeholder="Confirm Password">
                    <i class="ti tabler-eye icon-base password-toggle toggle-password"></i>
                </div>

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

                <button type="submit" class="btn btn-primary w-100" id="submit_btn">
                    Reset Password
                </button>
            </form>

        </div>
    </div>

   

    <script>
        document.addEventListener("DOMContentLoaded", function () {

            document.querySelectorAll(".toggle-password").forEach(function (icon) {
                icon.addEventListener("click", function () {

                    const input = this.parentElement.querySelector("input");

                    if (input.type === "password") {
                        input.type = "text";
                        this.classList.remove("ti-eye");
                        this.classList.add("ti-eye-off");
                    } else {
                        input.type = "password";
                        this.classList.remove("ti-eye-off");
                        this.classList.add("ti-eye");
                    }

                });
            });

        });
    </script>

 
    <script>
        document.addEventListener("DOMContentLoaded", function () {

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

            if (form && btn) {
                form.addEventListener('submit', function () {

                    // Disable button
                    btn.disabled = true;

                    // Show spinner
                    btn.innerHTML =
                        `<span class="spinner-border spinner-border-sm me-2"></span>Processing...`;
                });
            }

        });
    </script>
@endsection