{% extends "common/auth_page.twig" %}

{% block contentTitle %}{{'user-view'|trans}}{% endblock %}

{% block content %}


<div class="container">
  <div class="row">
    <div class="col-md-6 ">
      <div class="row">
        <div class="card w-100">
          <div class="card-header"><h4>{{'user-data'|trans}} {{user.username}}</h4></div>
          <div class="card-body">
            <table class="table table-striped" >
              <tbody>
              <tr>
                  <td>{{'name'|trans}}</td>
                  <td>{{user.name}}</td>
              </tr>
              <tr>
                  <td>{{'surname'|trans}}</td>
                  <td>{{user.surname}}</td>
              </tr>
              <tr>
                  <td>{{'email'|trans}}</td>
                  <td>{{user.email}}</td>
              </tr>
              <tr>
                  <td>{{'department'|trans}}</td>
                  <td>{{user.department}}</td>
              </tr>
              <tr>
                  <td>{{'phone'|trans}}</td>
                  <td>{{user.phone}}</td>
              </tr>
              <tr>
                <td colspan="2">
                  <a href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\UserRouters::USER_CREATE_PASSWORD'))}}">
                  <button class="btn btn-sm btn-outline-dark" >{{'change-password'|trans}}</button>
                  </a>
                </td>
              </tr>
              </tbody>
            </table>
          
           {% if user.allergens %}
            <h5>{{'allergens'|trans}} {% if user.excludeAllergens %} <span class="text-danger">( {{'exclude-allergens'|trans}} )</span> {% endif %} </h5>
            <div class="form-group text-left">
              {% for allergen in user.allergens %}
                {% if allergen.image %}<img class="logo" src="/static/images/allergens/{{allergen.image}}" alt="{{allergen.name}}" style="height:80px;max-width:100%;" data-toggle="tooltip" data-html="true" title="{{allergen.name}}"/>{% else %}<br/><i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{allergen.name}}{% endif %}
              {% endfor %}
            </div>
           {% endif %}

           <div class="card">
            <div class="card-header"><h4>{{'qr-code'|trans}}</h4>
            </div>
            <div class="card-body">
              <a class="btn btn-outline-dark btn-block"  href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\UserRouters::USER_USERCARD'),{id: user.id})}}">{{'download-card'|trans}}</a>
            </div>
          </div>
           
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card">
        <div class="card-header"><h4>{{'charge-account'|trans}}</h4>
        </div>

        <div class="card-body">

          <div class="form-group text-left">
              
            <form action="{{path_for(constant('GestionComedor\\Configuration\\Routers\\UserRouters::USER_PAY_CREDIT_CARD'),{id:user.id})}}" method="POST">
              <div class="row">
                <div class="col-md-12 mt-3 mb-3">
                  <ul>
                    <li>
                      <span class="font-weight-bold">{{'recharge-redsys'|trans}}</span><br/>
                      <span class="font-weight">{{'recharge-redsys-text'|trans}}</span>
                    </li>
                  </ul>
                </div>
                <div class="form-group col-md-5 ml-3">
                  <input type="text" class="form-control" name="price" value="0.00" inputmode="decimal" pattern="[0-9]+([.,][0-9]{1,2})?" required/>
                  <input type="hidden" name="userId" value="{{user.id}}"/>
                  <input type="hidden" name="userName" value="{{user.username}}"/>
                </div>
                <div class="form-group col-md-6">
                  <button type="submit" class="btn btn-primary">Recargar</button>
                </div>
              </div>
            </form>
          </div>
          
          <div class="row">
          <ul>
            <li>
              <span class="font-weight-bold">{{'by-transferbank'|trans}}</span><br/>
              <span class="font-weight">{{'by-transferbank-text'|trans}}</span>
            </li>
          </ul>
          </div>
          <table class="table table-striped" >
            <tbody>
            <tr>
                <td>{{'received'|trans}}</td>
                <td>Delicom, Servicios para colegios SL</td>
            </tr>
            <tr>
                <td>{{'iban'|trans}}</td>
                <td>ES11 0128 5795 4301 0003 4696</td>
            </tr>
            <tr>
                <td>{{'bic'|trans}}</td>
                <td>BKBKESMMXXX</td>
            </tr>
            <tr>
                <td>{{'concept'|trans}}</td>
                <td>{{user.username}}</td>
            </tr>
            </tbody>
            
          </table>

        </div>
      </div>
      
    </div>
  </div>
</div>

<div class="container pt-5">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
          <div class="card-header"><h4>{{'contacts'|trans}}</h4></div>
          <div class="card-body">
            <table class="table">
               <tr>
                   <th>{{'description'|trans}}</th>
                   <th>{{'email'|trans}}</th>
                   <th>{{'phone'|trans}}</th>
                   <th></th>
                   <th></th>
               </tr>
               {% for contactMail in contactMails %}
               <tr>                    
                   <td>{{contactMail.description}}</td>
                   <td>{{contactMail.email}}</td>
                   <td>{{contactMail.phone}}</td>
                   <td>
                     <button class="btn btn-sm btn-outline-dark editContactEmail" data-contactemail-id="{{contactMail.id}}">{{'edit'|trans}}</button>
                   </td>
                   <td>
                     <button class="btn btn-sm btn-outline-danger deleteContactEmail" data-contactemail-id="{{contactMail.id}}">{{'delete'|trans}}</button>
                   </td>
               </tr>
               {% endfor %}
             </table>
             <button class="btn btn-sm btn-outline-dark" id="assignContactEmail" data-toggle="modal" data-target="#userContactMailModal">{{'assign-contact-email'|trans}}</button>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="container pt-5">

  <div class="row">
    <div class="col-md-12">
      <div class="card">
          <div class="card-header"><h4>{{'daily-reservations'|trans}}</h4></div>

          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <h3>{{'actual-balance'|trans}}: {{user.balance}} €</h3>
              </div>
            </div>
            <table class="table" id="reservationsTable">
              <thead>
              <tr>
                  <th>{{'menu'|trans}}</th>
                  <th>{{'reserved'|trans}}</th>
                  <th>{{'day'|trans}}</th>
                  <th>{{'picked'|trans}}</th>
              </tr>
              </thead>
              <tbody>
              {% for reservation in reservations %}
              <tr>                    
                  <td>{{reservation.menu.products[1].principalName}}</td>
                  <td class="text-center">{{reservation.createdAt|date("Y-m-d H:i")}}</td>
                  <td class="text-center">{{reservation.menu.date|date("Y-m-d")}}</td>
                  <td class="text-center">{% if reservation.picked is null %}{% else %}{{reservation.picked|date("Y-m-d H:i")}}{% endif %}</td>
              </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
      </div>
    </div>

  </div>

</div>

<div class="container pt-5">

  <div class="row">
    <div class="col-md-12">
      <div class="card">
          <div class="card-header"><h4>{{'payments'|trans}}</h4></div>

          <div class="card-body">
            <table class="table" id="paymentsTable">
              <thead>
              <tr>
                  <th>{{'type'|trans}}</th>
                  <th>{{'value'|trans}}</th>
                  <th>{{'hour'|trans}}</th>
              </tr>
              </thead>
              <tbody>
              {% for payment in payments %}
              <tr>                    
                  <td>{{payment.description}}{% if payment.coffeeshopTicket %} - Ticket {{payment.coffeeshopTicket.numTicket}}{% endif %}</td>
                  <td class="text-center">{{payment.value}} €</td>
                  <td>{{payment.createdAt|date("Y-m-d H:i")}}</td>
              </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
      </div>
    </div>
  </div>

</div>


<div class="modal fade" id="userContactMailModal" tabindex="-1" role="dialog" aria-labelledby="contactEmailModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contactEmailModal">{{'contact-email'|trans}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{path_for(constant('GestionComedor\\Configuration\\Routers\\UserRouters::USER_SAVE_CONTACT_MAIL'))}}" method="POST">
          <input type="hidden" name="contactMailId" id="contactMailIdModal" value="" />
          <input type="hidden" name="userId" id="contactMailUserIdModal" value="{{user.id}}" />
          <div class="row">
            <div class="form-group col-md-12">
              <label for="description" class="font-weight-bold" >{{'description-contact'|trans}}</label>
              <input type="text" class="form-control" id="contactMailDescriptionModal" name="description" value="" required/>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-12">
              <label for="email" class="font-weight-bold" >{{'email'|trans}}</label>
              <input type="text" class="form-control" id="contactMailEmailModal" name="email" value="" required/>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-12">
              <label for="phone" class="font-weight-bold" >{{'phone'|trans}}</label>
              <input type="text" class="form-control" id="contactMailPhoneModal" name="phone" value="" required/>
            </div>
          </div>
          <div class="row">
            <div class="col text-right">
              <button type="submit" class="btn btn-primary ">{{'save'|trans}}</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{'cancel'|trans}}</button>
      </div>
    </div>
  </div>
</div>


{% endblock %}