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

<?= $this->section('content') ?>
<section class="grid gap-4 xl:grid-cols-[minmax(0,1.05fr)_360px]">
    <article class="rounded-[30px] border border-white/10 bg-gradient-to-br from-cyan-500/15 via-slate-900 to-sky-500/10 p-6 shadow-glow">
        <div class="inline-flex rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-cyan-100"><?= esc(lang('Backoffice.profile')) ?></div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white"><?= esc(lang('Backoffice.accountHeading')) ?></h1>
        <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-300"><?= esc(lang('Backoffice.accountIntro')) ?></p>
    </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.bestPractices')) ?></h2>
        <div class="mt-4 space-y-3 text-sm leading-6 text-slate-400">
            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><?= esc(lang('Backoffice.accountNote1')) ?></div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><?= esc(lang('Backoffice.accountNote2')) ?></div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4"><?= esc(lang('Backoffice.accountNote3')) ?></div>
        </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="<?= site_url('account') ?>" 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', $user['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-cyan-400/40 focus:ring-cyan-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', $user['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-cyan-400/40 focus:ring-cyan-400/20">
            </div>

            <div>
                <label for="password" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc(lang('Backoffice.newPasswordOptional')) ?></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-cyan-400/40 focus:ring-cyan-400/20">
            </div>

            <div>
                <label for="password_confirm" class="mb-2 block text-sm font-semibold text-slate-200"><?= esc(lang('Backoffice.passwordConfirm')) ?></label>
                <input id="password_confirm" type="password" name="password_confirm" 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-cyan-400/40 focus:ring-cyan-400/20">
            </div>
        </div>

        <div class="flex flex-wrap gap-3">
            <button class="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-sky-400 to-cyan-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:opacity-90" type="submit"><?= esc(lang('Backoffice.saveChanges')) ?></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('dashboard') ?>"><?= esc(lang('Backoffice.backToDashboard')) ?></a>
        </div>
    </form>
</section>
<?= $this->endSection() ?>
