@extends('template.home.index')
@section('title', trans('comanda.comanda_title'))

@section('style')
  <link rel="stylesheet" href="{{asset('assets/css/comanda.css')}}">
  <link rel="stylesheet" href="{{asset('assets/css/pv.css')}}">
@endsection

@section('content')
  <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_detalle') }} {{$orderData[0]->getMesa->nombre . ' - ' . $orderData[0]->getMesa->numeroMesa}}</div>
        </div>
        <div class="col-md-2 text-center cantidad_pedidos">
          <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-3 col-xl-3">
                <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.pedido_detalle') }} {{$itemOrder->referencia}}</div>
                          </div>
                          @if (!empty($itemOrder->tableNumber))
                            <div class="col text-center">
                              <div class="item_list_pedido">{{  trans('comanda.mesa_detalle') }} {{-- {{$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" onclick="change_order_status_table({{$listDish->idDetallePedido}}, {{$listDish->idPedido}}, {{$listDish->idComanda}})">
                                  <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 class="d-flex bd-highlight options_changes_state">
                                  <div class="flex-fill bd-highlight">
                                    <a href="javascript:;" onclick="return_plate_tables({{$listDish->idDetallePedido}}, {{$listDish->idPedido}}, {{$listDish->idComanda}})" class="btn btn-danger btn-block">
                                      <b><i class="fa fa-undo" aria-hidden="true"></i>{{  trans('comanda.regresar') }}</b>
                                    </a>
                                  </div>
                                  @if ($listDish->idEstado >= 18)
                                    <div class="flex-fill bd-highlight">
                                      <a href="#" class="btn btn-dark btn-block">
                                        <b><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>{{  trans('comanda.devolver') }}</b>
                                      </a>
                                    </div>
                                  @else
                                    <div class="flex-fill bd-highlight">
                                      <a href="javascript:;" onclick="cancel_plate_in_command_table({{$listDish->idDetallePedido}}, {{$listDish->idPedido}}, {{$listDish->idComanda}})" class="btn btn-dark btn-block">
                                        <b><i class="fa fa-times" aria-hidden="true"></i>{{  trans('comanda.cancelar') }}	</b>
                                      </a>
                                    </div>
                                  @endif
                                </div>
                              </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.cambio_estado_modal') }}</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>
  <audio id="notifyAudioComanda" loop>
    <source src="{{asset('assets/media/notify/comanda.mp3')}}" type="audio/mp3">
  </audio>
@endsection

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