@extends('layouts.app-layout')

@section('title', 'Funcionarios - ' . config('app.name'))
@section('navbar_suffix', 'Funcionarios')

@section('content')
    @php
        $user = auth()->user();
        $funcionarioActual = $user->funcionario ?? null;
        // Siempre volver al dashboard de funcionario para evitar loops de back a la misma vista
        $volverUrl = route('funcionario.dashboard');
    @endphp

    <div class="container py-4">

        <div class="d-flex align-items-center justify-content-between mb-4">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ $volverUrl }}"
                    class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-36"
                    title="Volver">
                    <i class="bi bi-arrow-left"></i>
                </a>
            </div>

            {{-- Nuevo --}}
            <a href="{{ route('funcionarios.create') }}"
                class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-36"
                title="Nuevo funcionario">
                <i class="bi bi-plus"></i>
            </a>
        </div>

        <div class="row justify-content-center mb-3">
            <div class="col-12 col-lg-8">
                <div class="d-flex gap-2">
                    <form class="flex-grow-1" method="GET" action="{{ route('funcionarios.index') }}" id="filtro-form">
                        <input type="hidden" name="filtro" value="{{ $filtro ?? 'activos' }}">

                        <div class="input-group rounded-pill overflow-hidden border bg-white shadow-sm">
                            <input type="search" name="q" value="{{ $busqueda ?? '' }}"
                                class="form-control border-0 ps-4" placeholder="Buscar por nombre, apellido, cédula"
                                id="buscador-funcionarios" autocomplete="off">
                            <span class="input-group-text bg-white border-0">
                                <i class="bi bi-search text-muted"></i>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @if (session('success') || session('error') || session('warning'))
            <div id="funcionarios-toasts" class="position-fixed top-0 end-0 p-3 d-grid gap-2"
                style="z-index:1080; max-width: 380px;">
                @if (session('success'))
                    <div
                        class="alert alert-success border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                        <i class="bi bi-check-circle-fill"></i>
                        <span class="small fw-semibold">{{ session('success') }}</span>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"
                            aria-label="Close"></button>
                    </div>
                @endif

                @if (session('error'))
                    <div
                        class="alert alert-danger border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                        <i class="bi bi-exclamation-octagon-fill"></i>
                        <span class="small fw-semibold">{{ session('error') }}</span>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"
                            aria-label="Close"></button>
                    </div>
                @endif

                @if (session('warning'))
                    <div
                        class="alert alert-warning border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <span class="small fw-semibold">{{ session('warning') }}</span>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"
                            aria-label="Close"></button>
                    </div>
                @endif
            </div>
        @endif

        @php $filtroActual = $filtro ?? 'activos'; @endphp
        <div class="row justify-content-center mb-4">
            <div class="col-12 col-lg-8">
                <div class="nav nav-pills nav-fill bg-body-tertiary p-1 rounded-pill">
                    <a href="{{ route('funcionarios.index', ['filtro' => 'todos', 'q' => $busqueda]) }}"
                        class="nav-link rounded-pill d-flex align-items-center justify-content-center gap-1 {{ $filtroActual === 'todos' ? 'active fw-semibold' : '' }}">
                        <span>Todos</span>
                        <span
                            class="badge rounded-pill px-2 {{ $filtroActual === 'todos' ? 'bg-white text-primary' : 'bg-light text-secondary border' }}">
                            {{ $total }}
                        </span>
                    </a>
                    <a href="{{ route('funcionarios.index', ['filtro' => 'activos', 'q' => $busqueda]) }}"
                        class="nav-link rounded-pill d-flex align-items-center justify-content-center gap-1 {{ $filtroActual === 'activos' ? 'active fw-semibold' : '' }}">
                        <span>Activos</span>
                        <span
                            class="badge rounded-pill px-2 {{ $filtroActual === 'activos' ? 'bg-white text-primary' : 'bg-light text-secondary border' }}">
                            {{ $activosCount }}
                        </span>
                    </a>
                    <a href="{{ route('funcionarios.index', ['filtro' => 'inactivos', 'q' => $busqueda]) }}"
                        class="nav-link rounded-pill d-flex align-items-center justify-content-center gap-1 {{ $filtroActual === 'inactivos' ? 'active fw-semibold' : '' }}">
                        <span>Inactivos</span>
                        <span
                            class="badge rounded-pill px-2 {{ $filtroActual === 'inactivos' ? 'bg-white text-primary' : 'bg-light text-secondary border' }}">
                            {{ $inactivosCount }}
                        </span>
                    </a>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <div class="d-grid gap-3">
                    @forelse($funcionarios as $funcionario)
                        @php
                            $nombre = $funcionario->user->nombre ?? '';
                            $apellido = $funcionario->user->apellido ?? '';
                            $cedula = $funcionario->user->cedula ?? '—';
                            $email = $funcionario->user->email ?? '—';
                            $telefono = $funcionario->user->telefono ?? '—';
                            $iniciales = mb_substr($nombre, 0, 1) . mb_substr($apellido, 0, 1);

                            $estadoLabel = 'Inactivo';
                            $estadoClass = 'bg-warning-subtle text-warning-emphasis';
                            $estadoRaw = $funcionario->estado->value ?? $funcionario->estado;
                            if ($funcionario->trashed()) {
                                $estadoLabel = 'Eliminado';
                                $estadoClass = 'bg-danger-subtle text-danger-emphasis';
                            } elseif ($estadoRaw === 'activo') {
                                $estadoLabel = 'Activo';
                                $estadoClass = 'bg-success-subtle text-success-emphasis';
                            }
                            $puedeGestionarActivo = !$funcionario->trashed() && $estadoRaw === 'activo';
                            $puedeRestaurar = $funcionario->trashed() || $estadoRaw === 'inactivo';

                            $busquedaRow = strtolower(trim("$nombre $apellido $cedula $email $telefono"));
                        @endphp

                        <div class="card shadow-sm row-funcionario position-relative" data-busqueda="{{ $busquedaRow }}">
                            <div
                                class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3">
                                {{-- Avatar --}}
                                <div
                                    class="rounded-circle bg-body-tertiary d-flex align-items-center justify-content-center fw-semibold ui-avatar-42">
                                    {{ $iniciales }}
                                </div>

                                {{-- Info --}}
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <a href="{{ route('funcionarios.show', $funcionario) }}"
                                            class="fw-semibold text-decoration-none text-reset">
                                            {{ $nombre }} {{ $apellido }}
                                        </a>

                                        <span class="badge text-bg-light border">
                                            {{ $funcionario->rol->label() }}
                                        </span>

                                        <span class="badge {{ $estadoClass }}">
                                            {{ $estadoLabel }}
                                        </span>
                                    </div>

                                    <div class="text-muted small d-flex flex-wrap gap-3">
                                        <span class="d-inline-flex align-items-center text-break">
                                            <i class="bi bi-credit-card-2-front me-1"></i> {{ $cedula }}
                                        </span>
                                        <span class="d-inline-flex align-items-center text-break">
                                            <i class="bi bi-envelope me-1"></i> {{ $email }}
                                        </span>
                                        <span class="d-inline-flex align-items-center text-break">
                                            <i class="bi bi-telephone me-1"></i> {{ $telefono }}
                                        </span>
                                    </div>
                                </div>

                                {{-- Acciones --}}
                                <div
                                    class="d-flex align-items-center gap-2 mt-2 mt-md-0 ms-md-auto position-relative ui-z-2 funcionario-row-actions">
                                    <a href="{{ route('funcionarios.show', $funcionario) }}"
                                        class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                        title="Ver">
                                        <i class="bi bi-eye text-primary"></i>
                                    </a>

                                    @if ($puedeGestionarActivo)
                                        <a href="{{ route('funcionarios.edit', $funcionario) }}"
                                            class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                            title="Editar">
                                            <i class="bi bi-pencil text-secondary"></i>
                                        </a>

                                        <button type="button"
                                            class="btn btn-outline-danger btn-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                            title="Eliminar" data-bs-toggle="modal"
                                            data-bs-target="#deleteModal{{ $funcionario->id }}">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    @endif

                                    @if ($puedeRestaurar)
                                        <button type="button"
                                            class="btn btn-outline-success btn-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-34"
                                            title="Restaurar"
                                            onclick="document.getElementById('restore-form-{{ $funcionario->id }}').submit()">
                                            <i class="bi bi-arrow-counterclockwise"></i>
                                        </button>
                                    @endif
                                </div>

                                <form id="restore-form-{{ $funcionario->id }}"
                                    action="{{ route('funcionarios.restore', $funcionario) }}" method="POST"
                                    class="d-none">
                                    @csrf
                                    @method('PATCH')
                                </form>

                            </div>
                        </div>

                        {{-- Modal de confirmación de eliminación --}}
                        @if ($puedeGestionarActivo)
                            <x-delete-confirmation-modal :id="$funcionario->id" title="Confirmar desactivación de funcionario"
                                :entity-name="$nombre . ' ' . $apellido" :entity-data="[
                                    'iniciales' => $iniciales,
                                    'subtitle' => 'CI: ' . $cedula,
                                    'details' => [
                                        '<strong>Rol:</strong> ' . $funcionario->rol->label(),
                                        '<i class=\'bi bi-envelope me-1\'></i> ' . $email,
                                        '<i class=\'bi bi-telephone me-1\'></i> ' . $telefono,
                                    ],
                                ]"
                                warning-message="Esta acción desactivará el perfil del funcionario. Los datos se conservarán en el sistema y podrán ser reactivados posteriormente."
                                :route="route('funcionarios.destroy', $funcionario)" button-text="Desactivar funcionario"
                                :show-avatar="true" />
                        @endif

                    @empty
                        <div class="text-center text-muted py-5">
                            No hay funcionarios registrados.
                        </div>
                    @endforelse

                </div>

                @if ($funcionarios instanceof \Illuminate\Pagination\LengthAwarePaginator && $funcionarios->hasPages())
                    <div class="d-flex flex-column align-items-center gap-1 mt-4">
                        <div class="small text-muted">
                            Mostrando {{ $funcionarios->firstItem() }}–{{ $funcionarios->lastItem() }} de
                            {{ $funcionarios->total() }} resultados
                        </div>
                        {{ $funcionarios->withQueryString()->links('pagination::simple-bootstrap-5') }}
                    </div>
                @endif

            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <style>
        @media (max-width: 767.98px) {
            .funcionario-row-actions {
                width: 100%;
                justify-content: flex-end;
            }
        }
    </style>

    <script>
        (() => {
            const toasts = Array.from(document.querySelectorAll('#funcionarios-toasts .js-auto-toast'));
            if (!toasts.length) return;

            toasts.forEach((toast, index) => {
                setTimeout(() => {
                    toast.style.transition = 'opacity .35s ease';
                    toast.classList.add('opacity-0');
                    setTimeout(() => toast.remove(), 360);
                }, 2200 + (index * 250));
            });
        })();

        (() => {
            const input = document.getElementById('buscador-funcionarios');
            const form = document.getElementById('filtro-form');
            if (!input) return;

            const rows = Array.from(document.querySelectorAll('.row-funcionario'));
            const hadServerSearch = input.value.trim().length > 0;
            const normalize = (value) => (value || '')
                .toLowerCase()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '');

            const filter = () => {
                const term = normalize(input.value.trim());
                rows.forEach(row => {
                    const hay = normalize(row.dataset.busqueda || '').includes(term);
                    row.style.display = hay ? '' : 'none';
                });
            };

            input.addEventListener('input', filter, {
                passive: true
            });

            input.addEventListener('search', () => {
                if (!input.value.trim() && hadServerSearch && form) {
                    form.requestSubmit();
                }
            });
        })();
    </script>
@endpush