<?php

declare(strict_types=1);

$groups = [

    'Basic Fields' => [

        [
            'text',
            'Text',
            'bi-input-cursor-text'
        ],

        [
            'textarea',
            'Textarea',
            'bi-textarea-t'
        ],

        [
            'number',
            'Number',
            'bi-123'
        ],

        [
            'date',
            'Date',
            'bi-calendar3'
        ],

        [
            'time',
            'Time',
            'bi-clock'
        ]

    ],

    'Choice Fields' => [

        [
            'select',
            'Select',
            'bi-menu-button-wide'
        ],

        [
            'radio',
            'Radio',
            'bi-record-circle'
        ],

        [
            'checkbox',
            'Checkbox',
            'bi-check2-square'
        ]

    ],

    'Advanced Fields' => [

        [
            'email',
            'Email',
            'bi-envelope'
        ],

        [
            'phone',
            'Phone',
            'bi-telephone'
        ],

        [
            'file',
            'File Upload',
            'bi-paperclip'
        ]

    ]

];

?>

<div class="col-xl-2 col-lg-3">

    <div class="designer-column-sticky">

        <div class="designer-panel">

            <div class="designer-panel-header">

                <h6 class="designer-panel-title">

                    Field Toolbox

                </h6>

                <div class="designer-panel-subtitle">

                    Drag or click to add fields

                </div>

            </div>

            <div class="toolbox-body">

                <div class="mb-3">

                    <input
                        id="toolboxSearch"
                        type="text"
                        class="form-control form-control-sm"
                        placeholder="Search field...">

                </div>

                <?php foreach ($groups as $group => $items): ?>

                    <div
                        class="toolbox-group"
                        data-group="<?= htmlspecialchars($group) ?>">

                        <div class="toolbox-group-title">

                            <?= htmlspecialchars($group) ?>

                        </div>

                        <?php foreach ($items as $item): ?>

                            <button

                                type="button"

                                class="toolbox-item add-field-btn"

                                data-field-type="<?= $item[0] ?>"

                                data-field-type-label="<?= $item[1] ?>"

                                draggable="true">

                                <i class="bi <?= $item[2] ?>"></i>

                                <span>

                                    <?= $item[1] ?>

                                </span>

                            </button>

                        <?php endforeach; ?>

                    </div>

                <?php endforeach; ?>

            </div>

        </div>

    </div>

</div>