<?php
$helper         = $this->helper("Lof\Formbuilder\Helper\Fields");
$helper_data = $this->helper("Lof\Formbuilder\Helper\Data");
$form           = $block->getForm();
$field          = $this->getData('field_data');

$field_type     = $field['field_type'];
$label          = $block->filterMessage($field['label']);
$options        = $field['field_options'];
$required       = $field['required'];
$cid              = $helper_data->getFieldId($field);
$inlineCss      = isset($field['inline_css']) ? $field['inline_css'] : '';
$cssClass   = isset($field['css_class']) ? ($block->escapeHtmlAttr($field['css_class']) . ' ') : '';
$field_name     = $helper->getFieldPrefix() . $cid . $form->getId();
$field_id          = $field_name . uniqid();
$frame_work_css = '';
if (isset($field['frame_work_css'])) {
  $frame_work_css      = $field['frame_work_css'];
}
$available_fields = $helper->getAvailableFields();
$html             = '';
$field_validate   = isset($available_fields[$field_type]) ? $available_fields[$field_type] : '';
$validates        = $field_validate;
$field_help       = isset($options['description']) ? $block->filterMessage($options['description']) : '';
if ($field_validate && is_array($field_validate)) {
  $validates = implode(" ", $field_validate);
}
$validates .= " " . $cssClass;
$image_type = isset($field['image_type']) ? $field['image_type'] : 'png,jpg,gif,jpeg,zip,doc,pdf';

$color_label       = isset($options['color_label']) ? 'color:' . $options['color_label'] . ';' : '';
$color_text       = isset($options['color_text']) ? 'color:' . $options['color_text'] . ';' : '';
$color_description = isset($options['color_description']) ? 'color:' . $options['color_description'] . ';' : '';
$background_color = isset($options['background_color']) ? 'background-color:' . $options['background_color'] . ';' : '';
$font_size           = isset($options['font_size']) ? 'font-size:' . (int)$options['font_size'] . 'px;' : '';
$font_style       = isset($options['font_style']) ? 'font-style:' . $options['font_style'] . ';' : '';
$font_weight      = isset($options['font_weight']) ? 'font-weight:' . $options['font_weight'] . ';' : '';
$image_maximum_size = isset($field['image_maximum_size']) ? $field['image_maximum_size'] : 10;
$image_maximum_size = (int)$image_maximum_size * 1000000;
$file_number_limit = isset($field['file_number_limit']) ? (int)$field['file_number_limit'] : 1;
$show_file_list = isset($field['show_file_list']) ? (int)$field['show_file_list'] : 0;
$drag_drop_text = (isset($field['drag_drop_text']) && $field['drag_drop_text']) ? __($field['drag_drop_text']) : null;
$open_browser_text = (isset($field['open_browser_text']) && $field['open_browser_text']) ? __($field['open_browser_text']) : __('Open the file Browser');

if ($frame_work_css == 'foundation') : ?>
  <div class="docs-code-live">
    <label for="<?= $field_id; ?>Zone" style="<?= $font_size . $font_style . $font_weight . $color_label; ?>" class="button <?= (1 == $required) ? 'required' : ''; ?>"><?= __($label); ?><?= (1 == $required) ? '<em>*</em>' : ''; ?></label>

    <!-- Our markup, the important part here! -->
    <div id="<?= $field_id; ?>Zone" class="fbd-files-uploader dm-uploader p-5" data-fieldid="<?= $field_id; ?>" data-fieldname="<?= $field_name; ?>[]" data-backend="<?= $block->escapeUrl($this->getUrl('formbuilder/form/uploader', ["form_id" => $form->getId()])); ?>" data-filetype="<?= $image_type; ?>" data-fieldclass="show-for-sr input-text<?= (1 == $required) ? ' required-entry' : ''; ?> <?= $validates; ?>" data-limitfiles="<?= $file_number_limit; ?>" data-maxsize="<?= $image_maximum_size; ?>" style="<?= $color_text . $background_color; ?>">
      <?php if (!is_null($drag_drop_text)) : ?>
        <h3 class="mb-5 mt-5 text-muted" style="<?= $color_text; ?>"><?= $drag_drop_text; ?></h3>
      <?php endif; ?>

      <div class="btn btn-primary btn-block mb-5">
        <?= $open_browser_text; ?>
        <input type="file" accept="image/png, image/jpeg, image/jpg" id="<?= $field_id; ?>" name="<?= $field_name; ?>" title='<?= $block->escapeHtml(__("Click to add Files")); ?>' class="file1 input-multi-upload-files show-for-sr input-text<?= (1 == $required) ? ' required-entry' : ''; ?> <?= $validates; ?>" />
      </div>
    </div><!-- /uploader -->
    <?php if ($field_help) : ?>
      <span class="help-block" style="<?= $color_description; ?>"><?= $field_help; ?></span>
    <?php endif; ?>

    <div class="card h-50 <?= !$show_file_list ? 'hidden' : ''; ?>" <?= !$show_file_list ? 'style="display:none;"' : ''; ?>>
      <div class="card-header">
        <?= __("File List"); ?>
      </div>
      <ul class="list-unstyled p-2 d-flex flex-column col" id="files-<?= $field_id; ?>">
        <li class="text-muted text-center empty listStyleNone"><?= $block->escapeHtml(__("No files uploaded")); ?></li>
      </ul>
    </div>
  </div>
<?php
else :
?>
  <div class="subtemplate-wrapper" style="<?= $inlineCss ?>">
    <label for="<?= $field_id; ?>Zone" style="<?= $font_size . $font_style . $font_weight . $color_label; ?>" class="<?= (1 == $required) ? 'required' : ''; ?>"><?= __($label); ?><?= (1 == $required) ? '<em>*</em>' : ''; ?></label>
    <div class="input-box">
      <!-- Our markup, the important part here! -->
      <div id="<?= $field_id; ?>Zone" class="fbd-files-uploader dm-uploader p-5" data-fieldid="<?= $field_id; ?>" data-fieldname="<?= $field_name; ?>" data-backend="<?= $block->escapeUrl($this->getUrl('formbuilder/form/uploader', [
                                                                                                                                                                        "form_id" => $form->getId(),
                                                                                                                                                                        "cid" => $cid
                                                                                                                                                                      ])); ?>" data-filetype="<?= $image_type; ?>" data-fieldclass="show-for-sr input-text<?= (1 == $required) ? ' required-entry' : ''; ?> <?= $validates; ?>" data-limitfiles="<?= $file_number_limit; ?>" data-maxsize="<?= $image_maximum_size; ?>" style="<?= $color_text . $background_color; ?>">

        <div class="btn btnClear mb-5">
          <?= $open_browser_text; ?>
          <?= (1 == $required) ? '<em>*</em>' : ''; ?>
          <input type="file" id="<?= $field_id; ?>" accept="image/png, image/jpeg, image/jpg" name="<?= $field_name; ?>" id="" title='<?= $block->escapeHtml(__("Click to add Files")); ?>' class="file2 input-multi-upload-files show-for-sr input-text<?= (1 == $required) ? ' required-entry' : ''; ?> <?= $validates; ?>" />
        </div>
        <p class="mb-5 mt-5 text-muted" style="<?= $color_text; ?>"><?= $drag_drop_text; ?></p>
        <div class="card h-50">
          <ul class="list-unstyled p-2 d-flex flex-column col" id="files-<?= $field_id; ?>">
            <li class="text-muted text-center empty listStyleNone"><?= $block->escapeHtml(__("No files uploaded")); ?></li>
          </ul>
        </div>
      </div><!-- /uploader -->
      <?php if ($field_help) { ?>
        <span class="help-block" style="<?= $color_description; ?>"><?= $field_help; ?></span>
      <?php } ?>
    </div>
  </div>
<?php endif; ?>
