<x-admin-layout :breadcrumbs="[
    [
        'name' => 'Dashboard',
        'route' => route('admin.dashboard'),
    ],
    [
        'name' => 'Subcategorias',
    ],
]">

<x-slot name="action">
    <a class="btn btn-blue" href="{{route('admin.subcategorias.create')}}">
        Nuevo
    </a>
       
</x-slot>

    @if ($subcategorias->count())
        <div class="relative overflow-x-auto">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Id
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Descripcion
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Familia
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Categoria
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Acción
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($subcategorias as $subcategoria)
                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                            <th scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ $subcategoria->id }}
                            </th>
                            <td class="px-6 py-4">
                                {{ $subcategoria->nombre }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $subcategoria->categoria->familia->nombre }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $subcategoria->categoria->nombre }}
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.subcategorias.edit', $subcategoria) }}">
                                    Editar
                                </a>
                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $subcategorias->links() }}
        </div>
    @else
        <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
            role="alert">
            <span class="font-medium">Info alert!</span> Todavia no hay subcategorias registradas
        </div>
    @endif

</x-admin-layout>
