<x-app-layout>
    <x-slot name="header">
        Áreas de Trabajo
    </x-slot>

    <!-- Content -->
    <div class="bg-white shadow-lg rounded-sm border border-slate-200">
        <header class="px-5 py-4 flex justify-between items-center border-b border-slate-100">
            <h2 class="font-semibold text-slate-800">Catálogo de Áreas de Trabajo <span
                    class="text-slate-400 font-medium">({{ $areas->total() }})</span></h2>
            <a href="{{ route('admin.area_trabajos.create') }}"
                class="btn bg-green-600 hover:bg-green-700 text-white rounded-md px-3 py-2 flex items-center shadow-sm text-sm">
                <svg class="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
                    <path
                        d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
                </svg>
                <span class="ml-2">Nueva Área</span>
            </a>
        </header>

        <div class="p-3">
            @if(session('success'))
                <div x-data="{ show: true }" x-show="show"
                    class="mb-4 p-4 bg-emerald-50 border border-emerald-200 text-emerald-600 rounded flex justify-between">
                    <span>{{ session('success') }}</span>
                    <button @click="show = false" class="text-emerald-500 hover:text-emerald-700">&times;</button>
                </div>
            @endif
            @if(session('error'))
                <div x-data="{ show: true }" x-show="show"
                    class="mb-4 p-4 bg-rose-50 border border-rose-200 text-rose-600 rounded flex justify-between">
                    <span>{{ session('error') }}</span>
                    <button @click="show = false" class="text-rose-500">&times;</button>
                </div>
            @endif

            <div class="overflow-x-auto">
                <table class="table-auto w-full">
                    <thead
                        class="text-xs font-semibold uppercase text-slate-500 bg-slate-50 border-t border-b border-slate-200">
                        <tr>
                            <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                <div class="font-semibold text-left">Código</div>
                            </th>
                            <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                <div class="font-semibold text-left">Nombre</div>
                            </th>

                            <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                <div class="font-semibold text-left">Estado</div>
                            </th>
                            <th class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                <div class="font-semibold text-center">Acciones</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-slate-200">
                        @forelse($areas as $area)
                            <tr>
                                <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                    <div class="font-medium text-sky-500">{{ $area->codigo }}</div>
                                </td>
                                <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                    <div class="font-medium text-slate-800">{{ $area->nombre }}</div>
                                </td>

                                <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                    @if($area->activo)
                                        <div
                                            class="inline-flex font-medium rounded-full text-center px-2.5 py-0.5 bg-emerald-100 text-emerald-600">
                                            Activo</div>
                                    @else
                                        <div
                                            class="inline-flex font-medium rounded-full text-center px-2.5 py-0.5 bg-slate-100 text-slate-500">
                                            Inactivo</div>
                                    @endif
                                </td>
                                <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                    <div class="flex justify-center space-x-2">
                                        <a href="{{ route('admin.area_trabajos.edit', $area->id) }}"
                                            class="text-slate-400 hover:text-slate-500 rounded-full" title="Editar">
                                            <span class="sr-only">Editar</span>
                                            <svg class="w-8 h-8 fill-current" viewBox="0 0 32 32">
                                                <path
                                                    d="M19.7 8.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM12.6 22H10v-2.6l6-6 2.6 2.6-6 6zm7.4-7.4L17.4 12l1.6-1.6 2.6 2.6-1.6 1.6z" />
                                            </svg>
                                        </a>
                                        <form action="{{ route('admin.area_trabajos.destroy', $area->id) }}" method="POST"
                                            class="inline-block"
                                            onsubmit="return confirm('¿Confirma que desea eliminar esta área de trabajo?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-rose-500 hover:text-rose-600 rounded-full"
                                                title="Eliminar">
                                                <span class="sr-only">Eliminar</span>
                                                <svg class="w-8 h-8 fill-current" viewBox="0 0 32 32">
                                                    <path d="M13 15h2v6h-2zM17 15h2v6h-2z" />
                                                    <path
                                                        d="M20 9c0-.6-.4-1-1-1h-6c-.6 0-1 .4-1 1v2H8v2h1v10c0 .6.4 1 1 1h12c.6 0 1-.4 1-1V13h1v-2h-4V9zm-6 1h4v1h-4v-1zm7 3v9H11v-9h10z" />
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5"
                                    class="px-2 first:pl-5 last:pr-5 py-5 whitespace-nowrap text-center text-slate-500 italic">
                                    No hay áreas de trabajo registradas.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $areas->links() }}
            </div>
        </div>
    </div>
</x-app-layout>