{{-- @extends('template.home.index', ['activeButton'=>'general'])
@section('title', 'Comanda')

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

@section('content') --}}
@extends('template.layoutAdmin', ['activeButton'=>'general'])

@section('title')
{{  trans('comanda.visualizarComanda') }}				
@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 mb-10">
            <div class="container-fluid">
              <div class="row align-items-center">
                <div class="col-md-10">
                  <div class="bd-highlight pdd_top_10">
                    <ul class="nav nav-pills nav-justified" role="tablist" id="nav_lists_mesas_pv_ordenar">
                      @foreach ($indexComandaZonas['tablesList'] as $keyItem => $itemTables)
                        <li class="nav-item">
                          <a class="nav-link {{$keyItem==0 ? 'active' : ''}}" id="pills-zona-{{$itemTables->idZona}}-pv-tab" data-toggle="pill" href="#pills-zona-{{$itemTables->idZona}}-pv" role="tab" aria-controls="pills-zona-{{$itemTables->idZona}}-pv" aria-selected="true" onclick="show_content_zone_tables()">
                            {{$itemTables->nombre}}
                          </a>
                        </li>
                      @endforeach
                    </ul>
                  </div>
                </div>
                <div class="col-md-2 text-right">
                  <div class="row">
                    <a href="{{route('comanda.indexComanda')}}" onclick="" id="" class="btn btn-sm btn-info mr-3 {{Request::is('administrator/comanda/see') ? 'disabled' : ''}}"><small>
                      {{  trans('comanda.comandas') }}				
                    </small></a>
                    <a href="{{route('comanda.indexComandaZonas')}}" onclick="" id="" class="btn btn-sm btn-info mr-3 {{Request::is('administrator/comanda/see/zonas') ? 'disabled' : ''}}"><small>
                      {{  trans('comanda.zonas') }}				
                    </small></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div style="margin-left: 1%;width: 99%; height: 80%; max-width: 99%; max-height: 80%; min-width:10%; min-height:10%">
            <div class="d-flex flex-column bd-highlight hght_100">
              <div class="mt-auto bd-highlight hght_100 pdd_top_10 pdd_bottom_10">
                <div class="content_list_table scroll">
                  <form id="form_lists_tables_pv" method="post">
                    <div class="tab-content">
                      @foreach ($indexComandaZonas['tablesList'] as $keyContent => $contentTables)
                        <div class="tab-pane fade {{$keyContent==0 ? 'show active' : ''}}" id="pills-zona-{{$contentTables->idZona}}-pv" role="tabpanel" aria-labelledby="pills-zona-{{$contentTables->idZona}}-pv-tab">
                          <div class="contentListTablePv pdd_top_10">
                            <div class="row">
                              @foreach ($contentTables->mesas as $valueTables)
                                <div class="col-md-2">
                                  <label for="checked_{{$valueTables->idMesa}}" onclick="show_checked_tables({{$valueTables->idMesa}})" data-toggle="tooltip" data-placement="right" title="{{$valueTables->nombreEstado}}">
                                    <div class="card card_item_list_tables_pv " style="background-color:{{$valueTables->estadoColor}};">
                                      @if ($valueTables->nombreEstado == "Ocupado" || $valueTables->nombreEstado == "Unida")
                                        <a href="{{route('comanda.tableWithOrders', $valueTables->idMesa)}}">
                                          <img src="{{asset('assets/img/mesa_enjoit.svg')}}" class="card-img-top" alt="{{$valueTables->numeroMesa}}">
                                        </a>
                                      @else
                                      <a>
                                        <img src="{{asset('assets/img/mesa_enjoit.svg')}}" class="card-img-top" alt="{{$valueTables->numeroMesa}}">
                                      </a>
                                      @endif
                                      <div class="card-body" id="card_body_tables_checked_{{$valueTables->idMesa}}">
                                        <input type="checkbox" id="table_checked_{{$valueTables->idMesa}}" name="checked_tables_pv[]" value="{{$valueTables->idMesa}}" autocomplete="off">
                                        <b class="card-title">
                                          {{$valueTables->numeroMesa}}
                                        </b>
                                      </div>
                                    </div>
                                  </label>
                                </div>
                              @endforeach
                            </div>
                          </div>
                        </div>
                      @endforeach
                    </div>
                  </form>
                </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.cambioEstado') }}				
                  </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('assets/js/comanda.js')}}"></script>
  <script type="text/javascript">
     
  </script>
@endsection