{{-- 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 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>
    @php
    use App\Http\Controllers\ClientesController;
    $cc = new ClientesController();
    @endphp
    <div class="row">
        <div class="col-md-12">
            <table>
                <tr>
                    <td>
                        Filtro <br>
                        <input wire:model = "filtro_busca" type="text text-sm" class="form-control" placeholder="Buscar ...">
                    </td>
                    <td>
                        Ordenar por <br>
                        <select wire:model.live = 'filtro_orden' class="form-control" >
                            <option value = 'f.NUMERO_DO'>NUMERO DO</option>
                            <option value = 't.NUMERO_ACEPTACION'>NUMERO ACEPTACION</option>
                            <option value = 'd.NUMERO_LEVANTE'>NUMERO LEVANTE</option>
                            <option value = 'f.CODIGO_POSICION'>SUBPARTIDA</option>
                            <option value = 't.FECHA_VENCIMIENTO'>FECHA VENCIMIENTO</option>
                        </select>
                    </td>
                    <td>
                        Modo <br>
                        <select wire:model.live = 'filtro_modo_orden' class="form-control">
                            <option value = 'ASC'>ASCENDENTE</option>
                            <option value = 'DESC'>DESCENDENTE</option>
                        </select>
                    </td>
                    <td>
                        <br>
                        <button type="button" wire:click="filtrarDataHistorica()" class="btn btn-sm  btn-success" style="margin-top:6px;"><span class="fa fa-filter"></span></button>
                    </td>
                    <td>
                        <br>
                        <b class="ml-4 text-black">{{count($data_historica)}} Registros historicos encontrados</b>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-12" style="height:450px; overflow-y:scroll">
            <table class='table table-sm'>
                <thead class="thead-dark">
                    <tr>
                        <th class="header" scope="col">No.</th>
                        <th class="header" scope="col">No. DO</th>
                        <th class="header" scope="col">No. Aceptacion</th>
                        <th class="header" scope="col">Subpartida</th>
                        <th class="header" scope="col">Levante</th>
                        <th class="header" scope="col">Vencimiento</th>
                        <th class="header" scope="col">Faltan dias</th>
                        <th class="header" scope="col">Total</th>
                        <th class="header" scope="col">Stock</th>
                        <th class="header" scope="col">OK</th>
                        <th class="header" scope="col">% Inv</th>
                        <th class="table-active" style="width:220px">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if (count($data_historica) > 0)
                        @php $fila = 0; @endphp
                        @foreach($data_historica as $t)
                            @if (array_key_exists($t->NUMERO_ACEPTACION,$entradas_historicas))
                                @php $fila++; @endphp
                                <tr>
                                    <td class="text-center">
                                        {{$loop->index + 1}}
                                    </td>
                                    <td class="text-center">
                                        {{$t->NUMERO_DO}}
                                    </td>
                                    <td class="text-center">
                                        {{$t->NUMERO_ACEPTACION}}<br>
                                        <small class='text-danger'>{{$t->FECHA_ACEPTACION}}</small>
                                    </td>
                                    <td class="text-center">{{$t->CODIGO_POSICION}}<br>
                                        <small class='text-danger' >{{$t->CODIGO_MODALIDAD}}</small></td>
                                    <td class="text-center">{{$t->NUMERO_LEVANTE}}<br>
                                        <small class='text-danger' >{{$t->FECHA_LEVANTE}}</small>
                                    </td>
                                    <td  class="text-center" style = "{{($t->FECHA_VENCIMIENTO < date('Y-m-d')) ? 'color:white; background:red;' : ''}}" >{{$t->FECHA_VENCIMIENTO}}</td>
                                    <td  class="text-center">{{$t->FALTAN}}</td>
                                    <td  class="text-center">{{array_key_exists($t->NUMERO_ACEPTACION,$entradas_historicas) ? $entradas_historicas[$t->NUMERO_ACEPTACION]['total'] : '' }}</td>
                                    <td  class="text-center">{{array_key_exists($t->NUMERO_ACEPTACION,$entradas_historicas) ? $entradas_historicas[$t->NUMERO_ACEPTACION]['stock'] : '' }}</td>
                                    <td  class="text-center">{{array_key_exists($t->NUMERO_ACEPTACION,$entradas_historicas) ? $entradas_historicas[$t->NUMERO_ACEPTACION]['ok'] : '' }}</td>
                                    <td  class="text-center">%</td>
                                    <td>
                                        <button type="button" onclick="muestra('{{$cc->seriales($t->DESCRIPCION)}}','{{$t->NUMERO_ACEPTACION}}')" class="btn btn-sm btn-secondary btn-sm"><span class="fa fa-list"></span>&nbsp;&nbsp;&nbsp;Seriales</button>
                                        <button type="button" onclick="mostrarDescripcion('{{$t->DESCRIPCION}}')" class="btn btn-sm btn-info btn-sm">Descripcion</button>
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                    @else
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>
<div wire:ignore>


<div class="modal fade bd-example-modal-sm" tabindex="-1" id="visorSeriales" 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">
                    <h6><b>Lista de Seriales</b></h6>
                    No. Aceptacion <b id="num_aceptacion" style="color:red"><p></p></b>
                    <div id="listado" style="height:300px; overflow-y:scroll"></div>
                </div>
                <div class="modal-footer" style="background:#eee">
                    <input hidden id="listadoSeriales"  type="text">
                    <input hidden id="numeroAceptacion" type="text">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-lg" tabindex="-1" id="visorDescripcion"  role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <h6><b>Descripciom DIM</b></h6><hr>
                    <div id="textoDescripcion"></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 muestra (valores, aceptacion) {
            vector = valores.split(",");
            texto = "<table class='table table-sm'><tr><th>No.</th><th>Serial</th></tr>"
            for(i = 0; i < vector.length; i++) {
                texto = texto + "<tr><td>" + (i+1) + "</td><td>"+ vector[i] + "</td></tr>"
            }
            texto = texto + "</table>";
            $("#num_aceptacion").html(aceptacion)
            $("#listado").html(texto)

            $("#numeroAceptacion").val(aceptacion)
            $("#listadoSeriales").val(valores)

            $("#visorSeriales").modal('show')
        }

        function mostrarDescripcion(texto) {
            $("#textoDescripcion").html(texto)
            $("#visorDescripcion").modal('show')
        }
    </script>
</div>
</div>