@extends('layouts.app-layout')

@section('title', 'Detalle de funcionario')

@section('content')
    @php
        $isOwnProfile = auth()->check() && auth()->user()->funcionario?->id === $funcionario->id;
        $backUrl = $isOwnProfile ? route('funcionario.dashboard') : route('funcionarios.index');

        $estadoRaw = $funcionario->estado->value ?? $funcionario->estado;
        $estadoLabel = 'Inactivo';
        $estadoClass = 'bg-warning-subtle text-warning-emphasis';

        if ($funcionario->trashed()) {
            $estadoLabel = 'Eliminado';
            $estadoClass = 'bg-danger-subtle text-danger-emphasis';
        } elseif ($estadoRaw === 'activo') {
            $estadoLabel = 'Activo';
            $estadoClass = 'bg-success-subtle text-success-emphasis';
        }

        $puedeDesactivar = !$funcionario->trashed() && $estadoRaw === 'activo';
        $puedeRestaurar = $funcionario->trashed() || $estadoRaw === 'inactivo';
        $puedeEditar = !$funcionario->trashed();

        $nombre = trim(($funcionario->user->nombre ?? '') . ' ' . ($funcionario->user->apellido ?? ''));
        $iniciales = mb_strtoupper(
            mb_substr($funcionario->user->nombre ?? '', 0, 1) . mb_substr($funcionario->user->apellido ?? '', 0, 1),
        );
        $rolLabel = $funcionario->rol?->label() ?? '—';
        $horarioEntrada = $funcionario->horario_entrada ? substr((string) $funcionario->horario_entrada, 0, 5) : null;
        $horarioSalida = $funcionario->horario_salida ? substr((string) $funcionario->horario_salida, 0, 5) : null;
        $horarioAtencion = match (true) {
            $horarioEntrada && $horarioSalida => $horarioEntrada . ' - ' . $horarioSalida,
            $horarioEntrada => $horarioEntrada,
            $horarioSalida => $horarioSalida,
            default => '—',
        };
    @endphp

    <style>
        .funcionario-show {
            --fs-blue: #0d6efd;
            --fs-blue-dark: #0a58ca;
            --fs-orange: #f97316;
            --fs-ink: #1f2937;
            --fs-muted: #6b7280;
        }

        .funcionario-show .fs-hero {
            background: linear-gradient(120deg, var(--fs-blue) 0%, var(--fs-blue-dark) 60%, var(--fs-orange) 160%);
            border: 0;
            border-radius: 1.25rem;
            box-shadow: 0 18px 45px rgba(13, 110, 253, 0.22);
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        .funcionario-show .fs-hero::after {
            background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 68%);
            content: "";
            height: 220px;
            position: absolute;
            right: -80px;
            top: -95px;
            width: 220px;
        }

        .funcionario-show .fs-avatar {
            align-items: center;
            background: rgba(255, 255, 255, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 50%;
            display: inline-flex;
            font-size: 1.3rem;
            font-weight: 700;
            height: 64px;
            justify-content: center;
            width: 64px;
        }

        .funcionario-show .fs-icon-btn {
            align-items: center;
            border-radius: 50%;
            display: inline-flex;
            height: 38px;
            justify-content: center;
            padding: 0;
            width: 38px;
        }

        .funcionario-show .fs-icon-btn-back {
            border-color: rgba(255, 255, 255, 0.55);
            color: #fff;
        }

        .funcionario-show .fs-icon-btn-back:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: #fff;
            color: #fff;
        }

        .funcionario-show .fs-icon-btn-edit {
            color: var(--fs-blue-dark);
        }

        .funcionario-show .fs-icon-btn-edit:hover {
            background: #fff;
            color: var(--fs-blue-dark);
        }

        .funcionario-show .fs-icon-btn-delete {
            background: #fff;
            border-color: #fff;
            color: #dc3545;
        }

        .funcionario-show .fs-icon-btn-delete:hover {
            background: #fff;
            border-color: #fff;
            color: #b02a37;
        }

        .funcionario-show .fs-panel {
            border: 0;
            border-radius: 1rem;
            box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
        }

        .funcionario-show .fs-panel-title {
            color: var(--fs-ink);
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .funcionario-show .fs-info-label {
            color: var(--fs-muted);
            font-size: 0.76rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .funcionario-show .fs-info-value {
            color: var(--fs-ink);
            font-weight: 600;
        }

        .funcionario-show .fs-fade {
            animation: fsFadeUp .32s ease-out both;
        }

        .funcionario-show .fs-fade-delay {
            animation-delay: .08s;
        }

        .funcionario-show .fs-fade-delay-2 {
            animation-delay: .16s;
        }

        @keyframes fsFadeUp {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .funcionario-show .fs-actions form {
                flex: 1 1 100%;
            }

            .funcionario-show .fs-actions form .btn {
                width: 100%;
            }
        }
    </style>

    <div class="container py-4 funcionario-show">
        @if (session('success'))
            <div class="alert alert-success border-0 shadow-sm mb-3 fs-fade" role="alert">
                {{ session('success') }}
            </div>
        @endif

        @if ($funcionario->trashed())
            <div class="alert alert-warning border-0 shadow-sm mb-3 fs-fade" role="alert">
                Este funcionario está inactivo/eliminado. Puedes reactivarlo para habilitarlo nuevamente.
            </div>
        @endif

        <div class="fs-hero p-4 p-lg-5 mb-4 fs-fade">
            <div class="row align-items-center g-4 position-relative" style="z-index:1;">
                <div class="col-lg-8">
                    <div class="d-flex align-items-start gap-3">
                        <span class="fs-avatar">{{ $iniciales ?: 'F' }}</span>
                        <div>
                            <p class="text-white-50 mb-1 small text-uppercase" style="letter-spacing:.08em;">Perfil interno
                            </p>
                            <h1 class="h3 mb-2 fw-bold">{{ $nombre ?: 'Funcionario' }}</h1>
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <span class="badge text-bg-light border">{{ $rolLabel }}</span>
                                <span class="badge {{ $estadoClass }}">{{ $estadoLabel }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="d-flex flex-wrap justify-content-lg-end gap-2 fs-actions">
                        <a href="{{ $backUrl }}" class="btn btn-outline-light fs-icon-btn fs-icon-btn-back"
                            title="Volver" aria-label="Volver">
                            <i class="bi bi-arrow-left"></i>
                        </a>

                        @if ($puedeEditar)
                            <a href="{{ route('funcionarios.edit', $funcionario) }}"
                                class="btn btn-light fs-icon-btn fs-icon-btn-edit" title="Editar" aria-label="Editar">
                                <i class="bi bi-pencil"></i>
                            </a>
                        @endif

                        @if ($puedeDesactivar)
                            <button type="button" class="btn btn-light fs-icon-btn fs-icon-btn-delete"
                                data-bs-toggle="modal" data-bs-target="#deleteModal{{ $funcionario->id }}" title="Eliminar"
                                aria-label="Eliminar">
                                <i class="bi bi-trash"></i>
                            </button>
                        @endif

                        @if ($puedeRestaurar)
                            <form action="{{ route('funcionarios.restore', $funcionario) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn btn-success btn-sm px-3">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i> Reactivar
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-12 col-lg-7 fs-fade fs-fade-delay">
                <div class="card fs-panel h-100">
                    <div class="card-body p-4">
                        <h2 class="fs-panel-title mb-4">Datos personales</h2>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Email</div>
                                <div class="fs-info-value">{{ $funcionario->user->email }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Cédula</div>
                                <div class="fs-info-value">{{ $funcionario->user->cedula ?? '—' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Teléfono</div>
                                <div class="fs-info-value">{{ $funcionario->user->telefono ?? '—' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fs-info-label mb-1">Centro/Unidad</div>
                                <div class="fs-info-value">{{ $funcionario->centro_unidad ?? '—' }}</div>
                            </div>
                            <div class="col-12">
                                <button type="button" class="btn btn-link p-0" data-bs-toggle="modal"
                                    data-bs-target="#privacyPolicyModal">
                                    Ver Política de privacidad
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-5 fs-fade fs-fade-delay-2">
                <div class="card fs-panel mb-4">
                    <div class="card-body p-4">
                        <h2 class="fs-panel-title mb-4">Ficha del cargo</h2>

                        <div class="d-grid gap-3">
                            <div>
                                <div class="fs-info-label mb-1">Rol</div>
                                <div class="fs-info-value">{{ $rolLabel }}</div>
                            </div>
                            <div>
                                <div class="fs-info-label mb-1">Estado</div>
                                <div><span class="badge {{ $estadoClass }}">{{ $estadoLabel }}</span></div>
                            </div>
                            <div>
                                <div class="fs-info-label mb-1">Horario de atención</div>
                                <div class="fs-info-value">{{ $horarioAtencion }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card fs-panel">
                    <div class="card-body p-4">
                        <h2 class="fs-panel-title mb-4">Trazabilidad</h2>

                        <div class="d-grid gap-3">
                            <div>
                                <div class="fs-info-label mb-1">Creado</div>
                                <div class="fs-info-value">{{ $funcionario->created_at->format('d/m/Y H:i') }}</div>
                            </div>
                            <div>
                                <div class="fs-info-label mb-1">Última actualización</div>
                                <div class="fs-info-value">{{ $funcionario->updated_at->format('d/m/Y H:i') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    @include('partials.privacy-policy-modal')

    @if ($puedeDesactivar)
        <x-delete-confirmation-modal :id="$funcionario->id" title="Confirmar desactivación de funcionario" :entity-name="$funcionario->user->nombre . ' ' . $funcionario->user->apellido"
            :entity-data="[
                'subtitle' => 'CI: ' . ($funcionario->user->cedula ?? '—'),
                'details' => [
                    '<strong>Rol:</strong> ' . $funcionario->rol->label(),
                    '<strong>Centro/Unidad:</strong> ' . ($funcionario->centro_unidad ?? '—'),
                    '<i class=\'bi bi-envelope me-1\'></i> ' . $funcionario->user->email,
                    '<i class=\'bi bi-telephone me-1\'></i> ' . ($funcionario->user->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="false" />
    @endif
@endsection