@extends('layouts.app')

@section('title', 'Buat Kata Sandi Baru - Janoer Koening')

@section('content')
<div class="py-20 bg-[#FAF7F0]">
    <div class="max-w-md mx-auto px-4 sm:px-6">
        <div class="bg-white p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-xl">
            <div class="text-center mb-8">
                <img src="{{ asset('assets/brand/logo.png') }}" alt="Logo" class="h-12 mx-auto mb-3">
                <h1 class="font-heading text-3xl font-bold text-charcoal">Buat Kata Sandi Baru</h1>
                <p class="text-xs text-charcoal/60 mt-1">Masukkan kata sandi baru Anda untuk mengamankan akun.</p>
            </div>

            @if(isset($errors) && $errors->any())
                <div class="mb-4 p-3 bg-red-50 text-red-700 text-xs rounded-xl border border-red-200">
                    {{ $errors->first() }}
                </div>
            @endif

            <form action="{{ route('password.update') }}" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">

                <div>
                    <label class="block text-xs font-semibold text-charcoal/80 mb-1">Alamat Email</label>
                    <input type="email" name="email" value="{{ old('email', $email) }}" required readonly class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 bg-gray-50 text-sm text-charcoal/70 outline-none cursor-not-allowed">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-charcoal/80 mb-1">Kata Sandi Baru</label>
                    <input type="password" name="password" required minlength="6" placeholder="Minimal 6 karakter" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-charcoal/80 mb-1">Konfirmasi Kata Sandi Baru</label>
                    <input type="password" name="password_confirmation" required minlength="6" placeholder="Ulangi kata sandi baru" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                </div>

                <button type="submit" class="w-full py-3 bg-deepsage text-ivory text-xs font-semibold uppercase tracking-wider rounded-full hover:bg-opacity-90 shadow-md transition flex items-center justify-center gap-2 cursor-pointer active:scale-95">
                    <i data-lucide="check" class="w-4 h-4"></i>
                    <span>Simpan Kata Sandi Baru</span>
                </button>
            </form>

            <div class="mt-6 pt-6 border-t border-gray-100 text-center text-xs text-charcoal/60">
                <a href="{{ route('login') }}" class="text-deepsage font-semibold hover:underline">Kembali ke Halaman Masuk</a>
            </div>
        </div>
    </div>
</div>
@endsection