{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="submit" form="form-layout" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
        <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-pencil"></i> {{ text_form }}</div>
      <div class="card-body">
        <form id="form-layout" action="{{ save }}" method="post" data-oc-toggle="ajax">
          <fieldset>
            <legend>{{ text_route }}</legend>
            <div class="row mb-3 required">
              <label for="input-name" class="col-sm-2 col-form-label">{{ entry_name }}</label>
              <div class="col-sm-10">
                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control"/>
                <div id="error-name" class="invalid-feedback"></div>
              </div>
            </div>
            <br/>
            <table id="route" class="table table-bordered table-hover">
              <thead>
                <tr>
                  <td class="text-start">{{ entry_store }}</td>
                  <td class="text-start">{{ entry_route }}</td>
                  <td></td>
                </tr>
              </thead>
              <tbody>
                {% set route_row = 0 %}
                {% for layout_route in layout_routes %}
                  <tr id="route-row-{{ route_row }}">
                    <td class="text-start"><select name="layout_route[{{ route_row }}][store_id]" class="form-select">
                        <option value="0">{{ text_default }}</option>
                        {% for store in stores %}
                          <option value="{{ store.store_id }}"{% if store.store_id == layout_route.store_id %} selected{% endif %}>{{ store.name }}</option>
                        {% endfor %}
                      </select></td>
                    <td class="text-start"><input type="text" name="layout_route[{{ route_row }}][route]" value="{{ layout_route.route }}" placeholder="{{ entry_route|escape('js') }}" class="form-control"/></td>
                    <td class="text-end"><button type="button" onclick="$('#route-row-{{ route_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
                  </tr>
                  {% set route_row = route_row + 1 %}
                {% endfor %}
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="2"></td>
                  <td class="text-end"><button type="button" onclick="addRoute();" data-bs-toggle="tooltip" title="{{ button_route_add|escape('js') }}" class="btn btn-primary"><i class="fa-solid fa-plus-circle"></i></button></td>
                </tr>
              </tfoot>
            </table>
          </fieldset>
          <fieldset>
            <legend>{{ text_module }}</legend>
            {% set module_row = 0 %}
            <div class="row">
              <div class="col-lg-3 col-md-4 col-sm-12">
                <table id="module-column-left" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-center">{{ text_column_left }}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for layout_module in layout_modules %}
                      {% if layout_module.position == 'column_left' %}
                        <tr id="module-row-{{ module_row }}">
                          <td class="text-start">
                            <div class="input-group input-group-sm">
                              <select name="layout_module[{{ module_row }}][code]" class="form-select input-sm">
                                {% for extension in extensions %}
                                  <optgroup label="{{ extension.name }}">
                                    {% if not extension.module %}
                                      <option value="{{ extension.code }}"{% if extension.code == layout_module.code %} selected{% endif %}>{{ extension.name }}</option>
                                    {% else %}
                                      {% for module in extension.module %}
                                        <option value="{{ module.code }}"{% if module.code == layout_module.code %} selected{% endif %}>{{ module.name }}</option>
                                      {% endfor %}
                                    {% endif %}
                                  </optgroup>
                                {% endfor %}
                              </select> <input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}"/> <input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}"/> <a href="{{ layout_module.edit }}" data-bs-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-pencil fa-fw"></i></a>
                              <button type="button" onclick="$('#module-row-{{ module_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger btn-sm"><i class="fa-solid fa-minus-circle fa-fw"></i></button>
                            </div>
                          </td>
                        </tr>
                        {% set module_row = module_row + 1 %}
                      {% endif %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td class="text-end"><button type="button" onclick="addModule('column-left');" data-bs-toggle="tooltip" title="{{ button_module_add|escape('js') }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus-circle fa-fw"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="col-lg-6 col-md-4 col-sm-12">
                <table id="module-content-top" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-center">{{ text_content_top }}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for layout_module in layout_modules %}
                      {% if layout_module.position == 'content_top' %}
                        <tr id="module-row-{{ module_row }}">
                          <td class="text-start">
                            <div class="input-group input-group-sm">
                              <select name="layout_module[{{ module_row }}][code]" class="form-select input-sm">
                                {% for extension in extensions %}
                                  <optgroup label="{{ extension.name }}">
                                    {% if not extension.module %}
                                      <option value="{{ extension.code }}"{% if extension.code == layout_module.code %} selected{% endif %}>{{ extension.name }}</option>
                                    {% else %}
                                      {% for module in extension.module %}
                                        <option value="{{ module.code }}"{% if module.code == layout_module.code %} selected{% endif %}>{{ module.name }}</option>
                                      {% endfor %}
                                    {% endif %}
                                  </optgroup>
                                {% endfor %}
                              </select><input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}"/> <input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}"/> <a href="{{ layout_module.edit }}" data-bs-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-pencil fa-fw"></i></a>
                              <button type="button" onclick="$('#module-row-{{ module_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa-solid fa-minus-circle fa-fw"></i></button>
                            </div>
                          </td>
                        </tr>
                        {% set module_row = module_row + 1 %}
                      {% endif %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td class="text-end"><button type="button" onclick="addModule('content-top');" data-bs-toggle="tooltip" title="{{ button_module_add }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus-circle fa-fw"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
                <table id="module-content-bottom" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-center">{{ text_content_bottom }}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for layout_module in layout_modules %}
                      {% if layout_module.position == 'content_bottom' %}
                        <tr id="module-row-{{ module_row }}">
                          <td class="text-start">
                            <div class="input-group input-group-sm">
                              <select name="layout_module[{{ module_row }}][code]" class="form-select input-sm">
                                {% for extension in extensions %}
                                  <optgroup label="{{ extension.name }}">
                                    {% if not extension.module %}
                                      <option value="{{ extension.code }}"{% if extension.code == layout_module.code %} selected{% endif %}>{{ extension.name }}</option>
                                    {% else %}
                                      {% for module in extension.module %}
                                        <option value="{{ module.code }}"{% if module.code == layout_module.code %} selected{% endif %}>{{ module.name }}</option>
                                      {% endfor %}
                                    {% endif %}
                                  </optgroup>
                                {% endfor %}
                              </select> <input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}"/> <input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}"/> <a href="{{ layout_module.edit }}" data-bs-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-pencil fa-fw"></i></a>
                              <button type="button" onclick="$('#module-row-{{ module_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa-solid fa-minus-circle fa-fw"></i></button>
                            </div>
                          </td>
                        </tr>
                        {% set module_row = module_row + 1 %}
                      {% endif %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td class="text-end"><button type="button" onclick="addModule('content-bottom');" data-bs-toggle="tooltip" title="{{ button_module_add }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus-circle fa-fw"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-12">
                <table id="module-column-right" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-center">{{ text_column_right }}</td>
                    </tr>
                  </thead>
                  <tbody>
                    {% for layout_module in layout_modules %}
                      {% if layout_module.position == 'column_right' %}
                        <tr id="module-row-{{ module_row }}">
                          <td class="text-end">
                            <div class="input-group input-group-sm">
                              <select name="layout_module[{{ module_row }}][code]" class="form-select input-sm">
                                {% for extension in extensions %}
                                  <optgroup label="{{ extension.name }}">
                                    {% if not extension.module %}
                                    <option value="{{ extension.code }}"{% if extension.code == layout_module.code %} selected{% endif %}>{{ extension.name }}</option>
                                  {% else %}
                                    {% for module in extension.module %}
                                      <option value="{{ module.code }}"{% if module.code == layout_module.code %} selected{% endif %}>{{ module.name }}</option>
                                    {% endfor %}
                                    {% endif %}
                                  </optgroup>
                                {% endfor %}
                              </select> <input type="hidden" name="layout_module[{{ module_row }}][position]" value="{{ layout_module.position }}"/> <input type="hidden" name="layout_module[{{ module_row }}][sort_order]" value="{{ layout_module.sort_order }}"/> <a href="{{ layout_module.edit }}" data-bs-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-pencil fa-fw"></i></a>
                              <button type="button" onclick="$('#module-row-{{ module_row }}').remove();" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger btn-sm"><i class="fa-solid fa-minus-circle fa-fw"></i></button>
                            </div>
                          </td>
                        </tr>
                        {% set module_row = module_row + 1 %}
                      {% endif %}
                    {% endfor %}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td class="text-end"><button type="button" onclick="addModule('column-right');" data-bs-toggle="tooltip" title="{{ button_module_add }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus-circle fa-fw"></i></button></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </fieldset>
          <input type="hidden" name="layout_id" value="{{ layout_id }}" id="input-layout-id"/>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
var route_row = {{ route_row }};

function addRoute() {
    html = '<tr id="route-row-' + route_row + '">';
    html += '  <td class="text-start"><select name="layout_route[' + route_row + '][store_id]" class="form-select">';
    html += '  <option value="0">{{ text_default|escape('js') }}</option>';
  {% for store in stores %}
    html += '<option value="{{ store.store_id }}">{{ store.name|escape('js') }}</option>';
  {% endfor %}
    html += '  </select></td>';
    html += '  <td class="text-start"><input type="text" name="layout_route[' + route_row + '][route]" value="" placeholder="{{ entry_route|escape('js') }}" class="form-control"/></td>';
    html += '  <td class="text-end"><button type="button" onclick="$(\'#route-row-' + route_row + '\').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#route tbody').append(html);

    route_row++;
}

var module_row = {{ module_row }};

function addModule(type) {
    html = '<tr id="module-row-' + module_row + '">';
    html += '  <td class="text-start"><div class="input-group input-group-sm">';
    html += '    <select name="layout_module[' + module_row + '][code]" class="form-select input-sm">';
  {% for extension in extensions %}
    html += '    <optgroup label="{{ extension.name|escape('js') }}">';
  {% if not extension.module %}
    html += '      <option value="{{ extension.code|escape('js') }}">{{ extension.name|escape('js') }}</option>';
  {% else %}
  {% for module in extension.module %}
    html += '      <option value="{{ module.code|escape('js') }}">{{ module.name|escape('js') }}</option>';
  {% endfor %}
  {% endif %}
    html += '    </optgroup>';
  {% endfor %}
    html += '  </select>';
    html += '  <input type="hidden" name="layout_module[' + module_row + '][position]" value="' + type.replaceAll('-', '_') + '" />';
    html += '  <input type="hidden" name="layout_module[' + module_row + '][sort_order]" value="" />';
    html += '  <a href=" data-bs-toggle="tooltip" title="{{ button_edit|escape('js') }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-pencil fa-fw"></i></a><button type="button" onclick="$(\'#module-row-' + module_row + '\').remove();" data-bs-toggle="tooltip" title="{{ button_remove|escape('js') }}" class="btn btn-danger btn-sm"><i class="fa-solid fa-minus-circle fa-fw"></i></button>';
    html += '  </div></td>';
    html += '</tr>';

    $('#module-' + type + ' tbody').append(html);

    $('#module-' + type + ' tbody input[name*=\'sort_order\']').each(function (i, element) {
        $(element).val(i);
    });

    $('#module-' + type + ' select:last').trigger('change');

    module_row++;
}

$('#module-column-left, #module-column-right, #module-content-top, #module-content-bottom').on('change', 'select[name*=\'code\']', function () {
    var part = this.value.split('.');

    if (typeof part[2] == 'undefined') {
        $(this).parent().find('a').attr('href', 'index.php?route=extension/' + part[0] + '/module/' + part[1] + '&user_token={{ user_token }}');
    } else {
        $(this).parent().find('a').attr('href', 'index.php?route=extension/' + part[0] + '/module/' + part[1] + '&user_token={{ user_token }}&module_id=' + part[2]);
    }
});
//--></script>
{{ footer }}