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

{% block contentTitle %}{{'management-menu'|trans}}{% endblock %}

{% block content %}


	<table id="menusTable" class="display" style="width:100%">
		<thead>
			<tr>
				<th>{{'date'|trans}}</th>
				<th>{{'first-plate'|trans}}</th>
				<th>{{'second-plate'|trans}}</th>
				<th>{{'dessert-complements'|trans}}</th>
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			{% for menu in menus %}
				<tr>
					<td>{{menu.date|date("d-m-Y")}}</td>
					<td>{{menu.products[0].principalName}} {{menu.products[0].secondaryName}}</td>
					<td>{{menu.products[1].principalName}} {{menu.products[1].secondaryName}}</td>
					<td>{{menu.products[2].principalName}} {{menu.products[2].secondaryName}}</td>
					<td>
						<button class="btn btn-outline-dark reserveMenu" data-user-id="{{user.id}}" data-menu-id="{{menu.id}}">
              {{'reserve'|trans}}
            </button>
          </td>
					<td>
						<button class="btn btn-outline-dark editMenu" data-menu-id="{{menu.id}}">
              {{'edit'|trans}}
            </button>
          </td>
					<td>
						<button class="btn btn-outline-danger deleteMenu" data-menu-id="{{menu.id}}">
              {{'delete'|trans}}
            </button>
          </td>
				</tr>
			{% endfor %}
		</tbody>
	</table>



<div class="row">
  <div class="col-md-12 text-center pb-5">
    <div class="text-right pt-2 pr-2 pb-0 border-right border-left">
      <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#menuModal" >{{'add-menu'|trans}}</button>
    </div>  
  </div>
</div>


		<div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="addmenuModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addmenuModal">{{'new-menu'|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\\MenuRouters::MENU_MANAGER_CREATE'))}}" method="POST" >
            	<input type="hidden" name="menuId" id="menuIdModal" value="{{menu.id}}" />
            	<input type="hidden" name="month" value="{{month}}" />
            	<input type="hidden" name="year" value="{{year}}" />

            	<div class="form-row">
            		<div class="from-group col-md-12 pt-3" >
						  		<label for="firstPlate" class="font-weight-bold">{{'first-plate'|trans}}</label>
						  		<select name="firstPlate" id="firstPlateModal" class="form-control">
						  			{% for product in products %}
						  				<option value="{{product.id}}">{{product.principalName}} {{product.secondaryName}}  ({% for allergen in product.allergens %}{{allergen.code}}, {% endfor %})</option>
							  		{% endfor %}
						  			
						  		</select>
						  	</div>
            	</div>

            	<div class="form-row">
            		<div class="from-group col-md-12 pt-3" >
						  		<label for="secondPlate" class="font-weight-bold">{{'second-plate'|trans}}</label>
						  		<select name="secondPlate" id="secondPlateModal" class="form-control">
						  			{% for product in products %}
						  				<option value="{{product.id}}">{{product.principalName}} {{product.secondaryName}}  ({% for allergen in product.allergens %}{{allergen.code}}, {% endfor %})</option>
							  		{% endfor %}
						  		</select>
						  	</div>
            	</div>

            	<div class="form-row">
            		<div class="from-group col-md-12 pt-3" >
						  		<label for="dessertComplements" class="font-weight-bold">{{'dessert-complements'|trans}}</label>
						  		<select name="dessertComplements" id="dessertComplementsModal" class="form-control">
						  			{% for product in products %}
						  				<option value="{{product.id}}">{{product.principalName}} {{product.secondaryName}} ({% for allergen in product.allergens %}{{allergen.code}}, {% endfor %})</option>
							  		{% endfor %}
						  		</select>
						  	</div>
            	</div>

							<div class="form-row">
								<div class="from-group col-md-6 pt-3" >
									<label for="dateMenu" class="font-weight-bold">{{'date'|trans}}</label>
   				        <input type="date" class="form-control text-center" name="dateMenu" id="dateMenuModal" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
								</div>
								<div class="from-group col-md-6 pt-3" >
									<label for="line" class="font-weight-bold">{{'line'|trans}}</label>
						  		<select name="line" id="lineModal" class="form-control">
						  			{% for line in lines %}
						  				<option value="{{line.id}}">{{line.name}}</option>
							  		{% endfor %}
						  		</select>
								</div>								
							</div>

            	<div class="form-group">
                <button class="btn btn-primary mb-2 btn-dark ">{{'save'|trans}}</button>
              </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 %}