@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Comparativo precios</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <div class="col">
                            <form id="form-upload">
                                <div style="max-width:300px; float:left; margin-right:15px;">
                                    <input name="proveedor_nit" type="text" class="form-control mb-2" placeholder="Digite un proveedor nit (opcional)">
                                    <textarea name="sku" id="sku" class="form-control mb-2" rows="3"></textarea>
                                    <label><b>Digite codigos skus separados por (,)</b></label>
                                    <br>
                                    <div class="form-group mt-2">
                                        <div>
                                            <table>
                                                <thead>
                                                <tr>
                                                    <th>
                                                        <label class="checkbox-label">
                                                            <input type="checkbox" name="mismaClasificacion" style="margin-left: 0 !important;">
                                                            Misma Clasificacion (oro, plata, bronce)
                                                        </label>
                                                    </th>
                                                    <th>
                                                        <label class="checkbox-label">
                                                            <input type="checkbox" name="mismaCategoria">
                                                            Misma Categoria
                                                        </label>
                                                    </th>
                                                    <th>
                                                        <label class="checkbox-label">
                                                            <input type="checkbox" name="mismaIndiceCarga">
                                                            Mismo Índice de Carga
                                                        </label>
                                                    </th>
                                                    <th>
                                                        <label class="checkbox-label">
                                                            <input type="checkbox" name="mismaIndiceVelocidad">
                                                            Mismo Índice de Velocidad
                                                        </label>
                                                    </th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div>
                                <button class="btn btn-primary" id="btn_buscar_informe"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <div class="col">
                            <div class="col">
                                <div id="resultado-productos">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ URL::asset('dist/js/bootstrap-datepicker.js') }}"></script>
    <link rel="stylesheet" href="{{URL::asset('dist/css/datepicker.css')}}">
    <script>
        new DataTable("#table", {
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                "infoFiltered": "(Filtrado de _MAX_ total registros)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ registros",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
        });

        jQuery("#btn_buscar_informe").on("click", function () {
            const dataForm = new FormData(document.getElementById("form-upload"));
            axios.post(`informes/comparativo-precios`, dataForm).then(function (respInterna) {
                if (respInterna.data.error === 0) {
                    jQuery("#resultado-productos").html(respInterna.data.data.html);
                    Swal.fire('', 'Documento procesado', 'success');
                } else {
                    notificarUsuario(respInterna.data.mensaje);
                }
            });
        })
    </script>
    <style>
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        .checkbox-label input[type="checkbox"] {
            margin-left: 13px;
        }
    </style>
@endsection