@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/touchspin/css/touchspin.min.css') !!}">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/stroll/css/stroll.css') !!}">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/sweetalert/css/sweetalert.css">
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/switchery/css/switchery.min.css">
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/css/bootstrap-multiselect.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom') !!}/bower_components/multiselect/css/multi-select.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('css') !!}/locales.css"/>
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css') !!}">


<style>
    .jumping-dots-loader span{
        background-color: #00c88b !important;
    }
    .buscadores{
        text-align: center;
        width: 100%;
        font-family: 'Fixture Expandend Extra light';
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 1px solid #00c88b;
        padding: 10px 0px;
    }
    .buscadores:focus{
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 1px solid #00c88b;
    }
    body{
        overflow-x: inherit;
    }
    body, html{
        overflow-x: inherit;
    }
    .deleteElement{
        background: none;
        border: none;
        margin-left: 10px;
        color: #fd2626;
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }
    .deleteElement:hover{
        background: #f5f5f5;
    }
    .bootstrap-touchspin-injected
    {
        display: none !important;
    }
    .container-scroller{
        overflow: inherit;
    }
    #carrito .col-md-4{
        font-family: 'Fixture Expandend Extra light';
    }
    #carrito .col-md-2{
        font-family: 'Fixture Expandend Extra light';
    }
    #Total{
        font-family: 'Fixture Expandend Extra light';
        margin-bottom: 10px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-family: 'Fixture Expandend Extra light' !important;
    }
    .sweet-alert h2{
        font-family: 'Fixture ebold' !important;
    }
    .sweet-alert button{
        font-family: 'Fixture ebold' !important;
        text-transform: uppercase;
    }
    form{
        font-family:'Poppins';
    }
    .panel-success{
        /* height: 495px; */
    }
    .sweet-alert h2 {
        font-family:'Poppins';
        font-weight:400;
        font-size:25px;
    }
    .sweet-alert button {
        background-color:#00c88b!important;
        border-color:#00c88b;
        font-family:'Poppins';
        font-weight:400;
        font-size:13px;
        border-radius: 0px;
        color:#fff;
    }
    .sweet-alert button.cancel{
        background-color:#67666a!important;
        border-color:#67666a;
        font-family:'Poppins';
        font-weight:400;
        font-size:13px;
        border-radius: 0px;
        padding-top: 10px;
    }
    .sweet-alert p{
        font-family:'Poppins';
        font-weight:400;
        font-size:16px;
    }
    #Carrito,#Carrito2{
        height: 60px;
        font-size:23px;
        color:#fff;
        font-weight:400;
        padding-top:10px;
    }
    #Carrito2{
        font-size:23px;
        color:#fff;
        font-weight:400;
        padding-top:10px;
    }
    .bg-success {
        background-color: #00c88b !important;
        position:relative;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected],#select2-selectSala-result-v48f-0 {
        background-color: #00c88b;
        color: white;
    }
    #Nota{
        position: absolute;
        bottom: 40px;
        width: 100%;
        height: 40px;
    }
    #btnEnviar{
        width:100%;
        background-color:#67666a;
        border-color:#67666a;
        border-radius: 0!important;
        font-family:'Fixture ebold';
    }
    #Total{
        padding:0 30px 0 0px;
        color:#67666a;
    }
    .bootstrap-touchspin-up{
        background-color: #00c88b !important;
        border-color:#00c88b!important;
    }
    .bootstrap-touchspin-down{
        background-color:#67666a!important;
        border-color:#67666a!important;
    }
    .nav-item a {
        color: #67666a;
    }
    .nav-item a:hover {
        color: #00c88b;
    }
    #DatasClient {
        padding: 20px 20px 0px;
        font-family:'Poppins';
    }
    #DatasClient h6,#DatasClient h5 {
        font-family: 'Fixture ebold';
    }
    #divClienteExistente{
        margin-bottom: 30px;
    }
    .select2-container--default{
        width:100% !important;
    }
    #carrito li{
        list-style:none;
        margin-top:10px;
    }
    #myTab .nav-item{
        width: 50%;
    }
    #myTab .nav-item a{
        font-family: 'Fixture ebold';
    }

    .view_product .card-body{
        height: 360px !important;
    }
    .view_product .btn-danger-custom{
        background-color: #fd2626 !important;
        color: #fff !important;
    }
    .view_product .product-title{
        font-family: 'Fixture ebold';
    }
    .view_product .product-subtitle{
        font-family: 'Fixture Expandend Extra light';
        font-size: 12px;
    }
    .nav-tabs .nav-link.active{
        border-color: #fff #fff #00c88b;
        color: #fff;
        background-color: #00c88b;
    }
    .nav-tabs .nav-link{
        border: 1px solid;
        border-color:#fff #fff #00c88b;
        background: #f5f5f5;
    }

    .btn-danger-custom{
        background-color: #fd2626 !important;
        color: #fff !important;
    }
    .btn_tamanio_custom{
        width: 50px;
        height: 40px;
    }
    .grey-circle-profile-icon {
        width: 55px;
        height: 55px;
        text-align: center;
        border-radius: 100%;
        padding-top: 10px;
    }
    .grey-circle-profile-icon i {
        color: #343a40;
        font-size: 30px;
    }
    .cuadro-categoria{
        width: max-content;
        padding: 0px 0px 3px;
        margin-right: 10px;
        font-family: "Fixture Expandend Extra light";
    }
    .tarjeta_servicios{
        height: 350px !important;
        display: flex;
        vertical-align: middle;
        background: none !important;
        border: 1px solid #ebedf2;
    }
    .tarjeta_servicios .card-body{
        padding: .5rem .5rem;
    }
    .tira_adicionales{
        margin-top: 10px;
        line-height: 0px;
    }
    .botoneraServicios{
        margin-top: 0px;
    }
    .botoneraProducto{
        display: inline-flex;
    }
    .botoneraProducto button{
        margin: 0px 1px;
    }
    .btn-edit-servicio{
        background-color: #e5e5e5 !important;
        color: #8c9299 !important;
    }
    .product-existencias{
        font-family: 'Fixture light';
    }
    .tituloNombre{
        height: 75px;
        font-family: Fixture light;
        font-size: 17px;
    }
    .tituloProducto{
        font-size: 17px;
    }
    @media only screen and (max-width:1280px){
        .tituloNombre{
            font-size: 1.38rem;
        }
        .card .card-body{
            padding: 1.5rem 1.5rem;
        }
    }
    @media only screen and (max-width:768px){
        .tarjeta_servicios{
            height: 380px !important;
        }
        .tituloNombre{
            height: 100px;
        }
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-laptop-mac menu-icon"></i>
        </span> punto de venta </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page"><a href="{!! route('ventas.index') !!}">Ventas</a></li>
            <li class="breadcrumb-item active" aria-current="page">Caja<i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i></li>
        </ul>
    </nav>
</div>


<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                @include('flash::message')
                <div class="row">
                    <form class="col-12" id="formularioVenta" method="POST" action="{!! asset('ventas/recibo') !!}">
                        @csrf
                        @include('ventas.fields')
                        @if($data["validacion"] == true)
                        <input id="citaId" name="citaId" type="text" value="{!! $data["cita_id"] !!}" style="display:none">


                                                @foreach ($serviciosCliente as $cita)
                            <input id="citaId{!! $conta !!}" name="citaId{!! $conta !!}" type="text" value="{!! $cita->id !!}" style="display:none">
                                                    @endforeach

                        <input id="contador" name="contador" type="text" value="{!! $conta !!}" style="display:none">                            

                        @else
                        <input id="citaId" name="citaId" type="text" value="0" style="display:none">
                        @endif
                        <div class="modal fade" id="validar_codigo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <h4 style="margin-top:0px!important;">Ingresa el código para generar una venta mostrador</h4>
                                        <input id="codigo_venta_mostrador" class="form-control" name="codigo_venta_mostrador" type="text" placeholder="Ingresa tu código...">
                                        <h5 class="ml-1" id="mensajeCodigoValidador"></h5 >
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                                        <button id="btnValidarcodigo" type="button" class="btn btn-primary_local btnAcceptModal" >validar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="check_codigo_validador" id="check_codigo_validador" value="false">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="validar_reward" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cliente reward</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 style="margin-top:0px!important;">Ingrese el código de la tarjeta reward o escanee el código de barras</h4>
                <input id="codigo_reward" class="form-control" tabindex="1" name="codigo_reward" type="text" placeholder="Ingresa tu código...">
                <h5 class="ml-1" id="mensajeCodigoValidadorReward"></h5 >
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                <button id="btnValidarcodigoReward" type="button" class="btn btn-primary_local btnAcceptModal" >validar</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalAdvertencia" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 style="margin-top:0px!important;">Este cliente no tiene citas el día de hoy.</h4>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary_local" data-dismiss="modal">aceptar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalSalida" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 style="margin-top:0px!important;">Estas apunto de abandonar esta página, ¿Estás seguro?</h4>
            </div>
            <div class="modal-footer" id="hola">
                <button type="button" onclick="vaciarURL();" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cerrar</button>
                <button onclick="redirectPagina();" type="button" class="btn btn-primary_local" data-dismiss="modal">aceptar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/sweetalert/js/sweetalert.min.js"></script>

<script src="{!! asset('files_custom/bower_components/stroll/js/stroll.js" type="text/javascript') !!}"></script>

<meta name="csrf-token" content="{{ csrf_token() }}" />

<script src="{!! asset('files_custom/bower_components/touchspin/js/TouchSpin.js') !!}"></script>

<script src="{!! asset('files_custom/bower_components/datatables.net/js/jquery.dataTables.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.print.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.html5.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/modernizr/js/modernizr.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/multiselect/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/switchery/js/switchery.min.js"></script>

<script src="{!! asset('librerias/fusejs/fuse.js') !!}" type="text/javascript"></script>
<script src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>

<script>
@if($data["validacion"] == "false")
$("#selectCliente").select2({
});
@else
$("#selectCliente").select2({
    placeholder :'Busca al cliente...',
    allowClear: true
});
@endif
$("#selectEmpleado").select2({});

var url_dinamica = "{!! URL::TO('/') !!}"
// var elemmedium = document.querySelector('.js-medium');
// var switchery = new Switchery(elemmedium, { color: '#00c88b', jackColor: '#fff', size: 'small' });
$('#lista-productos').DataTable({
    language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Entradas",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    },
    pageLength : 5
});
$('#lista-servicios').DataTable({
    language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Entradas",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    },
    pageLength : 5
});
function establecerLimite(producto_id){
    var limite = $('#existencia_producto_'+producto_id).text();
    limite = limite.replace(/\D/g,'');
    limite = parseInt(limite);
    if($("#item_cortesia_"+producto_id)[0] !== undefined)
    {
        limite--;
    }

    $("#cantidad_productos_"+producto_id).trigger("touchspin.updatesettings", {max: limite});
}

function incrementoCortesia(id_producto,element){
    $(element).attr('disabled',true);
    // var cantidad = $("#cantidad_anterior_"+id_producto).val();
    // $("#cantidad_anterior_"+id_producto).val(parseInt(cantidad) + 1);

    // var cantidad2 = $("#cantidad_productos_"+id_producto).val();
    // $("#cantidad_productos_"+id_producto).val(parseInt(cantidad2) + 1);

    var nombre_producto = $('#nombre_producto_'+id_producto).text();
    var precio_producto = $('#precio_producto_'+id_producto).text();
    var cantidad_producto = $("#cantidad_productos_"+id_producto).val();
    var item_producto = $('#item_producto_'+id_producto);
    var existencia_anterior = $('#existencia_anterior_'+id_producto);
    var cantidad_anterior = $('#cantidad_anterior_'+id_producto);
    var totalVenta = $('#totalVenta');
    var totalProducto = $('#total_venta_prodcuto');

    $('#carrito').append(
    '<li id="item_cortesia_'+id_producto+'">'+
        '<div class="row f-12 text-center">'+
            '<div class="col-md-4">'+
                nombre_producto+
            '</div>'+
            '<div class="col-md-4">'+
                '<span>Gratis</span>'+
            '</div>'+
            '<div class="col-md-4">'+
                '<span id="cantidad_cortesia_'+id_producto+'">1</span> pieza(s)'+
                '<button onclick="disminuirCortesiaCustom('+id_producto+')" type="button" class="deleteElement float-right"><i class="mdi mdi-minus-circle"></i></button>'+
            '</div>'+
        '</div>'+
    '</li>');
    $("#pruebaServicios").append('<input type="hidden" class="arraysTodo" name="arrayCortesias_['+id_producto+']">');
    $("input[name='arrayCortesias_["+id_producto+"]']").val(1);
}

function disminuirCortesiaCustom(id_producto){
    $("#btn_cortesia_"+id_producto).attr('disabled',false);
    $('#item_cortesia_'+id_producto).remove();
    $("input[name='arrayCortesias_["+id_producto+"]']").remove();
    establecerLimite(id_producto);
}

$('.spin').on("change",function(info){
    var id_producto = info.target.id;
    id_producto = id_producto.replace('cantidad_productos_','');
    var nombre_producto = $('#nombre_producto_'+id_producto).text();
    var precio_producto = $('#precio_producto_'+id_producto).text();
    var cantidad_producto = info.target.value;
    var item_producto = $('#item_producto_'+id_producto);
    var existencia_anterior = $('#existencia_anterior_'+id_producto);
    var cantidad_anterior = $('#cantidad_anterior_'+id_producto);
    var totalVenta = $('#totalVenta');
    var totalProducto = $('#total_venta_prodcuto');
    if($('#cantidad_productos_'+id_producto).val() == 0)
    {
        $('#item_producto_'+id_producto).remove();
        $("input[name='arrayProductos_["+id_producto+"]']").remove();
    }
    else{
        if(item_producto.length === 0){
        $('#carrito').append(
        '<li id="item_producto_'+id_producto+'">'+
            '<div class="row f-12 text-center">'+
                '<div class="col-md-4">'+
                    nombre_producto+
                '</div>'+
                '<div class="col-md-4">'+
                    '$<span>'+precio_producto+'</span>'+
                '</div>'+
                '<div class="col-md-4">'+
                    '<span id="cantidad_producto_'+id_producto+'">'+cantidad_producto+'</span> pieza(s)'+
                    '<button onclick="disminuirProductoCustom('+id_producto+')" type="button" class="deleteElement float-right"><i class="mdi mdi-minus-circle"></i></button>'+
                '</div>'+
            '</div>'+
        '</li>');
        $("#pruebaServicios").append('<input type="hidden" class="arraysTodo" name="arrayProductos_['+id_producto+']">');
        $("input[name='arrayProductos_["+id_producto+"]']").val(cantidad_producto);
        }
        else{
            $('#cantidad_producto_'+id_producto).text(cantidad_producto);
            $("input[name='arrayProductos_["+id_producto+"]']").val(cantidad_producto);
        }
    }
    var subtotal = cantidad_producto * precio_producto;
    var total_anterior = $('#total_venta').text();
    var total = parseFloat(subtotal) + (parseFloat(total_anterior) - parseFloat(existencia_anterior.val()));
    var total_anterior1 = $('#total_venta_prodcuto').text();
    var total1 = parseFloat(subtotal) + (parseFloat(total_anterior1) - parseFloat(existencia_anterior.val()));
    $('#total_venta').text(total.toFixed(2));
    $('#total_venta_prodcuto').text(total1.toFixed(2));
    existencia_anterior.val(subtotal);
    cantidad_anterior.val(cantidad_producto);
    totalVenta.val(total.toFixed(2));
    totalProducto.val(total1.toFixed(2));
});

    var bandera = false;
 $('.spin1').on("change",function(info){
    var id_service = info.target.id;
    id_service = id_service.replace('cantidad_Services_','');
    var nombre_service = $('#nombre_Service_'+id_service).text();
    var precio_service = $('#precio_Service_'+id_service).text();
    var item_service= $('#item_service_'+id_service);
    var existencia_anterior = $('#existencia_Service_'+id_service);
    var cantidad_anterior = $('#cantidadService'+id_service);
    var totalVenta = $('#totalVenta');
    var totalservice = $('#total_services');
    if($('#cantidad_Services_'+id_service).val() == 0)
    {
        $('#item_service_'+id_service).remove();
        $("input[name='arrayServicios_["+id_service+"]']").remove();
    }
     else{
        if(item_service.length === 0){
            $('#carrito').append(
            '<li id="item_service_'+id_service+'">'+
                '<div class="row f-12 text-center">'+
                    '<div class="col-md-4">'+
                        nombre_service+
                    '</div>'+
                    '<div class="col-md-4">'+
                        '$<span id="precio">'+precio_service+'</span>'+
                    '</div>'+
                    '<div class="col-md-4">'+
                        '<span id="valor_service'+id_service+'">'+info.target.value+'</span> servicio(s)'+
                        '<button onclick="disminuirServicioCustom('+id_service+')" type="button" class="deleteElement float-right"><i class="mdi mdi-minus-circle"></i></button>'+
                    '</div>'+
                '</div>'+
            '</li>');
            $("#pruebaServicios").append('<input type="hidden" class="arraysTodo" name="arrayServicios_['+id_service+']">');
            $("input[name='arrayServicios_["+id_service+"]']").val(info.target.value);
         }
         else{
            $('#valor_service'+id_service).text(info.target.value);
            $("input[name='arrayServicios_["+id_service+"]']").val(info.target.value);
         }
     }
     if(bandera == true)
     {
        console.log('entra1');
        var subtotal = (info.target.value * precio_service);
        var total_anterior = $('#total_venta').text();
        var total = parseFloat(subtotal) + (parseFloat(total_anterior) - parseFloat(existencia_anterior.val()));

        $('#total_venta').text(total.toFixed(2));
        existencia_anterior.val(subtotal);
        cantidad_anterior.val(info.target.value);
        totalVenta.val(total.toFixed(2));
        bandera = false;
        eliminar_servicioClient();
     }
     else{
        // console.log('entra2');
        var subtotal = (info.target.value * precio_service);
        var total_anterior = $('#total_venta').text();
        var total = parseFloat(subtotal) + (parseFloat(total_anterior) - parseFloat(existencia_anterior.val()));
        $('#total_venta').text(total.toFixed(2));
        existencia_anterior.val(subtotal);
        cantidad_anterior.val(info.target.value);
        totalVenta.val(total.toFixed(2));
     }

 });

var vspinTrue = $(".vertical-spin").TouchSpin({
    verticalbuttons: false
});
if (vspinTrue) {
    $('.vertical-spin').prev('.bootstrap-touchspin-prefix').remove();
}
$('#btnEnviar').click(function()
{
    var totalVenta = $('#totalVenta').val();
    var nombre_cliente = $('#nombre_cliente').val();
    var a_paterno = $('#a_paterno').val();
    var a_materno = $('#a_materno').val();
    var correo_electronico = $('#correo_electronico').val();
    var telefono = $('#telefono').val();
    var empleado_id = $("#selectEmpleado");

    if(totalVenta == 0){
        swal("¡Hey parece que no tienes productos en tu carrito! ", "Debes tener mínimo un producto en la tienda");
    }
    else if(empleado_id.val() == "NA"){
        console.log('entro');
        swal("¡Hey que no has seleccionado al colaborador! ", "Debes de seleccionar a un colaborador al que se le vincule esta compra");
    }
    else if($("#selectCliente").val() == null)
    {
        if($("#nombre_cliente").val() == '' && $("#telefono_cliente").val() == '' && $("#email_cliente").val() == '')
        {
            if($("#check_codigo_validador").val() == 'false')
            {
                swal("¡Hey parece que no has seleccionado un cliente! ", "Debes de seleccionar un cliente o puedes ingresar tu código para generar una venta de mostrador.");
            }
            else{
                swal({
                title: "¿Estas seguro de continuar con la compra?",
                text: "",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "cancelar",
                confirmButtonClass: "btn-danger",
                confirmButtonText: "aceptar",
                closeOnConfirm: false
                },
                function(){
                    swal("¡Venta mostrador!", "Se generará una venta de mostrador.", "success");
                    setTimeout(enviarFormulario(),10000);
                });
            }
        }
        else{
            swal({
            title: "¿Estas seguro de continuar con la compra?",
            text: "",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "cancelar",
            confirmButtonClass: "btn-danger",
            confirmButtonText: "aceptar",
            closeOnConfirm: false
            },
            function(){
                swal("Increible", "Tu ticket se generará enseguida.", "success");
                setTimeout(enviarFormulario(),10000);
            });
        }
    }
    else{
        swal({
        title: "¿Estas seguro de continuar con la compra?",
        text: "",
        type: "warning",
        showCancelButton: true,
        cancelButtonText: "cancelar",
        confirmButtonClass: "btn-danger",
        confirmButtonText: "aceptar",
        closeOnConfirm: false
        },
        function(){
            swal("Increible", "Tu ticket se generará enseguida.", "success");
            setTimeout(enviarFormulario(),10000);
        });
    }
});

$('#selectCliente').change(function(){
    var obtener_id = $(this).val();
    var cantidad = 1;
    var totalVenta = $('#totalVenta');
    var total_serv = $('#total_serv');
    var totalProducto = $('#total_venta_prodcuto');
    var totalServicio = $('#precio');
    $valor = $(this).attr('parametro');
    bandera = true;
    $("#puntosDisponible").text('');
    $('.spin1').val($valor);
    totalServicio.text($valor);
    eliminar_servicio();
    $('#citaId').val(0);
    $('#loader_cliente').show();
    $.ajax({
        url: url_dinamica+"/api/cita_cliente_pendiente/"+obtener_id,
        type:"GET",
        dataType:"json",
        success:function(data){
            if(data.data == "ERROR")
            {
                $("#modalAdvertencia").modal();
                $('#loader_cliente').hide();
                $('.item_serviceClientes').remove();
                $('#item_serviceClient_'+data.data.cliente_id).remove();
                $("#total_venta").text($("#total_venta_prodcuto").text());
                $("#totalVenta").val($("#total_venta_prodcuto").text());
            }
            else{
                if(data.data.cliente_id == obtener_id)
                {
                    $('#citaId').val(data.data.id);
                    $('#item_serviceClient_'+data.data.cliente_id).remove();
                    $('#carrito').append(
                        '<li class="item_serviceClientes" id="item_serviceClient_'+data.data.cliente_id+'">'+
                            '<div class="row f-12 text-center">'+
                                '<div class="col-md-4">'+
                                    data.data.servicio.nombre+
                                '</div>'+
                                '<div class="col-md-4">'+
                                    '$<span id="total_serv">'+data.data.servicio.costo+'</span>'+
                                '</div>'+
                                '<div class="col-md-4">'+
                                    '<span id="cantidad_serviceClient_'+data.data.servicio.id+'">'+ cantidad +'</span> servicio'+
                                '</div>'+
                            '</div>'+
                        '</li>'
                    );
                    var subtotal = data.data.servicio.costo + parseFloat(totalProducto.text());
                    $('#total_venta').text(subtotal.toFixed(2));
                    totalVenta.val(subtotal.toFixed(2));
                    $('#cantidad_Services_'+data.data.servicio.id).val(cantidad);
                    $("#pruebaServicios").append('<input type="hidden" class="arraysTodo" value="'+cantidad+'" name="arrayServicios_['+data.data.servicio.id+']">');
                }
                $('#loader_cliente').hide();
            }
        },
        error:function(xhr,estado,error)
        {
            console.log(xhr);
            console.log(estado);
            console.log(error);
            $('#loader_cliente').hide();
        }
    });
});

@if($data["validacion"] == true)
    var php_costo = '{!! $data["servicio_costo"] !!}';
    var php_servicio = '{!! $data["servicio_id"] !!}';
    
        @foreach ($serviciosCliente as $cita)
        
        php_servicio = '{!! $cita->servicio->id; !!}';
        $('#cantidad_Services_'+php_servicio).val(1);
        $("#pruebaServicios").append('<input type="hidden" value="1" class="arraysTodo" name="arrayServicios_['+php_servicio+']">');     

           
    @endforeach

    php_costo = '{!! $php_costo !!}';
    $('#total_venta').text(php_costo);
    $('#totalVenta').val(php_costo);

@endif

function eliminar_servicio(){
    var servicio = {!! $allServices !!};
    $.each(servicio,function(key,value){
        $('#item_service_'+value.id).remove();
        $("#cantidad_Services_"+value.id).val(0);
    });
}

function eliminar_servicioClient(){
    // $.each(servicio,function(key,value){
    //     $('#item_serviceClient_'+value.client_id).remove();
    // });
}
function enviarFormulario(){
    $("#formularioVenta").submit()
}

$("#clienteOn").on( 'change', function() {
if( $(this).is(':checked') ) {
    $("#divDatosCliente").show();
    $("#divClienteExistente").hide();
} else {
    $("#divDatosCliente").hide();
    $("#divClienteExistente").show();
}
});

$("#paso1").click(function(){
    $("#divClienteExistente").show();
});

$("#nuevoCliente").click(function(){
    $("#agregarNuevoCliente").show();
});
// $("#nombre_cliente").css("display","none");
$("#modalVentaMostrador").click(function(){
    $("#validar_codigo").modal();
});

$("#clienteReward").click(function(){
    $("#validar_reward").modal();
    setTimeout(() => {
        $("#codigo_reward").focus();
    }, 600);
});

$(document).ready(function() {
    var stickyTop = $('#maska').offset().top;

    $(window).scroll(function() {
        var windowTop = $(window).scrollTop();
        if (stickyTop < windowTop + 70) {
            $('#maska').css('position', 'sticky');
            $('#maska').css('top', 70);
        }
        else {
            $('#maska').css('position', 'relative');
            $('#maska').css('top', 0);
        }
    });
});

    function incrementoServicioCustom(id)
    {
        $.LoadingOverlay("show");
        $("#cantidad_Services_"+id).trigger("touchspin.uponce");
        $.ajax({
            url: url_dinamica+"/api/validar_servicio_cortesia/"+id,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data != "NA")
                {
                    data.data.forEach(element => {
                        $("#botoneraCortesia_"+element).html('<button type="button" class="btn btn-xs btn-primary_local w-50" onclick="incrementoProductoCustom('+element+')">'+
                            '+'+
                            '</button>'+
                            '<button type="button" id="btn_cortesia_'+element+'" class="btn btn-xs btn-secondary w-50" onclick="incrementoCortesia('+element+',this)">'+
                                '+'+
                            '</button>'
                        );
                    });
                    $("#cortesias-tab").click();
                }
            }
        });
        $.LoadingOverlay("hide");
    }
    function disminuirServicioCustom(id)
    {
        $("#cantidad_Services_"+id).trigger("touchspin.downonce");
    }


    function incrementoProductoCustom(id)
    {
        $("#cantidad_productos_"+id).trigger("touchspin.uponce");
        var limite = $('#existencia_producto_'+id).text();
        limite = limite.replace(/\D/g,'');
        limite = parseInt(limite);
        if($("#cantidad_productos_"+id).val() >= limite)
        {
            $("#btn_cortesia_"+id).attr('disabled',true);
        }
    }
    function disminuirProductoCustom(id)
    {
        $("#cantidad_productos_"+id).trigger("touchspin.downonce");

        var limite = $('#existencia_producto_'+id).text();
        limite = limite.replace(/\D/g,'');
        limite = parseInt(limite);
        if($("#cantidad_productos_"+id).val() < limite)
        {
            $("#btn_cortesia_"+id).attr('disabled',false);
        }
        console.log($("#cantidad_productos_"+id).val(),limite)
    }

    $("#btnValidarcodigo").click(function(){
        var codigo = 0;
        if($("#codigo_venta_mostrador").val() != '')
        {
            codigo = $("#codigo_venta_mostrador").val();
        }
        $.ajax({
            url: url_dinamica+"/api/validar_codigo/"+codigo,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data == "CORRECTO")
                {
                    $("#mensajeCodigoValidador").css('color','#00c88b');
                    $("#mensajeCodigoValidador").html('Código correcto');
                    $("#check_codigo_validador").val('true');
                    setTimeout(() => {
                        $("#validar_codigo").modal('hide');
                    }, 1500);
                }
                else{
                    $("#check_codigo_validador").val('false');
                    $("#mensajeCodigoValidador").css('color','#ff6161');
                    $("#mensajeCodigoValidador").html('Código incorrecto, por favor, verifique su información');
                }
            }
        });
    });

    $("#codigo_reward").keypress(function(){
        $("#codigo_reward").val($("#codigo_reward").val().replace(" ",""));
    });

    $("#btnValidarcodigoReward").click(function(){
        var codigo_reward = $("#codigo_reward").val();
        // codigo_reward
        // mensajeCodigoValidadorReward
        codigo_reward =  codigo_reward.replace(" ","");
        if(codigo_reward != '')
        {
            codigo = $("#codigo_reward").val();
        }else{
            codigo = 0;
        }
        $.ajax({
            url: url_dinamica+"/api/validar_codigo_reward/"+codigo,
            type:"GET",
            dataType:"json",
            success:function(data){
                if(data.data.validacion == true)
                {
                    $("#mensajeCodigoValidadorReward").css('color','#00c88b');
                    $("#mensajeCodigoValidadorReward").html('Código correcto');
                    $("#selectCliente").val(data.data.reward.cliente_id).trigger("change");
                    $("#puntosDisponible").text('Puntos disponibles: '+data.data.reward.puntos_totales);
                    setTimeout(() => {
                        $("#validar_reward").modal('hide');
                    }, 1500);
                }
                else{
                    $("#mensajeCodigoValidadorReward").css('color','#ff6161');
                    $("#mensajeCodigoValidadorReward").html('Código incorrecto, por favor, verifique su información');
                    $("#selectCliente").val().trigger("change");
                    $("#puntosDisponible").text();
                }
            }
        });
    });

    var servicios = {!! $allServices !!};
    var productos = {!! $allProductos !!};
    var cortesias = {!! $cortesias !!};
    var bebidas = {!! $bebidas !!};


    var options_servicios = {
        keys: ['nombre'],
        id: 'id',
        shouldSort: true,
        tokenize: true,
        matchAllTokens: true,
        distance: 100,
        threshold: 0.0,
        location: 0
    }
    var options_productos = {
        keys: ['nombre'],
        id: 'id',
        shouldSort: true,
        tokenize: true,
        matchAllTokens: true,
        distance: 100,
        threshold: 0.0,
        location: 0
    }
    var options_cortesias = {
        keys: ['nombre'],
        id: 'id',
        shouldSort: true,
        tokenize: true,
        matchAllTokens: true,
        distance: 100,
        threshold: 0.0,
        location: 0
    }
    var options_bebidas = {
        keys: ['nombre'],
        id: 'id',
        shouldSort: true,
        tokenize: true,
        matchAllTokens: true,
        distance: 100,
        threshold: 0.0,
        location: 0
    }

    var buscar_servicios = new Fuse(servicios, options_servicios);
    var buscar_productos = new Fuse(productos, options_productos);
    var buscar_cortesias = new Fuse(cortesias, options_cortesias);
    var buscar_bebidas = new Fuse(bebidas, options_bebidas);

    $("#buscadorServicios").keyup(function(){
        var aux_servicios = buscar_servicios.search($("#buscadorServicios").val());
        servicios.forEach(element => {
            $("#tarjeta_servicio_"+element.id).hide(100);
        });
        aux_servicios.forEach(element => {
            $("#tarjeta_servicio_"+element).show(100);
        });

        if($("#buscadorServicios").val().length == 0)
        {
            $(".tarjetasServicios").show(100);
        }

        if(aux_servicios.length == 0 && $("#buscadorServicios").val().length != 0)
        {
            $("#mensajeServicios").show(100);
        }
        else{
            $("#mensajeServicios").hide(100);
        }
    });

    $("#buscadorProductos").keyup(function(){
        var aux_productos = buscar_productos.search($("#buscadorProductos").val());
        productos.forEach(element => {
            $("#tarjeta_producto_"+element.id).hide(100);
        });
        aux_productos.forEach(element => {
            $("#tarjeta_producto_"+element).show(100);
        });

        if($("#buscadorProductos").val().length == 0)
        {
            $(".tarjetasProducto").show(100);
        }

        if(aux_productos.length == 0 && $("#buscadorProductos").val().length != 0)
        {
            $("#mensajeProductos").show(100);
        }
        else{
            $("#mensajeProductos").hide(100);
        }
    });

    $("#buscadorCortesia").keyup(function(){
        var aux_cortesia = buscar_cortesias.search($("#buscadorCortesia").val());
        cortesias.forEach(element => {
            $("#tarjeta_cortesia_"+element.id).hide(100);
        });
        aux_cortesia.forEach(element => {
            $("#tarjeta_cortesia_"+element).show(100);
        });

        if($("#buscadorCortesia").val().length == 0)
        {
            $(".tarjetasCortesia").show(100);
        }

        if(aux_cortesia.length == 0 && $("#buscadorCortesia").val().length != 0)
        {
            $("#mensajeCortesia").show(100);
        }
        else{
            $("#mensajeCortesia").hide(100);
        }
    });

    $("#buscadorBebida").keyup(function(){
        var aux_bebida = buscar_bebidas.search($("#buscadorBebida").val());
        bebidas.forEach(element => {
            $("#tarjeta_bebida_"+element.id).hide(100);
        });
        aux_bebida.forEach(element => {
            $("#tarjeta_bebida_"+element).show(100);
        });

        if($("#buscadorBebida").val().length == 0)
        {
            $(".tarjetasBebida").show(100);
        }

        if(aux_bebida.length == 0 && $("#buscadorBebida").val().length != 0)
        {
            $("#mensajeBebida").show(100);
        }
        else{
            $("#mensajeBebida").hide(100);
        }
    });

    // buscadorCortesia
    // tarjeta_cortesia_

    var url = '';
    $("a").click(function(){
        if($(this)[0].hash != '')
        {
            return true
        }
        else if($(this)[0].id == "profileDropdown")
        {
            return true
        }
        modalSalida();
        url = $(this)[0].href;
        return false;
    });

    function modalSalida()
    {
        $("#modalSalida").modal();
    }
    function redirectPagina(){
        window.location.href = url;
    }

    function vaciarURL(){
        url = '';
    }
</script>

@endsection