<?= $this->extend('layouts/dashboard') ?>

<?= $this->section('content') ?>
<?php
$roleDescriptions = [
    'owner' => lang('Backoffice.roleOwnerDesc'),
    'admin' => lang('Backoffice.roleAdminDesc'),
    'manager' => lang('Backoffice.roleManagerDesc'),
    'member' => lang('Backoffice.roleMemberDesc'),
    'viewer' => lang('Backoffice.roleViewerDesc'),
    'auditor' => lang('Backoffice.roleAuditorDesc'),
];
$isEdit = $member !== null;
$formTitle = $isEdit ? lang('Backoffice.teamFormEdit') : lang('Backoffice.teamFormNew');
$formIntro = $isEdit ? lang('Backoffice.teamFormIntroEdit') : lang('Backoffice.teamFormIntroNew');
?>
<section class="grid gap-4 xl:grid-cols-[minmax(0,1.05fr)_380px]">
    <article class="rounded-[30px] border border-white/10 bg-gradient-to-br from-emerald-500/15 via-slate-900 to-cyan-500/10 p-6 shadow-glow">
        <div class="inline-flex rounded-full border border-emerald-400/30 bg-emerald-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-100"><?= $isEdit ? 'Member update' : 'Onboarding' ?></div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white"><?= esc($formTitle) ?></h1>
        <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-300"><?= esc($formIntro) ?></p>
        <div class="mt-6 flex flex-wrap gap-3"><a href="<?= site_url('team') ?>" class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10"><?= esc(lang('Backoffice.backToTeam')) ?></a></div>
    </article>
    <aside class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur"><h2 class="text-lg font-semibold text-white"><?= esc(lang('Backoffice.rolesAvailable')) ?></h2><div class="mt-4 space-y-3"><?php foreach ($roleDescriptions as $role => $description): ?><div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><div class="text-sm font-semibold text-white"><?= esc(ucfirst($role)) ?></div><p class="mt-2 text-sm leading-6 text-slate-400"><?= esc($description) ?></p></div><?php endforeach; ?></div></aside>
</section>
<section class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
<?php if (session('errors')): ?><div class="mb-5 rounded-3xl border border-rose-400/20 bg-rose-400/10 px-5 py-4"><div class="text-sm font-semibold text-rose-100"><?= esc(lang('Backoffice.reviewFields')) ?></div><ul class="mt-3 list-disc space-y-1 pl-5 text-sm text-rose-50"><?php foreach (session('errors') as $error): ?><li><?= esc($error) ?></li><?php endforeach; ?></ul></div><?php endif; ?>
<form method="post" action="<?= esc($action) ?>" class="space-y-6"><?= csrf_field() ?><div class="grid gap-4 lg:grid-cols-2"><div><label for="name" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc(lang('Backoffice.name')) ?></label><input id="name" name="name" value="<?= esc(old('name', $member['name'] ?? '')) ?>" class="block w-full rounded-2xl border-white/10 bg-slate-950/60 px-4 py-3 text-white placeholder:text-slate-500 focus:border-emerald-400/40 focus:ring-emerald-400/20"></div><div><label for="email" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc(lang('Backoffice.email')) ?></label><input id="email" type="email" name="email" value="<?= esc(old('email', $member['email'] ?? '')) ?>" class="block w-full rounded-2xl border-white/10 bg-slate-950/60 px-4 py-3 text-white placeholder:text-slate-500 focus:border-emerald-400/40 focus:ring-emerald-400/20"></div><div><label for="role" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc(lang('Backoffice.role')) ?></label><select id="role" name="role" class="block w-full rounded-2xl border-white/10 bg-slate-950/60 px-4 py-3 text-white focus:border-emerald-400/40 focus:ring-emerald-400/20"><?php foreach (array_keys($roleDescriptions) as $role): ?><option value="<?= $role ?>" <?= old('role', $member['role'] ?? 'member') === $role ? 'selected' : '' ?>><?= ucfirst($role) ?></option><?php endforeach; ?></select></div><?php if ($isEdit): ?><div><label for="status" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc(lang('Backoffice.membershipStatus')) ?></label><select id="status" name="status" class="block w-full rounded-2xl border-white/10 bg-slate-950/60 px-4 py-3 text-white focus:border-emerald-400/40 focus:ring-emerald-400/20"><?php foreach (['active' => 'Ativo', 'inactive' => 'Inativo'] as $value => $label): ?><option value="<?= $value ?>" <?= old('status', $member['status'] ?? 'active') === $value ? 'selected' : '' ?>><?= $label ?></option><?php endforeach; ?></select></div><?php endif; ?><div class="<?= $isEdit ? 'lg:col-span-2' : '' ?>"><label for="password" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc($isEdit ? lang('Backoffice.newPasswordOptional') : lang('Backoffice.initialPassword')) ?></label><input id="password" type="password" name="password" class="block w-full rounded-2xl border-white/10 bg-slate-950/60 px-4 py-3 text-white placeholder:text-slate-500 focus:border-emerald-400/40 focus:ring-emerald-400/20"></div></div><div class="rounded-3xl border border-white/10 bg-slate-950/40 p-5"><div class="text-sm font-semibold text-white"><?= esc(lang('Backoffice.practices')) ?></div><ul class="mt-3 space-y-2 text-sm leading-6 text-slate-400"><li><?= esc(lang('Backoffice.teamNote1')) ?></li><li><?= esc(lang('Backoffice.teamNote2')) ?></li><li><?= esc($isEdit ? lang('Backoffice.teamNote3Edit') : lang('Backoffice.teamNote3Create')) ?></li></ul></div><div class="flex flex-wrap gap-3"><button class="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-emerald-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90" type="submit"><?= esc($isEdit ? lang('Backoffice.saveMember') : lang('Backoffice.addMember')) ?></button><a class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10" href="<?= site_url('team') ?>"><?= esc(lang('Backoffice.cancel')) ?></a></div></form>
</section>
<?= $this->endSection() ?>
