@extends('layouts.app')

@section('title', 'Profil Saya')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Akun</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Profil Saya</p>
            <h1 class="pkbm-dashboard__title">Profil Saya</h1>
            <p class="pkbm-dashboard__subtitle">Kelola informasi profil {{ $workspace['institution_profile'] ? 'lembaga' : 'akun' }} dan keamanan akses SmartPenF.</p>
        </div>
        @if ($workspace['organization'])
            <div class="pkbm-settings__period">
                <span class="pkbm-settings__period-icon"><i class="bi bi-building" aria-hidden="true"></i></span>
                <span>
                    <span class="pkbm-settings__period-label">Lembaga</span>
                    <span class="pkbm-settings__period-value">{{ $workspace['organization'] }}</span>
                </span>
            </div>
        @endif
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span>
        </div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Periksa kembali data yang diisi.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="grid items-start gap-5 xl:grid-cols-[minmax(0,1.55fr)_minmax(19rem,0.8fr)]">
        @if ($workspace['institution_profile'])
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <img src="{{ $workspace['avatar_url'] }}" alt="Logo {{ $workspace['organization'] }}" class="size-12 rounded-xl border border-slate-200 bg-white object-contain p-1">
                        <div>
                            <h2 class="sp-section-title">Profil lembaga</h2>
                            <p class="mt-1 text-xs text-slate-500">Perbarui identitas dan informasi kontak lembaga Anda.</p>
                        </div>
                    </div>
                </div>
                <form method="POST" action="{{ route('account.institution.update') }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="grid gap-4 p-4 sm:grid-cols-2 sm:p-5">
                        @foreach ($workspace['institution_profile'] as $name => $field)
                            <div class="{{ in_array($name, ['nama_pkbm', 'alamat'], true) ? 'sm:col-span-2' : '' }}">
                                <label for="institution-{{ $name }}" class="sp-form-label">{{ $field['label'] }} @if ($name === 'nama_pkbm')<span class="text-rose-500">*</span>@endif</label>
                                @if ($field['type'] === 'textarea')
                                    <textarea id="institution-{{ $name }}" name="{{ $name }}" rows="3" class="sp-form-control w-full px-3 py-2.5 text-sm" @required($name === 'nama_pkbm')>{{ old($name, $field['value']) }}</textarea>
                                @else
                                    <input id="institution-{{ $name }}" name="{{ $name }}" type="{{ $field['type'] }}" value="{{ old($name, $field['value']) }}" class="sp-form-control w-full px-3 py-2.5 text-sm" @required($name === 'nama_pkbm') @if ($name === 'website') placeholder="https://contoh.id" @endif>
                                @endif
                                @error($name)<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                            </div>
                        @endforeach

                        <div class="sm:col-span-2">
                            <label for="institution-logo" class="sp-form-label">Logo lembaga</label>
                            <div class="flex flex-wrap items-center gap-4 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:flex-nowrap">
                                <div class="grid size-20 shrink-0 place-items-center overflow-hidden rounded-lg border border-slate-200 bg-white p-2">
                                    <img src="{{ $workspace['institution_logo_url'] }}" alt="Logo {{ $workspace['organization'] }}" class="block max-h-full max-w-full object-contain">
                                </div>
                                <div class="min-w-0 flex-1">
                                    <input id="institution-logo" name="logo" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" class="sp-form-control w-full px-3 py-2 text-sm">
                                    <p class="mt-1 text-xs text-slate-500">Format JPG, PNG, atau WEBP; ukuran maksimal 5 MB. Kosongkan jika tidak ingin mengganti logo.</p>
                                    @error('logo')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end border-t border-slate-100 p-4 sm:px-5">
                        <button type="submit" class="sp-btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan profil lembaga</button>
                    </div>
                </form>
                @if ($workspace['institution_statistics'])
                    <dl class="grid gap-4 border-t border-slate-100 bg-slate-50/70 p-4 sm:grid-cols-2 sm:px-5">
                        <div>
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Username akun</dt>
                            <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $account->username }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Jenis akun</dt>
                            <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $workspace['role'] }}</dd>
                        </div>
                        @foreach ($workspace['institution_statistics'] as $label => $value)
                            <div>
                                <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">{{ $label }}</dt>
                                <dd class="mt-1 text-sm font-semibold text-slate-800">{{ number_format((int) $value, 0, ',', '.') }}</dd>
                            </div>
                        @endforeach
                    </dl>
                @endif
            </section>
        @else
            <section class="sp-card h-fit overflow-hidden">
                <div class="sp-card-header flex items-center gap-3">
                    <img src="{{ $workspace['avatar_url'] }}" alt="" class="size-12 rounded-xl border border-blue-100 object-cover shadow-sm">
                    <div class="min-w-0">
                        <h2 class="sp-section-title">{{ $workspace['profile_title'] }}</h2>
                        <p class="mt-1 text-xs text-slate-500">{{ $workspace['role'] }}</p>
                    </div>
                </div>
                <dl class="grid gap-4 p-4 sm:grid-cols-2">
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Username</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $account->username }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Jenis akun</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $workspace['role'] }}</dd>
                    </div>
                    @if ($workspace['organization'])
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Lembaga</dt>
                            <dd class="mt-1 text-sm font-semibold text-slate-800">{{ $workspace['organization'] }}</dd>
                        </div>
                    @endif
                    @foreach ($workspace['profile_details'] as $label => $value)
                        <div class="{{ $label === 'Alamat' ? 'sm:col-span-2' : '' }}">
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">{{ $label }}</dt>
                            <dd class="mt-1 whitespace-pre-line text-sm font-semibold text-slate-800">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </section>
        @endif

        <section id="password" class="sp-card scroll-mt-24 overflow-hidden">
            <div class="sp-card-header">
                <span class="grid size-10 place-items-center rounded-xl bg-blue-50 text-lg text-blue-700"><i class="bi bi-shield-lock" aria-hidden="true"></i></span>
                <h2 class="sp-section-title mt-3">Ganti password</h2>
                <p class="mt-1 text-sm text-slate-500">Masukkan password saat ini untuk mengamankan perubahan.</p>
            </div>

            <form method="POST" action="{{ route('account.password.update') }}" class="space-y-4 p-4 sm:p-5">
                @csrf
                @method('PUT')
                <div>
                    <label for="current_password" class="sp-form-label">Password saat ini</label>
                    <input id="current_password" name="current_password" type="password" autocomplete="current-password" required
                           class="sp-form-control w-full px-3.5 py-2.5 text-sm">
                </div>
                <div>
                    <label for="password" class="sp-form-label">Password baru</label>
                    <input id="password" name="password" type="password" autocomplete="new-password" minlength="8" required
                           class="sp-form-control w-full px-3.5 py-2.5 text-sm">
                </div>
                <div>
                    <label for="password_confirmation" class="sp-form-label">Konfirmasi password baru</label>
                    <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" minlength="8" required
                           class="sp-form-control w-full px-3.5 py-2.5 text-sm">
                </div>
                <button type="submit" class="sp-btn-primary">
                    <i class="bi bi-check2" aria-hidden="true"></i>Simpan password
                </button>
            </form>
        </section>
    </div>
</div>
@endsection