@extends('layouts.index')
@section('contenido')
<div class="content">
	<div class="card">
		<div class="card-header header-elements-inline">
			<h5 class="card-title">NUEVO COMBO</h5>
			<div class="header-elements">
				<div class="list-icons">
				    <a class="list-icons-item" data-action="collapse"></a>
				</div>
			</div>
		</div>

		<div class="card-body">
			<form action="{{ route('marketing.guardar_combo') }}" method="POST">
                @csrf
                <fieldset>
                    <div class="collapse show">
                        <div class="form-group">
                            <label>Nombre del combo*</label>
                            <input type="text" class="form-control" name="nombre" placeholder="" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>¿Seleccione a que tipo de socio aplica?*</label>
                        <select multiple="multiple" class="form-control select" name="tipo_socio[]" required>
                            @foreach ($tiposSocios as $socio)
                                <option value="{{$socio['id']}}">{{$socio['descripcion_tipo_socio']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="collapse show">
                        <div class="form-group">
                            <label>Descripción EVA*</label>
                            <input type="text" class="form-control" name="eva" placeholder="" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Fecha inicio:</label>
                        <div class="input-group">
                            <span class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-calendar22"></i></span>
                            </span>
                            <input type="text" class="form-control daterange-single" name="fecha_inicio" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Fecha final:</label>
                        <div class="input-group">
                            <span class="input-group-prepend">
                                <span class="input-group-text"><i class="icon-calendar22"></i></span>
                            </span>
                            <input type="text" class="form-control daterange-single" name="fecha_final" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>¿Desea utlizar un listada de precios?</label>
                        <select id="listaPrecios" class="form-control" name="id_lista">
                            <option value="0">No lista de precios</option>
                            @foreach ($listas as $lista)
                                <option value="{{$lista['id']}}">{{$lista['nombre']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-control select" name="status">
                            <option value="1">Activo</option>
                            <option value="2">Inactivo</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <h5>LISTADO DE PRECIOS</h5>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <table id="tablaJS" class="table">
                                <thead>
                                    <tr>
                                        <th>Cantidad</th>
                                        <th>Producto</th>
                                        <th>Precio</th>
                                        <th>Bonificación</th>
                                        <th>Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="iniciar">
                                        <td><input type="number" class="form-control cantidadProducto" name="cantidad[]" placeholder="Cantidad" required></td>
                                        <td>
                                            <select id="productoS" class="form-control listaProductos" name="id_producto[]" required>
                                                <option value="">Seleccione el producto</option>
                                                @foreach ($productos as $producto)
                                                    <option data-precio="0" value="{{$producto['id']}}">{{$producto['nombre']}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control precioBase" name="precio[]" placeholder="Precio" required></td>
                                        <td class="text-center">
                                            <select class="form-control bonificaciones" name="id_bonificacion[]">
                                                <option value="0">Sin bonificación</option>
                                                @foreach ($bonificaciones as $bonificacion)
                                                    <option value="{{$bonificacion['id']}}" data-cantidad_base="{{$bonificacion['cantidad_base']}}" data-bonificacion="{{$bonificacion['bonificacion']}}">{{$bonificacion['nombre']}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control subTotal" name="subtotal[]"  placeholder="0.00" readonly></td>
                                    </tr>

                                </tbody>
                            </table>
                            <button id="nuevoProducto" type="button" class="btn btn-success">Nuevo producto</button>
                            <br>

                        </div>
                        <div class="row totalLinea">
                            <div class="col-md-4">
                                TOTAL
                            </div>
                            <div class="col-md-8">
                                <p id="totalC" style="float: right">0.00</p>
                            </div>
                        </div>
                    </div>
                </fieldset>

				<div class="text-right">
					<button type="submit" class="btn btn-primary">Guardar Combo<i class="icon-floppy-disk ml-2"></i></button>
				</div>
            </form>

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

@endsection

@section('javascript')
<script>

    jQuery( document ).ready(function() {
        function calcularTotal(){
            var total=0;
            $('.subTotal').each(function(){
                var subtotalC=parseFloat($(this).val());
                total+=subtotalC;
            })
            return total.toFixed(2);
        }
        $('#nuevoProducto').on('click',function(){
            let  $inputIniciales=$( ".iniciar" ).clone().removeClass('iniciar');
            $($inputIniciales).appendTo("tbody").find('input').val('');
            $('.listaProductos').on('change',function(){
                var precioBase=parseFloat($(this).find('option:selected').attr('data-precio'));
                var buscarPadre=$(this).parent().parent();
                var cantidad=parseFloat($(buscarPadre).find('.cantidadProducto').val());
                $(buscarPadre).find('.precioBase').val(precioBase);
                $(buscarPadre).find('.subTotal').val(precioBase*cantidad);
            })
            $('.bonificaciones').on('change',function(){
                var cantidad_base=parseFloat($(this).find('option:selected').attr('data-cantidad_base'));
                var bonificacion=parseFloat($(this).find('option:selected').attr('data-bonificacion'));
                var porcentaje=bonificacion/(cantidad_base+bonificacion);

                var buscarPadre=$(this).parent().parent();
                var subTotal=parseFloat($(buscarPadre).find('.subTotal').val());
                var descuento=subTotal-(subTotal*porcentaje);
                $(buscarPadre).find('.subTotal').val(descuento.toFixed(2))
            })
            //TOTAL LAS FUNCIONES
            $('#listaPrecios').on('change',function(){
                var buscarId=$( "#listaPrecios option:selected" ).val();
                $.get( "{{ route('productos.listado_ajax') }}", { id_lista: buscarId })
                    .done(function( data ) {

                        if(data.listado_precios){
                            $.each( data.listado_precios, function( key, value ) {
                                $('#productoS option').each(function(){
                                    console.log('id',value.id_producto);
                                    if($(this).val()==value.id_producto){
                                        $(this).attr('data-precio',value.precio_base)
                                    }
                                })
                            });
                        }else{
                            $('#productoS option').each(function(){
                                $(this).attr('data-precio','0');
                            })
                        }
                    });
            })

            $('.listaProductos').on('change',function(){
                var precioBase=parseFloat($(this).find('option:selected').attr('data-precio'));
                var buscarPadre=$(this).parent().parent();
                $(buscarPadre).find('.bonificaciones option:eq(0)').attr('selected', true);
                $(buscarPadre).find('.precioBase').attr('readonly', false);
                $(buscarPadre).find('.bonificaciones option:eq(0)').prop('selected', true);
                var cantidad=parseFloat($(buscarPadre).find('.cantidadProducto').val());
                $(buscarPadre).find('.precioBase').val(precioBase);
                $(buscarPadre).find('.subTotal').val(precioBase*cantidad);
                $('#totalC').text(calcularTotal());
                console.log('Entro');
            })
            $('.bonificaciones').on('change',function(){
                var buscarPadre=$(this).parent().parent();
                var cantidad_base=parseFloat($(this).find('option:selected').attr('data-cantidad_base'));
                var bonificacion=parseFloat($(this).find('option:selected').attr('data-bonificacion'));
                var porcentaje=bonificacion/(cantidad_base+bonificacion);
                //Verificar que tipo de bonificacion es
                if(bonificacion>0){
                    $(buscarPadre).find('.precioBase').attr('readonly', true);
                    var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                    var descuento=subTotal-(subTotal*porcentaje);
                    $(buscarPadre).find('.subTotal').val(descuento.toFixed(2));
                }else{
                    var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                    $(buscarPadre).find('.precioBase').removeAttr('readonly');
                    $(buscarPadre).find('.subTotal').val(subTotal.toFixed(2));
                }
                $('#totalC').text(calcularTotal());
            })
            //Cambia el precio base
            $('.precioBase').on('change',function(){
                var buscarPadre=$(this).parent().parent();
                var precioBase=parseFloat($(this).val());
                var cantidad=parseFloat($(buscarPadre).find('.cantidadProducto').val());
                $(buscarPadre).find('.subTotal').val(precioBase*cantidad);
                $('#totalC').text(calcularTotal());
            })
            //Cambia la cantidad
            $('.cantidadProducto').on('change',function(){
                var buscarPadre=$(this).parent().parent();
                var bonificacion=parseFloat($(buscarPadre).find('.bonificaciones option:selected').attr('data-bonificacion'));
                if(bonificacion>0){
                    var cantidad_base=parseFloat($(buscarPadre).find('.bonificaciones option:selected').attr('data-cantidad_base'));
                    var bonificacion=parseFloat($(buscarPadre).find('.bonificaciones option:selected').attr('data-bonificacion'));
                    var porcentaje=bonificacion/(cantidad_base+bonificacion);

                    $(buscarPadre).find('.precioBase').attr('readonly', true);
                    var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                    var descuento=subTotal-(subTotal*porcentaje);
                    $(buscarPadre).find('.subTotal').val(descuento.toFixed(2));
                }else{
                    var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                    $(buscarPadre).find('.precioBase').removeAttr('readonly');
                    $(buscarPadre).find('.subTotal').val(subTotal.toFixed(2));
                }
                
                $('#totalC').text(calcularTotal());
                console.log('entro c');
            })
            
        })
        $('.select').select2({
            minimumResultsForSearch: Infinity
        });
        $('#listaPrecios').on('change',function(){
            var buscarId=$( "#listaPrecios option:selected" ).val();
            $.get( "{{ route('productos.listado_ajax') }}", { id_lista: buscarId })
                .done(function( data ) {

                    if(data.listado_precios){
                        $.each( data.listado_precios, function( key, value ) {
                            $('#productoS option').each(function(){
                                console.log('id',value.id_producto);
                                if($(this).val()==value.id_producto){
                                    $(this).attr('data-precio',value.precio_base)
                                }
                            })
                        });
                    }else{
                        $('#productoS option').each(function(){
                            $(this).attr('data-precio','0');
                        })
                    }
                });
        })

        $('.listaProductos').on('change',function(){
            var precioBase=parseFloat($(this).find('option:selected').attr('data-precio'));
            var buscarPadre=$(this).parent().parent();
            $(buscarPadre).find('.precioBase').attr('readonly', false);
            $(buscarPadre).find('.bonificaciones option:eq(0)').prop('selected', true);
            var cantidad=parseFloat($(buscarPadre).find('.cantidadProducto').val());
            $(buscarPadre).find('.precioBase').val(precioBase);
            $(buscarPadre).find('.subTotal').val(precioBase*cantidad);
            $('#totalC').text(calcularTotal());
            console.log('Entro1');
        })
        $('.bonificaciones').on('change',function(){
            var buscarPadre=$(this).parent().parent();
            var cantidad_base=parseFloat($(this).find('option:selected').attr('data-cantidad_base'));
            var bonificacion=parseFloat($(this).find('option:selected').attr('data-bonificacion'));
            var porcentaje=bonificacion/(cantidad_base+bonificacion);
            //Verificar que tipo de bonificacion es
            if(bonificacion>0){
                $(buscarPadre).find('.precioBase').attr('readonly', true);
                var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                var descuento=subTotal-(subTotal*porcentaje);
                $(buscarPadre).find('.subTotal').val(descuento.toFixed(2));
            }else{
                var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                $(buscarPadre).find('.precioBase').removeAttr('readonly');
                $(buscarPadre).find('.subTotal').val(subTotal.toFixed(2));
            }
            $('#totalC').text(calcularTotal());
        })
        //Cambia el precio base
        $('.precioBase').on('change',function(){
            var buscarPadre=$(this).parent().parent();
            var precioBase=parseFloat($(this).val());
            var cantidad=parseFloat($(buscarPadre).find('.cantidadProducto').val());
            $(buscarPadre).find('.subTotal').val(precioBase*cantidad);
            $('#totalC').text(calcularTotal());
        })
        //Cambia la cantidad
        $('.cantidadProducto').on('change',function(){
            var buscarPadre=$(this).parent().parent();
            var bonificacion=parseFloat($(buscarPadre).find('.bonificaciones option:selected').attr('data-bonificacion'));
            if(bonificacion>0){
                var cantidad_base=parseFloat($(buscarPadre).find('.bonificaciones option:selected').attr('data-cantidad_base'));
                var bonificacion=parseFloat($(buscarPadre).find('.bonificaciones option:selected').attr('data-bonificacion'));
                var porcentaje=bonificacion/(cantidad_base+bonificacion);

                $(buscarPadre).find('.precioBase').attr('readonly', true);
                var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                var descuento=subTotal-(subTotal*porcentaje);
                $(buscarPadre).find('.subTotal').val(descuento.toFixed(2));
            }else{
                var subTotal=parseFloat($(buscarPadre).find('.cantidadProducto').val())*parseFloat($(buscarPadre).find('.precioBase').val());
                $(buscarPadre).find('.precioBase').removeAttr('readonly');
                $(buscarPadre).find('.subTotal').val(subTotal.toFixed(2));
            }
            
            $('#totalC').text(calcularTotal());
            console.log('entro c');
        })
    });
</script>
@endsection