@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Gestionar masivo URL seguimiento: <b></b></h3>
                </div>
                <div class="card-body">
                    <form id="form-upload" enctype="multipart/form-data">
                        <input type="hidden" name="entity" value="{{$entidad["id"] ?? '' }}"/>
                        <div class="input-group">
                            <div class="custom-file">
                                <input id="upload-doc" name="upload-doc" type="file" class="custom-file-input subir_adjunto system_validador_vacio">
                                <input type="hidden" name="id" value="{{$id ?? ""}}"/>
                                <label class="custom-file-label form-control form-control-border form-control-sm " style="height: 30px" for="exampleInputFile">Seleccionar archivo</label>
                            </div>
                            <div class="progress progress-sm col-12 p-0">
                                <div id="progress-bar-proceso" class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                </div>
                            </div>
                        </div>
                    </form>
                    <blockquote>
                        <p><b>Funcionamiento: </b>Cuando se procesa un plano, si no está registrada la URL se crea y si ya existe se actualiza.</p>
                    </blockquote>
                </div>
                <div class="card-footer">
                    <a href="{{ url('dist/csv/gestionar-url-rastreo.csv') }}">
                        <button type="button" class="btn btn-flat btn-sm btn-info">Descargar plano de importación</button>
                    </a>
                    <button type="button" class="btn btn-flat btn-sm btn-primary" id="btn-procesar">Procesar</button>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body row" id="resultados-proceso" >
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Listado</h3>
                </div>
                <div class="card-body">
                    <table id="tabla" class="display table table-bordered table-striped table-condensed cf">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Grupo</th>
                            <th>Código</th>
                            <th>URL</th>
                            <th>Estado</th>
                            <th>Rastreo</th>
                            <th>Registro</th>
                            <th>Usuario</th>
                        </tr>
                        </thead>
                        <tbody>
                                                </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        renderizarTabla('tabla');
        jQuery('#btn-procesar').on('click', async function () {
            if (system_validarcampos("form-upload")) {
                Swal.fire({
                    title: '¿Está seguro de procesar este documento?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Si',
                    cancelButtonText: 'No'
                }).then((result) => {
                    if (result.value) {
                        Mostrarloader();
                        jQuery("#progress-bar-proceso").width('0%');
                        const dataForm = new FormData(document.getElementById("form-upload"));
                        axios.post(`sitio-web/reg-masivo-url`, dataForm).then(function (respInterna) {
                            Ocultarloader();
                            if (respInterna.data.error === 0) {
                                Swal.fire('', 'Documento procesado', 'success');
                                prepararLogs(respInterna.data.data.logs, "Código","resultados-proceso");
                            } else {
                                notificarUsuario(respInterna.data.mensaje);
                            }
                        }).catch(function (error) {
                            Ocultarloader();
                            notificarUsuario("Error en el servidor");
                        });
                    }
                });
            } else {
                notificarUsuario("Debe indicar el documento a cargar");
            }
        });

        jQuery(document).on('click', '.btn-eliminar', function () {
            Swal.fire({
                title: '¿Está seguro de eliminar esta url?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Si',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
                    axios.get(`sitio-web/eliminar-url/` + jQuery(this).data("id")).then(function (respInterna) {
                        if (respInterna.data.error === 0) {
                            window.location.reload();
                        } else {
                            notificarUsuario(respInterna.data.mensaje);
                        }
                    });
                    Ocultarloader();
                }
            });
        });

        jQuery(document).on('click', '.btn-editar', function () {
            const formId = `form-${jQuery(this).data("id")}`;

            const grupoActual = jQuery(this).parent().parent().parent().find('.data-grupo').html()
            const codigoActual = jQuery(this).parent().parent().parent().find('.data-codigo').html()
            const urlActual = jQuery(this).parent().parent().parent().find('.data-url').html()
            const estadoActual = jQuery(this).parent().parent().parent().find('.data-estado').data('value')
            const rastreoActual = jQuery(this).parent().parent().parent().find('.data-rastreo').data('value')


            Swal.fire({
                title: "Editar Url",
                showCancelButton: true,
                cancelButtonText: 'Cancelar',
                confirmButtonText: 'Guardar',
                preConfirm: async () => {
                    try {
                        if (system_validarcampos(formId)) {
                            const response = await axios.put(
                                `sitio-web/editar-url/${jQuery(this).data("id")}`,
                                getDataJson(formId)
                            )
                            if (response.data.error) {
                                Swal.showValidationMessage(`${response.data.mensaje}`);
                                return false;
                            }
                            await Swal.fire("Guardado con exito", ""  , "success")
                            window.location.reload();
                        } else {
                            return false;
                        }
                    } catch (error) {
                        Swal.showValidationMessage(`Request failed: ${error}`);
                    }
                },
                html: `
                <div class="text-left">
                    <form id="${formId}">
                        <div class="form-group">
                            <labe class="ml-2 text-sm" for="grupo">GRUPO</labe>
                            <input class="form-control system_validador_vacio" type="text" name="grupo" value="${grupoActual}">
                        </div>
                        <div class="form-group">
                            <labe class="ml-2 text-sm" for="codigo">CODIGO</labe>
                            <input class="form-control system_validador_vacio" type="text" name="codigo" value="${codigoActual}">
                        </div>
                        <div class="form-group">
                            <labe class="ml-2 text-sm" for="url">URL</labe>
                            <input class="form-control system_validador_vacio" type="text" name="url" value="${urlActual}">
                        </div>
                        <div class="form-group">
                            <labe class="ml-2 text-sm" for="bloquear_rastreo">HABILITAR</labe>
                            <select class="system_validador_vacio form-control" name="estado">
                                <option  value=""></option>
                                <option ${estadoActual === 1 ? 'selected' : null} value="1">Si</option>
                                <option ${estadoActual === 0 ? 'selected' : null} value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <labe class="ml-2 text-sm" for="bloquear_rastreo">BLOQUEAR RASTREO</labe>
                            <select class="system_validador_vacio form-control" name="bloquear_rastreo">
                                <option  value=""></option>
                                <option ${rastreoActual === 0 ? 'selected' : null} value="0">No</option>
                                <option ${rastreoActual === 1 ? 'selected' : null} value="1">Si</option>
                            </select>
                        </div>
                    </form>
                </div>
                `

            })
        })

    </script>
@endsection