@extends("theme.sneat.admin")
@section('contenido')
<style>
    .selectize-control.contacts .selectize-input > div .email {
        opacity: 0.8;
    }
    .selectize-control.contacts .selectize-input > div .name + .email {
        margin-left: 5px;
    }
    .selectize-control.contacts .selectize-input > div .email:before {
        content: "<";
    }
    .selectize-control.contacts .selectize-input > div .email:after {
        content: ">";
    }
    .selectize-control.contacts .selectize-dropdown .caption {
        font-size: 12px;
        display: block;
        color: #a0a0a0;
    }
</style>
<!-- Content -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
    <h4 class="fw-bold py-2"><span class="text-muted fw-light">Simulación de Presupuesto</span> En linea</h4>
    <!-- Basic Layout -->

    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Datos Generales</h5>
                    <small class="text-muted float-end">Datos Generales</small>
                </div>
                <div class="card-body">

                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="clientes">Cliente</label>
                            <select name="clientes" id="clientes" class="form-select contacts"></select>
                        </div>

                        <div class="mb-3 col-md-1">
                            <label class="form-label" for="iva">IVA <strong>{{ json_decode($configuraciones)->general->IVA }}%</strong></label>
                            <input class="form-check-input form-control" style="height: 30px;" type="checkbox" id="iva" name="iva" checked onclick="calcular_totales();">
                        </div>
                    </div>

                    {{-- <div class="d-flex justify-content-center mx-auto gap-3">
                        <button type="button" class="btn btn-danger" onClick="deshabilitar();">Cancelar</button>
                        <button type="submit" id="guardar" class="btn btn-success">Guardar</button>
                    </div> --}}

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

    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Detalles de Combinaciones</h5>
                    <small class="text-muted float-end">Detalles de Combinaciones</small>
                </div>
                <div class="card-body">
                    <form id="form-combinaciones" name="form-combinaciones" enctype="multipart/form-data">
                        <div class="row">
                            <div class="mb-3 col-md-3">
                                <label class="form-label" for="estilococinas">Estilo de cocina</label>
                                <select name="estilococinas" id="estilococinas" class="form-select">
                                    <option value="">[ Selecione una opción ]</option>
                                </select>
                            </div>

                            <div class="mb-3 col-md-3">
                                <label class="form-label" for="marcaaccesorios">Marcas de accesorios</label>
                                <select name="marcaaccesorios" id="marcaaccesorios" class="form-select">
                                    <option value="">[ Selecione una opción ]</option>
                                </select>
                            </div>

                            <div class="mb-3 col-md-4">
                                <label class="form-label" for="combinaciones">Combinaciones</label>
                                <select class="form-select" id="combinaciones" name="combinaciones">
                                    <option value="">[ Selecione una opción ]</option>
                                </select>
                            </div>

                            <div class="mb-3 col-md-2">
                                <label class="form-label" for="ml">ML</label>
                                <div class="input-group">
                                    <input type="text" name="ml" id="ml" class="form-control" placeholder="ML" value="1">
                                    <button class="btn btn-outline-primary" type="submit">Agregar</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="divider mb-1">
                        <div class="divider-text">
                          <i class="bx bx-list-ul"></i>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12 mb-4 mb-xl-0 mt-3">
                            <div class="card">
                                <div class="table-responsive text-nowrap">
                                    <table class="table table-sm table-striped text-center">
                                        <thead>
                                        <tr>
                                            <th>Estilo de cocina</th>
                                            <th>Marcas de Accesorios</th>
                                            <th>Combinaciones</th>
                                            <th>Caracteristicas</th>
                                            <th>Unidad*ML</th>
                                            <th>Valor Neto</th>
                                            <th>Margen de ganancia</th>
                                            <th>Valor Total</th>
                                            <th>Eliminar</th>
                                        </tr>
                                        </thead>
                                        <tbody id="listado_combinaciones"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Detalles de Materiales</h5>
                    <small class="text-muted float-end">Detalles de Materiales</small>
                </div>
                <div class="card-body">
                    <form id="form-materiales" id="form-materiales" enctype="multipart/form-data">
                        <div class="row">

                            <div class="mb-3 col-md-10">
                                <label class="form-label" for="materiales">Materiales</label>
                                <select class="form-select contacts" id="materiales" name="materiales"></select>
                            </div>

                            <div class="mb-3 col-md-2">
                                <label class="form-label" for="cantidad_material">Cantidad</label>
                                <div class="input-group">
                                    <input type="text" name="cantidad_material" id="cantidad_material" class="form-control" placeholder="Cantidad" value="1">
                                    <button class="btn btn-outline-primary" type="submit">Agregar</button>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="divider mb-1">
                        <div class="divider-text">
                          <i class="bx bx-list-ul"></i>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12 mb-4 mb-xl-0 mt-3">
                            <div class="card">
                                <div class="table-responsive text-nowrap">
                                    <table class="table table-sm table-striped text-center">
                                        <thead>
                                        <tr>
                                            <th>Material</th>
                                            <th>Cantidad</th>
                                            <th>Valor Neto</th>
                                            <th>Valor Total</th>
                                            <th>Eliminar</th>
                                        </tr>
                                        </thead>
                                        <tbody id="listado_materiales"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        
                        <div class="mb-3 col-md-2"></div>

                        <div class="mb-3 col-md-2">
                            <h4 class="text-center" id="total_neto">Neto: $0</h4>
                        </div>

                        <div class="mb-3 col-md-2">
                            <h4 class="text-center" id="total_iva">IVA: $0</h4>
                        </div>

                        <div class="mb-3 col-md-2">
                            <h4 class="text-center" id="total_con_iva">Total: $0</h4>
                        </div>

                        <div class="mb-3 col-md-4 text-center">
                            <button type="button" class="btn btn-danger" onClick="limpiar();">Cancelar</button>
                            <button type="submit" class="btn btn-success" onClick="guardar();">Guardar</button>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- / Content -->
@endsection
@section('scripts')
<script>
    $.validator.setDefaults({
        ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input'
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    const formato = {
        // style: "currency",
        // currency: "USD",
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
    };

    var clientes = {!! $clientes !!};
    var estilococinas = {!! $estilococinas !!};
    var marcaaccesorios = {!! $marcaaccesorios !!};
    var combinaciones = {!! $combinaciones !!};
    var caracteristicacombinaciones = {!! $caracteristicacombinaciones !!};
    var materiales = {!! $materiales !!};
    var servicios = {!! $servicios !!};
    var configuraciones = {!! $configuraciones !!};

    var listado_combinaciones = [];
    var listado_materiales = [];

    $("#clientes").selectize({
        persist: false,
        placeholder: '[ Selecione una opción ]',
        maxItems: 1,
        valueField: "id",
        labelField: "nombre_completo",
        searchField: ["rut","nombre_completo","telefono","email"],
        options: clientes,
        render: {
            item: function (item, escape) {
                return (
                "<div>" +
                    (item.nombre_completo ? '<span class="name">' + escape(item.nombre_completo) + "</span>" : "") +
                "</div>"
                );
            },
            option: function (item, escape) {
                var label = item.nombre_completo || item.email;
                var caption = item.nombre_completo ? item.email : null;
                return (
                "<div>" +
                    '<span class="label">' + escape(item.nombre_completo) +"</span>" +
                    (item.rut ? '<span class="caption">' + escape(item.rut) + '</span>' : "") +
                    (item.telefono ? '<span class="caption">' + escape(item.telefono) + '</span>' : "") +
                    (item.email ? '<span class="caption">' + escape(item.email) + '</span>' : "") +
                "</div>"
                );
            },
        }
    });

    $("#materiales").selectize({
        persist: false,
        placeholder: '[ Selecione una opción ]',
        maxItems: 1,
        valueField: "id",
        labelField: "material",
        searchField: ["material","tamano","groso","precio"],
        options: materiales,
        render: {
            item: function (item, escape) {
                return (
                "<div>" +
                    (item.material ? '<span class="name">' + escape(item.material) + "</span>" : "") +
                "</div>"
                );
            },
            option: function (item, escape) {
                return (
                "<div>" +
                    '<span class="label">' + escape(item.material) +"</span>" +
                    (item.tamano ? '<span class="caption">' + escape(item.tamano) + '</span>' : "") +
                    (item.groso ? '<span class="caption">' + escape(item.groso) + '</span>' : "") +
                    (item.precio ? '<span class="caption">$' + escape(item.precio) + '</span>' : "") +
                "</div>"
                );
            },
        }
    });

    var html = "<option value=''>[ Selecione una opción ]</option>";
    $.each(estilococinas, function(index, value) {
        html += "<option value='"+value.id+"'>"+value.nombre+"</option>";
    });
    $('#estilococinas').html(html);

    $('#estilococinas').change(function(){
        var html = "<option value=''>[ Selecione una opción ]</option>";
        $('#combinaciones').html(html);
        $.each(marcaaccesorios, function(index, value){
            if(value.id_estilo_de_cocina != $('#estilococinas').val()) return true;
            html += "<option value='"+value.id+"'>"+value.nombre+"</option>";
        });
        $('#marcaaccesorios').html(html);
        $('#ml').val('1').prop('readonly',false);
    });

    $('#marcaaccesorios').change(function(){
        var html = "<option value=''>[ Selecione una opción ]</option>";
        $.each(combinaciones, function(index, value){
            if(value.id_marca_de_accesorio != $('#marcaaccesorios').val()) return true;
            html += "<option value='"+value.id+"'>"+value.nombre+"</option>";
        });
        $('#combinaciones').html(html);
        $('#ml').val('1').prop('readonly',false);
    });

    $('#combinaciones').change(function(){
       
        var combinacion_seleccionada = $.grep(combinaciones, function(combinacion){
            return combinacion.id == $('#combinaciones').val();
        });
        combinacion_seleccionada = combinacion_seleccionada[0];

        if(combinacion_seleccionada && combinacion_seleccionada.tamano_unico == 1){
            $('#ml').val('1').prop('readonly',true);
        }else{
            $('#ml').val('1').prop('readonly',false);
        }
    });

    cargar_validaciones_custom();

    function valor_total(valor_neto,margen_ganancia){
        return (valor_neto / (1 - margen_ganancia));
    }

    $("#form-combinaciones").validate({
		rules: {
			estilococinas : {
				required: true,
			},
            marcaaccesorios : {
				required: true,
			},
            ml : {
				required: true,
                number: true
			},
			combinaciones : {
				required: true,
			},
		},
		messages:{
            estilococinas : {
				required: 'Campo requerido',
			},
            marcaaccesorios : {
				required: 'Campo requerido',
			},
            ml : {
				required: 'Campo requerido',
                number: 'El valor debe ser numerico'
			},
			combinaciones : {
				required: 'Campo requerido',
			},
		},
		submitHandler: function(form){
            var formData = $(form).serializeArray();
            console.log(formData);
            agregar_combinacion(formData);
		}
	});

    // ------------------------------------------------
    // ------------------------------------------------

    function agregar_combinacion(formData){

        var combinacion_seleccionada = $.grep(combinaciones, function(combinacion) {
            return combinacion.id == formData[2].value;
        });
        
        var valor_total = parseFloat(parseFloat(parseFloat(combinacion_seleccionada[0].valor_neto) / (1 - parseFloat(combinacion_seleccionada[0].margen_de_ganancia))) * formData[3].value);

        listado_combinaciones.push([formData[0].value,formData[1].value,formData[2].value,formData[3].value,valor_total]);
        listar_combinacion();
        $('#estilococinas').val('');
        $('#estilococinas').trigger('change');
        $('#ml').val('1').prop('readonly',false);
    }
    
    function eliminar_combinacion(index){
        listado_combinaciones.splice(index, 1);
        listar_combinacion();
    }

    function listar_combinacion(){
        // console.log(listado_combinaciones);
        var html = "";
        $.each(listado_combinaciones,function(key,value){
            var combinacion_seleccionada = $.grep(combinaciones, function(combinacion){
                return combinacion.id == value[2];
            });
            combinacion_seleccionada = combinacion_seleccionada[0];

            var marcaaccesorio_seleccionada = $.grep(marcaaccesorios, function(marcaaccesorio){
                return marcaaccesorio.id == combinacion_seleccionada.id_marca_de_accesorio;
            });
            marcaaccesorio_seleccionada = marcaaccesorio_seleccionada[0];

            var estilococina_seleccionada = $.grep(estilococinas, function(estilococina){
                return estilococina.id == marcaaccesorio_seleccionada.id_estilo_de_cocina;
            });
            estilococina_seleccionada = estilococina_seleccionada[0];

            var caracteristicacombinaciones_seleccionadas = $.grep(caracteristicacombinaciones, function(caracteristicas){
                return caracteristicas.id_combinacion == combinacion_seleccionada.id;
            });
            
            // console.log(estilococina_seleccionada);
            // console.log(marcaaccesorio_seleccionada);
            // console.log(combinacion_seleccionada);
            // console.log(caracteristicacombinaciones_seleccionadas);

            var html_ = "<ul>";
                $.each(caracteristicacombinaciones_seleccionadas,function(key,value){
                    if(value.id_combinacion != combinacion_seleccionada.id) return true;
                    html_ += `<li>${value.nombre}</li>`;
                });
            html_ += "</ul>";

            html += `<tr>
                        <td>
                            ${estilococina_seleccionada.nombre}
                        </td>
                        <td>
                            ${marcaaccesorio_seleccionada.nombre}
                        </td>
                        <td> 
                            ${combinacion_seleccionada.nombre}
                        </td>
                        <td>
                            ${html_}
                        </td>
                        <td>
                            ${value[3]}
                        </td>
                        <td>
                            $${parseFloat(combinacion_seleccionada.valor_neto).toLocaleString("es-ES", formato)}
                        </td>
                        <td>
                            ${combinacion_seleccionada.margen_de_ganancia * 100}%
                        </td>
                        <td>
                            $${value[4].toLocaleString("es-ES", formato)}
                        </td>
                        <td>
                            <button type="button" class="btn btn-icon rounded-pill btn-danger" onclick="eliminar_combinacion(${key})">
                                <i class='bx bx-check'></i>
                            </button>
                        </td>
                    </tr>`;
        });

        $("#listado_combinaciones").html(html);
        calcular_totales();
    }

    // ------------------------------------------------
    // ------------------------------------------------

    $("#form-materiales").validate({
		rules: {
			materiales : {
				required: true,
			},
            cantidad_material : {
				required: true,
                number: true
			},
		},
		messages:{
            materiales : {
				required: 'Campo requerido',
			},
            cantidad_material : {
				required: 'Campo requerido',
                number: 'El valor debe ser numerico'
			},
		},
		submitHandler: function(form){
            var formData = $(form).serializeArray();
            console.log(formData);
            agregar_materiales(formData);
		}
	});

    function agregar_materiales(formData){
        listado_materiales.push([formData[0].value,formData[1].value]);
        listar_materiales();
        $('#materiales')[0].selectize.setValue("");
        $('#cantidad_material').val('1');
    }

    function eliminar_material(index){
        listado_materiales.splice(index, 1);
        listar_materiales();
    }

    function listar_materiales(){
        console.log(listado_materiales);
        var html = "";
        $.each(listado_materiales,function(key,value){
            var material_seleccionada = $.grep(materiales, function(material){
                return material.id == value[0];
            });
            material_seleccionada = material_seleccionada[0];
            
            html += `<tr>
                        <td>
                            ${material_seleccionada.material}  ${material_seleccionada.tamano}  ${material_seleccionada.grosor}
                        </td>
                        <td>
                            ${value[1]}
                        </td>
                        <td>
                           $${parseFloat(material_seleccionada.precio).toLocaleString("es-ES", formato)}
                        </td>
                        <td>
                           $${parseFloat(material_seleccionada.precio * value[1]).toLocaleString("es-ES", formato)}
                        </td>
                        <td>
                            <button type="button" class="btn btn-icon rounded-pill btn-danger" onclick="eliminar_material(${key})">
                                <i class='bx bx-check'></i>
                            </button>
                        </td>
                    </tr>`;
        });

        $("#listado_materiales").html(html);
        calcular_totales();
    }

    function calcular_totales(){
        var UsaIVA = $('#iva').is(':checked');
        var IVA = {{ json_decode($configuraciones)->general->IVA }};

        var total_neto = 0;
        $.each(listado_combinaciones,function(key,value){
            total_neto += value[4];
        });

        $.each(listado_materiales,function(key,value){
            var material_seleccionada = $.grep(materiales, function(material){
                return material.id == value[0];
            });
            material_seleccionada = material_seleccionada[0];

            total_neto += material_seleccionada.precio * value[1];
        });

        var total_iva = 0;
        var total_con_iva = total_neto;
        if(UsaIVA){
            total_iva = total_neto * 0.19;
            total_con_iva = total_neto * 1.19;
        }

        $("#total_neto").html("Neto: $"+(total_neto).toLocaleString("es-ES", formato));
        $("#total_iva").html("IVA: $"+(total_iva).toLocaleString("es-ES", formato));
        $("#total_con_iva").html("Total: $"+(total_con_iva).toLocaleString("es-ES", formato));

    }

    function limpiar(){
        listado_combinaciones = [];
        listado_materiales = [];

        $('#clientes')[0].selectize.setValue("");
        $('#iva').prop('checked',true);
        $('#estilococinas').val('');
        $('#estilococinas').trigger('change');
        $('#ml').val('1').prop('readonly',false);
        $('#materiales')[0].selectize.setValue("");
        $('#cantidad_material').val('1');

        listar_combinacion();
        listar_materiales()
    }

    function guardar(){

        var cliente = $('#clientes')[0].selectize.getValue();
        if(cliente == ''){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe seleccionar un Cliente !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

        if(listado_combinaciones.length === 0 && listado_materiales.length === 0){
            Swal.fire({
                position: 'top-end',
                icon: 'error',
                title: "¡ Debe seleccionar una Combinación ó un material !",
                showConfirmButton: false,
                timer: 1500
            });
            return;
        }

        // CALCULO TOTALES
            var UsaIVA = $('#iva').is(':checked');
            var IVA = {{ json_decode($configuraciones)->general->IVA }};

            var total_neto = 0;
            $.each(listado_combinaciones,function(key,value){
                total_neto += value[4];
            });

            $.each(listado_materiales,function(key,value){
                var material_seleccionada = $.grep(materiales, function(material){
                    return material.id == value[0];
                });
                material_seleccionada = material_seleccionada[0];

                total_neto += material_seleccionada.precio * value[1];
            });

            var total_iva = 0;
            var total_con_iva = total_neto;
            if(UsaIVA){
                total_iva = total_neto * 0.19;
                total_con_iva = total_neto * 1.19;
            }
        // FIN CALCULO TOTALES

        var parametro = {
            id_cliente : cliente,
            iva : total_iva,
            valor_total: total_con_iva,
            detalle_combinacion: listado_combinaciones,
            detalle_materiales: listado_materiales
        };

        $.ajax({
                url: '{{ URL::to('/') }}/simulacion/guardar',
                type: 'POST',
                data: parametro,
                success: function(response){
                    console.log(response);

                    if(response.response){
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: '¡Excelente! La información ha sido guardada correctamente.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        limpiar();
                    }else{
                        Swal.fire({
                            position: 'top-end',
                            icon: 'error',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
    }
</script>
@endsection