@extends('layout.backoffice')
@section('content')

    @php
        /**
        * @var array $listado
        * @var array $listadoResiduo
        */
    @endphp
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs">
                        <li class="nav-item"><a class="nav-link" href="#equivalencias-nombres" data-toggle="tab">Equivalencias de nombres actuales</a></li>
                        <li class="nav-item"><a class="nav-link active" href="#equivalencias-residuos" data-toggle="tab">Residuos Equivalencias</a></li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane" id="equivalencias-nombres">
                            <div class="row">
                                <div class="col-12">
                                    <table class="table table-hover table-bordered table-sm" id="tabla-equivalencias">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th>Nombre Interno</th>
                                            <th>Nombre Equivalente</th>
                                            <th>Marca</th>
                                            <th>Sitio</th>
                                            <th>Registro</th>
                                        </tr>
                                        <tr class="search">
                                            <th></th>
                                            <th>Nombre Interno</th>
                                            <th>Nombre Equivalente</th>
                                            <th>Marca</th>
                                            <th>Sitio</th>
                                            <th>Registro</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($listado as $equivalencia)
                                            <tr style="white-space: nowrap">
                                                <td class="d-flex">
                                                    <button type="button" data-id="{{$equivalencia['id_equivalencia_nombre']}}" class="btn-editar btn btn-sm btn-info mr-1">Editar</button>
                                                    <button type="button" data-id="{{$equivalencia['id_equivalencia_nombre']}}" class="btn-eliminar btn btn-sm btn-danger">Eliminar</button>
                                                </td>
                                                <td class="data-interno">{{ $equivalencia['interno'] }}</td>
                                                <td class="data-externo">{{ $equivalencia['externo'] }}</td>
                                                <td class="data-externo">{{ $equivalencia['marca'] }}</td>
                                                <td class="data-sitio_web">{{ $equivalencia['sitio_web_origen'] }}</td>
                                                <td class="data-registro">{{ $equivalencia['registro'] }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane active" id="equivalencias-residuos">
                            <div class="col-12">
                                <table class="table table-hover table-bordered table-sm" id="tabla-residuos">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>Nombre Externo</th>
                                        <th>Sitio</th>
                                        <th>URL</th>
                                        <th>Registro</th>
                                    </tr>
                                    <tr class="search">
                                        <th></th>
                                        <th>Nombre Externo</th>
                                        <th>Sitio</th>
                                        <th>URL</th>
                                        <th>Registro</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($listadoResiduo as $residuo)
                                        <tr style="white-space: nowrap">
                                            <td class="d-flex">
                                                <button type="button" data-id="{{$residuo['id_residuo']}}" class=" btn-sm btn-agregar-equivalencia btn btn-info mr-1">Agregar Equivalencia</button>
                                            </td>
                                            <td class="data-cadena">{{ $residuo['cadena_completa'] }}</td>
                                            <td class="data-sitio_web">{{ $residuo['sitio_web_origen'] }}</td>
                                            <td class="data-url">{{ $residuo['url'] ?? ""}}</td>
                                            <td class="data-registro">{{ $residuo['registro'] }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            renderizarTabla("tabla-equivalencias")
            const tablaResiduos = renderizarTabla("tabla-residuos")

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

                const fila = jQuery(this).parent().parent();
                const cadena = fila.find('.data-cadena').html()
                const sitio = fila.find('.data-sitio_web').html()
                const url = fila.find('.data-url').html()

                console.log(fila)
                Swal.fire({
                    title: `Editar Equivalencia de ${sitio}`,
                    showCancelButton: true,
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Guardar',
                    preConfirm: async () => {
                        try {
                            if (system_validarcampos(formId)) {
                                const response = await axios.post(
                                    `rastreador/equivalencia-nombre`,
                                    getDataJson(formId)
                                )
                                if (response.data.error) {
                                    Swal.showValidationMessage(`${response.data.mensaje}`);
                                    return false;
                                }
                                await Swal.fire("Guardado con exito", "", "success")
                                fila.fadeOut(400, function () {
                                    tablaResiduos.row(fila).remove().draw()
                                })
                            } else {
                                return false;
                            }
                        } catch (error) {
                            Swal.showValidationMessage(`Request failed: ${error}`);
                        }
                    },
                    html: `
                        <div class="text-left">
                            <form id="${formId}">
                                <input type="hidden" name="id_residuo" value="${id}">
                                <div class="form-group">
                                    <labe class="ml-2 text-sm" for="codigo">Nombre Externo</labe>
                                    <input class="form-control system_validador_vacio" readonly type="text" name="externo" value="${cadena}">
                                </div>
                                <div class="form-group">
                                    <labe class="ml-2 text-sm" for="grupo">Equivalencia Interna</labe>
                                    <input class="form-control system_validador_vacio" type="text" name="interno">
                                </div>
                                <div class="form-group">
                                    <labe class="ml-2 text-sm" for="grupo">Marca</labe>
                                    <input class="form-control system_validador_vacio" type="text" name="marca">
                                </div>
                            </form>
                        </div>
                        `
                })
            })

            jQuery(document).on('click', '.btn-eliminar', function () {
                const id = jQuery(this).data("id")
                Swal.fire({
                    title: '¿Estas seguro de eliminar esta equivalencia?',
                    showCancelButton: true,
                    confirmButtonText: 'Eliminar',
                    cancelButtonText: 'Cancelar',
                    preConfirm: async () => {
                        try {
                            const response = await axios.delete(`rastreador/equivalencia-nombre/${id}`)
                            if (response.data.error) {
                                Swal.showValidationMessage(`${response.data.mensaje}`);
                                return false;
                            }
                            await Swal.fire("Eliminado con exito", "", "success")
                            window.location.reload();
                        } catch (error) {
                            Swal.showValidationMessage(`Request failed: ${error}`);
                        }
                    }
                });
            });

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

                const interno = jQuery(this).parent().parent().find('.data-interno').html()
                const externo = jQuery(this).parent().parent().find('.data-externo').html()
                const sitio = jQuery(this).parent().parent().find('.data-sitio_web').html()


                Swal.fire({
                    title: `Editar Equivalencia de ${sitio}`,
                    showCancelButton: true,
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Guardar',
                    preConfirm: async () => {
                        try {
                            if (system_validarcampos(formId)) {
                                const response = await axios.put(
                                    `rastreador/equivalencia-nombre`,
                                    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}">
                                <input type="hidden" name="id_equivalencia_nombre" value="${id}">
                                <div class="form-group">
                                    <labe class="ml-2 text-sm" for="grupo">Nombre Interno</labe>
                                    <input class="form-control system_validador_vacio" type="text" name="interno" value="${interno}">
                                </div>
                                <div class="form-group">
                                    <labe class="ml-2 text-sm" for="codigo">Nombre Externo</labe>
                                    <input class="form-control system_validador_vacio" type="text" name="externo" value="${externo}">
                                </div>
                            </form>
                        </div>
                        `
                })
            })
        });
    </script>

@endsection