@extends('layouts.app-layout')

@section('title', 'Unidades de atencion - ' . config('app.name'))
@section('navbar_suffix', 'Unidades')

@section('content')
    @php
        use App\Enums\CantidadPersonasEnum;
        use App\Enums\EstadoFormalizacionEnum;
        use App\Enums\FuncionarioRolEnum;
        use App\Enums\RolEnEmpresaEnum;
        use App\Enums\UserStatusEnum;

        $user = auth()->user();
        $hasContacto = $user?->contacto && $user->contacto->estado === UserStatusEnum::ACTIVO;
        $hasFuncionario = $user?->funcionario && $user->funcionario->estado === UserStatusEnum::ACTIVO;
        $esFuncionarioAdmin = $hasFuncionario && $user->funcionario->rol === FuncionarioRolEnum::ADMIN;

        $dashboardRoute = $hasFuncionario
            ? route('funcionario.dashboard')
            : ($hasContacto ? route('contacto.dashboard') : route('login'));
    @endphp

    <div class="container py-3">
        <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ $dashboardRoute }}"
                   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>
                    <p class="text-muted small mb-1 text-uppercase ui-letter-08">Unidades</p>
                    <h1 class="h4 fw-bold mb-0">Unidades de atencion</h1>
                </div>
            </div>
            @if($hasFuncionario)
                <a href="{{ route('registro.contacto.iniciar') }}"
                   class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 ui-icon-btn-36"
                   title="Crear unidad">
                    <i class="bi bi-plus-lg"></i>
                </a>
            @endif
        </div>

        <div class="row justify-content-center mb-3">
            <div class="col-12 col-lg-8">
                <form method="GET" action="{{ route('unidades-atencion.index') }}" id="filtro-unidades-form">
                    <div class="input-group rounded-pill overflow-hidden border bg-white shadow-sm">
                        <input
                            type="search"
                            name="q"
                            value="{{ request('q') ?? '' }}"
                            class="form-control border-0 ps-4"
                            placeholder="Buscar por nombre, estado o cantidad"
                            id="buscador-unidades"
                            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 class="row justify-content-center">
            <div class="col-12 col-lg-8">
                @if($unidades->isEmpty())
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-muted">No hay unidades de atencion registradas.</div>
                    </div>
                @else
                    <div class="d-grid gap-3">
                        @foreach($unidades as $unidad)
                            @php
                                $cantidadLabel = CantidadPersonasEnum::tryFrom($unidad->cantidad_personas ?? '')?->label();
                                $estadoEnum = EstadoFormalizacionEnum::tryFrom($unidad->estado_formalizacion ?? '');
                                $estado = $estadoEnum?->label() ?? '—';
                                $cantidad = $cantidadLabel ?? '—';
                                $creacion = $unidad->created_at?->format('d/m/Y') ?? '—';

                                $estadoClass = match ($estadoEnum) {
                                    EstadoFormalizacionEnum::FORMALIZADO => 'bg-success-subtle text-success-emphasis',
                                    EstadoFormalizacionEnum::EN_PROCESO => 'bg-warning-subtle text-warning-emphasis',
                                    default => 'bg-secondary-subtle text-secondary-emphasis',
                                };

                                $esTitular = false;
                                if ($hasContacto && isset($unidad->pivot?->rol_en_empresa)) {
                                    $rol = $unidad->pivot->rol_en_empresa;
                                    $esTitular = $rol instanceof RolEnEmpresaEnum
                                        ? $rol === RolEnEmpresaEnum::TITULAR
                                        : $rol === RolEnEmpresaEnum::TITULAR->value;
                                }

                                $busquedaRow = mb_strtolower(trim(
                                    ($unidad->nombre_comercial ?? '') . ' ' .
                                    $estado . ' ' .
                                    $cantidad . ' ' .
                                    $creacion
                                ));
                            @endphp

                            <div class="card shadow-sm row-unidad 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">
                                    <a href="{{ route('unidades-atencion.show', $unidad) }}"
                                       class="stretched-link"
                                       aria-label="Ver unidad"></a>

                                    <div class="rounded-circle bg-primary-subtle text-primary d-flex align-items-center justify-content-center fw-semibold ui-avatar-42">
                                        <i class="bi bi-buildings"></i>
                                    </div>

                                    <div class="flex-grow-1">
                                        <div class="d-flex align-items-center gap-2 flex-wrap">
                                            <div class="fw-semibold">{{ $unidad->nombre_comercial }}</div>
                                            <span class="badge {{ $estadoClass }}">{{ $estado }}</span>
                                            <span class="badge bg-light text-dark border">{{ $cantidad }}</span>
                                        </div>
                                        <div class="text-muted small mt-1">
                                            Creacion: {{ $creacion }}
                                        </div>
                                    </div>

                                    <div class="d-flex align-items-center gap-2 mt-2 mt-md-0 ms-auto position-relative ui-z-2">
                                        <a href="{{ route('unidades-atencion.show', $unidad) }}"
                                           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 detalle">
                                            <i class="bi bi-eye text-primary"></i>
                                        </a>

                                        @if($esTitular || $esFuncionarioAdmin)
                                            <a href="{{ route('unidades-atencion.edit', $unidad) }}"
                                               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="Gestionar">
                                                <i class="bi bi-pencil text-primary"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

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

@push('scripts')
    <script>
        (() => {
            const input = document.getElementById('buscador-unidades');
            const form = document.getElementById('filtro-unidades-form');
            if (!input) return;

            const rows = Array.from(document.querySelectorAll('.row-unidad'));
            const hadServerSearch = input.value.trim().length > 0;

            const filter = () => {
                const term = input.value.trim().toLowerCase();
                rows.forEach(row => {
                    const hay = (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