@extends('layouts.app')

@section('page-title', 'Ubah Kata Sandi')
@section('page-subtitle', 'Akun')

@section('content')
    <a href="{{ route('profile.show') }}" class="back-link">
        <i data-lucide="arrow-left"></i>
        <span>Kembali ke profil</span>
    </a>

    <x-page-header eyebrow="Akun" title="Ubah Kata Sandi" subtitle="Gunakan kata sandi yang kuat dan tidak dipakai di layanan lain." />

    <div class="panel">
        <div class="panel__body" style="max-width:480px;">
            <form method="POST" action="{{ route('profile.update-password') }}">
                @csrf
                @method('PUT')
                <div class="field">
                    <label for="current_password">Password Saat Ini</label>
                    <div class="field__control-wrap">
                        <input type="password" id="current_password" name="current_password" autocomplete="current-password">
                        <button type="button" class="field__toggle-visibility" data-toggle-password="current_password" aria-label="Tampilkan password">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" /><circle cx="12" cy="12" r="2.75" /></svg>
                        </button>
                    </div>
                    @error('current_password')<p class="field-error">{{ $message }}</p>@enderror
                </div>

                <div class="field">
                    <label for="password">Password Baru</label>
                    <div class="field__control-wrap">
                        <input type="password" id="password" name="password" autocomplete="new-password">
                        <button type="button" class="field__toggle-visibility" data-toggle-password="password" aria-label="Tampilkan password">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" /><circle cx="12" cy="12" r="2.75" /></svg>
                        </button>
                    </div>
                    <p class="field-hint">Minimal 8 karakter, berbeda dari password lama.</p>
                    @error('password')<p class="field-error">{{ $message }}</p>@enderror
                </div>

                <div class="field">
                    <label for="password_confirmation">Konfirmasi Password Baru</label>
                    <input type="password" id="password_confirmation" name="password_confirmation" autocomplete="new-password">
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn">
                        <i data-lucide="check"></i>
                        <span>Simpan Password Baru</span>
                    </button>
                    <a href="{{ route('profile.show') }}" class="btn btn--ghost">Batal</a>
                </div>
            </form>
        </div>
    </div>
@endsection