<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$form_fields = isset($form_fields) && is_array($form_fields) ? $form_fields : array();
$submit_text = !empty($form->submit_btn_text) ? $form->submit_btn_text : lang('submit');

$build_name = static function ($field, $index) {
    if (!empty($field->name)) {
        return (string)$field->name;
    }
    if (!empty($field->label)) {
        $base = preg_replace('/[^a-zA-Z0-9_\-]/', '_', strtolower((string)$field->label));
        return trim($base, '_');
    }
    return 'field_' . $index;
};

$field_id = static function ($name, $index) {
    $safe = preg_replace('/[^a-zA-Z0-9_\-]/', '_', (string)$name);
    return 'lead_' . $safe . '_' . $index;
};

$field_count = 0;
$required_count = 0;
$has_upload = false;
foreach ($form_fields as $field) {
    if (!is_object($field)) {
        continue;
    }
    $type = !empty($field->type) ? (string)$field->type : 'text';
    if (in_array($type, array('header', 'paragraph'), true)) {
        continue;
    }
    $field_count++;
    if (isset($field->required) && (string)$field->required !== 'false') {
        $required_count++;
    }
    if ($type === 'file') {
        $has_upload = true;
    }
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= html_escape(!empty($form->form_name) ? $form->form_name : lang('lead_form')) ?></title>
    <style>
        :root {
            --bg: #f4f6fb;
            --fg: #0f172a;
            --muted: #5f6f88;
            --card: #ffffff;
            --border: #dbe3ef;
            --primary: #0f4bb8;
            --primary-hover: #0d3f9a;
            --ring: rgba(15, 75, 184, 0.2);
            --radius: 14px;
            --badge-bg: #e5edff;
            --badge-border: #bfd1ff;
            --badge-text: #174299;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: var(--fg);
            background:
                radial-gradient(1200px 500px at 20% -10%, #dbeafe 0%, rgba(219,234,254,0) 52%),
                radial-gradient(900px 450px at 90% -20%, #e0ecff 0%, rgba(224,236,255,0) 52%),
                var(--bg);
            min-height: 100vh;
        }
        .container {
            width: min(960px, 92vw);
            margin: 30px auto;
        }
        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 22px;
            box-shadow: 0 28px 55px -34px rgba(15, 23, 42, 0.45);
            overflow: hidden;
        }
        .hero {
            padding: 26px 28px 20px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(120deg, rgba(15,75,184,.1), rgba(59,130,246,.05) 55%, rgba(255,255,255,0) 100%);
        }
        .hero-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid var(--badge-border);
            color: var(--badge-text);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            background: var(--badge-bg);
        }
        .hero-metrics {
            display: grid;
            grid-auto-flow: column;
            gap: 10px;
        }
        .metric {
            min-width: 90px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .9);
            border-radius: 12px;
            padding: 8px 10px;
        }
        .metric-k {
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: var(--muted);
            font-weight: 700;
        }
        .metric-v {
            display: block;
            margin-top: 2px;
            font-size: 17px;
            font-weight: 700;
            color: var(--fg);
        }
        h1 {
            margin: 12px 0 6px;
            font-size: 30px;
            line-height: 1.15;
            letter-spacing: -.02em;
        }
        .sub {
            margin: 0;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.5;
        }
        .content {
            padding: 24px 28px 30px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }
        .grid .full {
            grid-column: 1 / -1;
        }
        .field {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: linear-gradient(180deg, #ffffff, #fbfdff);
            padding: 14px;
        }
        .field-label {
            display: block;
            margin-bottom: 10px;
            font-size: 13px;
            font-weight: 700;
            color: #334155;
            letter-spacing: .01em;
        }
        .required {
            color: #e11d48;
        }
        input[type="text"],
        input[type="email"],
        input[type="number"],
        input[type="date"],
        input[type="datetime-local"],
        select,
        textarea,
        input[type="file"] {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            padding: 11px 12px;
            font-size: 14px;
            color: var(--fg);
            background: #fff;
            outline: none;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--ring);
        }
        textarea { min-height: 120px; resize: vertical; }
        .helper {
            margin-top: 7px;
            color: var(--muted);
            font-size: 12px;
        }
        .group-options {
            display: grid;
            gap: 10px;
            margin-top: 2px;
        }
        .opt {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 14px;
            color: #1f2937;
        }
        .opt input { width: 16px; height: 16px; margin: 0; }
        .section-title {
            font-size: 21px;
            font-weight: 700;
            margin: 2px 0 10px;
        }
        .section-body {
            margin: 0 0 14px;
            color: var(--muted);
            line-height: 1.55;
        }
        .actions {
            border-top: 1px solid var(--border);
            margin-top: 24px;
            padding-top: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .actions-note {
            font-size: 12px;
            color: var(--muted);
        }
        .btn {
            appearance: none;
            border: 0;
            border-radius: 12px;
            padding: 11px 20px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            background: var(--primary);
            cursor: pointer;
            transition: background .15s ease, transform .06s ease;
        }
        .btn:hover { background: var(--primary-hover); }
        .btn:active { transform: translateY(1px); }
        .msg-wrap { margin-bottom: 12px; }
        .muted-empty {
            border: 1px dashed #cbd5e1;
            border-radius: var(--radius);
            padding: 14px;
            color: var(--muted);
            font-size: 14px;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #0b1220;
                --fg: #e5edf9;
                --muted: #9db0cb;
                --card: #0f1729;
                --border: #243147;
                --badge-bg: rgba(59, 130, 246, 0.18);
                --badge-border: rgba(96, 165, 250, 0.35);
                --badge-text: #bfdbfe;
                --ring: rgba(96, 165, 250, 0.25);
            }
            .field { background: linear-gradient(180deg, #0f1b31, #0c182c); }
            input[type="text"],
            input[type="email"],
            input[type="number"],
            input[type="date"],
            input[type="datetime-local"],
            select,
            textarea,
            input[type="file"] {
                border-color: #33445f;
                background: #091425;
                color: #e5edf9;
            }
            .metric { background: rgba(15, 23, 41, .75); }
        }

        @media (max-width: 768px) {
            .container { width: 94vw; margin: 18px auto; }
            .hero { padding: 20px 18px; }
            .content { padding: 18px; }
            h1 { font-size: 24px; }
            .grid { grid-template-columns: 1fr; gap: 14px; }
            .grid .full { grid-column: auto; }
            .hero-metrics { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
            .actions { flex-direction: column; align-items: stretch; }
            .btn { width: 100%; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="msg-wrap">
        <?= message_box('success'); ?>
        <?= message_box('error'); ?>
    </div>

    <div class="card">
        <div class="hero">
            <div class="hero-top">
                <span class="badge"><?= lang('web_to_lead_form') ?></span>
                <div class="hero-metrics">
                    <span class="metric">
                        <span class="metric-k"><?= lang('fields') ?></span>
                        <span class="metric-v"><?= (int)$field_count ?></span>
                    </span>
                    <span class="metric">
                        <span class="metric-k"><?= lang('required') ?></span>
                        <span class="metric-v"><?= (int)$required_count ?></span>
                    </span>
                    <span class="metric">
                        <span class="metric-k"><?= lang('attachment') ?></span>
                        <span class="metric-v"><?= $has_upload ? lang('yes') : lang('no') ?></span>
                    </span>
                </div>
            </div>
            <h1><?= html_escape(!empty($form->form_name) ? $form->form_name : lang('lead_form')) ?></h1>
            <p class="sub"><?= lang('fill_form_fields') ?></p>
        </div>

        <div class="content">
            <?= form_open_multipart('forms/leads/' . $form->form_key, array('id' => 'public-lead-form')); ?>
            <input type="hidden" name="key" value="<?= html_escape($form->form_key) ?>">

            <?php if (empty($form_fields)) { ?>
                <div class="muted-empty"><?= lang('no_data_found') ?></div>
            <?php } else { ?>
                <div class="grid">
                    <?php foreach ($form_fields as $index => $field) :
                        if (!is_object($field)) {
                            continue;
                        }
                        $type = !empty($field->type) ? (string)$field->type : 'text';
                        $label = !empty($field->label) ? (string)$field->label : ucfirst(str_replace('_', ' ', $build_name($field, $index)));
                        $name = $build_name($field, $index);
                        $required = isset($field->required) && (string)$field->required !== 'false';
                        $placeholder = !empty($field->placeholder) ? (string)$field->placeholder : '';
                        $desc = !empty($field->description) ? (string)$field->description : '';
                        $subtype = !empty($field->subtype) ? (string)$field->subtype : 'text';
                        $fid = $field_id($name, $index);
                        $wrap_class = ($type === 'textarea' || $type === 'header' || $type === 'paragraph' || $type === 'checkbox-group' || $type === 'radio-group') ? 'full' : '';
                    ?>
                        <?php if ($type === 'header') { ?>
                            <div class="full">
                                <h3 class="section-title"><?= html_escape($label) ?></h3>
                            </div>
                            <?php continue; ?>
                        <?php } ?>
                        <?php if ($type === 'paragraph') { ?>
                            <div class="full">
                                <p class="section-body"><?= nl2br(html_escape($label)) ?></p>
                            </div>
                            <?php continue; ?>
                        <?php } ?>

                        <div class="<?= $wrap_class ?>">
                            <div class="field">
                                <label for="<?= html_escape($fid) ?>" class="field-label">
                                    <?= html_escape($label) ?>
                                    <?php if ($required) { ?><span class="required">*</span><?php } ?>
                                </label>

                                <?php if ($type === 'textarea') { ?>
                                    <textarea id="<?= html_escape($fid) ?>" name="<?= html_escape($name) ?>" <?= $required ? 'required' : '' ?> placeholder="<?= html_escape($placeholder) ?>"></textarea>

                                <?php } elseif ($type === 'select') { ?>
                                    <select id="<?= html_escape($fid) ?>" name="<?= html_escape($name) ?>" <?= $required ? 'required' : '' ?>>
                                        <option value=""><?= lang('please_select') ?></option>
                                        <?php if (!empty($field->values) && is_array($field->values)) {
                                            foreach ($field->values as $opt) {
                                                if (!is_object($opt)) {
                                                    continue;
                                                }
                                                $opt_label = isset($opt->label) ? (string)$opt->label : '';
                                                $opt_val = isset($opt->value) ? (string)$opt->value : $opt_label;
                                                echo '<option value="' . html_escape($opt_val) . '">' . html_escape($opt_label) . '</option>';
                                            }
                                        } ?>
                                    </select>

                                <?php } elseif ($type === 'checkbox-group') { ?>
                                    <?php $cb_name = strpos($name, '[]') !== false ? $name : $name . '[]'; ?>
                                    <div class="group-options">
                                        <?php if (!empty($field->values) && is_array($field->values)) {
                                            foreach ($field->values as $oi => $opt) {
                                                if (!is_object($opt)) {
                                                    continue;
                                                }
                                                $opt_label = isset($opt->label) ? (string)$opt->label : '';
                                                $opt_val = isset($opt->value) ? (string)$opt->value : $opt_label;
                                                $oid = $fid . '_opt_' . $oi;
                                                ?>
                                                <label class="opt" for="<?= html_escape($oid) ?>">
                                                    <input type="checkbox" id="<?= html_escape($oid) ?>" name="<?= html_escape($cb_name) ?>" value="<?= html_escape($opt_val) ?>">
                                                    <span><?= html_escape($opt_label) ?></span>
                                                </label>
                                            <?php }
                                        } ?>
                                    </div>

                                <?php } elseif ($type === 'radio-group') { ?>
                                    <div class="group-options">
                                        <?php if (!empty($field->values) && is_array($field->values)) {
                                            foreach ($field->values as $oi => $opt) {
                                                if (!is_object($opt)) {
                                                    continue;
                                                }
                                                $opt_label = isset($opt->label) ? (string)$opt->label : '';
                                                $opt_val = isset($opt->value) ? (string)$opt->value : $opt_label;
                                                $oid = $fid . '_opt_' . $oi;
                                                ?>
                                                <label class="opt" for="<?= html_escape($oid) ?>">
                                                    <input type="radio" id="<?= html_escape($oid) ?>" name="<?= html_escape($name) ?>" value="<?= html_escape($opt_val) ?>" <?= $required ? 'required' : '' ?>>
                                                    <span><?= html_escape($opt_label) ?></span>
                                                </label>
                                            <?php }
                                        } ?>
                                    </div>

                                <?php } elseif ($type === 'file') { ?>
                                    <input id="<?= html_escape($fid) ?>" type="file" name="file-input">

                                <?php } else { ?>
                                    <?php
                                    $input_type = 'text';
                                    if (in_array($type, array('email', 'number', 'date', 'datetime-local'), true)) {
                                        $input_type = $type;
                                    } elseif ($type === 'text' && in_array($subtype, array('text', 'email', 'number', 'date'), true)) {
                                        $input_type = $subtype;
                                    }
                                    ?>
                                    <input id="<?= html_escape($fid) ?>" type="<?= html_escape($input_type) ?>" name="<?= html_escape($name) ?>" <?= $required ? 'required' : '' ?> placeholder="<?= html_escape($placeholder) ?>">
                                <?php } ?>

                                <?php if ($desc !== '') { ?>
                                    <div class="helper"><?= nl2br(html_escape($desc)) ?></div>
                                <?php } ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php } ?>

            <?php if (config_item('recaptcha_secret_key') != '' && config_item('recaptcha_site_key') != '' && !empty($form->form_recaptcha) && (int)$form->form_recaptcha === 1) { ?>
                <div style="margin-top:18px;">
                    <div class="g-recaptcha" data-sitekey="<?= html_escape(config_item('recaptcha_site_key')) ?>"></div>
                </div>
            <?php } ?>

            <div class="actions">
                <div class="actions-note">
                    <?= lang('please_select') ?> <?= lang('required') ?> ( * ) <?= lang('fields') ?>.
                </div>
                <button type="submit" class="btn"><?= html_escape($submit_text) ?></button>
            </div>
            <?= form_close(); ?>
        </div>
    </div>
</div>

<?php if (config_item('recaptcha_secret_key') != '' && config_item('recaptcha_site_key') != '' && !empty($form->form_recaptcha) && (int)$form->form_recaptcha === 1) { ?>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php } ?>
</body>
</html>
