<div id="printableArea" class="space-y-4">
    <div>
        <div class="show_print flex items-start gap-3">
            <div class="shrink-0">
                <img class="h-[50px] w-[50px] mb-1 object-contain"
                     src="<?= base_url() . config_item('company_logo') ?>" alt="logo">
            </div>
            <div class="min-w-0 text-sm text-slate-700 dark:text-slate-300">
                <h4 class="m-0 p-0 text-base font-semibold text-slate-900 dark:text-slate-100"><?= config_item('company_name') ?></h4>
                <?= lang('address') . ': ' . config_item('company_address') ?>
                <?= lang('city') . ': ' . config_item('company_city') ?>,
                <?= lang('country') . ': ' . config_item('company_country') . '-' . config_item('company_zip_code') ?>
                ,<?= lang('phone') ?> : <?= config_item('company_phone') ?>
            </div>
        </div>
        <div class="hidden">
            <div class="grid gap-4 md:grid-cols-12">
                <div class="hidden text-center md:col-span-2 md:block">
                    <img class="w-full object-contain"
                         src="<?= base_url() . config_item('company_logo') ?>" alt="logo">
                </div>
                <div class="md:col-span-10 text-sm text-slate-700 dark:text-slate-300">
                    <h4 class="ml-sm text-base font-semibold text-slate-900 dark:text-slate-100"><?= config_item('company_legal_name') ?></h4>
                    <address></address><?= config_item('company_address') ?>
                    <br><?= config_item('company_city') ?>
                    , <?= config_item('company_zip_code') ?>
                    <br><?= config_item('company_country') ?>
                    <br/><?= lang('phone') ?> : <?= config_item('company_phone') ?>
                </div>
            </div>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
            <div class="flex items-center justify-between gap-3 border-b border-slate-200 px-5 py-4 dark:border-slate-700">
                <div class="text-sm font-semibold text-slate-900 dark:text-slate-100">
                    <?= $quotationforms_info->quotationforms_title ?>
                </div>
                <div class="hidden-print mr-lg flex items-center gap-2">
                    <button class="btn-print inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-200 bg-rose-50 text-rose-600 transition hover:bg-rose-100 dark:border-rose-900/60 dark:bg-rose-950/30 dark:text-rose-300 dark:hover:bg-rose-900/40"
                            type="button" data-toggle="tooltip" title="<?= lang('print') ?>" onclick="printDiv('printableArea')">
                        <i data-lucide="printer" class="h-4 w-4"></i>
                    </button>
                    <a href="<?= base_url() ?>admin/quotations/quotations_form_details_pdf/<?= $quotationforms_info->quotationforms_id ?>"
                       class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
                       data-toggle="tooltip" data-placement="top" title="<?= lang('pdf') ?>">
                        <i data-lucide="file-text" class="h-4 w-4"></i>
                    </a>
                </div>
            </div>
            <div class="px-5 py-4">
                <?php
                if (!empty($formbuilder_data)) {
                    echo '<div class="grid grid-cols-1 gap-4 md:grid-cols-12">';
                    foreach ($formbuilder_data as $value) {
                        if (!empty($value)) {
                            $field_type = $value['field_type'];
                            $field_options = !empty($value['field_options']) ? $value['field_options'] : array();
                            $required = !empty($value['required']) && (int)$value['required'] === 1;
                            $column = !empty($field_options['column']) ? (int)$field_options['column'] : 12;
                            if (!in_array($column, array(12, 6, 4, 3), true)) {
                                $column = 12;
                            }
                            $col_span = 'md:col-span-' . $column;
                            ?>

                            <div class="<?= $col_span ?> space-y-2">
                            <?php if ($field_type == 'paragraph'): ?>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200"><?php echo $value['label'] ?> <?php if (!empty($required)) { ?>
                                        <span class="text-danger">*</span><?php } ?></label>
                                <div>
                                    <?php
                                    $size = !empty($field_options['size']) ? $field_options['size'] : 'medium';
                                    if ($size == 'small') {
                                        $height = 'min-height:60px';
                                    } elseif ($size == 'medium') {
                                        $height = 'min-height:100px';
                                    } else {
                                        $height = 'min-height:200px';
                                    }
                                    ?>
                                    <textarea style="<?= $height ?>" class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"></textarea>
                                </div>
                            <?php endif; ?>
                            <?php if ($field_type == 'dropdown'): ?>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200"><?php echo $value['label'] ?> <?php if (!empty($required)) { ?>
                                        <span class="text-danger">*</span><?php } ?></label>
                                <div>
                                    <select class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100">
                                        <?php
                                        $options = !empty($field_options['options']) ? $field_options['options'] : array();
                                        foreach ($options as $v_option) {
                                            if ($v_option['checked'] == 1) {
                                                $checked = 'selected';
                                            } else {
                                                $checked = '';
                                            }
                                            ?>
                                            <option <?= $checked ?>> <?= $v_option['label'] ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            <?php endif; ?>
                            <?php if ($field_type == 'text'): ?>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200"><?php echo $value['label'] ?> <?php if (!empty($required)) { ?>
                                        <span class="text-danger">*</span><?php } ?></label>
                                <div>
                                    <input type="text" class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"/>
                                </div>
                            <?php endif; ?>
                            <?php if ($field_type == 'checkboxes'): ?>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200"><?php echo $value['label'] ?> <?php if (!empty($required)) { ?>
                                        <span class="text-danger">*</span><?php } ?></label>
                                <div class="space-y-2">
                                    <?php
                                    $options = !empty($field_options['options']) ? $field_options['options'] : array();
                                    foreach ($options as $v_option) {
                                        if ($v_option['checked'] == 1) {
                                            $checked = 'checked';
                                        } else {
                                            $checked = '';
                                        }
                                        ?>
                                        <label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                                            <input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary dark:border-slate-600 dark:bg-slate-800" <?= $checked ?>>
                                            <span><?= $v_option['label'] ?></span>
                                        </label>
                                    <?php } ?>
                                </div>
                            <?php endif; ?>
                            <?php if ($field_type == 'radio'): ?>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200"><?php echo $value['label'] ?> <?php if (!empty($required)) { ?>
                                        <span class="text-danger">*</span><?php } ?></label>
                                <div class="space-y-2">
                                    <?php
                                    $options = !empty($field_options['options']) ? $field_options['options'] : array();
                                    foreach ($options as $v_option) {
                                        if ($v_option['checked'] == 1) {
                                            $checked = 'checked';
                                        } else {
                                            $checked = '';
                                        }
                                        ?>
                                        <label class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                                            <input type="radio" class="h-4 w-4 border-slate-300 text-primary focus:ring-primary dark:border-slate-600 dark:bg-slate-800" <?= $checked ?>>
                                            <span><?= $v_option['label'] ?></span>
                                        </label>
                                    <?php } ?>
                                </div>
                            <?php endif; ?>
                            </div>
                            <?php
                        }
                    }
                    echo '</div>';
                }
                ?>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function printDiv(printableArea) {
        var printContents = document.getElementById(printableArea).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>
