{% extends 'admin/layout.html.twig' %}

{% set menu = 'admin_operation_mobile_banner_manage' %}

{% set script_controller = 'operation/mobile' %}


{% block main %}
<style>

#mobile-banner1-container img ,
#mobile-banner2-container img ,
#mobile-banner3-container img ,
#mobile-banner4-container img ,
#mobile-banner5-container img
{max-width: 80%; margin-bottom: 10px;}

.course-grids {
  margin:0 -15px 0 0;
  padding:0;
  list-style: none;
}

.course-grid {
  display: inline-block;
  vertical-align: top;
  margin: 15px 15px 15px 0;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}

.banner-course .course-grid {
  margin: 0 0 0 0;
  margin-left: 10px;
}

.course-grid .series-mode-label {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
}

.course-grid .grid-body {
  position: relative;
  width: 170px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  color: #353535;
}

.grid-body a{
  text-decoration: none;
}

.course-grid .title {
  display: block;
  padding: 10px;
  min-height: 52px;
  color: #555;
  font-weight: bold;
}

.course-grid .add-course {
  font-size: 80px;
  height: 148px;
  text-align: center;
  padding-top: 30px;
}


</style>
{% if setting("mobile.enabled") == 1 %}

{{ web_macro.flash_messages() }}

<form class="form-horizontal" id="mobile-form" method="post">

  <fieldset>
    <div class="help-block">{{'客户端显示的轮播图。最多5张，建议图片大小为750*300，格式支持jpg、png。'|trans}}</div>
    {% for i in 1..5 %}
      {% set banner = 'banner'~ i %}
      <div class="form-group">
        <div class="col-md-2 control-label">
          <label for="banner1">{{'轮播图'~i|trans}}</label>
        </div>
        <div class="col-md-8 controls">
          {% set moobileId = 'mobile-banner' ~ i %}
          <div id="{{ moobileId }}-container">
              {% if mobile[banner] %}
                <img src="{{ asset(mobile[banner]) }}">
              {% endif %}
          </div>

          <button class="btn btn-default btn-sm" id="{{ moobileId }}-upload" type="button" data-url="{{ path('admin_operation_mobile_picture_upload', {type:banner}) }}" data-upload-token="{{ upload_token('system', 'image') }}">{{'上传'|trans}}</button>
          <button class="btn btn-default btn-sm" id="{{ moobileId }}-remove" type="button" data-url="{{ path('admin_operation_mobile_picture_remove', {type:banner}) }}" {% if not mobile[banner] %}style="display:none;"{% endif %}>{{'删除'|trans}}</button>

          <p class="help-block">{{'请上传png, gif, jpg格式的图片文件。'|trans}}</p>
            {% set bannerClick  = 'bannerClick' ~ i%}
          <div class="banner-setting" role="{{ 'banner'~i~'-setting' }}" {% if not mobile[banner] %}style="display:none;"{% endif %}>
            <input type="radio" role="{{ bannerClick }}" name="{{ bannerClick }}" {% if not mobile[bannerClick] %}checked="checked"{% endif %} value="0"/>{{'默认（无触发动作）'|trans}}
            <input type="radio" role="{{ bannerClick }}" name="{{ bannerClick }}" value="1" {% if mobile[bannerClick] == "1" %}checked="checked"{% endif %}/>{{'跳转到连接地址'|trans}}
            <input type="radio" role="{{ bannerClick }}" name="{{ bannerClick }}" value="2" {% if mobile[bannerClick] == "2" %}checked="checked"{% endif %}/>{{'跳转到内部课程'|trans}}

            <div class="row">
              <div class="col-xs-11">
                  {% set bannerUrl  = 'bannerUrl' ~ i%}
                <input type="text" id="{{ bannerUrl }}" name="{{ bannerUrl }}" class="form-control" value="{{mobile[bannerUrl]}}" placeholder="{{'请填写连接地址'|trans}}" {% if mobile[bannerClick] != "1" %}style="display:none"{% endif %}/>
              </div>
            </div>

            <div class="row" id="{{ 'selectBannerCourse' ~ i}}" data-role="selectBannerCourse" {% if mobile[bannerClick] != "2" %}style="display:none"{% endif %}>
              <a data-role="selectCourse" class="btn btn-sm btn-primary pull-left" data-toggle="modal" data-target="#modal" data-url="{{path('admin_course_search_to_fill_banner')}}" >
                  {{'选课'|trans}}
              </a>
              <div name="{{ 'bannerCourseShow' ~ i}}">
                <ul class="banner-course" role="bannerCourse">
                    {% include 'admin/course/course-item.html.twig' with {course:bannerCourses[i]} %}
                </ul>
              </div>
              {% set bannerJumpToCourseId  = 'bannerJumpToCourseId' ~ i%}
              <input type="text" name="{{ bannerJumpToCourseId }}" class="form-control" value="{{mobile[bannerJumpToCourseId]}}" placeholder="{{'请填写内部课程Id'|trans}}" style="display:none;"/>
            </div>
          </div>


          <input type="hidden" name="{{banner}}" value="{{ mobile[banner] }}">
        </div>
      </div>
    {% endfor %}

  </fieldset>

  <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">

  <div class="row form-group">
    <div class="controls col-md-offset-2 col-md-8">
      <button type="submit" class="btn btn-primary">{{'提交'|trans}}</button>
    </div>
  </div>

</form>

{% else %}
<div class="well" style="text-align:center;">


{{'移动端未开启，'|trans}}{{'请先在'|trans}}<a href="{{ path('admin_setting_mobile') }}"> {{'系统-课程设置-移动端设置 '|trans}}</a>{{'中设置开启'|trans}}

</div>
{% endif %}

{% endblock %}