@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>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!-- Content -->
<h4 class="fw-bold py-2"><span class="text-muted fw-light">Combinaciones de Cocina</span></h4>
<div class="card">
    <div class="card-header p-3">
        <div class="d-flex flex-row-reverse">
            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                <button type="button" class="btn btn-outline-secundary" onclick="crear();">
                    <i class='tf-icons bx bx-plus-medical'></i>
                </button>
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-outline-secundary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Exportar
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" id="tabla-excel" onclick="$('.tabla_excel').trigger('click');">Excel</a>
                        <a class="dropdown-item" id="tabla-pdf" onclick="$('.tabla_pdf').trigger('click');">PDF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="table-responsive-xxl text-nowrap" style="min-height:700px;">
        <table id='tabla' class="table table-bordered border-secundary table-sm table-striped w-100">
            <thead class="table-light">
                <tr>
                    <th class="text-center">ID</th>
                    <th class="text-center">Nombre</th>
                    <th class="text-center">Estilo de Cocina</th>
                    <th class="text-center">Marca de Cocina</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
        </table>
   </div>
</div>
<!-- / Content -->
<!-- Modal -->
<div class="modal fade" id="modalCenter" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">TITULO</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl">
                        <form action="post" id="form" name="form">
                            <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">
                                        <!-- INPUT HIDDEN -->
                                            <input type="hidden" name="accion_form" id="accion_form">
                                            <input type="hidden" name="id_form" id="id_form">
                                        <!-- FIN INPUT HIDDEN -->
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="id_estilo_de_cocina">Estilo de Cocina</label>
                                            <select name="id_estilo_de_cocina" id="id_estilo_de_cocina" class="form-select">
                                                <option value="">[ Seleccione una Opción ]</option>
                                                @foreach ($estilos as $estilo)
                                                    <option value="{{ $estilo->id }}">{{ $estilo->nombre }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="id_marca_de_cocina">Marca de Cocina</label>
                                            <select name="id_marca_de_cocina" id="id_marca_de_cocina" class="form-select">
                                                <option value="">[ Seleccione una Opción ]</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="nombre">Nombre</label>
                                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" />
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label" for="tamano_unico">Tamaño Unico</label>
                                            <input class="form-check-input form-control" style="height: 30px;" type="checkbox" id="tamano_unico" name="tamano_unico" checked>
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label" for="valor_neto">Valor Neto</label>
                                            <input type="text" class="form-control" id="valor_neto" name="valor_neto" placeholder="Valor Neto" />
                                        </div>
                                        <div class="mb-3 col-md-2">
                                            <label class="form-label" for="margen_de_ganancia">Margen de Ganancia</label>
                                            <input type="text" class="form-control" id="margen_de_ganancia" name="margen_de_ganancia" placeholder="Margen de Ganancia" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
            {{-- FORM GENERAL --}}
                            <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">&nbsp;</label>
                                                <div class="input-group">
                                                    <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>Valor Neto</th>
                                                            <th>Eliminar</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="listado_materiales"></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Detalles de Servicios</h5>
                                    <small class="text-muted float-end">Detalles de Servicios</small>
                                </div>
                                <div class="card-body">
                                    <form id="form-servicios" id="form-servicios" enctype="multipart/form-data">
                                        <div class="row">
                
                                            <div class="mb-3 col-md-10">
                                                <label class="form-label" for="servicios">Servicios</label>
                                                <select class="form-select contacts" id="servicios" name="servicios"></select>
                                            </div>

                                            <div class="mb-3 col-md-2">
                                                <label class="form-label" for="cantidad_material">&nbsp;</label>
                                                <div class="input-group">
                                                    <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>Servicios</th>
                                                            <th>Valor Total</th>
                                                            <th>Eliminar</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="listado_servicios"></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="$('#form').submit();">Guardar</button>
                </div>
        </div>
    </div>
</div>
@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 = {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
    };

    const titulo_singular = "Combinacion";
    const titulo_pural = "Combinaciones";
    cargar_validaciones_custom();

    var marcaaccesorios = {!! json_encode($marcas); !!};
    var materiales = {!! json_encode($materiales); !!};
    var servicios = {!! json_encode($servicios); !!};

    $("#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>"
                );
            },
        }
    });

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

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

    var listado_materiales = [];
    $("#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]);
        listar_materiales();
        $('#materiales')[0].selectize.setValue("");
    }

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

    function listar_materiales(ocultar=false){
        console.log(listado_materiales);
        if(ocultar){
            ocultar = 'd-none';
        }

        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>
                           $${parseFloat(material_seleccionada.precio).toLocaleString("es-ES", formato)}
                        </td>
                        <td>
                            <button type="button" class="btn btn-icon rounded-pill btn-danger ${ocultar}" onclick="eliminar_material(${key})">
                                <i class='bx bx-check'></i>
                            </button>
                        </td>
                    </tr>`;
        });

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

    var listado_servicios = [];
    $("#form-servicios").validate({
		rules: {
			servicios : {
				required: true,
			},
		},
		messages:{
            servicios : {
				required: 'Campo requerido',
			},
		},
		submitHandler: function(form){
            var formData = $(form).serializeArray();
            console.log(formData);
            agregar_servicios(formData);
		}
	});

    function agregar_servicios(formData){
        listado_servicios.push([formData[0].value]);
        listar_servicios();
        $('#servicios')[0].selectize.setValue("");
    }

    function eliminar_servicios(index){
        listado_servicios.splice(index, 1);
        listar_servicios();
    }

    function listar_servicios(ocultar=false){
        console.log(listado_servicios);

        if(ocultar){
            ocultar = 'd-none';
        }

        var html = "";
        $.each(listado_servicios,function(key,value){
            var servicio_seleccionado = $.grep(servicios, function(servicio){
                return servicio.id == value[0];
            });
            servicio_seleccionado = servicio_seleccionado[0];
            
            html += `<tr>
                        <td>
                            ${servicio_seleccionado.servicio}
                        </td>
                        <td>
                           $${parseFloat(servicio_seleccionado.precio).toLocaleString("es-ES", formato)}
                        </td>
                        <td>
                            <button type="button" class="btn btn-icon rounded-pill btn-danger ${ocultar}" onclick="eliminar_servicios(${key})">
                                <i class='bx bx-check'></i>
                            </button>
                        </td>
                    </tr>`;
        });

        $("#listado_servicios").html(html);
        calcular_neto()
    }

    function calcular_neto(){
    
        var total_neto = 0;
        $.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 += parseInt(material_seleccionada.precio);
        });

        $.each(listado_servicios,function(key,value){
            var servicio_seleccionado = $.grep(servicios, function(servicio){
                return servicio.id == value[0];
            });
            servicio_seleccionado = servicio_seleccionado[0];

            total_neto += parseInt(servicio_seleccionado.precio);
        });

        $("#valor_neto").val(total_neto);
    }

// TABLA    
    var table = $('#tabla').DataTable({
        processing: true,
        serverSide: true,
        lengthMenu: [[25, 50, 100, 500, 1000],[25, 50, 100, 500, "1000"]],
        dom: "rtB<'row mx-0 '<'col-sm-6'l><'col-sm-6'p>>",
        ajax: "{{ URL::to('/') }}/combinaciones/listado",
        columns: [
            { data: 'id', 'class':'text-center' },
            { data: 'nombre', 'class':'text-center' },
            { data: 'nombre_estilo_cocina', 'class':'text-center' },
            { data: 'nombre_marca_cocina', 'class':'text-center' },
            {
                "data": null,
                "width": "100px",
                "className" : "text-center",
                "render": function(data, type, row, meta) {
                    return `
                        <div class="dropdown">
                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bx bx-dots-vertical-rounded"></i>
                            </button>
                            <div class="dropdown-menu" style="">
                                <a class="dropdown-item ver" data-id="${row.id}" href="javascript:ver(${row.id});"><i class="tf-icons bx bx-show-alt me-1"></i> Ver</a>
                                <a class="dropdown-item editar" data-id="${row.id}" href="javascript:editar(${row.id});"><i class="tf-icons bx bx-edit me-1"></i> Editar</a>
                                <a class="dropdown-item eliminar" data-id="${row.id}" href="javascript:eliminar(${row.id});"><i class="tf-icons bx bx-x me-1"></i> Eliminar</a>
                            </div>
                        </div>`;
                },
                "orderable": false
            },
        ],
        buttons: [
            {
                extend: 'excel',
                footer: true,
                exportOptions: { 
                    columns: 'th:not(:last-child)'
                },
                className: 'tabla_excel d-none',
            },
            {
                extend: 'pdfHtml5',
                footer: true,			
                exportOptions: { 
                    columns: 'th:not(:last-child)',
                },
                className: 'tabla_pdf d-none',
            }
        ],
        language: {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        initComplete: function(){
            $('.dt-buttons').hide();
        }   
    });

    $('#tabla thead tr').clone(true).find('th').removeClass('sorting_asc sorting_asc sorting').off('click').end().insertBefore('#tabla thead tr');
        
    $('#tabla thead tr:eq(0) th').each(function (i){
        var title = $(this).text();
        if(title != 'Acciones'){
            $(this).html('<input type="text" class="form-control" placeholder="'+title+'" />');
        
            $('input', this).on('keyup change', function(){
                if(table.column(i).search() !== this.value){
                    table.column(i).search(this.value).draw();
                }
            });
        }else{
            $(this).html('');
        }
    });
// FIN TABLA

// ACCIONES
    crear = function(){
        limpiar_form();
        $(".modal-title").html("<strong>Crear "+titulo_singular+"</strong>");
        $("#accion_form").val("crear");
        $("#id_form").val('');
        $(".modal-footer").show();
        $("#form-materiales").show();
        $("#form-servicios").show();
        $('#modalCenter').modal('show');
    };

    ver = function(id){
        limpiar_form();
        $(".modal-title").html("<strong>Ver "+titulo_singular+" #"+id.toString().padStart(3,'0')+"</strong>");
        $("#accion_form").val("ver");
        $("#id_form").val(id);
        $(".modal-footer").hide();
        $("#form-materiales").hide();
        $("#form-servicios").hide();
        $.ajax({
            url: '{{ URL::to('/') }}/combinaciones/detalle',
            type: 'POST',
            data: {id},
            success: function(response){
                console.log(response); 
                
                $('#id_estilo_de_cocina').val(response.estilos.id).trigger('change').prop('disabled',true);
                $('#id_marca_de_cocina').val(response.marcas.id).prop('disabled',true);
                $('#nombre').val(response.combinacion.nombre).prop('disabled',true);
                $('#tamano_unico').prop("checked",response.combinacion.tamano_unico).prop('disabled',true);
                $('#margen_de_ganancia').val(response.combinacion.margen_de_ganancia).prop('disabled',true);

                $.each(response.caracteristicas_de_combinacion,function(key,value){
                    if(value.id_materiales !== null) listado_materiales.push([value.id_materiales]); 
                    if(value.id_servicios !== null) listado_servicios.push([value.id_servicios]);
                });
                listar_materiales(true);
                listar_servicios(true);

                $('#valor_neto').val(response.combinacion.valor_neto).prop('disabled',true);
                $('#modalCenter').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    };

    editar = function(id){
        limpiar_form();
        $(".modal-title").html("<strong>Editar "+titulo_singular+" #"+id.toString().padStart(3,'0')+"</strong>");
        $("#accion_form").val("editar");
        $("#id_form").val(id);
        $("#form-materiales").show();
        $("#form-servicios").show();
        $(".modal-footer").show();
        $.ajax({
            url: '{{ URL::to('/') }}/combinaciones/detalle',
            type: 'POST',
            data: {id},
            success: function(response){
                console.log(response); 
                
                $('#id_estilo_de_cocina').val(response.estilos.id).trigger('change');
                $('#id_marca_de_cocina').val(response.marcas.id);
                $('#nombre').val(response.combinacion.nombre);
                $('#tamano_unico').prop("checked",response.combinacion.tamano_unico);
                $('#margen_de_ganancia').val(response.combinacion.margen_de_ganancia);

                $.each(response.caracteristicas_de_combinacion,function(key,value){
                    if(value.id_materiales !== null) listado_materiales.push([value.id_materiales]); 
                    if(value.id_servicios !== null) listado_servicios.push([value.id_servicios]);
                });
                listar_materiales();
                listar_servicios();

                $('#valor_neto').val(response.combinacion.valor_neto);
                $('#modalCenter').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    };

    limpiar_form = function(){
        listado_materiales = [];
        listado_servicios = [];
        
        $('#id_estilo_de_cocina').val('').prop('disabled',false);
        $('#id_marca_de_cocina').val('').prop('disabled',false);
        $('#nombre').val('').prop('disabled',false);
        $('#tamano_unico').prop("checked",false).prop('disabled',false);
        $('#margen_de_ganancia').val('').prop('disabled',false);
        $('#valor_neto').val('').prop('disabled',false);

        $(".modal-footer").show();
    }

    eliminar = function(id){
        Swal.fire({
            title: '¿ Estas seguro que desea eliminar el registro #'+(id.toString().padStart(3,'0'))+' ?',
            text: "¡ No podrás revertir esto !",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '¡ Sí, bórralo !'
        }).then((result) => {
            if (result.isConfirmed){
                $.ajax({
                    url: '{{ URL::to('/') }}/combinaciones/eliminar',
                    type: 'POST',
                    data: {id},
                    success: function(response){
                        console.log(response);
                        
                        Swal.fire(
                        'Eliminado!',
                        'Tu registro ha sido eliminado.',
                        'success');
                        table.ajax.reload();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    };
// FIN ACCIONES

    $("#form").validate({
		rules: {
            nombre : {
				required: true,
			},
            id_estilo_de_cocina : {
                required: true,
            },
            id_marca_de_cocina : {
                required: true,
            },
            valor_neto : {
                required: true,
            },
            margen_de_ganancia : {
                required: true,
            },
		},
		messages:{
            nombre : {
				required: 'Campo requerido',
			},
            id_estilo_de_cocina : {
                required: 'Campo requerido',
            },
            id_marca_de_cocina : {
                required: 'Campo requerido',
            },
            valor_neto : {
                required: 'Campo requerido',
            },
            margen_de_ganancia : {
                required: 'Campo requerido',
            },
		},
		submitHandler: function(form){
            
            if(listado_servicios.length === 0 && listado_materiales.length === 0){
                Swal.fire({
                    position: 'top-end',
                    target: document.getElementById('modalCenter'),
                    icon: 'error',
                    title: 'Por favor, Ingrese un Material ó Servicio',
                    showConfirmButton: false,
                    timer: 1500
                });
                return;
            }

            var formData = new FormData(form);

            for (var i = 0; i < listado_materiales.length; i++) {
                formData.append('materiales[]', listado_materiales[i]);
            }

            for (var i = 0; i < listado_servicios.length; i++) {
                formData.append('servicios[]', listado_servicios[i]);
            }

            $.ajax({
                url: '{{ URL::to('/') }}/combinaciones/guardar',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                    $('#modalCenter').modal('hide');
                    if(response.response){
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: '¡Excelente! La información ha sido guardada correctamente.',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        table.ajax.reload();
                    }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