<?php
$enabled_quotationforms = $this->db->where(array('quotationforms_status' => 'enabled'))->get('tbl_quotationforms')->result();
$selected_form_id = !empty($quotationforms_info->quotationforms_id) ? (int) $quotationforms_info->quotationforms_id : 0;

$resolve_column_class = static function ($field_options) {
    $column = !empty($field_options['column']) ? (int) $field_options['column'] : 12;
    switch ($column) {
        case 3:
            return 'quotation-form-col quotation-form-col--quarter';
        case 4:
            return 'quotation-form-col quotation-form-col--third';
        case 6:
            return 'quotation-form-col quotation-form-col--half';
        default:
            return 'quotation-form-col quotation-form-col--full';
    }
};
?>

<?= message_box('success'); ?>
<?= message_box('error'); ?>

<div id="client-quotation-request" class="space-y-6">
    <section class="rounded-3xl border border-border bg-card shadow-sm overflow-hidden">
        <div class="quotation-request-hero">
            <div>
                <div class="quotation-request-hero__actions">
                    <a href="<?= base_url('client/quotations') ?>" class="quotation-secondary-btn">
                        <i data-lucide="arrow-left" class="h-4 w-4"></i>
                        <?= lang('quotations') ?>
                    </a>
                    <span class="quotation-soft-badge">
                        <i data-lucide="file-text" class="h-4 w-4"></i>
                        <?= lang('request_quotation') ?>
                    </span>
                </div>
                <h1 class="quotation-request-hero__title"><?= html_escape($quotationforms_info->quotationforms_title) ?></h1>
                <p class="quotation-request-hero__subtitle">Complete the quotation request in a focused client workflow. Existing submission logic and review routing remain unchanged.</p>
            </div>

            <div class="quotation-request-hero__stats">
                <article class="quotation-request-stat">
                    <span class="quotation-request-stat__label"><?= lang('fields') ?></span>
                    <strong class="quotation-request-stat__value"><?= !empty($formbuilder_data) ? count($formbuilder_data) : 0 ?></strong>
                </article>
                <article class="quotation-request-stat">
                    <span class="quotation-request-stat__label"><?= lang('status') ?></span>
                    <strong class="quotation-request-stat__value"><?= lang('ready') ?></strong>
                </article>
            </div>
        </div>
    </section>

    <div class="grid gap-6 xl:grid-cols-12">
        <aside class="xl:col-span-4 rounded-3xl border border-border bg-card shadow-sm">
            <div class="quotation-aside-head">
                <h2><?= lang('select_quotations_form') ?></h2>
                <p>Switch templates without leaving the request area.</p>
            </div>
            <div class="p-6 pt-0">
                <form action="<?= base_url('client/quotations/index/get_form') ?>" method="post" class="space-y-4">
                    <div>
                        <label class="quotation-field-label"><?= lang('select_quotations_form') ?> <span class="text-danger">*</span></label>
                        <select name="quotationforms_id" class="quotation-select quotation-select--full" required>
                            <?php foreach ($enabled_quotationforms as $quotation_form) : ?>
                                <option value="<?= (int) $quotation_form->quotationforms_id ?>" <?= $selected_form_id === (int) $quotation_form->quotationforms_id ? 'selected' : '' ?>>
                                    <?= html_escape($quotation_form->quotationforms_title) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <button type="submit" class="quotation-primary-btn w-full justify-center">
                        <i data-lucide="refresh-cw" class="h-4 w-4"></i>
                        <?= lang('load') . ' ' . lang('form') ?>
                    </button>
                </form>

                <div class="quotation-helper-card">
                    <h3><?= lang('submission_note') ?></h3>
                    <p>This screen keeps the same backend behavior. Only the form experience has been modernized for clients.</p>
                </div>
            </div>
        </aside>

        <section class="xl:col-span-8 rounded-3xl border border-border bg-card shadow-sm">
            <form method="post"
                  action="<?= base_url() ?>client/quotations/set_quotations/<?= $quotationforms_info->quotationforms_id; ?>"
                  enctype="multipart/form-data"
                  class="quotation-request-form">
                <div class="quotation-form-intro">
                    <h2><?= html_escape($quotationforms_info->quotationforms_title) ?></h2>
                    <p>Fill in all relevant details below. Required fields are highlighted and grouped for faster completion.</p>
                </div>

                <div class="quotation-request-grid">
                    <?php foreach ($formbuilder_data as $value) : ?>
                        <?php if (empty($value)) { continue; } ?>
                        <?php
                        $field_type = !empty($value['field_type']) ? $value['field_type'] : 'text';
                        $field_options = !empty($value['field_options']) ? $value['field_options'] : array();
                        $required = !empty($value['required']) && (int) $value['required'] === 1;
                        $col_class = $resolve_column_class($field_options);
                        $field_name = !empty($value['cid']) ? $value['cid'] : '';
                        $field_label = !empty($value['label']) ? $value['label'] : lang('field');
                        ?>

                        <?php if ($field_type === 'header') : ?>
                            <div class="quotation-form-col quotation-form-col--full">
                                <div class="quotation-form-header-block">
                                    <h3><?= html_escape($field_label) ?></h3>
                                </div>
                            </div>
                            <?php continue; ?>
                        <?php endif; ?>

                        <div class="<?= $col_class ?>">
                            <div class="quotation-form-field-card <?= $required ? 'is-required' : '' ?>">
                                <label class="quotation-field-label">
                                    <?= html_escape($field_label) ?>
                                    <?php if ($required) : ?>
                                        <span class="text-danger">*</span>
                                    <?php endif; ?>
                                </label>

                                <?php if ($field_type === 'paragraph') : ?>
                                    <?php
                                    $size = !empty($field_options['size']) ? $field_options['size'] : 'medium';
                                    $textarea_class = 'quotation-textarea';
                                    if ($size === 'small') {
                                        $textarea_class .= ' quotation-textarea--sm';
                                    } elseif ($size === 'large') {
                                        $textarea_class .= ' quotation-textarea--lg';
                                    }
                                    ?>
                                    <textarea name="<?= html_escape($field_name) ?>" class="<?= $textarea_class ?>" <?= $required ? 'required' : '' ?>></textarea>
                                <?php elseif ($field_type === 'dropdown') : ?>
                                    <select class="quotation-select quotation-select--full" name="<?= html_escape($field_name) ?>" <?= $required ? 'required' : '' ?>>
                                        <option value="" selected disabled><?= lang('please_select') ?></option>
                                        <?php foreach (!empty($field_options['options']) ? $field_options['options'] : array() as $v_option) : ?>
                                            <?php $selected = (!empty($v_option['checked']) && (int) $v_option['checked'] === 1) ? 'selected' : ''; ?>
                                            <option value="<?= html_escape($v_option['label']) ?>" <?= $selected ?>><?= html_escape($v_option['label']) ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                <?php elseif ($field_type === 'checkboxes') : ?>
                                    <div class="quotation-option-list">
                                        <?php foreach (!empty($field_options['options']) ? $field_options['options'] : array() as $v_option) : ?>
                                            <?php $checked = (!empty($v_option['checked']) && (int) $v_option['checked'] === 1) ? 'checked' : ''; ?>
                                            <label class="quotation-choice">
                                                <input type="checkbox" name="<?= html_escape($field_name) ?>[]" value="<?= html_escape($v_option['label']) ?>" <?= $checked ?>>
                                                <span><?= html_escape($v_option['label']) ?></span>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                <?php elseif ($field_type === 'radio') : ?>
                                    <div class="quotation-option-list">
                                        <?php foreach (!empty($field_options['options']) ? $field_options['options'] : array() as $v_option) : ?>
                                            <?php $checked = (!empty($v_option['checked']) && (int) $v_option['checked'] === 1) ? 'checked' : ''; ?>
                                            <label class="quotation-choice">
                                                <input type="radio" name="<?= html_escape($field_name) ?>" value="<?= html_escape($v_option['label']) ?>" <?= $checked ?>>
                                                <span><?= html_escape($v_option['label']) ?></span>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                <?php elseif ($field_type === 'file' || $field_type === 'file_upload') : ?>
                                    <input type="file" name="<?= html_escape($field_name) ?>" class="quotation-file-input" <?= $required ? 'required' : '' ?>>
                                <?php else : ?>
                                    <input type="text" name="<?= html_escape($field_name) ?>" class="quotation-text-input" <?= $required ? 'required' : '' ?>>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="quotation-form-footer">
                    <div class="quotation-form-footer__note">
                        <i data-lucide="shield-check" class="h-4 w-4"></i>
                        Your request will be delivered to the existing quotation review flow immediately after submission.
                    </div>
                    <button class="quotation-primary-btn quotation-primary-btn--lg shrink-0" type="submit" name="submit">
                        <i data-lucide="send" class="h-4 w-4"></i>
                        <?= lang('request_quotation') ?>
                    </button>
                </div>
            </form>
        </section>
    </div>
</div>

<style>
    #client-quotation-request .quotation-request-hero {
        display: grid;
        gap: 1.5rem;
        padding: 1.8rem;
        background:
            radial-gradient(circle at top right, rgba(79, 70, 229, 0.16), transparent 34%),
            linear-gradient(135deg, rgba(15, 23, 42, 0.02), rgba(59, 130, 246, 0.05));
    }

    #client-quotation-request .quotation-request-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    #client-quotation-request .quotation-request-hero__title {
        margin: 1rem 0 0.45rem;
        color: hsl(var(--foreground));
        font-size: clamp(1.8rem, 2.1vw, 2.5rem);
        font-weight: 700;
        line-height: 1.08;
    }

    #client-quotation-request .quotation-request-hero__subtitle {
        margin: 0;
        max-width: 56rem;
        color: hsl(var(--muted-foreground));
        font-size: 0.98rem;
        line-height: 1.7;
    }

    #client-quotation-request .quotation-request-hero__stats {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #client-quotation-request .quotation-request-stat {
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background) / 0.9);
        border-radius: 1.15rem;
        padding: 1rem;
    }

    #client-quotation-request .quotation-request-stat__label {
        display: block;
        color: hsl(var(--muted-foreground));
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    #client-quotation-request .quotation-request-stat__value {
        display: block;
        margin-top: 0.35rem;
        color: hsl(var(--foreground));
        font-size: 1.25rem;
        font-weight: 700;
    }

    #client-quotation-request .quotation-secondary-btn,
    #client-quotation-request .quotation-soft-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border-radius: 999px;
        padding: 0.58rem 0.95rem;
        font-size: 0.82rem;
        font-weight: 700;
        text-decoration: none;
    }

    #client-quotation-request .quotation-secondary-btn {
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background));
        color: hsl(var(--foreground));
    }

    #client-quotation-request .quotation-soft-badge {
        border: 1px solid hsl(var(--primary) / 0.2);
        background: hsl(var(--primary) / 0.08);
        color: hsl(var(--primary));
    }

    #client-quotation-request .quotation-aside-head {
        padding: 1.5rem 1.5rem 1.1rem;
        border-bottom: 1px solid hsl(var(--border));
    }

    #client-quotation-request .quotation-aside-head h2,
    #client-quotation-request .quotation-form-intro h2 {
        margin: 0;
        color: hsl(var(--foreground));
        font-size: 1.15rem;
        font-weight: 700;
    }

    #client-quotation-request .quotation-aside-head p,
    #client-quotation-request .quotation-form-intro p {
        margin: 0.45rem 0 0;
        color: hsl(var(--muted-foreground));
        font-size: 0.92rem;
        line-height: 1.65;
    }

    #client-quotation-request .quotation-helper-card {
        margin-top: 1rem;
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background));
        border-radius: 1.25rem;
        padding: 1rem;
    }

    #client-quotation-request .quotation-helper-card h3 {
        margin: 0 0 0.35rem;
        color: hsl(var(--foreground));
        font-size: 0.95rem;
        font-weight: 700;
    }

    #client-quotation-request .quotation-helper-card p {
        margin: 0;
        color: hsl(var(--muted-foreground));
        font-size: 0.86rem;
        line-height: 1.6;
    }

    #client-quotation-request .quotation-request-form {
        padding: 1.5rem;
    }

    #client-quotation-request .quotation-form-intro {
        margin-bottom: 1.2rem;
    }

    #client-quotation-request .quotation-request-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1rem;
    }

    #client-quotation-request .quotation-form-col {
        min-width: 0;
    }

    #client-quotation-request .quotation-form-col--full {
        grid-column: span 12 / span 12;
    }

    #client-quotation-request .quotation-form-col--half,
    #client-quotation-request .quotation-form-col--third,
    #client-quotation-request .quotation-form-col--quarter {
        grid-column: span 12 / span 12;
    }

    #client-quotation-request .quotation-form-field-card {
        height: 100%;
        border: 1px solid hsl(var(--border));
        background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--background)));
        border-radius: 1.35rem;
        padding: 1.1rem;
        box-shadow: 0 20px 45px -34px rgba(15, 23, 42, 0.3);
    }

    #client-quotation-request .quotation-form-field-card.is-required {
        border-color: hsl(var(--primary) / 0.22);
    }

    #client-quotation-request .quotation-field-label {
        display: block;
        margin: 0 0 0.55rem;
        color: hsl(var(--foreground));
        font-size: 0.88rem;
        font-weight: 700;
    }

    #client-quotation-request .quotation-select,
    #client-quotation-request .quotation-text-input,
    #client-quotation-request .quotation-textarea,
    #client-quotation-request .quotation-file-input {
        width: 100%;
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background));
        border-radius: 1rem;
        padding: 0.88rem 1rem;
        color: hsl(var(--foreground));
        font-size: 0.95rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    #client-quotation-request .quotation-select:focus,
    #client-quotation-request .quotation-text-input:focus,
    #client-quotation-request .quotation-textarea:focus,
    #client-quotation-request .quotation-file-input:focus {
        border-color: hsl(var(--primary));
        box-shadow: 0 0 0 3px hsl(var(--primary) / 0.14);
        outline: none;
    }

    #client-quotation-request .quotation-textarea {
        min-height: 8rem;
        resize: vertical;
    }

    #client-quotation-request .quotation-textarea--sm {
        min-height: 4.5rem;
    }

    #client-quotation-request .quotation-textarea--lg {
        min-height: 13rem;
    }

    #client-quotation-request .quotation-select--full {
        min-height: 3.1rem;
    }

    #client-quotation-request .quotation-form-header-block {
        border: 1px solid hsl(var(--border));
        background: linear-gradient(135deg, hsl(var(--primary) / 0.08), transparent 82%);
        border-radius: 1.25rem;
        padding: 1rem 1.15rem;
    }

    #client-quotation-request .quotation-form-header-block h3 {
        margin: 0;
        color: hsl(var(--foreground));
        font-size: 1rem;
        font-weight: 700;
    }

    #client-quotation-request .quotation-option-list {
        display: grid;
        gap: 0.7rem;
    }

    #client-quotation-request .quotation-choice {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        border: 1px solid hsl(var(--border));
        background: hsl(var(--background));
        border-radius: 1rem;
        padding: 0.85rem 0.95rem;
        color: hsl(var(--foreground));
        font-size: 0.92rem;
        font-weight: 500;
    }

    #client-quotation-request .quotation-choice input {
        width: 1rem;
        height: 1rem;
        margin: 0;
        flex: 0 0 auto;
        accent-color: hsl(var(--primary));
    }

    #client-quotation-request .quotation-primary-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 0;
        background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.82));
        border-radius: 1rem;
        padding: 0.92rem 1.2rem;
        color: #fff;
        font-size: 0.92rem;
        font-weight: 700;
        box-shadow: 0 18px 30px -18px hsl(var(--primary) / 0.7);
        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }

    #client-quotation-request .quotation-primary-btn:hover {
        color: #fff;
        opacity: 0.95;
        transform: translateY(-1px);
    }

    #client-quotation-request .quotation-primary-btn--lg {
        min-height: 3.2rem;
        justify-content: center;
    }

    #client-quotation-request .quotation-form-footer {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 1.4rem;
        border-top: 1px solid hsl(var(--border));
        padding-top: 1.2rem;
    }

    #client-quotation-request .quotation-form-footer__note {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: hsl(var(--muted-foreground));
        font-size: 0.88rem;
        line-height: 1.5;
    }

    @media (min-width: 640px) {
        #client-quotation-request .quotation-request-hero__stats {
            grid-template-columns: repeat(2, minmax(0, 12rem));
        }

        #client-quotation-request .quotation-form-footer {
            flex-direction: row;
            align-items: center;
        }
    }

    @media (min-width: 768px) {
        #client-quotation-request .quotation-form-col--half {
            grid-column: span 6 / span 6;
        }

        #client-quotation-request .quotation-form-col--third {
            grid-column: span 4 / span 4;
        }

        #client-quotation-request .quotation-form-col--quarter {
            grid-column: span 3 / span 3;
        }
    }
</style>
