@extends('layouts.app-tpv')

@section('oncss')

<link rel="stylesheet" href="{{ asset('css/numpad.css') }}?{{ time() }}">

<style>


</style>
@endsection

@section('left-on-save')

<div id="saved-tickets">
  <div class="top-icon">
    <img src="{{ Voyager::image( setting('tpv.icon_image') ) }}" style="">
  </div>
  <div class="tickets-saved">

  </div>
</div>

@endsection
@section('onmenu')

<div id="top-menu">
  @component('components.menu-top')
  @endcomponent
</div>


@endsection

@section('onbody')



  <!-- Modal TICKETS/ORDENES-->

  <div id="miClockModal" class="modal  fade" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <!-- Contenido del modal -->
      <div class="modal-content">
        <div class="modal-header">
          <span>Clock IN/OUT    O    LOGIN</span>
          {{-- <button type="button" class="close" data-dismiss="modal">X</button> --}}
        </div>
        <div class="modal-body">
          <div class="reductor">
            @component('components.clock-in-keyboard')
            @endcomponent
          </div>
        </div>
        <div class="modal-footer">
          {{-- <button id="print-ordenes-button" unique="" class="btn btn-success" type="button" onclick="printTicket($(this).attr('unique'));">Imprimir</button> --}}
          {{-- <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar</button> --}}
        </div>
      </div>
    </div>
  </div>

  <!-- Modal TICKETS/ORDENES-->

  <div id="miOrdenesModal" class="modal  fade" role="dialog">
    <div class="modal-dialog">
      <!-- Contenido del modal -->
      <div class="modal-content">
        <div class="modal-header">
          <span>tickets de hoy</span>
          <button type="button" class="close" data-dismiss="modal">X</button>
        </div>
        <div class="modal-body">
          <div class="external-grid">

            <div class="ordenes row triple-column double-row internal-sec">

            </div>

            <div class="right-side-top double-row internal-sec">

            </div>

            <div class="left-bottom triple-column internal-sec">

            </div>

            <div class="right-bottom internal-sec">

            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button id="print-ordenes-button" unique="" class="btn btn-success" type="button" onclick="printTicket($(this).attr('unique'));">Imprimir</button>
          <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>



  <!-- Modal MAPA DE MESAS-->

  <div id="miModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Contenido del modal -->
      <div class="modal-content">
        <div class="modal-header">
          <div class="col-auto my-1">
            <label class="mr-sm-2" for="inlineFormCustomSelect">Salas disponibles: </label>
            <select class="custom-select mr-sm-2" id="select-salas">