@extends('template.layoutAdmin')

@section('title')
    Visualizar Comanda
@endsection

@section('style')
<style media="screen">
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 20px;
    height: 20px;
    padding: 0px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

</style>
<link rel="stylesheet" href="{{asset('css/comanda.css')}}">
<link rel="stylesheet" href="{{asset('css/pv.css')}}">
@endsection
{{-- @section('cabecera')
  <div class="row">
    <div class="col-12">
      <h1>
        <small>
          {{  trans('comanda.aforoReserva') }}				
        </small>
      </h1>
    </div>
  </div>
@endsection --}}

@section('contenido')
<div class="row">
  <div class="col-md-12">
    <div class="box">
      <div class="box-body">
        <div class="pos_content">
          <div class="container-fluid">
            <div class="row align-items-center">
                <div style="margin-left:2%">
                  <a href="{{route('comanda.indexComandaZonas')}}" class="btn btn_red_enjoit float-right" > <i class="fa fa-arrow-left" aria-hidden="true"></i> </a>
                </div>
              {{-- <div class="col-md-1 align-items-center">
                      
              </div> --}}
              <div class="col-md-9 text-center">
                  <div class="item_list_pedido"> {{  trans('comanda.mesa') }} {{$orderData[0]->getMesa->nombre . ' - ' . $orderData[0]->getMesa->numeroMesa}}</div>
              </div>
              <div class="col-md-2 text-center">
                  <div class="row p-1">
                    <div class="col item_list_count" style="background-color:#00CF55; font-weight: bold; color: black; margin: 3px;">{{$total['ordenados']}} </div>
                    <div class="col item_list_count" style="background-color:#FF8123; font-weight: bold; color: black; margin: 3px;">{{$total['enproceso']}}</div>
                    <div class="col item_list_count" style="background-color:#942FAD; font-weight: bold; color: black; margin: 3px;">{{$total['preparados']}}</div>
                  </div>
              </div>
            </div>
            <div id="id_content_row_comanda" class="comanda_table" style="overflow-x:auto;">
              <div class="row" style="flex-wrap: nowrap !important;">
                  {{-- @if ($notify>=1)
                    @if ($sound==1)
                      <audio class="notify_audio_comanda" autoplay>
                        <source src="{{asset('assets/media/notify/comanda.mp3')}}" type="audio/mp3">
                      </audio>
                    @endif
                  @endif --}}
                
                  @foreach ($orderData as $itemOrder)
                    <div class="col-6 col-xl-4">
                      <div class="d-flex flex-column bd-highlight list_pedido">
                        <div class="bd-highlight">
                          <div class="row mb-3">
                            <div class="col-md-12 text-center">
                                <div class="item_list_pedido"> 
                                  {{  trans('comanda.cliente') }}				
                                  {{$itemOrder->client}}</div>
                            </div>
                          </div>
                          <div class="row">
                              <div class="col text-center">
                                  <div class="item_list_pedido">
                                    {{  trans('comanda.ped') }}				
                                    {{$itemOrder->referencia}}</div>
                                </div>
                                @if (!empty($itemOrder->tableNumber))
                                  <div class="col text-center">
                                    <div class="item_list_pedido">
                                      {{  trans('comanda.mesa') }}				
                                      {{-- {{$itemOrder->tableNumber}} --}}</div>
                                  </div>
                                @endif
                                <div class="col-md-auto text-center">
                                  <div class="item_list_pedido"> {{  trans('comanda.items') }}				
                                    {{$itemOrder->pending}}</div>
                                </div>
                          </div>
                          <div class="row mt-3">
                            <div class="col-md-12 text-center">
                                <div class="item_list_pedido">{{date("d/m/Y h:i: a", strtotime($itemOrder->getPedidoRest->fecha))}}</div>
                            </div>
                          </div>
                        </div>
                        <div class="mb-auto bd-highlight pedido_content_cm">
                          <div class="content_list_pedido">
                            <div class="row">
                              <div class="col-md-12">
                                <div class="item_content_list_pedido">
                                  @foreach ($itemOrder->getPedido as $listDish)
                                    <div class="item_list_comanda">
                                      <a href="javascript:;" class="text-decoration-none">
                                        <div class="alert fade show" style="background-color:{{$listDish->refValor}};" role="alert">
                                          <div class="row">
                                            <div class="col-md-12">
                                              <b class="item_text_list_pedido">
                                                <div class="row">
                                                  <div class="col-md-11">
                                                    {{$listDish->nombreProducto}}
                                                  </div>
                                                  @if($listDish->cantidad > 1)
                                                  <div class="col-md-1">
                                                    <span class="badge btn-dark">{{$listDish->cantidad}}</span>
                                                  </div>
                                                  @endif
                                                </div>
                                              </b>
                                              <p class="item_text_list_pedido_p">{{$listDish->ingredientes}}. <br> {{$listDish->observaciones}}</p>
                                            </div>
                                          </div>
                                          <div class="row">
                                            <div class="col-md-8 text-left">
                                              <b class="item_text_list_pedido"> {{  trans('comanda.estado') }}				
                                              </b>{{$listDish->estado}}
                                            </div>
                                            <div class="col-md-4 text-right">
                                              @if($listDish->estado == "A la mesa" || $listDish->estado == "Preparado")
                                                <div class="notify_comanda">
                                                  <i class="fa fa-bell-slash" aria-hidden="true"></i>
                                                </div>
                                              @elseif ($listDish->notify_minute>5)
                                                <div class="notify_comanda">
                                                  <i class="fa fa-bell" aria-hidden="true"></i>
                                                </div>
                                              @else
                                                <div class="notify_comanda">
                                                  <i class="fa fa-bell-slash" aria-hidden="true"></i>
                                                </div>
                                              @endif
                                            </div>
                                          </div>
                                        </div>
                                      </a>
                                    </div>
                                  @endforeach
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
                
            </div>
          </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="openModalEstadoComanda" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal_content_state_comanda">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">
                  {{  trans('comanda.cambiosDeEstado') }}				
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="list-group" id="listStateItemPedidoModal" role="tablist">
                  {{-- <a class="list-group-item list-group-item-action active" id="list-home-list" href="#list-home">Procesado</a>

                  <a class="list-group-item list-group-item-action" id="list-messages-list" href="#list-messages">Preparacion</a>
                  <a class="list-group-item list-group-item-action" id="list-settings-list" href="#list-settings">En camino</a>
                  <a class="list-group-item list-group-item-action" id="list-settings-list" href="#list-settings">Entregado</a> --}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('js')
<script type="text/javascript" src="{{asset('js/comanda.js')}}"></script>
<script type="text/javascript">
</script>
@endsection