@extends('layout.backoffice')
@section('content')
    <div class="col-12">
        <div class="card p-3">
            <div class="col-4">
                (El campo idProducto solo se llena con Liverpool y Addi y el campo gestion solo con Liverpool)
                <br>
                <a href="{{ asset('uploads/formato-importacion.xlsx') }}">
                    <button class="btn-primary btn btn-sm">
                        Descargar Archivo
                    </button>
                </a>
            </div>
            <br>
            <form id="form-importacion">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <select class="form-control select2 system_validador_vacio" name="mkp">
                                <option value="">Seleccione un mkp</option>
                                <option value="exito">Exito</option>
                                <option value="addi">Addi</option>
                                <option value="claroshop">Claroshop</option>
                                <option value="liverpool">Liverpool</option>
                                <option value="luegopago">Luegopago</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <select class="form-control select2 system_validador_vacio" name="tipo_producto" id="tipo_producto">
                                <option value="todos">Todos los productos</option>
                                <option value="skus">SKUs específicos</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3 d-none" id="input_skus">
                        <div class="form-group">
                            <input type="file" class="form-control" name="sku">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <button type="button" class="btn btn-primary btn-sm" id="descargar-informe-mkp">Descargar Informe</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        jQuery(document).ready(function () {
            jQuery('#tipo_producto').on('change', function () {
                if (jQuery(this).val() === 'skus') {
                    jQuery('#input_skus').removeClass('d-none');
                    jQuery('input[name="sku"]').addClass('system_validador_vacio');
                } else {
                    jQuery('#input_skus').addClass('d-none');
                    jQuery('input[name="sku"]').removeClass('system_validador_vacio');
                }
            });
        });

        jQuery('#descargar-informe-mkp').on('click', async function () {
            if (system_validarcampos('form-importacion')) {
                Mostrarloader();
                const dataForm = new FormData(document.getElementById("form-importacion"));
                axios.post(`informes/formato-mkp`, dataForm).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire('', 'Se te enviara un correo con el documento solicitado', 'success');
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                    Ocultarloader();
                });
            }
        });
    </script>
@endsection