{{ header }}{{ column_left }}
{% set token_random = random() %}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-slider" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        {% if error_warning %}
            <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        <div class="theme-option-container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form_edit }}</h3>
                </div>
                <div class="panel-body">
                    <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-slider" class="form-horizontal">
                        <div class="form-group required">
                            <label class="col-sm-3 control-label" for="input-name">{{ entry_slider_name }}</label>
                            <div class="col-sm-6">
                                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_slider_name }}" id="input-name" class="form-control" />
                                {% if error_name %}
                                    <div class="text-danger">{{ error_name }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="input-status">{{ entry_status }}</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="status" value="0" />
                                <input type="checkbox" class="ckb-switch" name="status" id="input-status"
                                       data-toggle="toggle" data-on="{{ text_enabled }}" data-off="{{ text_disabled }}" data-width="100" data-height="36"
                                        {% if status %} value="1" checked {% else %} value="0" {% endif %}>
                            </div>
                        </div>

                        <div class="form-group required">
                            <label class="col-sm-3 control-label" for="input-delay">{{ entry_delay }}</label>
                            <div class="col-sm-3">
                                <input type="text" name="delay" value="{{ delay }}" placeholder="{{ entry_delay }}" id="input-delay" class="form-control" />
                                {% if error_delay %}
                                    <div class="text-danger">{{ error_delay }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="input-auto">{{ entry_auto }}</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="auto" value="0" />
                                <input type="checkbox" class="ckb-switch" name="auto" id="input-auto"
                                       data-toggle="toggle" data-on="{{ text_enabled }}" data-off="{{ text_disabled }}" data-width="100" data-height="36"
                                        {% if auto %} value="1" checked {% else %} value="0" {% endif %}>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="input-hover">{{ entry_hover }}</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="hover" value="0" />
                                <input type="checkbox" class="ckb-switch" name="hover" id="input-auto"
                                       data-toggle="toggle" data-on="{{ text_enabled }}" data-off="{{ text_disabled }}" data-width="100" data-height="36"
                                        {% if hover %} value="1" checked {% else %} value="0" {% endif %}>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="input-nextback">{{ entry_nextback }}</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="nextback" value="0" />
                                <input type="checkbox" class="ckb-switch" name="nextback" id="input-auto"
                                       data-toggle="toggle" data-on="{{ text_enabled }}" data-off="{{ text_disabled }}" data-width="100" data-height="36"
                                        {% if nextback %} value="1" checked {% else %} value="0" {% endif %}>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="input-contrl">{{ entry_contrl }}</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="contrl" value="0" />
                                <input type="checkbox" class="ckb-switch" name="contrl" id="input-auto"
                                       data-toggle="toggle" data-on="{{ text_enabled }}" data-off="{{ text_disabled }}" data-width="100" data-height="36"
                                        {% if contrl %} value="1" checked {% else %} value="0" {% endif %}>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                <ul class="nav nav-pills nav-stacked" id="module">
                                    {% set module_row = 1 %}
                                    {% for ptslider_image in ptslider_images %}
                                        <li><a class="btn btn-theme-option" href="#tab-module{{ ptslider_image['key'] }}" data-toggle="tab"><i class="fa fa-minus-circle" onclick="$('a[href=\'#tab-module{{ ptslider_image['key'] }}\']').parent().remove(); $('#tab-module{{ ptslider_image['key'] }}').remove(); $('#module a:first').tab('show');"></i> {{ tab_banner }}  {{ module_row }}</a></li>
                                        {% set module_row = module_row +1 %}
                                    {% endfor %}
                                    <li id="module-add"><a class="btn btn-theme-option" onclick="addModule();"><i class="fa fa-plus-circle"></i> {{ button_add_banner }}</a></li>
                                </ul>
                            </div>

                            <div class="col-sm-12">
                                <div class="tab-content">
                                    {% set image_row = 0 %}
                                    {% for ptslider_image in ptslider_images %}
                                        <div class="tab-pane" id="tab-module{{ ptslider_image['key'] }}">
                                            <ul class="nav nav-tabs" id="language{{ ptslider_image['key'] }}">
                                                {% for language in languages %}
                                                    <li><a href="#tab-module{{ ptslider_image['key'] }}-language{{ language['language_id'] }}" data-toggle="tab"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a></li>
                                                {% endfor %}
                                            </ul>
                                            <div class="tab-content">
                                                {% for language in languages %}
                                                    <div class="tab-pane" id="tab-module{{ ptslider_image['key'] }}-language{{ language['language_id'] }}">
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label" for="input-title{{ ptslider_image['key'] }}-language{{ language['language_id'] }}">{{ entry_title }}</label>

                                                            <div class="col-sm-10">
                                                                <input type="text" id="input-title{{ ptslider_image['key'] }}-language{{ language['language_id'] }}" name="ptslider_image[{{ image_row }}][ptslider_image_description][{{ language['language_id'] }}][title]" value="{% if ptslider_image['ptslider_image_description'][language['language_id']] %}{{ ptslider_image['ptslider_image_description'][language['language_id']]['title'] }}{% endif %}" placeholder="{{ entry_title }}" class="form-control" />
                                                            </div>
                                                        </div>

                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label" for="input-subtitle{{ ptslider_image['key'] }}-language{{ language['language_id'] }}">{{ entry_subtitle }}</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" id="input-subtitle{{ ptslider_image['key'] }}-language{{ language['language_id'] }}" name="ptslider_image[{{ image_row }}][ptslider_image_description][{{ language['language_id'] }}][sub_title]" value="{% if ptslider_image['ptslider_image_description'][language['language_id']] %}{{ ptslider_image['ptslider_image_description'][language['language_id']]['sub_title'] }}{% else %}{% endif %}" placeholder="{{ entry_title }}" class="form-control" />
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label" for="input-description{{ ptslider_image['key'] }}-language{{ language['language_id'] }}">{{ entry_description }}</label>
                                                            <div class="col-sm-10">
                                                                <textarea data-toggle="summernote" data-lang="{{summernote}}" name="ptslider_image[{{ image_row }}][ptslider_image_description][{{ language['language_id'] }}][description]" placeholder="{{ entry_description }}" id="input-description{{ ptslider_image['key'] }}-language{{ language['language_id'] }}" class="form-control">{% if ptslider_image['ptslider_image_description'][language['language_id']] %}{{ ptslider_image['ptslider_image_description'][language['language_id']]['description'] }}{% else %}{% endif %}</textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endfor %}

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="input-link{{ ptslider_image['key'] }}-language{{ language['language_id'] }}">{{ entry_link }}</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" id="input-link{{ ptslider_image['key'] }}-language{{ language['language_id'] }}" name="ptslider_image[{{ image_row }}][link]" value="{% if ptslider_image['link'] %}{{ ptslider_image['link'] }}{% endif %}" placeholder="{{ entry_link }}" class="form-control" />
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="thumb-image-{{ ptslider_image['key'] }}-{{ token_random }}">{{ entry_image }}</label>
                                                    <div class="col-sm-10">
                                                        <a href="" id="thumb-image-{{ ptslider_image['key'] }}-{{ token_random }}" data-toggle="image" class="img-thumbnail"><img src="{% if ptslider_image['thumb'] %} {{ ptslider_image['thumb'] }} {% else %}  {{ placeholder }} {% endif %}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                                                        <input type="hidden"  name="ptslider_image[{{ image_row }}][image]"  value="{{ ptslider_image['image'] }}" id="input-image{{ ptslider_image['key'] }}-{{ token_random }}" />
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="input-type">{{ entry_type }}</label>
                                                    <div class="col-sm-10">
                                                        <select name="ptslider_image[{{ image_row }}][type]" id="input-type" class="form-control">
                                                            {% if ptslider_image['type'] %}
                                                                {% if ptslider_image['type'] == 1 %}
                                                                    <option selected="selected" value="1">Type 1</option>
                                                                {% else %}

                                                                    <option value="1">Type 1</option>
                                                                {% endif %}
                                                                {% if ptslider_image['type'] == 2 %}
                                                                    <option selected="selected" value="2">Type 2</option>
                                                                {% else %}
                                                                    <option value="2">Type 2</option>
                                                                {% endif %}
                                                                {% if ptslider_image['type'] == 3 %}
                                                                    <option selected="selected" value="3">Type 3</option>
                                                                {% else %}
                                                                    <option value="3">Type 3</option>
                                                                {% endif %}
                                                            {% else %}
                                                                <option value="1">Type 1</option>
                                                                <option value="2">Type 2</option>
                                                                <option value="3">Type 3</option>
                                                            {% endif %}
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">{{ entry_store }}</label>
                                                    <div class="col-sm-10">
                                                        <div class="well well-sm" style="height: 150px; overflow: auto;">
                                                            {% for store in stores %}
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" name="slider_store[]" value="{{ store.store_id  }}" {% if store.store_id in ptslider_image.slider_store %} checked="checked" {% endif %} /> {{ store.name }}
                                                                    </label>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% set image_row = image_row + 1 %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
<link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
<script type="text/javascript" src="view/javascript/summernote/summernote-image-attributes.js"></script>
<script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>
<script type="text/javascript"><!--
    var module_row = {{ module_row }};

    function addModule() {
        var token = Math.random().toString(36).substr(2);

        html  = '<div class="tab-pane" id="tab-module' + token + '">';
        html += '  <ul class="nav nav-tabs" id="language' + token + '">';
        {% for language in  languages %}
        html += '    <li><a href="#tab-module' + token + '-language{{ language['language_id'] }}" data-toggle="tab"><img src="language/{{ language['code'] }}/{{ language['code'] }}.png" title="{{ language['name'] }}" /> {{ language['name'] }}</a></li>';
        {% endfor %}
        html += '  </ul>';

        html += '  <div class="tab-content">';


        {% for language in languages %}
        html += '    <div class="tab-pane" id="tab-module' + token + '-language{{ language['language_id'] }}">';

        html += '      <div class="form-group">';
        html += '        <label class="col-sm-2 control-label" for="input-title' + token + '-language{{ language['language_id'] }}">{{ entry_title }}</label>';
        html += '        <div class="col-sm-10"><input type ="text" name="ptslider_image[' + token + '][ptslider_image_description][{{ language['language_id'] }}][title]"placeholder="{{ entry_title }}" class="form-control" id="input-title' + token + '-language{{ language['language_id'] }}"/></div>';
        html += '      </div>';

        html += '      <div class="form-group">';
        html += '        <label class="col-sm-2 control-label" for="input-subtitle' + token + '-language{{ language['language_id'] }}">{{ entry_subtitle }}</label>';
        html += '        <div class="col-sm-10"><input class="form-control" type ="text" name="ptslider_image[' + token + '][ptslider_image_description][{{ language['language_id'] }}][sub_title]" placeholder="{{ entry_subtitle }}" id="input-subtitle' + token + '-language{{ language['language_id'] }}"/></div>';
        html += '      </div>';



        html += '      <div class="form-group">';
        html += '        <label class="col-sm-2 control-label" for="input-description' + token + '-language{{ language['language_id'] }}">{{ entry_description }}</label>';
        html += '        <div class="col-sm-10"><textarea class="form-control summernote" name="ptslider_image[' + token + '][ptslider_image_description][{{ language['language_id'] }}][description]" placeholder="{{ entry_description }}" id="input-description' + token + '-language{{ language['language_id'] }}"></textarea></div>';
        html += '      </div>';
        html += '    </div>';
        {% endfor %}

        html += '      <div class="form-group">';
        html += '        <label class="col-sm-2 control-label" for="input-link' + token + '-language{{ language['language_id'] }}">{{ entry_link }}</label>';
        html += '        <div class="col-sm-10"><input class="form-control" type="text" name="ptslider_image[' + token + '][link]" placeholder="{{ entry_link }}" id="input-link' + token + '-language{{ language['language_id'] }}"/></div>';
        html += '      </div>';

        html += '      <div class="form-group">';
        html += '        <label class="col-sm-2 control-label" for="input-image' + token + '-language{{ language['language_id'] }}">{{ entry_image }}</label>';

        html += '<div class="col-sm-10"><a href="" id="thumb-image' + token + '" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="ptslider_image[' + token + '][image]" value="" id="input-image' + token + '" /></div>';
        html += '      </div>';

        html +='  <div class="form-group">';
        html+='<label class="col-sm-2 control-label" for="input-image">{{ entry_type }}</label>';
        html +='<div class="col-sm-10">';
        html +='<select name="ptslider_image[' + token + '][type]" id="input-type" class="form-control">';
        html +='<option value="1" >Type 1</option><option value="2">Type 2</option><option value="3">Type 3</option>';
        html +='</select>'
        html +='</div></div>'

        html +='<div class="form-group">';
        html +='<label class="col-sm-2 control-label">{{ entry_store }}</label>';
        html +='<div class="col-sm-10">'
        html +='<div class="well well-sm" style="height: 150px; overflow: auto;">';
        {% for store in stores %}

        html +='<div class="checkbox">';
        html +='<label>';
        html +='<input type="checkbox" name="ptslider_image[' + token + '][slider_store][]" value="{{ store['store_id'] }}" /> {{ store['name'] }} ';
        html +='</label>';
        html +='</div>';
        {% endfor %}
        html +='</div>';
        html +='</div>';
        html +='</div>';

        html += '  </div>';
        html += '</div>';

        $('.tab-content:first-child').prepend(html);

        {% for language in  languages %}
        $('#input-description' + token + '-language{{ language['language_id'] }}').summernote({
            height: 300
        });
        {% endfor %}

        $('#module-add').before('<li><a class="btn btn-theme-option" href="#tab-module' + token + '" data-toggle="tab"><i class="fa fa-minus-circle" onclick="$(\'a[href=\\\'#tab-module' + token + '\\\']\').parent().remove(); $(\'#tab-module' + token + '\').remove(); $(\'#module a:first\').tab(\'show\');"></i> {{ tab_banner }} ' + module_row + '</a></li>');

        $('#module a[href=\'#tab-module' + token + '\']').tab('show');

        $('#language' + token + ' li:first-child a').tab('show');

        module_row++;
    }
    //--></script>
<script type="text/javascript"><!--
    $('#module li:first-child a').tab('show');
    {% for ptslider_image in  ptslider_images %}
    $('#language{{ ptslider_image['key'] }} li:first-child a').tab('show');
    {% endfor %}
    //--></script>
<script>
    $(document).ready(function() {
        $('.toggle.btn').on('click', function () {
            var ckb_status = parseInt($(this).find('.ckb-switch').val());
            if(ckb_status == 1) {
                $(this).find('.ckb-switch').val('0');
            } else {
                $(this).find('.ckb-switch').val('1');
            }
        });
    })
</script>
{{ footer }}