@extends('auth.layouts.auth-template')
@section('title', 'Update Password')

@section('style')
    <style>
        .login-form-section {
            background: #ffffff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-card {
            width: 100%;
            max-width: 500px;
            padding: 40px;
        }

        .login-form-title img {
            width: 200px;
            margin-bottom: 30px;
            transition: transform 0.5s ease;
        }

        .login-form-title img:hover {
            transform: scale(1.05);
        }

        .login-form-title h3 {
            font-size: 32px;
            font-weight: 800;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .login-form-title p {
            color: #666;
            margin-bottom: 25px;
            font-size: 15px;
            line-height: 1.6;
        }

        .form-group-custom {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group-custom label {
            display: block;
            font-weight: 700;
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            text-align: left;
        }

        .input-wrapper {
            position: relative;
        }

        .input-field {
            width: 100%;
            padding: 14px 16px;
            padding-right: 45px;
            border: 1.5px solid #e0e0e0;
            border-radius: 12px;
            font-size: 15px;
            color: #1a1a1a;
            transition: all 0.3s ease;
            background: #fdfdfd;
        }

        .input-field:focus {
            border-color: #0040A0;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(0, 64, 160, 0.08);
            outline: none;
        }

        .toggle-password-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #0040A0;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.2s;
            opacity: 0.6;
        }

        .toggle-password-icon:hover {
            opacity: 1;
        }

        .toggle-password-icon.disabled {
            pointer-events: none;
            opacity: 0.3;
        }

        .reset-password-btn {
            width: 100%;
            padding: 16px;
            background: #0040A0;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            margin-top: 10px;
            box-shadow: 0 4px 12px rgba(0, 64, 160, 0.2);
        }

        .reset-password-btn:hover {
            background: #003380;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 64, 160, 0.3);
            color: #fff;
        }

        .alert {
            border-radius: 12px;
            font-size: 14px;
            border: none;
        }

        .alert-danger {
            background-color: #fff5f5;
            color: #c53030;
        }

        .alert-success {
            background-color: #f0fff4;
            color: #2f855a;
        }

        .error {
            color: #c53030;
            font-size: 13px;
            margin-top: 5px;
            display: block;
            text-align: left;
        }

        @media (max-width: 768px) {
            .auth-card {
                padding: 20px;
            }
        }
    </style>
@endsection

@section('content')
    <section>
        <div class="row reset-page m-0">
            @include('auth.left-banner')
            <div class="col-xl-5 col-lg-5 col-md-12 p-0">
                <div class="login-form-section">
                    <div class="auth-card">
                        <div class="login-form-title text-center">
                            <img src="{{ asset('assets/template/images/logo/main-logo.jpg') }}" alt="Logo" />
                            <h3><span class="blue-text">Update</span> Password</h3>
                            <p>Welcome, <strong>{{ $user->name }}</strong>. For your security, please update your password
                                on your first login.</p>
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger mb-4" role="alert">
                                <ul class="mb-0 ps-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if (Session::has('message'))
                            <div class="alert alert-success mb-4" role="alert">
                                {{ Session::get('message') }}
                            </div>
                        @endif

                        <form action="{{ route('backend.users.force_password_update.store') }}" method="POST"
                            id="force-password-update">
                            @csrf

                            <div class="form-group-custom">
                                <label for="password">New Password<span class="red-text">*</span></label>
                                <div class="input-wrapper">
                                    <input type="password" name="password" id="password" class="input-field"
                                        placeholder="Create a strong password" required />
                                    <i class="toggle-password-icon fa-regular fa-eye-slash disabled"
                                        data-target="password"></i>
                                </div>
                                <p class="small text-muted mt-2 mb-0" style="font-size: 12px; text-align: left;">
                                    Must be 8+ chars with uppercase, number, & special char.
                                </p>
                            </div>

                            <div class="form-group-custom">
                                <label for="password_confirmation">Confirm Password<span class="red-text">*</span></label>
                                <div class="input-wrapper">
                                    <input type="password" name="password_confirmation" id="password-confirmation"
                                        class="input-field" placeholder="Repeat your new password" required />
                                    <i class="toggle-password-icon fa-regular fa-eye-slash disabled"
                                        data-target="password-confirmation"></i>
                                </div>
                            </div>

                            <button type="submit" class="btn reset-password-btn">
                                Update Password <i class="fas fa-arrow-right"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("#force-password-update").validate({
                errorElement: 'span',
                errorClass: 'error',
                rules: {
                    password: {
                        required: true,
                        checklower: true,
                        checkupper: true,
                        checkdigit: true,
                        checkspecial: true,
                        minlength: 8
                    },
                    password_confirmation: {
                        required: true,
                        equalTo: "#password"
                    },
                },
                messages: {
                    password: {
                        checklower: "Must contain at least 1 lowercase letter.",
                        checkupper: "Must contain at least 1 uppercase letter.",
                        checkdigit: "Must contain at least 1 numeric character.",
                        checkspecial: "Must contain at least 1 special character.",
                        minlength: "Must be at least 8 characters long."
                    },
                    password_confirmation: {
                        equalTo: "Passwords do not match."
                    }
                }
            });

            $.validator.addMethod("checklower", function(value) {
                return /[a-z]/.test(value);
            });
            $.validator.addMethod("checkupper", function(value) {
                return /[A-Z]/.test(value);
            });
            $.validator.addMethod("checkdigit", function(value) {
                return /[0-9]/.test(value);
            });
            $.validator.addMethod("checkspecial", function(value) {
                return /[\'.?!@#$%^&*()_-]/.test(value);
            });

            function setupPasswordToggle(passwordInputId, toggleIcon) {
                const passwordInput = document.getElementById(passwordInputId);
                passwordInput.addEventListener('input', function() {
                    if (passwordInput.value.trim() !== "") {
                        toggleIcon.classList.remove('disabled');
                    } else {
                        toggleIcon.classList.add('disabled');
                        passwordInput.setAttribute('type', 'password');
                        toggleIcon.classList.remove('fa-eye');
                        toggleIcon.classList.add('fa-eye-slash');
                    }
                });

                toggleIcon.addEventListener('click', function() {
                    if (!toggleIcon.classList.contains('disabled')) {
                        const isPassword = passwordInput.getAttribute('type') === 'password';
                        passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
                        this.classList.toggle('fa-eye');
                        this.classList.toggle('fa-eye-slash');
                    }
                });
            }

            document.querySelectorAll('.toggle-password-icon').forEach(icon => {
                const targetId = icon.getAttribute('data-target');
                setupPasswordToggle(targetId, icon);
            });
        });
    </script>
@endsection