@extends('layouts.app')

@section('content')
    <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
        <h2 class="text-2xl font-bold text-white">Pengaturan</h2>
        <a href="{{ route('reports.export', ['type' => 'all']) }}" class="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-400">Export Semua PDF</a>
    </div>

    <div class="mb-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-5">
        <h3 class="mb-4 text-lg font-semibold text-white">Profil Akun</h3>
        <form method="POST" action="{{ route('settings.profile') }}">
            @csrf
            <div class="grid gap-3 md:grid-cols-2">
                <input type="text" name="name" placeholder="Nama Pengguna" value="{{ old('name', $user?->name) }}" required class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                <input type="email" name="email" placeholder="Email" value="{{ old('email', $user?->email) }}" required class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
            </div>
            <button type="submit" class="mt-4 rounded-lg bg-slate-700 px-4 py-2 text-sm font-semibold hover:bg-slate-600">Simpan Profil</button>
        </form>
    </div>

    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-5">
        <h3 class="mb-4 text-lg font-semibold text-white">Keamanan</h3>
        <form method="POST" action="{{ route('settings.password') }}">
            @csrf
            <div class="grid gap-3 md:grid-cols-3">
                <input type="password" name="current_password" placeholder="Password Saat Ini" required class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                <input type="password" name="new_password" placeholder="Password Baru" required class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
                <input type="password" name="new_password_confirmation" placeholder="Ulangi Password Baru" required class="rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-white">
            </div>
            <button type="submit" class="mt-4 rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-400">Update Password</button>
            <p class="mt-3 text-sm text-slate-400">Jika user baru dibuat otomatis, password awal: <b>password123</b></p>
        </form>
    </div>
@endsection