<style>
.botonera{
	padding:5pax;
	text-align:center;
	width:300px;
}

.btn2{
	width:80px;
	height:80px;
	font-size:35;
	font-weight:bolder;
	@color:white;
	padding:8px;
	@background:red;
	float:left;
	margin-left:5px;
	margin-top:5px;
	
}

</style>


<!---Modal productos-->
<div class="modal" id="modalLoad" data-backdrop="static" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
  
      <div class="modal-body">
        <center>
          <img src="load.gif" width="100"><br>
           Conectando con el servidor de datos...
        </center>
      </div>
     
    </div>
  </div>
</div>

<!--''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''-->

<!---Modal credencial mesa-->
<div class="modal" id="modal_credencial_mesa" data-backdrop="static" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      
      <div class="modal-body">
	  
        <div class="row">
			<div class="col-md-12">
			<b>MESA SELECCIONADA:</b><br>
			<span id="cur_mesa" class="h2 text-info"></span>
			<hr>
			<b class="h2">Codigo de acceso</b>
				<input type="password" style="font-size:40px; height: 45px; font-weight:bolder" class="form-control" id="clave1" placeholder="Codigo">
				<br>
			</div>
		</div>
		
		 <div class="row">
			<div class="col-md-12">
				<center>
		        <div class="botonera">
				<button class="btn2 btn btn-success" id="1" href="#" onClick="set(this.id)">1</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="2">2</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="3">3</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="4">4</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="5">5</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="6">6</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="7">7</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="8">8</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="9">9</button>
				<button class="btn2 btn btn-primary" href="#" onClick="borrar()" id="borrar"><-</button>
				<button class="btn2 btn btn-success"  href="#" onClick="set(this.id)" id="0">0</button>
			
				<button class="btn2 btn btn-primary"  href="#" onClick="limpiar()" id="limpiar">C</button>
				</center>
				</div>
				
			</div>	
			
		</div>
		<br>
      <div class="modal-footer">
				<button class="btn btn-success btn-lg" onClick="acceder()"><b>ACCEDER</b></button>
				<button class="btn btn-secundary btn-lg" onClick="$('.modal').modal('hide')"><b>CANCELAR</b></button>
				<br>
			</div>
     
    </div>
  </div>
</div>
</div>

<!--''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''-->

<!---Modal productos-->
<div class="modal" id="modalCantidad" data-backdrop="static" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
  
      <div class="modal-body">
        <b>BORRAR ESTE ITEM DE LA LISTA</b>
        <button onClick="borrar()" style="font-size:25px; font-weight:bolder;" class="btn btn-danger mt-2"><i class="fa fa-trash"></i> <b>Borrar</b></button>
        <button onClick="$('.modal').modal('hide')" style="font-size:25px; font-weight:bolder;" class="btn btn-secundary mt-2"><i class="fa fa-undo"></i> <b>NO</b></button>

	  </div>
     
    </div>
  </div>
</div>

<!--''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''-->


<!---Modal cambio de mesa-->
<div class="modal" id="modalCambioMesa" data-backdrop="static" tabindex="" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
  
      <div class="modal-body">
      	<h1>CAMBIO DE MESA</h1>
      	<hr>
        <div class="row">
        	
        	<div class="col-xs-3">
        		Desde mesa
        		<input type="text" class="form-control" readonly id="desde_mesa" style="font-size:20px; font-weight:bolder;" value="<?php echo $_GET['mesa']?>">
        	</div>

        	<div class="col-xs-5">
        		Hasta mesa
        		<select id="hasta_mesa" class="form-control" style="font-size:20px; font-weight:bolder;">
        			<option selected value="">Seleccione una mesa</option>

        			<?php 
                 echo $tr;
        			?>

        		</select>
        	</div>

        </div>
        <hr>
                		<button class="btn btn-primary mt-2" onClick="cambiar()"><i class="fas fa-exchange-alt"></i> <b>CAMBIAR</b></button>
                		<button class="btn btn-secundary mt-2" onClick="$('#modalCambioMesa').modal('hide')"><i class="fas fa-close"></i> <b>NO</b></button>

      </div>
     
    </div>
  </div>
</div>

<!--''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''-->