@if( isset($trazabilidad) and count($trazabilidad) > 0 )
    <!-- options filters -->
    <div class="row col-md-12 d-flex align-items-center justify-content-end my-1">
        <div class="options-filter col-xl-5 ps-4 fw-light text-start fs-6 @if(Session::get('modo') == 1) text-white bg-dark @else text-fidelitas bg-white @endif">Novedades</div>
        <div class="btn-group col-md-7 pe-0" role="group" aria-label="filtro por estado de vencimiento">
            <input type="radio" name="filtro_trazabilidad" class="btn-check" id="nombreTrazabilidad" autocomplete="off" value="NT" checked="true">
            <label class="btn btn-outline-fidelitas btn-sm" for="nombreTrazabilidad"><i class="bi bi-person"></i> Nombre</label>
            <!-- -->
            <input type="radio" name="filtro_trazabilidad" class="btn-check" id="fechaTrazabilidad" autocomplete="off" value="FT">
            <label class="btn btn-outline-fidelitas btn-sm" for="fechaTrazabilidad"><i class="bi bi-calendar-date"></i> Fecha</label>
            @if( $cant_familias )
                <input type="radio" name="filtro_trazabilidad" class="btn-check" id="familiaTrazabilidad" autocomplete="off" value="FM">
                <label class="btn btn-outline-fidelitas btn-sm" for="familiaTrazabilidad"><i class="bi bi-house"></i> Familia</label>
            @endif
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-center my-1">
        <div class="col-12">
            <div class="input-group input-group-sm">
                <input type="text" id="filtro-trazabilidad-nombre" class="filtros-trazabilidad form-control shadow @if(Session::get('modo') == 1) bg-dark text-white @else bg-white text-dark @endif" placeholder="Ingresar nombre" title="Filtrar por nombre de item" data-filtro="nombre">
                <input type="text" id="filtro-trazabilidad-fecha" class="filtros-trazabilidad form-control shadow d-none @if(Session::get('modo') == 1) bg-dark text-white @else bg-white text-dark @endif" placeholder="Ingresar fecha con formato: dd/mm/yyyy" title="Fecha esperada: dd/mm/yyyy" data-filtro="fecha">
                @if( $cant_familias > 0 )
                    <select name="filtro-trazabilidad-familia" id="filtro-trazabilidad-familia" class="form-select filtros-trazabilidad-select d-none" placeholder="Elegir Familia" title="Filtrar por familia de item" style="cursor:pointer;" data-filtro="familia">
                        <!-- <option value=""></option> -->
                        @foreach( $familias as $key_familia => $familia )
                            <option value="{{ $key_familia }}">{{ $familia }}</option>
                        @endforeach
                    </select>
                @endif
                <button type="button" id="cancelar-filtro-trazabilidad" title="Cancelar la busqueda" class="btn btn-danger d-none"><i class="bi bi-x-lg"></i></button>
            </div>
        </div>
    </div>
    <!-- -->
    <div class="row">
        <div class="col-12">
            <ul class="list-group shadow" style="">
                @if( $es_inquiro )
                    @foreach($trazabilidad as $novedad)
                        <a href="#" class="list-group-item list-group-item-action items-trazabilidad trazabilidad-iv @if(Session::get('modo') == 1) bg-dark text-white @else bg-white text-dark @endif" data-fecha="{{$novedad->fecha}}" data-contraparte="{{$novedad->contraparte}}" data-nombre="{{$novedad->nombre_persona}}" data-familia="{{ $novedad->idFamilia }}" data-visible="{{$novedad->publicado}}" aria-current="true">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1 fw-light" style="font-size:13px;"><i class="{{$novedad->icono}} icono-novedades-dashboard"></i> {{$novedad->nombre_persona}} ({{$novedad->nombre_familia}})</h6>
                                <small class="text-muted" style="font-size:13px;">{{$novedad->fecha}}</small>
                            </div>
                            <p class="mb-1 fw-light" style="font-size:12px;">{{$novedad->texto}}</p>
                        </a>
                    @endforeach
                @else
                    @foreach($trazabilidad as $novedad)
                        <a href="#" class="list-group-item list-group-item-action items-trazabilidad trazabilidad-led @if(Session::get('modo') == 1) bg-dark text-white @else bg-white text-dark @endif" data-fecha="{{$novedad->fecha}}" data-contraparte="{{$novedad->contraparte}}" data-familia="{{ $novedad->idFamilia }}" data-nombre="{{$novedad->nombre_persona}}" aria-current="true">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1 fw-light" style="font-size:13px;"><i class="{{$novedad->icono}} icono-novedades-dashboard"></i> {{$novedad->nombre_persona}} ({{$novedad->nombre_familia}}) </h6>
                                <small class="text-muted" style="font-size:13px;">{{$novedad->fecha}}</small>
                            </div>
                            <p class="mb-1 fw-light" style="font-size:12px;">{{$novedad->texto}}</p>
                        </a>
                    @endforeach
                @endif
            </ul>
        </div>
    </div>
@else
    <div class="row justify-content-center my-3">
        <div class="col-xl-8">
            <h6 class="text-center text-fidelitas lead fw-light" style="font-size:15px;">@traducir('Sin novedades', 'Sin novedades')</h6>
        </div>
    </div>
@endif
<!-- -->
<script src="{{ asset('/js/trazabilidad.js') }}"></script>