{% 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('list_product') }}">{% trans %}list_product{% 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 %}category{% endtrans %}</strong>
                <p class="text-muted">
                  {{ entity.getParent()["category_1"]["label"] }}
                </p>			  
                <hr>
                <strong>{% trans %}sub_category{% endtrans %}</strong>
                <p class="text-muted">{{ entity.getParent()["category_2"]["label"] }}</p>
			        </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">
                    <form class="product_form" action="{{ path('view_product', {'id': entity.getId()}) }}" method="POST" enctype="multipart/form-data">
                      <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                              <label>{% trans %}label{% endtrans %}<span style="color:red"> *</span></label>
                              <input class="form-control" type="text" id="label" name="label" value="{{ entity.getLabel() }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                          <label>{% trans %}old_price{% endtrans %}</label>
                          <div class="input-group mb-3">
                            <input type="text" class="form-control" id="old_price" name="old_price" value="{{ entity.getOldPrice() }}" placeholder="">
                            <div class="input-group-append">
                              <span class="input-group-text" id="basic-addon2">€</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4">
                          <label>{% trans %}new_price{% endtrans %}<span style="color:red"> *</span></label>
                          <div class="input-group mb-3">
                            <input type="text" class="form-control" id="price" name="price" value="{{ entity.getPrice() }}" placeholder="">
                            <div class="input-group-append">
                              <span class="input-group-text" id="basic-addon2">€</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                              <label>{% trans %}displayed{% endtrans %}</label>
                              <input class="form-control" type="date" id="displayed" name="displayed" value="{{ entity.getDisplayed().format('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                              <label>{% trans %}description{% endtrans %}<span style="color:red"> *</span></label>
                              <textarea class="form-control" type="text" id="compose-textarea" name="description">{{ entity.getDescription() }}</textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                          <div class="form-group">
                            <label>{% trans %}utilization{% endtrans %}</label>
                            <textarea class="form-control" type="text" id="usage-textarea" name="utilization">{{ entity.getUtilization() }}</textarea>
                          </div>
                      </div>
                        <input type="hidden" id="poken" name="poken" value="{{ csrf_token('check_form_product') }}" />
                        <div class="col-md-12">
                            <input type="submit" value="{% trans %}update1{% endtrans %}" class="btn btn-success btn-update-product" /> 
                        </div>
                      </div>
                      </form>
                    </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('upload_picture') }}" 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="uoken" name="uoken" value="{{ csrf_token('check_form_product') }}" />
                            <input type="hidden" id="sku" name="sku" 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 }}
                                      </div>
                                      <div class="card-body pt-0">
                                        <div class="row">
                                          <div class="col-12 text-center">
                                            <img src="{{ item|link(entity.getReference(), 'normal') }}" alt="{{ entity.getLabel() }}" class="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('update_product_option', {'id': entity.getId()}) }}" method="POST">
                        <!-- .row -->
                        <div class="row">
                          <div class="col-sm-6">
                            <div class="form-group">
                              <label>{% trans %}color{% endtrans %}</label>
                              <select name="color[]" multiple class="custom-select">
                                {% for item in listOptColor %}
                                  {% if item.getTag() in colors %}
                                    <option value="{{ item.getTag() }}" selected>{{ item.getLabel() }}</option>
                                  {% else %}
                                    <option value="{{ item.getTag() }}">{{ item.getLabel() }}</option>
                                  {% endif %}
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <!-- Select multiple-->
                            <div class="form-group">
                              <label>{% trans %}size_tissue{% endtrans %}</label>
                              <select name="size_tissue[]" multiple class="custom-select">
                                {% for item in listOptSizeTissue %}
                                  {% if item.getTag() in sizeTissues %}
                                    <option value="{{ item.getTag() }}" selected>{{ item.getLabel() }}</option>
                                  {% else %}
                                    <option value="{{ item.getTag() }}">{{ item.getLabel() }}</option>
                                  {% endif %}
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                          <input type="hidden" id="ooken" name="ooken" value="{{ csrf_token('check_form_product') }}" />
                          <div class="col-sm-12">
                              <input type="submit" value="{% trans %}update1{% endtrans %}" class="btn btn-success btn-option-custom" /> 
                          </div>
                        </div>
                        <!-- /.row -->
                      </form>
                    </div>
                    <div class="tab-pane" id="review">
                      <!-- Post -->
                      {% for item in entity.getReviews() %}
                      <div class="post">
                        <div class="user-block">
                          <img class="img-circle img-bordered-sm" src="{{ asset('adm/images/avatar/default-avatar.png') }}" alt="image">
                          <span class="username">
                            <a href="#">{{ item.getPseudo() }}</a>
                          </span>
                          <span class="description">{{ item.getCreated().format('d/m/Y à H:i:s') ~ " - " ~ item.getNote()  ~ "/5" }}</span>
                        </div>
                        <!-- /.user-block -->
                        <p>{{ item.getMessage() }}</p>
                      </div>
                      {% endfor %}
                      <!-- /.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 %}