{% extends 'base_support.html.twig' %}

{% block title %}{% trans %}app_name{% endtrans %} | {% trans %}support{% endtrans %}{% endblock title %}

{% block body %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Support</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ path('dashboard') }}">{% trans %}home{% endtrans %}</a></li>
              <li class="breadcrumb-item active">{% trans %}support{% endtrans %}</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-4">
          <button type="button" class="btn btn-primary btn-block mb-3" data-toggle="modal" data-target="#modal-ticket">
            {% trans %}new_ticket{% endtrans %}
          </button>
          {% if listTicket|length > 0 %}
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">{% trans %}tickets{% endtrans %}</h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="card-body p-0">
              <ul class="products-list product-list-in-card pl-2 pr-2">
                  {% for item in listTicket %}
                  
                  <li class="item" data-ref="{{ item.getId() }}" data-label="{{ item.getLabel() }}">
                    <div class="product-img">
                      <img src="{{ asset('front/dist/img/default-150x150.png') }}" alt="Product Image" class="img-size-50">
                    </div>
                    <div class="product-info">
                      <a href="#" class="product-title">{{ item.getCreated().format('d/m/Y') }}
                        <span class="badge badge-danger float-right"></span></a>
                      <span class="product-description">
                        {{ item.getLabel() }}
                      </span>
                    </div>
                  </li>
                  
                  {% endfor %}
                  <!-- /.item -->
              </ul>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
          {% endif %}
        </div>
        <!-- /.col -->
        <div class="col-md-8">
          <div class="card card-primary card-outline">
            <div class="card-header">
              <h3 class="card-title card-ticket" data-ref="" data-uid="{{ app.user.reference }}">{% trans %}inbox{% endtrans %}</h3>
              <!--<div class="card-tools">
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control" placeholder="Search Mail">
                  <div class="input-group-append">
                    <div class="btn btn-primary">
                      <i class="fas fa-search"></i>
                    </div>
                  </div>
                </div>
              </div>-->
              <!-- /.card-tools -->
            </div>
            <!-- /.card-header -->
                <!-- DIRECT CHAT -->
                  <div class="card-body">
                    <!-- Conversations are loaded here -->
                    <div class="direct-chat-messages">
                    </div>
                    <!--/.direct-chat-messages-->
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer">
                    <form class="create_ticket_message_form" action="{{ path('ajax_check_create_ticket_message') }}" method="POST">
                      <div class="input-group">
                        <input type="text" id="message-ticket" name="message-ticket" placeholder="{% trans %}type_message{% endtrans %}" class="form-control" disabled>
                        <input type="hidden" id="token" name="token" value="{{ csrf_token('check_form_ticket') }}" />
                        <span class="input-group-append">
                          <button type="button" class="btn btn-warning btn-ticket-message">{% trans %}send{% endtrans %}</button>
                        </span>
                      </div>
                    </form>
                  </div>
                  <!-- /.card-footer-->
                
                <!--/.direct-chat -->
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <div class="modal fade" id="modal-ticket">
        <div class="modal-dialog modal-lg">
        <form class="create_ticket_form" action="{{ path('ajax_check_create_ticket') }}" method="POST">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">{% trans %}new_ticket{% endtrans %}</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
            <label>{% trans %}label{% endtrans %}<span style="color:red"> *</span></label>
              <p><input type="text" class="form-control" id="label-ticket" name="label-ticket" placeholder="{% trans %}label{% endtrans %}"></p>
              <input type="hidden" id="token" name="token" value="{{ csrf_token('check_form_ticket') }}" />
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">{% trans %}close{% endtrans %}</button>
              <button type="button" class="btn btn-primary btn-ticket">{% trans %}validate{% endtrans %}</button>
            </div>
          </div>
          </form>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->


    </section>
    <!-- /.content -->
  </div>
{% endblock body %}