@extends('layouts.admin')
@section('content')
    <style>
      /* Fields base styling */
.custom-password-group {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    background-color: #f8fafc;
}
.custom-password-group:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background-color: #ffffff;
}
.custom-password-group .form-control {
    background-color: transparent;
    border: none;
    font-size: 0.95rem;
    padding: 0.75rem;
    color: #1e293b;
}
.custom-password-group .form-control:focus { box-shadow: none; }
.custom-password-group .input-group-text { background: transparent; border: none; color: #94a3b8; }
.custom-password-group .toggle-password { background: transparent; border: none; color: #64748b; }

/* Dynamic Checklist Styles */
.password-checklist {
    font-size: 0.85rem;
    line-height: 1.6;
}
.rule-container {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    transition: color 0.2s ease;
}
.rule-icon {
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    width: 16px;
}

/* Default Cross / Invalid Color (Grey/Muted text style) */
.rule-container.text-muted .rule-icon {
    color: #94a3b8;
}

/* Success State */
.rule-valid {
    color: #16a34a !important;
}
.rule-valid .rule-icon {
    color: #16a34a !important;
}

.tracking-wider { letter-spacing: 0.05em; font-size: 0.75rem !important; }

/* Disabled button style */
#submitBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
    </style>
    <div class="main-card">
        @include('admin.partials.page-header', [
            'icon' => 'bi bi-lock',
            'title' => 'Change Password',
            'subtitle' => 'Update your account password',
            'show_back' => true,
            'back_url' => route('admin.dashboard'),
        ])
        
        <div class="card-body p-4">
            <form id="changePasswordForm" action="{{ route('admin.change.password.update') }}" method="POST"
                isReload="{{ route('admin.change.password') }}">
                @csrf
                <div class="row row-cols-1 row-cols-md-3 g-4">
                    {{-- Current Password --}}
                    <div class="col">
                        <label class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Current
                            Password</label>
                        <div class="input-group custom-password-group">
                            <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
                            <input type="password" name="current_password" id="current_password" class="form-control"
                                placeholder="Enter current password" required>
                            <button class="btn toggle-password" type="button">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>

                    {{-- New Password --}}
                    <div class="col">
                        <label class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">New
                            Password</label>
                        <div class="input-group custom-password-group">
                            <span class="input-group-text"><i class="bi bi-key"></i></span>
                            <input type="password" name="new_password" id="new_password" class="form-control"
                                placeholder="Enter new password" required>
                            <button class="btn toggle-password" type="button">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        <div class="password-checklist mt-3">
                            <div id="rule-lower" class="rule-container text-muted">
                                <i class="bi bi-x-lg rule-icon me-2"></i><span>At least one lowercase letter</span>
                            </div>
                            <div id="rule-length" class="rule-container text-muted">
                                <i class="bi bi-x-lg rule-icon me-2"></i><span>Minimum 8 characters</span>
                            </div>
                            <div id="rule-upper" class="rule-container text-muted">
                                <i class="bi bi-x-lg rule-icon me-2"></i><span>At least one uppercase letter</span>
                            </div>
                            <div id="rule-number" class="rule-container text-muted">
                                <i class="bi bi-x-lg rule-icon me-2"></i><span>At least one number</span>
                            </div>
                            <div id="rule-special" class="rule-container text-muted">
                                <i class="bi bi-x-lg rule-icon me-2"></i><span>At least one special character</span>
                            </div>
                        </div>
                    </div>

                    {{-- Confirm New Password --}}
                    <div class="col">
                        <label class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Confirm New
                            Password</label>
                        <div class="input-group custom-password-group" id="confirmPasswordGroup">
                            <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                            <input type="password" name="new_password_confirmation" id="confirm_password"
                                class="form-control" placeholder="Confirm new password" required>
                            <button class="btn toggle-password" type="button">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        <div id="match-error" class="text-danger small mt-1 d-none">Passwords do not match.</div>
                    </div>

                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <button type="submit" id="submitBtn" disabled
                            class="btn btn-primary px-4 py-2 rounded-3 fw-bold">Update Password</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('.toggle-password').forEach(button => {
                button.addEventListener('click', function () {
                    const input = this.closest('.custom-password-group').querySelector('input');
                    const icon  = this.querySelector('i');
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.replace('bi-eye', 'bi-eye-slash');
                    } else {
                        input.type = 'password';
                        icon.classList.replace('bi-eye-slash', 'bi-eye');
                    }
                });
            });

            const newPasswordInput     = document.getElementById('new_password');
            const confirmPasswordInput = document.getElementById('confirm_password');
            const submitBtn            = document.getElementById('submitBtn');
            const matchError           = document.getElementById('match-error');
            const confirmGroup         = document.getElementById('confirmPasswordGroup');

            // ─── Password Rules ───────────────────────────────────────────────────
            const rules = {
                lower:   { reg: /[a-z]/,      el: document.getElementById('rule-lower')   },
                length:  { reg: /.{8,}/,       el: document.getElementById('rule-length')  },
                upper:   { reg: /[A-Z]/,       el: document.getElementById('rule-upper')   },
                number:  { reg: /[0-9]/,       el: document.getElementById('rule-number')  },
                special: { reg: /[^A-Za-z0-9]/, el: document.getElementById('rule-special') }
            };

            function validatePassword() {
                const val = newPasswordInput.value;
                let allValid = true;

                for (let key in rules) {
                    const isValid = rules[key].reg.test(val);
                    const icon    = rules[key].el.querySelector('.rule-icon');

                    if (isValid) {
                        rules[key].el.classList.remove('text-muted');
                        rules[key].el.classList.add('rule-valid');
                        icon.classList.replace('bi-x-lg', 'bi-check-lg');
                    } else {
                        rules[key].el.classList.remove('rule-valid');
                        rules[key].el.classList.add('text-muted');
                        icon.classList.replace('bi-check-lg', 'bi-x-lg');
                        allValid = false;
                    }
                }

                checkFormReady(allValid);
            }

            function checkFormReady(allValid) {
                const confirmVal     = confirmPasswordInput.value;
                const passwordsMatch = newPasswordInput.value === confirmVal;

                if (confirmVal.length > 0) {
                    if (passwordsMatch) {
                        matchError.classList.add('d-none');
                        confirmGroup.style.borderColor = '#22c55e';
                    } else {
                        matchError.classList.remove('d-none');
                        confirmGroup.style.borderColor = '#ef4444';
                    }
                } else {
                    matchError.classList.add('d-none');
                    confirmGroup.style.borderColor = '';
                }

                if (allValid && passwordsMatch && confirmVal.length > 0) {
                    submitBtn.removeAttribute('disabled');
                } else {
                    submitBtn.setAttribute('disabled', 'disabled');
                }
            }

            function allRulesValid() {
                const val = newPasswordInput.value;
                return Object.values(rules).every(r => r.reg.test(val));
            }

            newPasswordInput.addEventListener('input', validatePassword);

            confirmPasswordInput.addEventListener('input', function () {
                checkFormReady(allRulesValid());
            });

        });

        initAdvancedFormValidation('#changePasswordForm', {
            current_password: {
                required: true
            },
            new_password: {
                required: true,
                minlength: 8
            },
            new_password_confirmation: {
                required: true,
                equalTo: '[name="new_password"]'
            }
        }, {
            current_password: {
                required: 'Please enter current password.'
            },
            new_password: {
                required: 'Please enter new password.',
                minlength: 'Password must be at least 8 characters.'
            },
            new_password_confirmation: {
                required: 'Please confirm password.',
                equalTo: 'Passwords do not match.'
            }
        });
    </script>
@endpush