@extends('menu/menu')
{{-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js</script> --}}
<script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<link href="{{ asset('css/a&a_style.css') }}" href="a&a_style.css" rel="stylesheet" type="text/css">

@section('content')

@if ( session('mensaje') )
<div class="alert alert-success">{{ session('mensaje') }}</div>
@endif

<form action="{{route('go.agregar_proyecto')}}" method="post" enctype="multipart/form-data" >
    @csrf
    <div class="container-fluid">
        <div class="container">
            <!-- BARRA DE BUSQUEDA -->
            <h1 style="margin-top: 50px">CREAR</h1>
            <div class="row reex" style="height: auto">

                <!-- ASIGNACIÓN -->
                <div class="container col-12" style="margin-top: 10px">
                    <h2><strong>Detalle de cliente</strong></h2>
                </div>
                <!-- Fila 1 ------------------------------------------------------>
                <div class="container col-sm-6 form-group">
                    <label for="nombre_proyecto">
                        <h2>Nombre del cliente</h2>
                    </label>
                    <select class="custom-select mb-3" name="clientes" id="clientes">
                        <option value="" selected>Seleccionar</option>
                        @foreach($carga_selectClientes as $idcliente)
                        <option value="{{$idcliente->id }}">{{$idcliente->razon_social}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="container col-sm-6 form-group">
                    <label for="nombre_proyecto">
                        <h2>Nombre del proyecto</h2>
                    </label>
                    <input type="" class="form-control" id="nombre_proyecto" placeholder="NOMBRE DEL PROYECTO" name="nombre_proyecto">
                </div>
                {{-- <div class="container col-sm-6 form-group">
                    <label for="nombre_proyecto">
                        <h2>Nombre Proveedor</h2>
                    </label>
                    <select required class="custom-select mb-3 mayuscula" name="nombre_proveedor" id="nombre_proveedor">
                        <option value="" selected>Seleccionar</option>
                     
                        @foreach($proveedores as $datos)
                        <option value="{{$datos->nombre_proveedor }}">{{$datos->nombre_proveedor}}</option>
                        @endforeach
                    </select>
                </div> --}}
                {{-- <div class="container col-sm-6 form-group">
           
                </div> --}}
                <div class="container col-sm-6 form-group">
                    <label for="nombre_proyecto">
                        <h2>Fecha Inicio</h2>
                    </label>
                    <input type="date" class="form-control" id="fechaInicioProyecto"  name="fechaInicioProyecto">
                </div>

                <div class="container col-sm-6 form-group">
                    <label for="nombre_proyecto">
                        <h2>Fecha Final</h2>
                    </label>
                    <input type="date" class="form-control" id="fechaFinProyecto"  name="fechaFinProyecto">
                </div>

                <div class="col-6">
                    <label for="nombre_proyecto">
                        <h2>Logo</h2>
                    </label><br>
                    <input type="file" class="" id="cargafoto1" name="cargafoto1" accept="image/png,image/jpeg">
                </div>

                <!-- Fila 2 ------------------------------------------------------>
                <div class="container">
                    <hr class="linea">
                </div>
                    <div class="container">
                        <div class="row">       <h2><strong>Datos Proyectos</strong></h2> </div>
                        
                    </div>
                    
                
                <div class="container col-sm-3 form-group">
                    <label for="capacitacion">
                        <h2>Capacitacion</h2>
                    </label>
                    <select class="custom-select mb-3" name="capacitacion" id="capacitacion">
                        <option value="" selected>Seleccionar</option>
                        <option value="si">Si</option>
                        <option value="no">No</option>
                    </select>
                </div>
                <div class="container col-sm-3 form-group">
                    <label for="cantidad_equipos">
                        <h2>Cantidad de equipos</h2>
                    </label>
                    <input type="number" class="form-control" id="cantidad_equipos" placeholder="Cantidad de equipos" name="cantidad_equipos">
                </div>
                <div class="container col-sm-3 form-group">
                    <label for="">
                        <h2>Valor usuario adicional</h2>
                    </label>
                    {{-- <input type="number" class="form-control" id="costo_usuarioadicional" placeholder="Valor por usuario adicional" name="costo_usuarioadicional"> --}}
                    <input type="text" class="monto form-control"  id="costo_usuarioadicional" placeholder="Valor por usuario adicional" name="costo_usuarioadicional" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">

                </div>
                <div class="container col-sm-3 form-group">
                    <label for="">
                        <h2>Valor Kilometro</h2>
                    </label>
                    <input type="number" class="form-control" id="valor_kilometros" placeholder="$300" name="valorKilometro">
                </div>

                <div class="container">
                    <hr class="linea">
                </div>

                <!-- Costos primera visita -->
            <div class="container">  
                <div class="row">       <h2><strong>Costos primera visita</strong></h2></div>
                <div class="row">
             
                    <!-- Fila 3 ------------------------------------------------------>
                    <div class="col-3">
                        <label for="costo_habilitacion">
                            <h2>Habilitación</h2>
                        </label>
                        <input type="text" class="monto form-control" id="costo_habilitacion" placeholder="UF" name="costo_habilitacion" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="col-3">
                        <label for="costo_instalacion">
                            <h2>Instalación accesorios</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_instalacion" placeholder="UF" name="costo_instalacion" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="col-3">
                        <label for="costo_capacitacion">
                            <h2>Capacitación</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_capacitacion" placeholder="UF" name="costo_capacitacion" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="col-3">
                        <label for="costo_retiro">
                            <h2>Retiro</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_retiro" placeholder="UF" name="costo_retiro" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="col-3">
                        <label for="costo_actualizacion">
                            <h2>Actualización firmware</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_actualizacion" placeholder="UF" name="costo_actualizacion" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>
                    <div class="col-3">
                        <label for="costo_cortesia">
                            <h2>Cortesía</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_cortesia" placeholder="UF" name="costo_cortesia" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="col-3">
                        <label for="costo_garantia">
                            <h2>Garantía</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_garantia" placeholder="UF" name="costo_garantia" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>
                </div>
            </div>



                <!-- Costos adicionales -->
                {{-- <div class=" col-sm-6">
                    <br> --}}
                    <!-- Fila 3 ------------------------------------------------------>
                    {{-- <div class="">
                        <label for="costo_cortesia">
                            <h2>Cortesía</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_cortesia" placeholder="UF" name="costo_cortesia" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="">
                        <label for="costo_garantia">
                            <h2>Garantía</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_garantia" placeholder="UF" name="costo_garantia" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class=""> --}}
                        {{-- <label for="costo_capacitacion">
                            <h2>Capacitación</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_capacitacion" placeholder="UF" name="costo_capacitacionadicional" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>

                    <div class="">
                        <label for="costo_retiro">
                            <h2>Retiro</h2>
                        </label>
                        <input type="text" class="monto  form-control" id="costo_retiro" placeholder="UF" name="costo_retiroadicional" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">
                    </div>
                    <div class="">
                        <label for="">
                            <h3>Costo Proyecto</h3>
                        </label>
                        <input type="" class=" form-control" id="costos_cambio" value="" name="costo_proyecto">
                    </div> --}}
                {{-- </div> --}}
                <div class="container">
                    <hr class="linea">
                </div>

                <div class="container">
                    <div class="row">
                        <div class="col-6">
                            <label for="">Costo</label>
                            <input type="text" class="form-control" id="costos_cambio" value=""  placeholder="$10000" name="costo_proyecto">
                        </div>
              

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

                <div class="contenido"></div>
                <div class="container">
                    <hr class="linea">
                </div>
                <div class="container form-group">
                    <button class="btn btn-rechazar btn-addBody" type="" style="display: none;">Añadir DIV al BODY</button>
                    <button class="btn btn-rechazar float-sm-right" type="button">CANCELAR</button>
                    <button class="btn btn-guardar float-sm-right guardar" type="submit">GUARDAR</button><br><br>
                </div>
            </div>
            <!-- FIN BARRA DE BUSQUEDA -->
        </div>
    </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var num = 1;
        $('.btn-addBody').click(function() {
            num++;
            $('.contenido').append(
                '<div class="container">'+ '<hr class="linea">'+ '</div>'+
                '<div class="col-sm-6">' +
                '<h2><strong>Costos segunda visita</strong></h2>' +
                '<div class="">' +
                '<label for="costo_habilitacion">' +
                '<h2>Habilitación</h2>' +
                '</label>' +
                '<input type="text" class="monto" id="costo_habilitacion2" placeholder="UF" name="$num" maxlength="9" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="sumar();">' +
                '</div>'
            );
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        var maxField = 10; // Numero maximo de campos
        var addButton = $('#add_button'); // Selector del boton de Insertar
        var wrapper = $('.field_wrapper'); // Contenedor de campos
        var fieldHTML = '<div><input type="text" class="form-control" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"></a></div>'; //New input field html
        var x = 1; // Iniciamos el contador a 1
        $(addButton).click(function() { // Una vez que se haga clic en el boton
            if (x < maxField) { //Comprobamos el maximo
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); // Añadimos el HTML
            }
        });
        $(wrapper).on('click', '.remove_button', function(e) { // Una vez se ha hecho clic en el boton de eliminar
            e.preventDefault();
            $(this).parent('div').remove(); //Eliminamos el div
            x--; // Reducimos el contador a 1
        });
    });
</script>
<script>
    function suma(valor) {
        var total = 0;
        valor = parseInt(valor); // Convertir el valor a un entero (número).

        total = document.getElementById('spTotal').innerHTML;

        // Aquí valido si hay un valor previo, si no hay datos, le pongo un cero "0".
        total = (total == null || total == undefined || total == "") ? 0 : total;

        /* Esta es la suma. */
        total = (parseInt(total) + parseInt(valor));

        // Colocar el resultado de la suma en el control "span".
        document.getElementById('spTotal').innerHTML = total;
       // $('#costos_cambio').val(total);
    }
</script>
<script>
    function sumar() {

        var total = 0;

        $(".monto").each(function() {

            if (isNaN(parseFloat($(this).val()))) {

                total += 0;

            } else {

                total += parseFloat($(this).val());

            }

        });

        //alert(total);
        //document.getElementById('spTotal').innerHTML = total;
        // $('#costos_cambio').val(total);
    }
</script>
@endsection