{% extends 'base/staff/base_product.html.twig' %}

{% block title %}{% trans %}app_name{% endtrans %} | {{entity.getLabel()}}{% endblock title %}

{% block body %}
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0 text-dark">{% trans %}details_product{% endtrans %}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ path('dashboard') }}">{% trans %}dashboard{% endtrans %}</a></li>
                <li class="breadcrumb-item active">{% trans %}details_product{% endtrans %}</li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
  
      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <strong>{% trans %}label{% endtrans %}</strong>
                <p class="text-muted">
                  {{ entity.getLabel() }}
                </p>			  
                <hr>
                <strong>{% trans %}creation_date{% endtrans %}</strong>
                <p class="text-muted">{{ entity.getCreated().format("d/m/Y à H:i:s") }}</p>
                <hr>
                <strong>{% trans %}price{% endtrans %}</strong>				
					      <p class="text-muted">{{ entity.getPrice() ~ " €" }}</p>
                <hr>
                <a href="" class="btn btn-primary btn-block"><b>{% trans %}update{% endtrans %}</b></a>
			        </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
              <div class="card">
                <div class="card-header p-2">
                  <ul class="nav nav-pills">
                    <li class="nav-item"><a class="nav-link active" href="#description" data-toggle="tab">{% trans %}description{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#picture" data-toggle="tab">{% trans %}pictures{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#option" data-toggle="tab">{% trans %}options{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#review" data-toggle="tab">{% trans %}reviews{% endtrans %}</a></li>
                  </ul>
                </div><!-- /.card-header -->
                <div class="card-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="description">
                      <div class="row">
                        <div class="col-sm-12">
                          <textarea class="form-control" type="text" id="compose-textarea" name="compose-textarea">{{ entity.getDescription() }}</textarea>
                        </div>
                      </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="picture">
                      <div class="row">					
                        <div class="col-md-12 text-center mb-2">
                          <form id="upload" method="POST" action="{{ path('create_product') }}" enctype="multipart/form-data">
                            <div id="drop">
                              <p>{% trans %}drop_files_jpg_700_898{% endtrans %}</p>

                              <a>{% trans %}browse{% endtrans %}</a>
                              <input type="file" name="upl" multiple />
                            </div>
                            <ul>
                              <!-- The file uploads will be shown here -->
                            </ul>
                            <input type="hidden" id="token" name="token" value="{{ csrf_token('check_form_product') }}" />
                            <input type="hidden" id="_url" name="_url" value="{{ entity.getId() }}" />
                          </form>
                        </div>				  
                        <div class="col-sm-12">
    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card card-solid">
        <div class="card-body pb-0">
          <div class="row d-flex align-items-stretch">
            {% for item in entity.getPictures() %}
            <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
              <div class="card bg-light">
                <div class="card-header text-muted border-bottom-0">
                  {{ item|getlink(entity.getId()) }}
                </div>
                <div class="card-body pt-0">
                  <div class="row">
                    <div class="col-5 text-center">
                      <img src="{{asset('GH5j-U1EF-vMM8-3rZN/' ~ entity.getId() ~ '/' ~ item) }}" alt="" class="img-circle img-fluid">
                    </div>
                  </div>
                </div>
                <div class="card-footer">
                  <div class="text-right">
                    <a href="{{ path('delete_picture', {'id': entity.getId(),'name': item}) }}" class="btn btn-sm bg-teal">
                      <i class="fas fa-trash"></i>
                    </a>
                    <!--<a href="#" class="btn btn-sm btn-primary">
                      <i class="fas fa-user"></i> View Profile
                    </a>-->
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </section>
    <!-- /.content -->
                        </div>
                      </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="option">
                      <form class="option_form form-horizontal" action="{{ path('ajax_check_features') }}" method="POST">
                        <!-- .row -->
                        <div class="row">
                          <div class="col-sm-6">
                            <!-- Select multiple-->
                            <div class="form-group">
                              <label>{% trans %}material{% endtrans %}</label>
                              <select id="option_material" name="option_material[]" multiple class="custom-select">
                                {% for item in listOptMaterial %}
                                <option value="{{ item.getTag() }}">{{ item.getLabel() }}</option>
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <div class="form-group">
                              <label>{% trans %}color{% endtrans %}</label>
                              <select id="option_color" name="option_color[]" multiple class="custom-select">
                                {% for item in listOptColor %}
                                <option value="{{ item.getTag() }}">{{ item.getLabel() }}</option>
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                          <input type="hidden" id="token_option" name="token_option" value="{{ csrf_token('check_form_option') }}" />
                          <input type="hidden" id="_url" name="_url" value="{{ entity.getId() }}" />
                          <div class="input-group input-group-sm mb-0">
                            <div class="input-group-append">
                              <input type="submit" value="{% trans %}update1{% endtrans %}" class="btn btn-success btn-option-custom" /> 
                            </div>
                          </div>
                        </div>
                        <!-- /.row -->
                      </form>
                    </div>
                    <div class="tab-pane" id="review">
                      <!-- Post -->
                      <div class="post">
                        <div class="user-block">
                          <img class="img-circle img-bordered-sm" src="{{ asset('front/images/avatar/default-avatar.png') }}" alt="image">
                          <span class="username">
                            <a href="#">John dir</a>
                          </span>
                          <span class="description">12 mars 2020 à 12H30</span>
                        </div>
                        <!-- /.user-block -->
                        <p>test test</p>
                      </div>
                      <!-- /.post -->
                      <!-- Post -->
                      <div class="post clearfix">
                        <form class="create_review_form form-horizontal" action="{{ path('ajax_check_create_review') }}" method="POST">
                          <div class="input-group input-group-sm mb-0">
                            <input type="text" id="message-review" name="message-review" class="form-control form-control-sm" placeholder="{% trans %}type_message{% endtrans %}" />
                            <div class="input-group-append">
                              <input type="submit" value="{% trans %}send{% endtrans %}" class="btn btn-success btn-review-custom" /> 
                            </div>
                          </div>
                          <input type="hidden" id="token" name="token" value="{{ csrf_token('check_form_review') }}" />
                          <input type="hidden" id="_url" name="_url" value="{{ entity.getId() }}" />
                        </form>
                      </div>
                      <!-- /.post -->
                    </div>
                    <!-- /.tab-pane -->
                  </div>
                  <!-- /.tab-content -->
                </div><!-- /.card-body -->
              </div>
              <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
  </div>
  <!-- /.control-sidebar -->
<!-- ./wrapper -->
{% endblock body %}
{% block javascripts %}
<script src="{{ asset('adm/build/js/message-product-fr.js') }}"></script>
<script src="{{ asset('adm/dist/js/product-control.js') }}"></script>
{% endblock javascripts %}