@php $inicio=0 @endphp
<div class="card-body table-responsive p-0">
    <table class="table table-hover text-nowrap table-sm">
        <thead>
            <tr>
                <th>Imagen</th>
                <th></th>
                <th>Principal</th>
                <th>Etiqueta</th>
                <th>Orden</th>
                <th>Estado</th>
            </tr>
        </thead>
        <tbody>
            @if(isset($entidad["tab_img"]))
                @foreach ($entidad["tab_img"] as $imagen)
                @component('components/produc-cargar-img', [
                    'i' => $inicio,
                    'imagenAtri' => $imagen
                ])
                @endcomponent
                @php $inicio++ @endphp
                @endforeach
            @endif
            
            @for ($i = $inicio; $i < ($inicio + 5); $i++)
            @component('components/produc-cargar-img', [
                'i' => $i
            ])
            @endcomponent
            @endfor
        </tbody>
    </table>
    <button type="button" id="btn_agregarAdjunto" class="btn btn-primary btn-sm btn-flat float-right">subir imagen</button>
</div>


<script>
    jQuery("#btn_agregarAdjunto").click(function () {
        jQuery('.info-img').each(function (index) {
            if (jQuery(this).val() != "") {
                console.log(cargarDocImg(this));
            }
        });
    });

    jQuery(".es_principal").change(function () {
        validarActivo(this);
    });

    function validarActivo(objeto) {
        jQuery('.es_principal').each(function (index) {
            if (jQuery(this).attr('name') !== jQuery(objeto).attr('name')) {
                jQuery(this).val("0");
            }
        });
    }

    function cargarDocImg(objeto) {
        var fileData = jQuery(objeto)[0].files[0];
        var formData = new FormData();
        formData.append('file', fileData);
        jQuery(objeto).closest("tr").find(".progress-bar").width('0%');
        axios.post("producto/imagen/cargar", formData).then(function (resp) {
            if (resp.data.error == 0) {
                jQuery(objeto).closest("tr").find(".img_url").val(resp.data.data.ruta);
                jQuery(objeto).addClass("is-valid");
                jQuery(objeto).closest("tr").find(".progress-bar").removeClass("bg-danger");
                jQuery(objeto).closest("tr").find(".progress-bar").addClass("bg-success");
                jQuery(objeto).closest("tr").find(".progress-bar").width('100%');
            } else {
                jQuery(objeto).closest("tr").find(".progress-bar").removeClass("bg-success");
                jQuery(objeto).closest("tr").find(".progress-bar").addClass("bg-danger");
                jQuery(objeto).closest("tr").find(".progress-bar").width('100%');
                jQuery(objeto).addClass("is-invalid");
            }
        });
    }

    jQuery(".btn_img_eliminar").click(function () {
        Swal.fire({
            title: '¿Está seguro de eliminar esta imagen?',
            text: "Esta acción no se puede revertir y el archivo digital será borrado del servidor.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Si',
            cancelButtonText: 'No'
        }).then((result) => {
            if (result.value) {
                Swal.showLoading(Swal.getDenyButton());
                axios.delete('/producto/imagen/' + jQuery(this).data("id")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("Imagen eliminada", '', 'success').then(function () {
                            location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });
    });
</script>