{extends "[shared]/window.tpl"}

{block tabs}
    {windowTab id='flapReservation' label=translate('flapReservation')|cat:' '|cat:$body.data.id}
{/block}

{block tabsContent}
   <div id="flapReservation" class="tab-pane fade active in boxStatic box">
      <div class="form-group form-group-flex">
         <div class="col-md-2 control-label">
            <label>{'order'|translate}</label>
         </div>
         <div class="col-md-4">
             {if $body.reservation.orderId}
                <a href="javascript:nw('orders', {$body.reservation.orderId})">
                    {$body.reservation->getOrder()->order_no}
                </a>
             {else}
                 {'reservationNotMerged'|translate}
             {/if}
         </div>

         <div class="col-md-2 control-label">
            <label>{'date'|translate}</label>
         </div>
         <div class="col-md-4">
            <input id="date_created" class="form-control input-sm" type="text" name="data[date_created]"
                   value="{$body.data.date_created|format_datetime}" autocomplete="off">
             {insert_calendar selector='#date_created' format='datetime'}
         </div>
      </div>

      <div class="form-group form-group-flex">
         <div class="col-md-2 control-label">
            <label>{'email'|translate}</label>
         </div>
         <div class="col-md-4">
            <div class="input-group">
               <input class="form-control input-sm" type="text" name="data[email]"
                      value="{$body.data.email}">
               <div class="input-group-btn">
                  <a href="javascript:nw('list', 'Reservation', 'filterUserActive={$body.data.email}');" title="{'userActiveReservations'|translate}"
                     class="btn btn-primary btn-sm">
                     <span class="glyphicon glyphicon-list"></span></a>
               </div>
            </div>
         </div>

         <div class="col-md-2 control-label">
            <label>{'name'|translate}</label>
         </div>
         <div class="col-md-4">
            <input class="form-control input-sm" type="text" name="data[name]"
                   value="{$body.data.name}">
         </div>
      </div>
      <div class="form-group form-group-flex">
         <div class="col-md-2 control-label">
            <label>{'phone'|translate}</label>
         </div>
         <div class="col-md-4">
            <input class="form-control input-sm" type="text" name="data[phone]"
                   value="{$body.data.phone}">
         </div>

         <div class="col-md-2 control-label">
            <label>{'surname'|translate}</label>
         </div>
         <div class="col-md-4">
            <input class="form-control input-sm" type="text" name="data[surname]"
                   value="{$body.data.surname}">
         </div>
      </div>

      <hr>

      <div class="panel panel-default panel-sm">
         <div class="panel-heading"><h3 class="panel-title">{'reservations'|translate}</h3></div>

         <table class="table">
            <thead>
            <tr>
               <th width="60%">{'product'|translate}</th>
               <th width="20%">{'variation'|translate}</th>
               <th width="20%">{'price'|translate}</th>
            </tr>
            </thead>
            <tbody>
            {if $body.reservation}
               <tr style="border-bottom: thin; {if $row.notified == 3}background-color: #bfec55;{/if}">
                  <td>
                     <a href="javascript:nw('products', {$body.reservation.productId})">
                         {$body.reservation->getProduct()->title}
                     </a>
                  </td>
                  <td>{$body.reservation->getProduct()->variationTitle}</td>
                  <td>{$body.reservation->getPrice()|format_price}</td>
               </tr>
            {/if}
            </tbody>
         </table>
      </div>
   </div>
{/block}
