@props(['do' => null])
<div class="mt-8 flow-root">
    @php
        $sql="SELECT do,fecha, hora, descripcion, observaciones, TipoInt,if(TipoInt=1,'',if(TipoInt=2,'I','F')) AS tipo  FROM actividades WHERE DO='$do' ORDER BY FECHA DESC,HORA DESC";

        $ActividadesEH = DB::connection('websystem')->select($sql);

    @endphp

    @if (isset($do) && isset($ActividadesEH))
        <div class="w-full px-2 mx-auto mt-2">
            <div class="flex flex-col">
                <div class="my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 h-auto">
                    <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
                        <div class="overflow-hidden mb-10">    
                            <table class="relative w-full">
                                <thead class="bg-gray-200">
                                    <tr>
                                    <th scope="col" class="px-4 sticky top-0 z-10 py-2 text-sm  font-bold text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                        DO
                                    </th>
                                    <th scope="col" class="px-4 sticky top-0 z-10 py-2 text-sm  font-bold text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                        FECHA
                                    </th>
                                    <th scope="col" class="px-4 sticky top-0 z-10 py-2 text-sm  font-bold text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                        HORA
                                    </th>
                                    <th scope="col" class="px-4 sticky top-0 z-10 py-2 text-sm  font-bold text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                        ACTIVIDAD
                                    </th>
                                    <th scope="col" class="px-4 sticky top-0 z-10 py-2 text-sm  font-bold text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                        OBSERVACIONES
                                    </th>
                                    </tr>
                                </thead>
    
                                <tbody class="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
                                  @if($ActividadesEH)    
                                      @foreach ($ActividadesEH as $key=>$registros)
                                      <tr class="{{ $registros->tipo=='I' ? 'bg-red-100': ($registros->tipo=='F' ? 'bg-green-100':'even:bg-white ')}}">
                                          <td  class="px-4 py-1 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{{ trim($registros->do) }}</td>
                                          <td  class="px-4 py-1 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{{ trim($registros->fecha) }}</td>
                                          <td  class="px-4 py-1 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{{ trim($registros->hora) }}</td>
                                          <td  class="px-4 py-1 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{{ trim($registros->descripcion) }}</td>
                                          <td  class="px-4 py-1 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{{ trim($registros->observaciones) }}</td>
                                      </tr>
                                      @endforeach
                                  @endif
                                </tbody>
                            </table>    
                        </div>
                    </div>
                </div>
            </div>    
        </div>   
    @endif
</div>