@extends('layouts.app')

@section('title', 'Reset Password — ' . $user['username'])

@section('content')
<div class="max-w-2xl mx-auto px-4 py-8">
    @include('partials.nav')

    <div class="mt-6 mb-6">
        <a href="{{ route('ldap-users.index') }}" class="text-sm text-cyan-400 hover:text-cyan-300">← Back to users</a>
        <h1 class="text-2xl font-bold text-white mt-2">Reset Password: {{ $user['username'] }}</h1>
        <p class="text-slate-400 text-sm mt-1">Konfirmasi ganda diperlukan. Koneksi LDAPS (port 636) wajib.</p>
    </div>

    @include('partials.flash')

    <form method="POST" action="{{ route('ldap-users.password.reset', $user['username']) }}"
          class="bg-slate-900 border border-slate-800 rounded-2xl p-6 space-y-5"
          onsubmit="return confirm('Reset password for [{{ $user['username'] }}]? This cannot be undone easily.');">
        @csrf

        <div>
            <label for="password" class="block text-sm text-slate-300 mb-1">New Password</label>
            <input type="password" name="password" id="password" required minlength="8" maxlength="128"
                class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
            @error('password')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="password_confirmation" class="block text-sm text-slate-300 mb-1">Confirm New Password</label>
            <input type="password" name="password_confirmation" id="password_confirmation" required minlength="8" maxlength="128"
                class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white">
        </div>

        <div class="border border-amber-800/50 bg-amber-950/30 rounded-lg p-4 space-y-3">
            <p class="text-amber-200 text-sm font-medium">Konfirmasi ganda</p>
            <label class="flex items-center gap-2 text-sm text-slate-300">
                <input type="checkbox" name="confirm_action" value="1" required class="rounded">
                Saya yakin ingin mereset password akun ini
            </label>
            <div>
                <label for="confirm_username" class="block text-sm text-slate-300 mb-1">
                    Ketik username untuk konfirmasi: <span class="text-cyan-400">{{ $user['username'] }}</span>
                </label>
                <input type="text" name="confirm_username" id="confirm_username" required
                    class="w-full rounded-lg bg-slate-800 border border-slate-700 px-4 py-2 text-sm text-white"
                    autocomplete="off">
                @error('confirm_username')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="flex gap-3 pt-2">
            <button type="submit" class="rounded-lg bg-violet-700 hover:bg-violet-600 px-5 py-2 text-sm font-medium text-white">
                Reset Password
            </button>
            <a href="{{ route('ldap-users.index') }}" class="rounded-lg border border-slate-700 px-5 py-2 text-sm text-slate-300 hover:bg-slate-800">
                Cancel
            </a>
        </div>
    </form>

    <aside class="mt-6 bg-slate-900 border border-slate-800 rounded-2xl p-5 notes-panel">
        <h2 class="text-lg font-semibold text-white mb-4">Catatan</h2>
        <dl class="space-y-3 text-sm text-slate-400">
            <div>
                <dt class="font-medium text-violet-400 mb-1">LDAPS wajib</dt>
                <dd>Reset password membutuhkan koneksi LDAPS (port 636) ke domain controller.</dd>
            </div>
            <div>
                <dt class="font-medium text-amber-400 mb-1">Konfirmasi ganda</dt>
                <dd>Centang konfirmasi dan ketik ulang username untuk mencegah reset tidak sengaja.</dd>
            </div>
            <div>
                <dt class="font-medium text-emerald-400 mb-1">Notifikasi email</dt>
                <dd>User akan menerima email pemberitahuan jika password berhasil diubah dan email terdaftar.</dd>
            </div>
        </dl>
    </aside>
</div>
@endsection