@extends('layouts.layout_paginaPDV',
[
    'icone_titulo'=>'fas fa-pallet',
    'titulo'=>'Mesa - Adicionar Itens',
    'breadcrumb'=>['Mesa','Mesas']
])


@section('css')
    <link rel="stylesheet" href="{{{ URL::asset('js/DataTables/datatables.min.css') }}}" />
@endsection

@section('scripts')
    <script src="{{{ URL::asset('js/DataTables/datatables.min.js') }}}"></script>
    <script src="{{{ URL::asset('js/views/venda/list.js') }}}"></script> 
@endsection

@section('pagina')
    
    <div class="container-fluid">    
        
        
        <input type="hidden" id="idcupom"  name="idcupom" value="{{$cupom}}"/>

        <div class="row">
           
           <div class="col-sm-6 col-md-4">

            <div class="card rounded" style="height: 600px">
                    <div class="card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient" style="height: 50px; align-items: center">               
                        <h2> Adicionar Produtos  </h2>                                                   
                    </div>          
           
                    <div class="card-body">

                        <div class="row" >    

                            <div class="col-12 col-sm-12 text-left">
                                <label class="col-form-label text-md-left">Produto</label>
                                <select id="pesqProduto" name="pesqProduto" class="form-control">
                                    <option value="0">Selecione um produto...</option>
                                    @foreach($listaProdutos as $lista)
                                        <option value="{{$lista->id}}">{{$lista->descricao}}</option>
                                    @endforeach             
                                </select>
                            </div> 

                        </div>


                        <div class="row" >  
                            
                            <div class="col-12 col-sm-6 text-left">
                                <label  class="col-form-label text-md-left">Código [F8]</label>
                                <input type="txt" name="txtcdb" id="txtcdb" class="form-control" style="text-align: left" oninput ="lerCodigoDeBarras()" />
                            </div> 

                            <div class="col-12 col-sm-4 text-left">
                                <label  class="col-form-label text-md-left">Qtde/Peso. [F9]</label>
                                <input type="txt" name="txtQtd" id="txtQtd" class="form-control mask_peso" style="text-align: right" />
                            </div>
                            
                            <div class="col-12 col-sm-2 text-center">                                         
                                <br> <br>                                                                                      
                              <button id="btnAddProd" type="button" class="btn btn-sm btn-success" aria-label="Right Align" >
                                  <i class="fas fa-fast-forward">  </i> 
                              </button>
                          </div>                            

                        </div>
                      

                       <br><br>

                        <div class="row" > 
                            
    
                            <div class="col-sm-6 col-md-6">
                                <div class="card card-stats card-round">
                                    <div class="card-body ">
                                        <div class="row">
                                            
                                            <div class="col-12 col-stats">
                                                <div class="numbers">
                                                    <p class="card-category"> Total Pago:</p>
                                                    <h4 class="card-title">R$ <span id="totalpago">  </span></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-6">
                                <div class="card card-stats card-round">
                                    <div class="card-body ">
                                        <div class="row">
                                            
                                            <div class="col-12 col-stats">
                                                <div class="numbers">
                                                    <p class="card-category"> Troco:</p>
                                                    <h4 class="card-title">R$ <span id="troco">  </span></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            
    
                       </div>   

                       <div class="row" > 
                            
    
                        <div class="col-sm-6 col-md-6">
                                <div class="card card-stats card-round">
                                    <div class="card-body ">
                                        <div class="row">
                                            
                                            <div class="col-12 col-stats">
                                                <div class="numbers">
                                                    <p class="card-category"> Saldo a Pagar:</p>
                                                    <h4 class="card-title">R$ <span id="saldonpg">  </span></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                       

                        

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

        </div>

        <div class="col-sm-6 col-md-3">

                <div class="card rounded" style="height: 600px;" >
                    <div class="card-header cor-card-header text-white d-flex bg-primary-gradient" style="height: 50px; align-items: center;">               
                        <h2> Formas de Pagamento  </h2>                          
                    </div>          
           
                    <div class="card-body" >                                                  

                            <div class="card rounded" style="height: 300px;">   
                                
                                <div class="row" > 
                                    
                                    <div class="col-12 col-sm-12">  

                                        <table id="tbAddFp" class="table table-hover text-left">
                                            <thead>
                                                <tr >                                         
                                                    <th style="text-align: center" > FormaPag.</th>                                                                            
                                                    <th style="text-align: center" > Valor </th> 
                                                    <th style="text-align: center" > Ação </th>
                                                </tr>                                    
                                                
                                            </thead>
                                                <tbody>
                                                                                                                      
                                                    
                                                </tbody>
                                        </table> 

                                    </div>

                                </div>              

                            </div> 


                       

                            <div class="row" >                            
                                
                                
                                <div class="col-12 col-sm-6">   
    
                                    <button id="btndin" type="submit" class="btn btn-success" aria-label="Left Align" style="width: 100%">
                                        D - Dinheiro
                                    </button>                             
    
                                </div> 
    
                                <div class="col-12 col-sm-6">   
    
                                    <button id="btnpix" type="submit" class="btn btn-warning" aria-label="Left Align" style="width: 100%">
                                        P - Pix
                                    </button>                              
    
                                </div>                            
    
                            </div>

                            <br>
                            
                          
                            <div class="row" >                            
                                
                                
                                <div class="col-12 col-sm-6">   
    
                                    <button id="btndeb" type="submit" class="btn btn-primary" aria-label="Left Align" style="width: 100%">
                                        B - Débito
                                    </button>                             
    
                                </div> 
    
                                <div class="col-12 col-sm-6">   
    
                                    <button id="btncre" type="submit" class="btn btn-secondary" aria-label="Left Align" style="width: 100%">
                                        C - Crédito
                                    </button>                              
    
                                </div>                            
    
                            </div>  
                            <br>
                            
                            <div class="row" >                            
                                
                                
                                <div class="col-12 col-sm-6">   
    
                                    <button id="btnval" type="submit" class="btn btn-info" aria-label="Left Align" style="width: 100%">
                                        V - Vale
                                    </button>                             
    
                                </div> 
    
                                <div class="col-12 col-sm-6">   
    
                                    <button id="btnbol" type="submit" class="btn btn-danger" aria-label="Left Align" style="width: 100%">
                                        M - Boleto
                                    </button>                              
    
                                </div>                            
    
                            </div> 
                            
                            
                    </div>                   
            
                </div>               

            </div>



            <div class="col-sm-6 col-md-5">

                <div class="card rounded" style="height: 600px;" >
                    <div class="card-header cor-card-header text-white d-flex bg-primary-gradient" style="height: 50px; align-items: center;">               
                        <h2> Itens Adicionados  </h2>                          
                    </div>          
           
                    <div class="card-body" >                                                  

                            <div class="card rounded" style="height: 350px; overflow-y: auto; background: #FFFAF0">  
                            

                            <table id="tbAddProd" >
                                <thead>
                                   
                                    <tr style="height: 30px;">                                         
                                        <th style="text-align: center" colspan="6"> Cupom {{$cupom}}</th> 
                                    </tr>
                                    
                                    
                                </thead>
                                    <tbody>                                        
                                                           
                                        
                                    </tbody>
                            </table>                                  
                                                 

                        </div>                       
                     
                      
                        
                        {{-- <div class="row" > 

                            <div class="col-12 col-sm-12 text-left"> 

                                <div class="form-group">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="basic-addon1"> Vendedor:</span>
                                        </div>
                                        <select id="pesqProduto" name="pesqProduto" class="form-control">
                                            <option value="">Selecione um vendedor...</option>                                                       
                                        </select>
                                    </div>
                                </div>
                            </div>
                           
                        </div>  --}}                    
                   
                            <div class="row" >                            
                                
                                <div class="col-12 col-sm-4 text-right">
                                </div>
                                
                                
                                   
                                <div class="col-sm-6 col-md-8">
                                    <div class="card card-stats card-round">
                                        <div class="card-body ">
                                            <div class="row">
                                                <div class="col-2">                                                   
                                                </div>
                                                <div class="col-10 col-stats">
                                                    <div class="numbers">                                                        
                                                        <h4 class="card-title">  <span id="totalg">  </span></h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                          
    
                               

                            </div>
                       


                            <div class="row" >                            
                                
                                
                                <div class="col-12 col-sm-6 text-center">   
    
                                    <button id="btnCancela" type="submit" class="btn btn-danger" aria-label="Left Align" style="width: 100%">
                                        X - Cancelar  Venda
                                    </button>                                
    
                                </div> 
    
                                <div class="col-12 col-sm-6 text-center">   
    
                                    <button id="btnFinaliza" type="button" class="btn btn-success" aria-label="Left Align" style="width: 100%">
                                        S - Finalizar Venda
                                    </button>                                
    
                                </div>                            
    
                            </div>
                            
                       
                

                                    
                    </div>


                   
            
                </div>

               

            </div>

          

        </div>
        
        
    </div>






      
 <!-- Modal edição-->
 <div class="modal fade" id="editaFp1" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Inserir Forma de Pagamento </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.fp1')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Valor em Dinheiro</label>
                        <input class="form-control mask_moeda" id="avalor" type="text" name="avalor"  />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="id1" id="id1" >               
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar1" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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


 
 <!-- Modal edição-->
 <div class="modal fade" id="editaFp4" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Inserir Forma de Pagamento </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.fp4')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Valor em Pix</label>
                        <input class="form-control mask_moeda" id="pixvalor" type="text" name="pixvalor"  />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="id4" id="id4" >                
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar4" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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





 <!-- Modal edição-->
 <div class="modal fade" id="editaFp2" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Inserir Forma de Pagamento </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.fp2')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Valor em Débito</label>
                        <input class="form-control mask_moeda" id="debvalor" type="text" name="debvalor"  />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="id2" id="id2" >                
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar2" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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



 <!-- Modal edição-->
 <div class="modal fade" id="editaFp3" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Inserir Forma de Pagamento </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.fp3')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Valor em Crédito</label>
                        <input class="form-control mask_moeda" id="crevalor" type="text" name="crevalor"  />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="id3" id="id3" >                
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar3" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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






 <!-- Modal edição-->
 <div class="modal fade" id="editaFp5" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Inserir Forma de Pagamento </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.fp5')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Valor em Boleto</label>
                        <input class="form-control mask_moeda" id="bolvalor" type="text" name="bolvalor"  />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="id5" id="id5" >                
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar5" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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


<!-- Modal delete fp-->
 <div class="modal fade" id="delfp" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Excluir Forma de Pagamento </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.delete')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Forma Pag.</label>
                        <input class="form-control mask_moeda" id="fp" type="text" name="fp" readonly />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="idfp" id="idfp" >                
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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




<!-- Modal edição -->
 <div class="modal fade" id="delitem" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Excluir Item registrado </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.deleteitem')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Item</label>
                        <input class="form-control mask_moeda" id="item" type="text" name="item" readonly />                        
                    </div>                  
                    
                </div>  
                
                <input type="hidden" name="iditem" id="iditem" >                
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvar" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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




 <!-- Modal edição-->
 <div class="modal fade" id="cancelaVenda" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Cancelar Venda </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.cancelar')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Num Cupom</label>
                        <input class="form-control" id="vcupom" type="text" name="vcupom"  value="{{$cupom}}" readonly/>                        
                    </div>                  
                    
                </div>              
                           
                

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvarC" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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


 <!-- Modal edição-->
 <div class="modal fade" id="finalizaVenda" tabindex="-1" role="dialog" aria-labelledby="editconta" aria-hidden="true">
	<div class="modal-dialog" role="document">

		<div class="modal-content">
			<div class="modal-header card-header cor-card-header text-white d-flex justify-content-between bg-primary-gradient">
				<h5 class="modal-title" > Finalizar Venda </h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

            <form  method="POST" action="{{route('venda.salvar')}}" >
                    @csrf
            <div class="card-body"> 
                
                <div class="row" > 

                    <div class="col-12 col-md-6">
                        <label class="form-label" for="valor">Num Cupom</label>
                        <input class="form-control" id="fcupom" type="text" name="fcupom"  value="{{$cupom}}" readonly/>                        
                    </div> 

                    <div class="col-12 col-md-6">
                        <label class="form-label" for="valor">Desconto</label>
                        <input class="form-control" id="desco" type="text" name="desco"  readonly/>                        
                    </div> 

                </div>

                <div class="row" >
                    
                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Cliente</label>
                        <select id="vcliente" name="vcliente" class="form-control">
                            <option value="1"> 01 - AVULSO </option>
                            @foreach($listaCli as $lista)
                                        <option value="{{$lista->id}}">{{$lista->nome}}</option>
                                    @endforeach            
                        </select>
                    </div> 
                    
                </div>              
                           
                <div class="row" >                   
                    
                    <div class="col-12 col-md-12">
                        <label class="form-label" for="valor">Status</label>
                        <input class="form-control" style="color: red"  id="st" type="text" name="st" /> 
                    </div> 
                    
                </div> 

                <div class="row mt-3">                    

                    <div class="col-12 col-md-12 text-right">
                       
                        <button class="btn btn-success" id="btnSalvarF" type="submit">
                            <i class="fas fa-save"></i>  Confirmar 
                        </button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-window-close"></i> Cancelar</button> 
                    </div>
                </div>

            </div>

            </form>

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


@endsection