@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 zonas_content">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-md-9">
          <div class="bd-highlight pdd_top_10">
            <ul class="nav nav-pills nav-justified nav-pills-zonas-pv-ordenar" role="tablist" id="nav_lists_mesas_pv_ordenar">
                @foreach ($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-3 text-right select_show">
          <div class="row">
            <div class="col-md-12">
            <a href="{{route('comanda')}}" onclick="" id="" class="btn btn-sm btn-info {{Request::is('comanda') ? 'disabled' : ''}}"><small>{{  trans('comanda.comandas') }}</small></a>
            <a href="{{route('comanda.indexComandaZonas')}}" onclick="" id="" class="btn btn-sm btn-info mr-3 {{Request::is('comanda/zonas') ? 'disabled' : ''}}"><small>{{  trans('comanda.zonas') }}	</small></a>
            </div>
          </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 ($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/media/mesa_enjoit.svg')}}" class="card-img-top" alt="{{$valueTables->numeroMesa}}">
                                </a>
                              @else
                              <a>
                                <img src="{{asset('assets/media/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.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