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

<?= $this->section('content') ?>
<?php
$isEditing = $organization !== null;
$selectedType = old('organization_type', $organization['organization_type'] ?? 'issuer');
$selectedStatus = old('status', $organization['status'] ?? 'active');
?>

<div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
    <section class="rounded-[30px] border border-white/10 bg-white/5 p-6 backdrop-blur">
        <div class="flex flex-col gap-6 border-b border-white/10 pb-6 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <div class="inline-flex items-center gap-2 rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-emerald-200">
                    <?= esc($isEditing ? lang('Backoffice.editOrganization') : lang('Backoffice.createOrganization')) ?>
                </div>
                <h1 class="mt-4 text-3xl font-semibold tracking-tight text-white"><?= esc($organization ? lang('Backoffice.companyEditHeading') : lang('Backoffice.companyNewHeading')) ?></h1>
                <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-400"><?= esc(lang('Backoffice.organizationFormIntro')) ?></p>
            </div>
            <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('organizations') ?>"><?= esc(lang('Backoffice.back')) ?></a>
        </div>

        <?php if (session('errors')): ?>
            <div class="mt-6 rounded-3xl border border-rose-400/20 bg-rose-400/10 p-5 text-sm text-rose-100">
                <p class="font-semibold"><?= esc(lang('Backoffice.reviewHighlightedFields')) ?></p>
                <ul class="mt-3 space-y-2 text-rose-50/90">
                    <?php foreach (session('errors') as $error): ?>
                        <li><?= esc($error) ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endif; ?>

        <form class="mt-6 space-y-6" method="post" action="<?= esc($action) ?>">
            <?= csrf_field() ?>

            <div class="grid gap-5 md:grid-cols-2">
                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-slate-200"><?= esc(lang('Backoffice.name')) ?></span>
                    <input class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10" id="name" name="name" value="<?= esc(old('name', $organization['name'] ?? '')) ?>" placeholder="Quantum Wind Operations Europe">
                </label>

                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-slate-200"><?= esc(lang('Backoffice.slug')) ?></span>
                    <input class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10 <?= ! empty($organization) && ! $isPlatformAdmin ? 'cursor-not-allowed opacity-70' : '' ?>" id="slug" name="slug" value="<?= esc(old('slug', $organization['slug'] ?? '')) ?>" placeholder="quantum-wind-operations-europe" <?= ! empty($organization) && ! $isPlatformAdmin ? 'readonly' : '' ?>>
                </label>

                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-slate-200"><?= esc(lang('Backoffice.type')) ?></span>
                    <select class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10" id="organization_type" name="organization_type">
                        <?php foreach (['issuer', 'client', 'partner', 'auditor'] as $type): ?>
                            <option value="<?= $type ?>" <?= $selectedType === $type ? 'selected' : '' ?>><?= ucfirst($type) ?></option>
                        <?php endforeach; ?>
                    </select>
                </label>

                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-slate-200"><?= esc(lang('Backoffice.countryCode')) ?></span>
                    <input class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm uppercase text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10" id="country_code" name="country_code" maxlength="2" value="<?= esc(old('country_code', $organization['country_code'] ?? '')) ?>" placeholder="PT">
                </label>

                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-slate-200"><?= esc(lang('Backoffice.email')) ?></span>
                    <input class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10" id="email" name="email" type="email" value="<?= esc(old('email', $organization['email'] ?? '')) ?>" placeholder="ops@company.com">
                </label>

                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-slate-200"><?= esc(lang('Backoffice.website')) ?></span>
                    <input class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10" id="website" name="website" value="<?= esc(old('website', $organization['website'] ?? '')) ?>" placeholder="https://company.com">
                </label>
            </div>

            <div class="rounded-[28px] border border-white/10 bg-slate-950/40 p-5">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <h2 class="text-lg font-semibold text-white"><?= esc(lang('Backoffice.lifecycleStatus')) ?></h2>
                        <p class="mt-1 text-sm text-slate-400"><?= esc(lang('Backoffice.lifecycleStatusIntro')) ?></p>
                    </div>
                    <div class="w-full max-w-xs">
                        <select class="w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 focus:ring-4 focus:ring-emerald-400/10" id="status" name="status">
                            <?php foreach (['active', 'inactive', 'pending'] as $status): ?>
                                <option value="<?= $status ?>" <?= $selectedStatus === $status ? 'selected' : '' ?>><?= esc(lang('Backoffice.status_' . $status)) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-3 border-t border-white/10 pt-6">
                <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(lang('Backoffice.saveOrganization')) ?></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('organizations') ?>"><?= esc(lang('Backoffice.cancel')) ?></a>
            </div>
        </form>
    </section>

    <aside class="space-y-5">
        <section class="rounded-[30px] border border-white/10 bg-white/5 p-5 backdrop-blur">
            <p class="text-xs uppercase tracking-[0.28em] text-slate-500"><?= esc(lang('Backoffice.tenantGuide')) ?></p>
            <h2 class="mt-3 text-xl font-semibold tracking-tight text-white"><?= esc(lang('Backoffice.organizationControls')) ?></h2>
            <div class="mt-4 space-y-3 text-sm leading-6 text-slate-400">
                <p><?= esc(lang('Backoffice.organizationControlsBody1')) ?></p>
                <p><?= esc(lang('Backoffice.organizationControlsBody2')) ?></p>
            </div>
        </section>

        <section class="rounded-[30px] border border-white/10 bg-white/5 p-5 backdrop-blur">
            <p class="text-xs uppercase tracking-[0.28em] text-slate-500"><?= esc(lang('Backoffice.bestPractices')) ?></p>
            <ul class="mt-4 space-y-3 text-sm leading-6 text-slate-300">
                <li><?= esc(lang('Backoffice.orgBest1')) ?></li>
                <li><?= esc(lang('Backoffice.orgBest2')) ?></li>
                <li><?= esc(lang('Backoffice.orgBest3')) ?></li>
            </ul>
        </section>
    </aside>
</div>
<?= $this->endSection() ?>
