<div class="flex w-full flex-col gap-6">
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <div class="setel-metric-card p-5">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-[var(--setel-text-muted)]">Total tipos</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ $this->totalWorkTypes }}</p>
                    <p class="mt-2 text-sm text-[var(--setel-text-muted)]">Catalogo operativo</p>
                </div>
                <span class="setel-metric-icon setel-metric-icon--solid-blue"><flux:icon.wrench class="size-6 text-white" /></span>
            </div>
        </div>
        <div class="setel-metric-card p-5">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-[var(--setel-text-muted)]">Activos</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ $this->activeWorkTypes }}</p>
                    <p class="mt-2 text-sm text-[var(--setel-text-muted)]">Disponibles para usar</p>
                </div>
                <span class="setel-metric-icon setel-metric-icon--solid-green"><flux:icon.check-circle class="size-6 text-white" /></span>
            </div>
        </div>
        <div class="setel-metric-card p-5 sm:col-span-2 xl:col-span-1">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-[var(--setel-text-muted)]">Inactivos</p>
                    <p class="mt-1 text-3xl font-bold tabular-nums text-[var(--setel-text)]">{{ $this->inactiveWorkTypes }}</p>
                    <p class="mt-2 text-sm text-[var(--setel-text-muted)]">Fuera de operacion</p>
                </div>
                <span class="setel-metric-icon setel-metric-icon--solid-red"><flux:icon.x-circle class="size-6 text-white" /></span>
            </div>
        </div>
    </div>

    <div class="setel-card overflow-hidden">
        <div class="flex flex-col gap-4 border-b border-[var(--setel-card-border)] px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h2 class="text-lg font-semibold setel-text-primary">Gestion de Tipos de Trabajo</h2>
                <p class="mt-0.5 text-sm text-[var(--setel-text-muted)]">Configura el catalogo de actividades tecnicas</p>
            </div>
            <button type="button" class="setel-btn-primary" wire:click="openCreate"><flux:icon.plus class="size-4" />Registrar Tipo</button>
        </div>

        <div class="flex flex-col gap-2 border-b border-[var(--setel-card-border)] px-5 py-4 sm:flex-row sm:items-center sm:gap-3">
            <div class="setel-input-icon-wrap isolate max-w-md min-w-0 flex-1 sm:min-w-[240px]">
                <span class="setel-input-icon"><flux:icon.search class="size-5" /></span>
                <input type="search" class="setel-input setel-input--has-icon" wire:model.live.debounce.400ms="search" placeholder="Buscar tipo de trabajo..." />
            </div>
            <div class="flex items-center gap-2 sm:ms-auto">
                <label class="text-sm font-medium text-[var(--setel-text-muted)]" for="work-types-per-page">Mostrar</label>
                <select id="work-types-per-page" class="setel-input w-auto min-w-[5.5rem]" wire:model.live="perPage">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>
            @if ($search !== '')
                <button type="button" class="setel-btn-secondary" wire:click="resetSearch">Limpiar</button>
            @endif
        </div>

        <div class="setel-table-wrap" wire:loading.class="opacity-60">
            <table class="setel-table">
                <thead>
                    <tr>
                        <th class="w-[48px] text-center">#</th>
                        <th>Proyecto</th>
                        <th>Nombre</th>
                        <th class="text-center">Trabajos</th>
                        <th class="w-[140px] text-center">Estado</th>
                        <th class="w-[140px] text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($this->workTypes as $workType)
                        <tr wire:key="work-type-row-{{ $workType->id }}">
                            <td class="text-center tabular-nums text-[var(--setel-text-muted)]">{{ $loop->iteration + ($this->workTypes->currentPage() - 1) * $this->workTypes->perPage() }}</td>
                            <td class="max-w-[12rem] truncate text-sm text-[var(--setel-text)]" title="{{ $workType->project->name ?? '' }}">{{ $workType->project->name ?? '—' }}</td>
                            <td class="font-semibold uppercase tracking-wide text-[var(--setel-text)]">{{ $workType->name }}</td>
                            <td class="text-center">
                                <span class="setel-users-count {{ $workType->works_count > 0 ? 'setel-users-count--has' : 'setel-users-count--empty' }}">
                                    <span class="setel-users-count__icon"><flux:icon.clipboard-document-list class="size-3.5" /></span>
                                    <span>{{ $workType->works_count }}</span>
                                </span>
                            </td>
                            <td class="align-middle">
                                <div class="flex items-center justify-center">
                                    @if ($workType->status)
                                        <span class="setel-badge setel-badge--user-active uppercase">ACTIVO</span>
                                    @else
                                        <span class="setel-badge setel-badge--user-inactive uppercase">INACTIVO</span>
                                    @endif
                                </div>
                            </td>
                            <td class="align-middle">
                                <div class="setel-row-actions">
                                    <button type="button" class="setel-icon-action setel-icon-action--edit" wire:click="openEdit({{ $workType->id }})"><flux:icon.pencil class="size-5" /></button>
                                    <button type="button" class="setel-icon-action setel-icon-action--delete" wire:click="confirmDelete({{ $workType->id }})" @disabled($workType->works_count > 0)><flux:icon.trash class="size-5 {{ $workType->works_count > 0 ? 'opacity-50' : '' }}" /></button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-[var(--setel-text-muted)]">No hay tipos de trabajo disponibles.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="border-t border-[var(--setel-card-border)] px-5 py-4">{{ $this->workTypes->links() }}</div>
    </div>

    <flux:modal wire:model.self="showModal" wire:close="closeModal" class="max-w-[560px] w-full !max-w-[560px]">
        <div class="space-y-4">
            <div class="flex items-start gap-3 pe-10">
                <span class="setel-modal__icon shrink-0 !static !flex"><flux:icon.wrench class="size-5" /></span>
                <div>
                    <flux:heading size="lg">{{ $isEditing ? 'Editar Tipo de Trabajo' : 'Registrar Tipo de Trabajo' }}</flux:heading>
                    <flux:subheading class="mt-1">Completa los datos del tipo de trabajo.</flux:subheading>
                </div>
            </div>
            <div class="space-y-4 border-t border-[var(--setel-card-border)] pt-4">
                <flux:field>
                    <flux:label>Proyecto</flux:label>
                    <select
                        class="setel-input w-full py-2 pe-8 disabled:opacity-60"
                        wire:model="form.project_id"
                        @disabled($isEditing && ! $canEditWorkTypeProject)
                    >
                        <option value="">Seleccione…</option>
                        @foreach ($this->projectsForSelect as $project)
                            <option value="{{ $project->id }}">{{ $project->name }}</option>
                        @endforeach
                    </select>
                    @if ($isEditing && ! $canEditWorkTypeProject)
                        <p class="mt-1 text-xs text-[var(--setel-text-muted)]">El proyecto no se puede cambiar mientras existan OT con este tipo.</p>
                    @endif
                    @error('form.project_id')<p class="mt-1 text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                </flux:field>
                <flux:field>
                    <flux:label>Nombre</flux:label>
                    <flux:input wire:model="form.name" placeholder="Ej: MANTENIMIENTO PREVENTIVO" />
                    @error('form.name')<p class="mt-1 text-sm font-medium text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                </flux:field>
                <flux:field>
                    <flux:label>Estado del tipo</flux:label>
                    <div class="rounded-lg border border-[var(--setel-card-border)] bg-[var(--setel-content-bg)] px-3 py-2.5">
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm font-semibold tracking-wide text-[var(--setel-text)]">{{ $this->form->status ? 'ACTIVO' : 'INACTIVO' }}</span>
                            <flux:switch wire:model.live="form.status" align="left" />
                        </div>
                    </div>
                </flux:field>
            </div>
            <div class="flex items-center justify-end gap-2 border-t border-[var(--setel-card-border)] pt-4">
                <flux:button type="button" variant="ghost" wire:click="closeModal">Cancelar</flux:button>
                <button type="button" class="setel-btn-primary" wire:click="save" wire:loading.attr="disabled" wire:target="save" wire:loading.class="setel-btn-loading">
                    <span wire:loading wire:target="save" class="inline-flex items-center gap-2"><span class="setel-btn-spinner"></span>Guardando...</span>
                    <span wire:loading.remove wire:target="save" class="inline-flex items-center gap-2"><flux:icon.save class="size-4" />Guardar</span>
                </button>
            </div>
        </div>
    </flux:modal>

    <flux:modal wire:model.self="showDeleteConfirm" wire:close="closeDeleteModal" class="max-w-sm !max-w-sm">
        <div class="space-y-4 text-center">
            <div class="mx-auto flex size-14 items-center justify-center rounded-full bg-red-100 text-red-600 dark:bg-red-950/50 dark:text-red-400">
                <flux:icon.exclamation-triangle class="size-8" />
            </div>
            <div>
                <flux:heading size="lg">¿Eliminar tipo de trabajo?</flux:heading>
                <flux:subheading class="mt-2">Esta accion no se puede deshacer.</flux:subheading>
            </div>
            <div class="flex items-center justify-center gap-2 border-t border-[var(--setel-card-border)] pt-4">
                <flux:button type="button" variant="ghost" wire:click="closeDeleteModal">Cancelar</flux:button>
                <flux:button type="button" variant="danger" wire:click="destroy">Eliminar</flux:button>
            </div>
        </div>
    </flux:modal>

    @include('components.catalog.toast', ['showToast' => $showToast, 'toastType' => $toastType, 'toastMessage' => $toastMessage, 'toastSeq' => $toastSeq])
</div>
