@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30, 41, 59, .72);
        backdrop-filter: blur(10px);
    }

    .settings-card {
        border: 1px solid rgba(245, 158, 11, .14) !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
        transition: all .25s ease;
    }

    .settings-card:hover {
        border-color: rgba(245, 158, 11, .28) !important;
    }

    .card-header-custom {
        background: transparent;
        border-bottom: 1px solid rgba(148, 163, 184, .08);
    }

    .security-icon-box {
        width: 74px;
        height: 74px;
        border-radius: 18px;
        background:
            linear-gradient(135deg,
                rgba(245, 158, 11, .18),
                rgba(234, 88, 12, .18));
        border: 1px solid rgba(245, 158, 11, .22);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fdba74;
        font-size: 30px;
        flex-shrink: 0;
    }

    .security-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .security-meta .title {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
    }

    .security-meta .subtitle {
        color: #94a3b8;
        font-size: .82rem;
    }

    .security-alert {
        border: 1px solid rgba(245, 158, 11, .18);
        background: rgba(245, 158, 11, .08);
        border-radius: 16px;
        padding: 1rem 1.1rem;
    }

    .security-alert-title {
        font-size: .84rem;
        font-weight: 700;
        color: #fcd34d;
        margin-bottom: 4px;
    }

    .security-alert-text {
        font-size: .82rem;
        color: #cbd5e1;
        line-height: 1.55;
    }

    .form-section-title {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 1rem;
    }

    .password-input-group .input-group-text {
        cursor: pointer;
    }

    .password-strength {
        height: 8px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(148, 163, 184, .12);
    }

    .password-strength-bar {
        height: 100%;
        width: 0;
        transition: all .25s ease;
        border-radius: 999px;
    }

    .password-hint {
        font-size: .78rem;
        color: #94a3b8;
    }

    .form-control,
    .form-select {
        border-color: rgba(148, 163, 184, .12);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(245, 158, 11, .45);
        box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .12);
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0" style="
                width:240px;
                height:240px;
                background:
                radial-gradient(
                    circle,
                    rgba(245,158,11,.16) 0%,
                    transparent 72%
                );
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1">

            <div class="d-flex align-items-center gap-3 flex-wrap">

                <div class="security-icon-box">
                    <i class="ti tabler-lock-password"></i>
                </div>

                <div class="security-meta">

                    <div class="title">
                        Settings Security
                    </div>

                    <div class="subtitle">
                        Pengaturan keamanan akun admin
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- SECURITY FORM --}}
    <div class="card border-0 shadow-sm overflow-hidden glass-card settings-card">

        <div class="card-header card-header-custom">

            <div>
                <h5 class="mb-1 text-white">
                    Change Password
                </h5>

                <small class="text-body-secondary">
                    Update password administrator untuk menjaga keamanan akun.
                </small>
            </div>

        </div>

        <div class="card-body">

            {{-- SECURITY NOTICE --}}
            <div class="security-alert mb-4">

                <div class="security-alert-title">
                    Security Recommendation
                </div>

                <div class="security-alert-text">
                    Gunakan kombinasi huruf besar, huruf kecil, angka, dan simbol.
                    Hindari menggunakan password yang sama dengan akun lain.
                </div>

            </div>

            <form method="POST" action="{{ route('admin.settings.password.update') }}" id="passwordForm">

                @csrf
                @method('PUT')

                <div class="form-section-title">
                    Password Configuration
                </div>

                <div class="row g-4">

                    {{-- CURRENT PASSWORD --}}
                    <div class="col-md-4">

                        <label class="form-label text-white">
                            Current Password
                        </label>

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

                            <span class="input-group-text">
                                <i class="ti tabler-lock"></i>
                            </span>

                            <input type="password" name="current_password" class="form-control js-password-field" required>

                            <span class="input-group-text js-toggle-password">
                                <i class="ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </div>

                    {{-- NEW PASSWORD --}}
                    <div class="col-md-4">

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

                        <div class="input-group password-input-group mb-2">

                            <span class="input-group-text">
                                <i class="ti tabler-key"></i>
                            </span>

                            <input type="password" name="password" id="newPassword" class="form-control js-password-field" required minlength="8">

                            <span class="input-group-text js-toggle-password">
                                <i class="ti tabler-eye-off"></i>
                            </span>

                        </div>

                        <div class="password-strength mb-2">

                            <div class="password-strength-bar" id="passwordStrengthBar"></div>

                        </div>

                        <div class="password-hint" id="passwordStrengthText">

                            Minimum 8 karakter.

                        </div>

                    </div>

                    {{-- CONFIRM PASSWORD --}}
                    <div class="col-md-4">

                        <label class="form-label text-white">
                            Confirm Password
                        </label>

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

                            <span class="input-group-text">
                                <i class="ti tabler-shield-lock"></i>
                            </span>

                            <input type="password" name="password_confirmation" id="confirmPassword" class="form-control js-password-field" required minlength="8">

                            <span class="input-group-text js-toggle-password">
                                <i class="ti tabler-eye-off"></i>
                            </span>

                        </div>

                        <div class="password-hint mt-2" id="confirmPasswordText">

                            Konfirmasi password baru.

                        </div>

                    </div>

                </div>

                <div class="mt-4 d-flex flex-wrap gap-2">

                    <button class="btn btn-warning px-4" type="submit" id="passwordSubmitBtn">

                        <span class="submit-text">

                            <i class="ti tabler-shield-check me-1"></i>
                            Update Password

                        </span>

                        <span class="submit-loading d-none">

                            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>

                            Updating...

                        </span>

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

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

        const submitBtn =
            document.getElementById('passwordSubmitBtn');

        const passwordInput =
            document.getElementById('newPassword');

        const confirmInput =
            document.getElementById('confirmPassword');

        const strengthBar =
            document.getElementById('passwordStrengthBar');

        const strengthText =
            document.getElementById('passwordStrengthText');

        const confirmText =
            document.getElementById('confirmPasswordText');

        document.querySelectorAll('.js-toggle-password')
            .forEach(function(toggle) {

                toggle.addEventListener('click', function() {

                    const group =
                        this.closest('.password-input-group');

                    const input =
                        group?.querySelector('.js-password-field');

                    const icon =
                        this.querySelector('i');

                    if (!input || !icon) {
                        return;
                    }

                    const isPassword =
                        input.type === 'password';

                    input.type =
                        isPassword ? 'text' : 'password';

                    icon.classList.toggle(
                        'tabler-eye',
                        isPassword
                    );

                    icon.classList.toggle(
                        'tabler-eye-off',
                        !isPassword
                    );

                });

            });

        function updateStrength() {

            if (!passwordInput) {
                return;
            }

            const value =
                passwordInput.value || '';

            let score = 0;

            if (value.length >= 8) score++;
            if (/[A-Z]/.test(value)) score++;
            if (/[0-9]/.test(value)) score++;
            if (/[^A-Za-z0-9]/.test(value)) score++;

            let width = '0%';
            let text = 'Minimum 8 karakter.';
            let background = '#475569';

            if (score === 1) {
                width = '25%';
                text = 'Weak password';
                background = '#ef4444';
            }

            if (score === 2) {
                width = '50%';
                text = 'Medium password';
                background = '#f59e0b';
            }

            if (score === 3) {
                width = '75%';
                text = 'Strong password';
                background = '#3b82f6';
            }

            if (score >= 4) {
                width = '100%';
                text = 'Very strong password';
                background = '#22c55e';
            }

            strengthBar.style.width =
                width;

            strengthBar.style.background =
                background;

            strengthText.textContent =
                text;

        }

        function validateConfirmPassword() {

            if (!confirmInput || !passwordInput) {
                return;
            }

            if (!confirmInput.value.length) {

                confirmText.textContent =
                    'Konfirmasi password baru.';

                confirmText.style.color =
                    '#94a3b8';

                return;

            }

            if (confirmInput.value === passwordInput.value) {

                confirmText.textContent =
                    'Password confirmation match';

                confirmText.style.color =
                    '#22c55e';

            } else {

                confirmText.textContent =
                    'Password confirmation does not match';

                confirmText.style.color =
                    '#ef4444';

            }

        }

        passwordInput?.addEventListener(
            'input',
            function() {

                updateStrength();
                validateConfirmPassword();

            }
        );

        confirmInput?.addEventListener(
            'input',
            validateConfirmPassword
        );

        if (form && submitBtn) {

            form.addEventListener('submit', function() {

                submitBtn.disabled = true;

                submitBtn.querySelector('.submit-text')
                    ?.classList.add('d-none');

                submitBtn.querySelector('.submit-loading')
                    ?.classList.remove('d-none');

            });

        }

    });
</script>
@endpush