@extends('layouts.app')

@section('contenido')

        <div class="container-fluid">
            <div class="row clearfix">
                <div class="card">
                    
                    <div class="header">
                    <div class="user-info">
        <div class="image">
            <img src="{{ asset('img/logo.png') }}" width="250" height="100" alt="Logo" />
        </div>
    </div>
    <P></P>
                        <div class="row clearfix">
                            <div class="col-xs-8 col-sm-10 col-md-10">
                                <h1>
                                    Ventas {{auth()->user()->sucursal->nombre}}
                                </h1>
                            </div>
                        </div>
                        <div class="body">
                            
                            <div class="row clearfix">
                            @foreach ($cajas as $caja)

                                <div class="col-md-4">
                                    @if($caja->estado==$caja::ESTADO_CERRADA)
                                        <div class="info-box bg-pink m-bottom-0">
                                            <div class="icon p-t-30">
                                                {{$caja->nombre}}
                                            </div>
                                            <div class="content">
                                                <div class="text">CERRADA</div>
                                            </div>
                                        </div>
                                        <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
                                            <button class="btn btn-success" onclick="setIdAbre({{$caja->id}})" >ABRIR</button>
                                        </div>
                                    @else
                                        <div class="info-box bg-light-green m-bottom-0">
                                            <div class="icon p-t-30">
                                                {{$caja->nombre}}
                                            </div>
                                            <div class="content">
                                                <div class="text">ABIERTA</div>
                                            </div>
                                        </div>
                                        <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
                                            <button class="btn btn-success" onclick="setIdCierre({{$caja->id}})" >CERRAR</button>
                                            <a href="{{route('ventas.create',$caja->id)}}" class="btn btn-primary">VENTAS</a>
                                         @if(auth()->user()->hasRole('cajas.devolucion'))    
                                            <a href="{{route('devoluciones.create',$caja->id)}}" class="btn btn-primary">DEVOLUCION</a>
                                         @endif    
                                            <a href="{{route('productos.index')}}" class="btn btn-primary">INVENTARIO</a>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Modal Abre-->
	<div class="modal fade" id="abreCajaModal" tabindex="-1" role="dialog" style="display: none;">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h2 class="modal-title" id="largeModalLabel">Abre Caja </h2>
	            </div>
                <form action="{{route('cajas.abre')}}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Monto inicial</b>
                                        <input type="number" class="form-control" name="monto_inicial" required min="0">
                                        <input type="hidden" name="caja_id" id="caja_id_form">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success waves-effect">ABRIR CAJA</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                    </div>
                </form>
	        </div>
	    </div>
	 </div>

    <!-- Modal Cierre-->
	<div class="modal fade" id="cierreCajaModal" tabindex="-1" role="dialog" style="display: none;">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h2 class="modal-title" id="largeModalLabel">Cierra Caja </h2>
	            </div>
                <form action="{{route('cajas.cierre')}}" method="POST">
                    @csrf
                    <div class="modal-body" id= "seleccion">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Apertura</b>
                                        <input disabled class="form-control" id="value_apertura" value="">
                                    </div>
                                </div>
                            </div>
                             <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Monto Efectivo</b>
                                        <input disabled class="form-control" id="value_efectivo" value="">
                                        
                                    </div>
                                </div>
                            </div>
                             <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Monto Tarjeta</b>
                                        <input disabled class="form-control" id="value_tarjeta" value="">
                                    
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-line ">
                                        <b>Monto Final</b>
                                        <input disabled class="form-control" id="value_cierre" value="">
                                        <input type="hidden" name="caja_id" id="caja_id2_form">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                       <!-- <button type="button" class="btn btn-link waves-effect" onclick="imprimir('seleccion',{{$caja->id}})">IMPRIMIR</button>-->
                        <button type="submit" class="btn btn-alert waves-effect">CERRAR CAJA</button>
                        <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CERRAR</button>
                    </div>
                </form>
	        </div>
	    </div>
	 </div>

@endsection

@section('scripts')
<script>
    function setIdAbre(caja_id){
        $('#caja_id_form').val(caja_id);
        $('#abreCajaModal').modal('show');
    }
    
    function imprimir(nombre, caja_id){
       var ficha = document.getElementById(nombre);
        
	  var ventimp = window.open(' ', 'popimpr');
	  
	  ventimp.document.write( ficha.innerHTML );
	  ventimp.document.write(caja_id);
	  ventimp.document.write();
	  ventimp.document.close();
	   
	  ventimp.print();
	  ventimp.close();
       
    }

    function setIdCierre(caja_id){
        $('#caja_id2_form').val('');
        $.ajax({
            url: '{{route('ventas.ajax.caja', ':id')}}'.replace(':id', caja_id),
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#caja_id2_form').val(caja_id);
                $('#value_cierre').val(data.ventas);
                $('#value_apertura').val(data.monto_inicial);
                $('#value_efectivo').val(data.monto_efectivo);
                $('#value_tarjeta').val(data.monto_tarjeta);
                $('#cierreCajaModal').modal('show');
            },
            error: function (data) {
                errorDialog(data.responseJSON.msg);
            }
        });
    }

</script>

@endsection