@extends('layouts.dashboard.inface', ['section' => 'activity_categories'])

@section('navbar-buttons')
    <a href="{{ route('realEstate.settings.activityCategories.create') }}"
        class="flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-600">
        <span class="material-symbols-outlined text-[20px]">add</span>
        <span>Nueva actividad</span>
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light p-6 dark:bg-background-dark lg:p-10">
        <div class="mx-auto max-w-7xl space-y-6">
            <div>
                <nav class="mb-2 flex items-center gap-2 text-sm text-slate-500">
                    <a class="transition-colors hover:text-primary" href="{{ route('realEstate.dashboard') }}">Inicio</a>
                    <span class="text-slate-300">/</span>
                    <span class="font-medium text-primary">Catálogo de actividades</span>
                </nav>
                <h1 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Catálogo de actividades</h1>
                <p class="mt-1 max-w-2xl text-sm text-slate-500 dark:text-slate-400">
                    Administra los tipos de seguimiento que pueden registrarse en los prospectos.
                </p>
            </div>

            @if (session('success'))
                <div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700 dark:border-green-900 dark:bg-green-900/20 dark:text-green-300">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700 dark:border-red-900 dark:bg-red-900/20 dark:text-red-300">
                    {{ session('error') }}
                </div>
            @endif

            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="border-b border-slate-200 p-4 dark:border-slate-800">
                    <form action="{{ route('realEstate.settings.activityCategories') }}" method="GET"
                        class="flex flex-col gap-3 sm:flex-row">
                        <label class="relative flex-1">
                            <span class="material-symbols-outlined absolute left-3 top-2.5 text-[20px] text-slate-400">search</span>
                            <span class="sr-only">Buscar actividades</span>
                            <input type="search" name="search" value="{{ $search }}" placeholder="Buscar por nombre o descripción"
                                class="w-full rounded-lg border border-slate-200 bg-slate-50 py-2 pl-10 pr-4 text-sm text-slate-900 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800 dark:text-white">
                        </label>
                        <button type="submit"
                            class="rounded-lg bg-slate-900 px-5 py-2 text-sm font-semibold text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600">
                            Buscar
                        </button>
                        @if ($search !== '')
                            <a href="{{ route('realEstate.settings.activityCategories') }}"
                                class="rounded-lg border border-slate-200 px-5 py-2 text-center text-sm font-semibold text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
                                Limpiar
                            </a>
                        @endif
                    </form>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50">
                            <tr>
                                <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Actividad</th>
                                <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Descripción</th>
                                <th class="px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-slate-500">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @forelse ($activityCategories as $activityCategory)
                                <tr class="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/40">
                                    <td class="px-6 py-4 text-sm font-semibold text-slate-900 dark:text-white">
                                        {{ $activityCategory->name }}
                                    </td>
                                    <td class="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">
                                        {{ $activityCategory->description !== '' ? $activityCategory->description : 'Sin descripción' }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex justify-end gap-2">
                                            <a href="{{ route('realEstate.settings.activityCategories.edit', $activityCategory) }}"
                                                aria-label="Editar {{ $activityCategory->name }}"
                                                class="rounded-lg p-2 text-slate-500 transition-colors hover:bg-primary/10 hover:text-primary">
                                                <span class="material-symbols-outlined text-[20px]">edit</span>
                                            </a>
                                            <form action="{{ route('realEstate.settings.activityCategories.delete', $activityCategory) }}"
                                                method="POST" onsubmit="return confirm('¿Deseas eliminar esta actividad?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" aria-label="Eliminar {{ $activityCategory->name }}"
                                                    class="rounded-lg p-2 text-slate-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20">
                                                    <span class="material-symbols-outlined text-[20px]">delete</span>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-6 py-12 text-center text-sm text-slate-500">
                                        {{ $search !== '' ? 'No se encontraron actividades con ese criterio.' : 'Aún no hay actividades registradas.' }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($activityCategories->hasPages())
                    <div class="border-t border-slate-200 px-6 py-4 dark:border-slate-800">
                        {{ $activityCategories->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection