{{-- Migración 7: Livewire 3 exige una sola raíz. Lo que en Livewire 2 quedaba fuera del componente
     (modales y script) y nunca se volvía a pintar va en wire:ignore para conservar eso. --}}
<div>
<div>
    <div class="row">
        <div class="col-md-12">
            <table>
                <tr>
                    <td>
                        <small>Dato a buscar</small><br>
                        <input wire:model = "buscar"  id="buscar" name="buscar" type="text" class="form-control form-control-sm" placeholder="Buscar DEX o Serial ...">
                        <small class="text-danger" style="opacity: 0">Campo es requerido</small>
                    </td>
                    <td>
                    <small>Mostrar</small><br>
                        <select wire:model.live = 'filtro_archivado' class="form-control-sm">
                            <option value = "'S'">ARCHIVADOS</option>
                            <option value = "'N'">NO ARCHIVADOS</option>
                            <option value = "'S','N'">TODOS</option>
                        </select>
                        <small class="text-danger" style="opacity: 0">Campo es requerido</small>
                    </td>
                    <td>
                        <small>Número DEX</small><br>
                        <input wire:model = "numeroDex" type="text" class="form-control form-control-sm" placeholder="Número DEX">
                        <small class="text-danger" style="opacity: {{ $errors->has('numeroDex') ? 1: 0  }}">Campo es requerido</small>
                    </td>
                    <td>
                        <button type="button" wire:click="filtrarDataSalidas()" class="btn btn-sm btn-success" style="margin-top:6px;"><span class="fa fa-filter"></span></button>
                    </td>
                    <td>
                        <small>Observaciones</small><br>
                        <input wire:model = "sal_observaciones"  id="sal_observaciones" name="sal_observaciones" type="text" class="form-control form-control-sm" style = "width:250px">
                        <small class="text-danger" style="opacity: 0">Campo es requerido</small>
                    </td>
                    <td style="vertical-align: middle" class="pl-2">
                        <input wire:model.live = "checkActualiza" class="sinpadd" type="checkbox" style="width:20px;height:20px; margin-top:4px">
                    </td>
                    <td style="vertical-align: middle" class="pr-2" style = "width:250px">
                         Actualizar pedido
                    </td>
                    <td>
                        <button type="button" wire:click="actualizarDex()" class="btn btn-success btn-sm" style="margin-top:6px;"><span class="fa fa-save"></span>&nbsp;</button>
                        <button type="button" wire:click="descargarZIP()" class="btn btn-dark btn-sm" style="margin-top:6px;"><span class="fa fa-download"></span>&nbsp;</button>
                        <button type="button" onclick="achivarSerial('marcados')" class="btn btn-dark btn-sm" style="margin-top:6px; color: red" >&nbsp;<span class="fa fa-lock"></span>&nbsp;</button>
                        <small class="text-danger" style="opacity: {{ $errors->has('registrosSeleccionados') ? 1: 0  }}">No ha marcado los registros para actualizar</small>
                        <div wire:loading wire:target="buscar" class="remark success" style="margin-top:2px">
                            &nbsp;&nbsp;&nbsp;<span class="fas fa-sync fa-spin"></span>&nbsp;&nbsp;&nbsp;<b style="color: red">Filtrando</b>, espere...<br>
                       </div>
                       <div wire:loading wire:target="actualizarDex" class="remark success" style="margin-top:2px">
                            &nbsp;&nbsp;&nbsp;<span class="fas fa-sync fa-spin"></span>&nbsp;&nbsp;&nbsp;<b style="color: red">Actualizando informacion</b>, espere...<br>
                       </div>
                       <div wire:loading wire:target="descargarZIP" class="remark success" style="margin-top:2px">
                            &nbsp;&nbsp;&nbsp;<span class="fas fa-sync fa-spin"></span>&nbsp;&nbsp;&nbsp;<b style="color: red">Generando ZIP</b>, espere...<br>
                       </div>
                    </td>

                </tr>
            </table>
        </div>
        <div class="col-md-12">
        <div wire:loading class="alert alert-success m-0 p-0 col-md-12">
            <div class="bg-lightGreen p-1">
                <b class="ml-4">Procesando,</b> por favor espere ...
            </div>
        </div>
            <small><b>SERIALES ASIGNADOS A DEX</b>&nbsp;&nbsp;:: Encontrados {{count($inventario)}}</small>
            <div class="scrollable">
                {{-- {{ var_export($registrosSeleccionados) }} --}}
                <table class='table table-sm table-hover text-center'>
                    <thead>
                        <tr>
                            <th class="table-active">No.</th>
                            <th class="table-active">DEX</th>
                            <th class="table-active">PDF</th>
                            <th class="table-active">DO</th>
                            <th class="table-active">DIM</th>
                            <th class="table-active">Pedido</th>
                            <th class="table-active">Salida</th>
                            <th class="table-active">Serial</th>
                            <th class="table-active" colspan="2" style = "width:50px">Observ.</th>
                            <th class="table-active">
                                <input class="marca sinpadd"
                                        wire:change = "seleccionarMarcados($event.target.checked)"
                                        wire:model.live="checkMarcado"
                                        type="checkbox"
                                        style="width:20px;height:20px;">
                            </th>
                            <th class="table-active text-center" style = "width:100px">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($inventario))
                            @foreach ($inventario as $index => $i)
                                <tr>
                                    <td class="text-center align-middle">{{$loop->index + 1}}</td>
                                    <td class="text-center align-middle">{{$i->dex}}</td>
                                    <td style="vertical-align: middle">

                                        @if($i->dexDocumentoAWS)
                                            @if($i->dexDocumentoAWS->ruta)
                                                <a
                                                    class="btn btn-dark btn-sm"
                                                    href="{{ $i->dexDocumentoAWS->ruta ? $i->dexDocumentoAWS->ruta : '' }}"
                                                    target="_blank" role="button">
                                                         Central
                                                </a>
                                            @endif
                                        @endif
                                        @if($i->sae)
                                            @if($i->sae->documentosDexAws)
                                                <a
                                                    class="btn btn-dark btn-sm"
                                                    href="{{ $i->sae->documentosDexAws ? $i->sae->documentosDexAws->ruta : '' }}"
                                                    target="_blank" role="button">
                                                        DEX-SAE
                                                </a>
                                            @endif
                                        @endif
                                        @if($i->documentos)
                                            @if($i->documentos->url)
                                                <a
                                                    class="btn btn-dark btn-sm"
                                                    href="{{ $i->documentos->url ? $i->documentos->url : '' }}"
                                                    target="_blank" role="button">
                                                        DEX-CTC
                                                </a>
                                            @endif
                                        @endif
                                   </td>

                                    <td class="text-center align-middle">{{$i->numdo_do}}</td>
                                    <td class="text-center align-middle">{{$i->dim}}</td>

                                    <td class="text-center align-middle">{{$i->numero_pedido}}</td>
                                    <td class="text-center align-middle">{{$i->fecha_salida}}</td>
                                    <td class="text-center align-middle">{{$i->serial}}</td>
                                    <td class="text-center align-middle">@if ($i->inv_observaciones != '') <svg onclick="mostrarObsS('{{$i->inv_observaciones}}','Observaciones de Inventario')" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z"/></svg>  @endif</td>
                                    <td class="text-center align-middle">@if ($i->sal_observaciones != '') <svg onclick="mostrarObsS('{{$i->sal_observaciones}}','Observaciones de Salida')" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M4 4h16v12H5.17L4 17.17zm0-2c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm2 10h12v2H6zm0-3h12v2H6zm0-3h12v2H6z"/></svg>  @endif</td>
                                    <td style="vertical-align: middle">
                                         <input class="marca sinpadd" wire:model.live="registrosSeleccionados.{{ $index }}" value="{{ $i->id }}" type="checkbox" style="width:20px;height:20px;">
                                    </td>
                                    <td class="text-center" >
                                        <span wire:click = "achivarSerial({{$i->id}})" class="fa fa-lock fa-2x" style="cursor:pointer; color: red" title ="Archiva registro de salida"></span> &nbsp;
                                        <span wire:click = "eliminaSerial({{$i->id}})" class="fa fa-close fa-2x" style="cursor:pointer; color: red" title ="Elimina el serial {{$i->serial}} del inventario"></span> &nbsp;
                                        <span wire:click = "devolverSerial({{$i->id}})" class="fa fa-refresh fa-2x" style="cursor:pointer; color: orange" title ="Devuel el serial {{$i->serial}} al inventario"></span>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <td colspan="5">No hay seriales disponibles ...</td>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div wire:ignore>

<!-- Modal para mostrar observaciones -->
<div class="modal fade bd-example-modal-sm" tabindex="-1" id="ver_observacion2" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="margin-top:200px">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                    <b><p id = "titulo_mensaje2"></p></b> <hr>
                    <div id="texto_observacions"></div>
                </div>
                <div class="modal-footer" style="background:#eee">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

<script>
    function mostrarObsS(texto,titulo) {
        $("#texto_observacions").html(texto)
        $("#titulo_mensaje2").html(titulo)
        $("#ver_observacion2").modal('show')
    }

    function achivarSerial(modo) {
        if (confirm("CONFIRMACION REQUERIDA\n\nSeguro de archivar los registros marcados ?\n\nSI (Aceptar)\nNO (Aceptar)")) {
            Livewire.dispatch('achivarSerial', [modo])
        }
    }
</script>
</div>
</div>