<x-portal-layout
    title="Akun Pelanggan"
    :preview-mode="$previewMode ?? false"
    :preview-back-url="$previewBackUrl ?? null"
    :preview-home-url="$previewHomeUrl ?? null"
    :portal-request-url="$portalRequestUrl ?? null"
    :portal-account-url="$portalAccountUrl ?? null"
>
    @if (($previewMode ?? false) === true)
        <section class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
            <div class="font-semibold">Mode preview admin</div>
            <div class="mt-1">Profil ditampilkan read-only dan form PIN/logout disembunyikan.</div>
            <a href="{{ $previewBackUrl ?? route('portal-preview.index') }}" class="mt-3 inline-block rounded-md border border-amber-300 bg-white px-3 py-2 text-amber-900">Kembali</a>
        </section>
    @endif

    <section class="rounded-lg bg-white p-5 shadow-sm">
        <div class="text-sm text-slate-500">Akun pelanggan</div>
        <h1 class="text-2xl font-semibold">{{ $customer->name }}</h1>
        <div class="mt-4 space-y-3 text-sm">
            <div class="rounded-md bg-slate-50 p-3">
                <div class="text-slate-500">Nomor HP</div>
                <div class="font-medium">{{ $customer->phone }}</div>
            </div>
            <div class="rounded-md bg-slate-50 p-3">
                <div class="text-slate-500">Alamat</div>
                <div class="font-medium">{{ $customer->address ?: '-' }}</div>
            </div>
            <div class="rounded-md bg-slate-50 p-3">
                <div class="text-slate-500">PIN terakhir diubah</div>
                <div class="font-medium">{{ $customer->pin_changed_at?->format('d/m/Y H:i') ?? 'Belum pernah' }}</div>
            </div>
        </div>
    </section>

    @unless (($previewMode ?? false) === true)
        <section class="mt-4 rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Profil</h2>
            <form method="post" action="{{ route('portal.account.update') }}" class="mt-3 space-y-3">
                @csrf
                @method('put')
                <input name="name" value="{{ old('name', $customer->name) }}" class="w-full rounded-md border px-3 py-3 text-sm">
                <textarea name="address" placeholder="Alamat" class="w-full rounded-md border px-3 py-3 text-sm">{{ old('address', $customer->address) }}</textarea>
                <button class="w-full rounded-md bg-slate-900 px-4 py-3 font-medium text-white">Simpan Profil</button>
            </form>
        </section>

        <section class="mt-4 rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Ganti PIN</h2>
            <form method="post" action="{{ route('portal.pin.update') }}" class="mt-3 space-y-3">
                @csrf
                <input name="current_pin" type="password" inputmode="numeric" maxlength="6" placeholder="PIN lama" class="w-full rounded-md border px-3 py-3 text-sm">
                <input name="pin" type="password" inputmode="numeric" maxlength="6" placeholder="PIN baru" class="w-full rounded-md border px-3 py-3 text-sm">
                <input name="pin_confirmation" type="password" inputmode="numeric" maxlength="6" placeholder="Ulangi PIN baru" class="w-full rounded-md border px-3 py-3 text-sm">
                <button class="w-full rounded-md border px-4 py-3 font-medium">Simpan PIN</button>
            </form>
        </section>

        <form method="post" action="{{ route('portal.logout') }}" class="mt-4">
            @csrf
            <button class="w-full rounded-md border border-red-200 bg-white px-4 py-3 font-medium text-red-700">Logout</button>
        </form>
    @endunless
</x-portal-layout>
