@php
    $pageTitle = $page?->title ?: 'Plana docente';
    $pageExcerpt = $page?->excerpt ?: 'Conoce a los profesionales que forman parte de nuestra comunidad educativa.';

    $storageUrl = static function ($value, $file = false) {
        if (blank($value)) {
            return null;
        }

        $path = $value;
        if ($file) {
            $decoded = json_decode($value, true);

            // Voyager almacena los campos de archivo como JSON. Cuando se
            // elimina un archivo, el valor puede quedar como "[]"; ese valor
            // debe tratarse como vacío y nunca como una ruta de Storage.
            if (json_last_error() === JSON_ERROR_NONE) {
                if (!is_array($decoded) || empty($decoded)) {
                    return null;
                }

                $path = data_get($decoded, '0.download_link');
                if (blank($path)) {
                    return null;
                }
            }
        }

        if (!is_string($path) || blank($path) || in_array(trim($path), ['[]', '{}', 'null'], true)) {
            return null;
        }

        if (\Illuminate\Support\Str::startsWith($path, ['http://', 'https://'])) {
            return $path;
        }

        $path = preg_replace('#^/?storage/#', '', $path);
        return asset('storage/' . ltrim($path, '/'));
    };
@endphp

<x-app-layout
    :meta-title="$pageTitle"
    :meta-description="$pageExcerpt"
    :meta-image="$page?->image"
>
    @push('styles')
        <link rel="stylesheet" href="{{ asset('cip/css/docentes.css') }}">
    @endpush

    <section class="page-hero page-hero--docentes" aria-label="Encabezado de página">
        <div class="page-hero__bg" aria-hidden="true">
            <div class="page-hero__bg-pattern"></div>
            <div class="page-hero__bg-shape page-hero__bg-shape--1"></div>
            <div class="page-hero__bg-shape page-hero__bg-shape--2"></div>
            <div class="page-hero__bg-lines"></div>
        </div>
        <div class="container page-hero__inner">
            <nav class="page-hero__breadcrumb" aria-label="Ruta de navegación">
                <a href="{{ route('welcome') }}"><i class="fa-solid fa-house" aria-hidden="true"></i> Inicio</a>
                <i class="fa-solid fa-chevron-right page-hero__breadcrumb-sep" aria-hidden="true"></i>
                <span class="page-hero__breadcrumb-current">{{ $pageTitle }}</span>
            </nav>
            <h1 class="page-hero__title"><em>{{ $pageTitle }}</em></h1>
            <p class="page-hero__subtitle">{{ $pageExcerpt }}</p>
        </div>
        <div class="page-hero__divider" aria-hidden="true"></div>
    </section>

    <section class="docentes" aria-labelledby="docentes-heading">
        <div class="container">
            <div class="docentes__heading">
                <span class="docentes__eyebrow">Comunidad educativa</span>
                <h2 id="docentes-heading">Nuestros docentes</h2>
                <p>Filtra el directorio para encontrar rápidamente al profesional que buscas.</p>
            </div>

            <form class="docentes__filters" method="GET" action="{{ route('docentes.index') }}">
                <div class="docentes__filters-header">
                    <div>
                        <i class="fa-solid fa-sliders" aria-hidden="true"></i>
                        <strong>Filtrar docentes</strong>
                    </div>
                    @if(request()->hasAny(['programa', 'cargo', 'tipocargo', 'rolcargo', 'contrato']))
                        <a href="{{ route('docentes.index') }}" class="docentes__clear">
                            <i class="fa-solid fa-rotate-left" aria-hidden="true"></i> Limpiar filtros
                        </a>
                    @endif
                </div>

                <div class="docentes__filter-grid">
                    <label>Programa
                        <select name="programa">
                            <option value="">Todos los programas</option>
                            @foreach($programas as $programa)
                                <option value="{{ $programa->id }}" @selected((string) request('programa') === (string) $programa->id)>{{ $programa->nombre }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Cargo
                        <select name="cargo">
                            <option value="">Todos los cargos</option>
                            @foreach($cargos as $cargo)
                                <option value="{{ $cargo->id }}" @selected((string) request('cargo') === (string) $cargo->id)>{{ $cargo->nombre }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Tipo de cargo
                        <select name="tipocargo">
                            <option value="">Todos los tipos</option>
                            @foreach($tiposCargo as $tipoCargo)
                                <option value="{{ $tipoCargo->id }}" @selected((string) request('tipocargo') === (string) $tipoCargo->id)>{{ $tipoCargo->nombre }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Rol del cargo
                        <select name="rolcargo">
                            <option value="">Todos los roles</option>
                            @foreach($rolesCargo as $rolCargo)
                                <option value="{{ $rolCargo->id }}" @selected((string) request('rolcargo') === (string) $rolCargo->id)>{{ $rolCargo->name }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Tipo de contrato
                        <select name="contrato">
                            <option value="">Todos los contratos</option>
                            @foreach($tiposContrato as $tipoContrato)
                                <option value="{{ $tipoContrato->id }}" @selected((string) request('contrato') === (string) $tipoContrato->id)>{{ $tipoContrato->nombre }}</option>
                            @endforeach
                        </select>
                    </label>
                    <button type="submit" class="docentes__submit">
                        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i> Aplicar filtros
                    </button>
                </div>
            </form>

            <div class="docentes__results" aria-live="polite">
                <strong>{{ $docentes->total() }}</strong> {{ $docentes->total() === 1 ? 'docente encontrado' : 'docentes encontrados' }}
            </div>

            @if($docentes->count())
                <div class="docentes__grid">
                    @foreach($docentes as $docente)
                        @php
                            $nombre = trim(collect([$docente->nombres, $docente->apellido_paterno, $docente->apellido_materno])->filter()->join(' '));
                            $fotoUrl = $storageUrl($docente->foto);
                            $cvArchivoUrl = $storageUrl($docente->cv, true);
                            $cvExternoUrl = filter_var($docente->cv_url, FILTER_VALIDATE_URL)
                                && \Illuminate\Support\Str::startsWith($docente->cv_url, ['http://', 'https://'])
                                    ? $docente->cv_url
                                    : null;
                            // Prioridad solicitada: archivo subido; en su
                            // ausencia, se muestra la URL externa.
                            $cvUrl = $cvArchivoUrl ?: $cvExternoUrl;
                            $cargaHorariaUrl = $storageUrl($docente->carga_horaria, true);
                        @endphp
                        <article class="docente-card">
                            <div class="docente-card__photo">
                                @if($fotoUrl)
                                    <img src="{{ $fotoUrl }}" alt="Fotografía de {{ $nombre }}" loading="lazy" width="420" height="460">
                                @else
                                    <div class="docente-card__placeholder" role="img" aria-label="Docente sin fotografía">
                                        <i class="fa-solid fa-user" aria-hidden="true"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="docente-card__body">
                                @if($docente->programaRelacion)
                                    <span class="docente-card__program">{{ $docente->programaRelacion->nombre }}</span>
                                @endif
                                <h3 class="docente-card__name">{{ $nombre ?: 'Docente' }}</h3>
                                <p class="docente-card__position">
                                    {{ $docente->cargoRelacion?->nombre ?: 'Docente' }}
                                </p>
                                @if($docente->tipoCargo || $docente->rolCargo || $docente->tipoContrato)
                                    <p class="docente-card__meta">
                                        {{ collect([$docente->tipoCargo?->nombre, $docente->rolCargo?->name, $docente->tipoContrato?->nombre])->filter()->join(' · ') }}
                                    </p>
                                @endif
                                <div class="docente-card__actions">
                                    @if($docente->tituloRelacion)
                                        <button type="button" class="docente-card__info-button" aria-label="Título: {{ $docente->tituloRelacion->nombre }}" data-tooltip="Título: {{ $docente->tituloRelacion->nombre }}">
                                            <i class="fa-solid fa-university" aria-hidden="true"></i>
                                        </button>
                                    @else
                                        <span class="is-disabled" role="img" aria-label="Título no registrado" data-tooltip="Título no registrado">
                                            <i class="fa-solid fa-university" aria-hidden="true"></i>
                                        </span>
                                    @endif
                                    @if($docente->gradoRelacion)
                                        <button type="button" class="docente-card__info-button" aria-label="Grado: {{ $docente->gradoRelacion->nombre }}" data-tooltip="Grado: {{ $docente->gradoRelacion->nombre }}">
                                            <i class="fa-solid fa-graduation-cap" aria-hidden="true"></i>
                                        </button>
                                    @else
                                        <span class="is-disabled" role="img" aria-label="Grado no registrado" data-tooltip="Grado no registrado">
                                            <i class="fa-solid fa-graduation-cap" aria-hidden="true"></i>
                                        </span>
                                    @endif
                                    @if($cvUrl)
                                        <a href="{{ $cvUrl }}" target="_blank" rel="noopener noreferrer" aria-label="Ver currículum de {{ $nombre }}" data-tooltip="Ver currículum">
                                            <i class="fa-solid fa-file-pdf" aria-hidden="true"></i>
                                        </a>
                                    @else
                                        <span class="is-disabled" role="img" aria-label="Currículum sin archivo para mostrar" data-tooltip="Sin archivo para mostrar">
                                            <i class="fa-solid fa-file-pdf" aria-hidden="true"></i>
                                        </span>
                                    @endif
                                    @if($cargaHorariaUrl)
                                        <a href="{{ $cargaHorariaUrl }}" target="_blank" rel="noopener noreferrer" aria-label="Ver carga horaria de {{ $nombre }}" data-tooltip="Ver carga horaria">
                                            <i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
                                        </a>
                                    @else
                                        <span class="is-disabled" role="img" aria-label="Carga horaria sin archivo para mostrar" data-tooltip="Sin archivo para mostrar">
                                            <i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
                                        </span>
                                    @endif
                                    @if(filled($docente->email))
                                        <button
                                            type="button"
                                            class="docente-card__email-toggle"
                                            aria-label="Mostrar correo de {{ $nombre }}"
                                            aria-expanded="false"
                                            aria-controls="docente-email-{{ $docente->id }}"
                                            data-email-toggle
                                            data-tooltip="Mostrar correo"
                                        >
                                            <i class="fa-solid fa-envelope" aria-hidden="true"></i>
                                        </button>
                                    @else
                                        <span class="is-disabled" role="img" aria-label="Correo no disponible" data-tooltip="Sin correo para mostrar">
                                            <i class="fa-solid fa-envelope" aria-hidden="true"></i>
                                        </span>
                                    @endif
                                </div>
                                @if(filled($docente->email))
                                    <div class="docente-card__email-popover" id="docente-email-{{ $docente->id }}" hidden>
                                        <span class="docente-card__email-address">{{ $docente->email }}</span>
                                        <button type="button" class="docente-card__copy-email" data-copy-email data-email="{{ $docente->email }}">
                                            <i class="fa-regular fa-copy" aria-hidden="true"></i>
                                            Copiar al portapapeles
                                        </button>
                                        <small class="docente-card__copy-status" aria-live="polite"></small>
                                    </div>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>

                @if($docentes->hasPages())
                    @php
                        $startPage = max(1, $docentes->currentPage() - 2);
                        $endPage = min($docentes->lastPage(), $docentes->currentPage() + 2);
                    @endphp
                    <nav class="docentes__pagination" aria-label="Paginación de docentes">
                        @if($docentes->onFirstPage())
                            <span class="docentes__page-link is-disabled" aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span>
                        @else
                            <a class="docentes__page-link" href="{{ $docentes->previousPageUrl() }}" rel="prev" aria-label="Página anterior"><i class="fa-solid fa-chevron-left"></i></a>
                        @endif

                        @foreach(range($startPage, $endPage) as $pageNumber)
                            <a class="docentes__page-link {{ $pageNumber === $docentes->currentPage() ? 'is-active' : '' }}"
                               href="{{ $docentes->url($pageNumber) }}"
                               @if($pageNumber === $docentes->currentPage()) aria-current="page" @endif>{{ $pageNumber }}</a>
                        @endforeach

                        @if($docentes->hasMorePages())
                            <a class="docentes__page-link" href="{{ $docentes->nextPageUrl() }}" rel="next" aria-label="Página siguiente"><i class="fa-solid fa-chevron-right"></i></a>
                        @else
                            <span class="docentes__page-link is-disabled" aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span>
                        @endif
                    </nav>
                @endif
            @else
                <div class="docentes__empty">
                    <i class="fa-solid fa-user-group" aria-hidden="true"></i>
                    <h3>No se encontraron docentes</h3>
                    <p>Prueba con otra combinación de filtros.</p>
                    <a href="{{ route('docentes.index') }}">Mostrar todos</a>
                </div>
            @endif
        </div>
    </section>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const emailToggles = document.querySelectorAll('[data-email-toggle]');

                const closeEmailPopovers = function (exceptToggle) {
                    emailToggles.forEach(function (toggle) {
                        if (toggle === exceptToggle) {
                            return;
                        }

                        const popover = document.getElementById(toggle.getAttribute('aria-controls'));
                        toggle.setAttribute('aria-expanded', 'false');
                        if (popover) {
                            popover.hidden = true;
                        }
                    });
                };

                emailToggles.forEach(function (toggle) {
                    toggle.addEventListener('click', function (event) {
                        event.stopPropagation();
                        const popover = document.getElementById(toggle.getAttribute('aria-controls'));
                        if (!popover) {
                            return;
                        }

                        const willOpen = popover.hidden;
                        closeEmailPopovers(toggle);
                        popover.hidden = !willOpen;
                        toggle.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
                    });
                });

                document.querySelectorAll('[data-copy-email]').forEach(function (button) {
                    button.addEventListener('click', async function (event) {
                        event.stopPropagation();
                        const email = button.dataset.email;
                        const status = button.parentElement.querySelector('.docente-card__copy-status');

                        try {
                            if (navigator.clipboard && window.isSecureContext) {
                                await navigator.clipboard.writeText(email);
                            } else {
                                const temporaryInput = document.createElement('textarea');
                                temporaryInput.value = email;
                                temporaryInput.setAttribute('readonly', '');
                                temporaryInput.style.position = 'fixed';
                                temporaryInput.style.opacity = '0';
                                document.body.appendChild(temporaryInput);
                                temporaryInput.select();
                                document.execCommand('copy');
                                temporaryInput.remove();
                            }

                            status.textContent = 'Correo copiado';
                            window.setTimeout(function () {
                                status.textContent = '';
                            }, 2500);
                        } catch (error) {
                            status.textContent = 'No se pudo copiar. Selecciona el correo.';
                        }
                    });
                });

                document.addEventListener('click', function (event) {
                    if (!event.target.closest('.docente-card__email-popover')) {
                        closeEmailPopovers();
                    }
                });

                document.addEventListener('keydown', function (event) {
                    if (event.key === 'Escape') {
                        closeEmailPopovers();
                    }
                });
            });
        </script>
    @endpush
</x-app-layout>