<?php
$assetBase =
    basename(rtrim(FCPATH, "\\/")) === "public" ? "assets/" : "public/assets/";
$isEdit = $mode === "edit";
$value = static function ($field, $default = "") use ($industry) {
    return old($field, $industry[$field] ?? $default);
};
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $isEdit
        ? "Edit Industry"
        : "Add Industry" ?> · BrandSquare Admin</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url($assetBase . "css/admin.css") ?>">
</head>
<body class="admin-page">
<aside class="admin-sidebar">
    <a href="<?= base_url(
        "admin/leads",
    ) ?>" class="admin-logo">Brand<span>Square.</span></a>
    <nav><a href="<?= base_url(
        "admin/leads",
    ) ?>"><i>◉</i> Leads</a><a href="<?= base_url(
    "admin/clients",
) ?>"><i>◉</i> Clients</a><a href="<?= base_url(
    "admin/quotations",
) ?>"><i>₹</i> Quotations</a><a href="<?= base_url(
    "admin/invoices",
) ?>"><i>▤</i> Invoices</a><a class="active" href="<?= base_url(
    "admin/industries",
) ?>"><i>◆</i> Industries</a><a href="<?= base_url(
    "admin/articles",
) ?>"><i>▤</i> Articles</a><a href="<?= base_url(
    "admin/email-templates",
) ?>"><i>✦</i> Email templates</a><a href="<?= base_url(
    "admin/settings",
) ?>"><i>⚙</i> Settings</a><a href="<?= base_url() ?>" target="_blank"><i>↗</i> View website</a></nav>
    <div class="admin-user"><span><?= esc(
        strtoupper(substr((string) session("admin_name"), 0, 2)),
    ) ?></span><div><b><?= esc(session("admin_name")) ?></b><small><?= esc(
    session("admin_email"),
) ?></small></div></div>
    <form action="<?= base_url(
        "admin/logout",
    ) ?>" method="post"><?= csrf_field() ?><button class="logout" type="submit">Sign out →</button></form>
</aside>
<main class="admin-main quotation-form-main">
    <header class="admin-heading"><div><a class="back-to-templates" href="<?= $isEdit
        ? base_url("admin/industries/" . $industry["id"])
        : base_url(
            "admin/industries",
        ) ?>">← Industry catalogue</a><h1><?= $isEdit
    ? "Edit industry page"
    : "Add industry page" ?></h1><p>Control search metadata, campaign copy, colours, and publishing.</p></div></header>
    <?php if (session("error")): ?><div class="alert error"><?= esc(
    session("error"),
) ?></div><?php endif; ?>
    <form method="post" class="quotation-form"><?= csrf_field() ?>
        <section class="quotation-form-card"><div class="quotation-form-section-title"><span>01</span><div><h2>Page identity</h2><p>The industry name, URL, publishing state, and display order.</p></div></div>
            <div class="quotation-details-grid industry-admin-grid">
                <label>Industry name<input required maxlength="120" name="name" value="<?= esc(
                    $value("name"),
                ) ?>" placeholder="e.g. Veterinary Clinics"></label>
                <label>URL slug<input required maxlength="140" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" name="slug" value="<?= esc(
                    $value("slug"),
                ) ?>" placeholder="veterinary-clinics"><small>Page URL: /logo-design-for-your-slug</small></label>
                <label>Display order<input required min="0" type="number" name="sort_order" value="<?= esc(
                    $value("sort_order", "0"),
                ) ?>"></label>
                <label class="industry-publish-toggle"><span>Publishing</span><span><input type="checkbox" name="is_active" value="1" <?= (string) $value(
                    "is_active",
                    "1",
                ) === "1"
                    ? "checked"
                    : "" ?>> Make this page publicly visible</span></label>
            </div>
        </section>
        <section class="quotation-form-card"><div class="quotation-form-section-title"><span>02</span><div><h2>Search appearance</h2><p>Unique metadata helps each page compete in organic search and improves ad relevance.</p></div></div>
            <div class="industry-copy-grid">
                <label>SEO title<input required maxlength="180" name="meta_title" value="<?= esc(
                    $value("meta_title"),
                ) ?>"></label>
                <label>Meta description<textarea required maxlength="320" rows="3" name="meta_description"><?= esc(
                    $value("meta_description"),
                ) ?></textarea></label>
            </div>
        </section>
        <section class="quotation-form-card"><div class="quotation-form-section-title"><span>03</span><div><h2>Landing-page message</h2><p>Make the value proposition specific to this industry and its customers.</p></div></div>
            <div class="industry-copy-grid">
                <label>Hero headline<input required maxlength="220" name="hero_heading" value="<?= esc(
                    $value("hero_heading"),
                ) ?>"></label>
                <label>Hero supporting text<textarea required maxlength="1200" rows="4" name="hero_text"><?= esc(
                    $value("hero_text"),
                ) ?></textarea></label>
                <label>Industry challenge headline<input required maxlength="220" name="challenge_heading" value="<?= esc(
                    $value("challenge_heading"),
                ) ?>"></label>
                <label>Industry challenge text<textarea required maxlength="1600" rows="5" name="challenge_text"><?= esc(
                    $value("challenge_text"),
                ) ?></textarea></label>
            </div>
        </section>
        <section class="quotation-form-card"><div class="quotation-form-section-title"><span>04</span><div><h2>Visual theme</h2><p>Each industry page can use its own premium colour pairing.</p></div></div>
            <div class="industry-color-grid">
                <label>Primary colour<div><input type="color" value="<?= esc(
                    $value("primary_color", "#142522"),
                ) ?>" data-color-picker><input required maxlength="7" name="primary_color" value="<?= esc(
    $value("primary_color", "#142522"),
) ?>" data-color-value></div></label>
                <label>Accent colour<div><input type="color" value="<?= esc(
                    $value("accent_color", "#caff62"),
                ) ?>" data-color-picker><input required maxlength="7" name="accent_color" value="<?= esc(
    $value("accent_color", "#caff62"),
) ?>" data-color-value></div></label>
            </div>
        </section>
        <div class="quotation-form-actions"><a href="<?= $isEdit
            ? base_url("admin/industries/" . $industry["id"])
            : base_url(
                "admin/industries",
            ) ?>">Cancel</a><button type="submit">Save industry <span>→</span></button></div>
    </form>
</main>
<script>
document.querySelectorAll("[data-color-picker]").forEach((picker) => {
  const text = picker.parentElement.querySelector("[data-color-value]");
  picker.addEventListener("input", () => (text.value = picker.value));
  text.addEventListener("input", () => {
    if (/^#[0-9a-f]{6}$/i.test(text.value)) picker.value = text.value;
  });
});
</script>
</body>
</html>
