@extends('layouts.landing_pages.escolas-climatizadas.theme')
@section("title", env("APP_NAME") . " - " . __("Escolas Municipais — Climatização"))

@section('content')
    <div id="mapa-container"
         data-endpoint="{{ route('servicos.escolasClimatizadas.dados') }}"
         data-label-details="{{ __('Detalhes') }}"
         data-label-locate="{{ __('Minha localização') }}"
         data-label-zoom-in="{{ __('Aproximar') }}"
         data-label-zoom-out="{{ __('Afastar') }}"
         data-label-reset="{{ __('Recentrar mapa') }}"
         data-label-total="{{ __('Total no mapa:') }}"
         data-status-climatizada="{{ __('Climatizada') }}"
         data-status-andamento="{{ __('Em andamento') }}"
         data-status-nao="{{ __('Pendente') }}"
         aria-label="{{ __('Mapa interativo das escolas municipais por status de climatização') }}">

        <div id="map" class="escolas-climatizadas-map" role="application"></div>

        <div id="status-chip" aria-live="polite">
            <i class="fa-solid fa-school" aria-hidden="true"></i>
            <span class="me-1">{{ __("Total no mapa:") }}</span>
            <strong id="escolasClimatizadasCount">0</strong>
        </div>

        <nav id="barra-acoes" aria-label="{{ __('Ações do mapa') }}">
            <button class="acao-btn" id="btn-localizar" type="button"
                    title="{{ __('Minha localização') }}" aria-label="{{ __('Minha localização') }}">
                <i class="fa-solid fa-location-crosshairs" aria-hidden="true"></i>
            </button>

            <button class="acao-btn" id="btn-zoom-in" type="button"
                    title="{{ __('Aproximar') }}" aria-label="{{ __('Aproximar') }}">
                <i class="fa-solid fa-plus" aria-hidden="true"></i>
            </button>

            <button class="acao-btn acao-btn--destaque" id="btn-lista" type="button"
                    title="{{ __('Lista de escolas') }}" aria-label="{{ __('Lista de escolas') }}">
                <i class="fa-solid fa-list-ul" aria-hidden="true"></i>
            </button>

            <button class="acao-btn" id="btn-zoom-out" type="button"
                    title="{{ __('Afastar') }}" aria-label="{{ __('Afastar') }}">
                <i class="fa-solid fa-minus" aria-hidden="true"></i>
            </button>

            <button class="acao-btn" id="btn-reset" type="button"
                    title="{{ __('Recentrar mapa') }}" aria-label="{{ __('Recentrar mapa') }}">
                <i class="fa-solid fa-map" aria-hidden="true"></i>
            </button>
        </nav>
    </div>

    {{-- ============================================================
         PAINEL LISTA DE ESCOLAS
    ============================================================ --}}
    <div id="escolas-lista-painel" hidden role="dialog"
         aria-label="{{ __('Lista de escolas') }}" aria-modal="true">
        <div id="escolas-lista-header">
            <span class="escolas-lista-titulo">
                <i class="fa-solid fa-school" aria-hidden="true"></i>
                {{ __('Escolas Municipais') }}
            </span>
            <button type="button" id="btn-fechar-lista" aria-label="{{ __('Fechar lista') }}">
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
            </button>
        </div>
        <div id="escolas-lista-busca-wrap">
            <input type="search" id="escolas-lista-busca"
                   placeholder="{{ __('Buscar pelo nome ou bairro...') }}"
                   autocomplete="off"
                   aria-label="{{ __('Buscar escola') }}">
        </div>
        <ul id="escolas-lista-items" role="list" aria-label="{{ __('Resultados da busca') }}"></ul>
    </div>
    <div id="escolas-lista-backdrop" hidden aria-hidden="true"></div>

    {{-- ============================================================
         MODALS (mesmo conteúdo já usado em /servicos/escolas-municipais)
    ============================================================ --}}
    @foreach($escolas as $escola)
        @php
            $bairroLabel = optional($escola->endereco)->bairro ?? __('Não informado');
            $logradouro = optional($escola->endereco)->logradouro ?? __('Não informado');
            $numero = optional($escola->endereco)->numero ?? __('S/N');
            $cep = optional($escola->endereco)->cep ?? null;
            $latitude = optional($escola->endereco)->latitude;
            $longitude = optional($escola->endereco)->longitude;
        @endphp

        @php
            $clima = $escola->climatizacao ?? 'PENDENTE';
            $climaBadge = match($clima) {
                'CLIMATIZADA'  => ['label' => __('Climatizada'),               'class' => 'badge-climatizada',  'icon' => 'fa-snowflake', 'text' => 'text-success'],
                'EM_ANDAMENTO' => ['label' => __('Climatização em andamento'), 'class' => 'badge-em-andamento', 'icon' => 'fa-spinner',  'text' => 'text-info'],
                default        => ['label' => __('Não climatizada'),           'class' => 'badge-pendente',     'icon' => 'fa-clock',    'text' => 'text-secondary'],
            };
        @endphp

        <div class="modal fade"
             id="modalEscolaMunicipal{{ $escola->id }}"
             tabindex="-1"
             aria-labelledby="modalLabel{{ $escola->id }}"
             aria-hidden="true">
            <div class="modal-dialog modal-xl modal-fullscreen-md-down">
                <div class="modal-content shadow-lg border-0 overflow-hidden">

                    <div class="position-relative">
                        <img src="{{ $escola->foto_url }}"
                             class="modal-escola-foto"
                             alt="{{ $escola->nome }}"
                             onerror="this.onerror=null;this.src='{{ asset('pmar/assets/img/icons/escola.png') }}'">

                        <div class="position-absolute top-0 start-0 w-100 h-100 modal-escola-header-overlay"></div>

                        <button type="button"
                                class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
                                data-bs-dismiss="modal"
                                aria-label="{{ __('Fechar') }}"></button>

                        <div class="position-absolute bottom-0 start-0 p-4 text-white">
                            <div class="d-flex flex-wrap gap-2 mb-2">
                                <span class="badge bg-primary">{{ $escola->tipoUnidadeEscolar }}</span>
                                @if($escola->possuiRecursosMultifuncionais)
                                    <span class="badge badge-recursos">
                                        <i class="fas fa-universal-access me-1"></i>{{ __("Recursos Especiais") }}
                                    </span>
                                @endif
                                <span class="badge {{ $climaBadge['class'] }}">
                                    <i class="fas {{ $climaBadge['icon'] }} me-1"></i>{{ $climaBadge['label'] }}
                                </span>
                            </div>
                            <h2 class="fw-bold text-shadow mb-1" id="modalLabel{{ $escola->id }}">
                                {{ $escola->nome }}
                            </h2>
                            <p class="mb-0 text-white text-shadow">
                                <i class="fas fa-map-marker-alt me-1"></i>
                                {{ $bairroLabel }} — Angra dos Reis/RJ
                            </p>
                        </div>
                    </div>

                    <div class="modal-body p-0">
                        <div class="row g-0">
                            <div class="col-md-5 p-4 border-end">
                                <h6 class="text-muted text-uppercase fw-semibold mb-3 small">
                                    <i class="fas fa-info-circle me-1"></i>{{ __("Informações de Contato") }}
                                </h6>

                                <ul class="list-unstyled mb-0">
                                    <li class="d-flex align-items-start gap-3 mb-3">
                                        <span class="text-danger mt-1 flex-shrink-0">
                                            <i class="fas fa-map-marker-alt fa-fw"></i>
                                        </span>
                                        <div>
                                            <div class="fw-semibold small text-muted">{{ __("Endereço") }}</div>
                                            <div>{{ $logradouro }}, {{ $numero }}</div>
                                            <div class="text-muted small">
                                                {{ $bairroLabel }} — CEP: {{ $cep ?? __('Não informado') }}
                                            </div>
                                        </div>
                                    </li>

                                    <li class="d-flex align-items-start gap-3 mb-3">
                                        <span class="text-primary mt-1 flex-shrink-0">
                                            <i class="fas fa-envelope fa-fw"></i>
                                        </span>
                                        <div>
                                            <div class="fw-semibold small text-muted">{{ __("E-mail") }}</div>
                                            @if($escola->email)
                                                <a href="mailto:{{ $escola->email }}" class="text-decoration-none">{{ $escola->email }}</a>
                                            @else
                                                <span class="text-muted fst-italic small">{{ __("Não informado") }}</span>
                                            @endif
                                        </div>
                                    </li>

                                    <li class="d-flex align-items-start gap-3">
                                        <span class="text-success mt-1 flex-shrink-0">
                                            <i class="fas fa-phone-alt fa-fw"></i>
                                        </span>
                                        <div>
                                            <div class="fw-semibold small text-muted">{{ __("Telefone") }}</div>
                                            @if($escola->telefone)
                                                <a href="tel:+55{{ $escola->telefone }}" class="text-decoration-none">
                                                    {{ preg_replace('/(\d{2})(\d{4,5})(\d{4})/', '($1) $2-$3', $escola->telefone) }}
                                                </a>
                                            @else
                                                <span class="text-muted fst-italic small">{{ __("Não informado") }}</span>
                                            @endif
                                        </div>
                                    </li>
                                </ul>

                                <hr class="my-3">
                                <h6 class="text-muted text-uppercase fw-semibold mb-2 small">
                                    <i class="fas fa-snowflake me-1"></i>{{ __("Climatização") }}
                                </h6>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <span class="badge {{ $climaBadge['class'] }} px-3 py-2">
                                        <i class="fas {{ $climaBadge['icon'] }} me-1"></i>
                                        {{ $climaBadge['label'] }}
                                    </span>
                                </div>
                                @if($escola->observacoes_climatizacao)
                                    <p class="text-muted small mb-0">{{ $escola->observacoes_climatizacao }}</p>
                                @endif

                                @if($escola->informacoes)
                                    <hr class="my-3">
                                    <h6 class="text-muted text-uppercase fw-semibold mb-2 small">
                                        <i class="fas fa-file-alt me-1"></i>{{ __("Informações Adicionais") }}
                                    </h6>
                                    <div class="small">{!! $escola->informacoes !!}</div>
                                @endif
                            </div>

                            <div class="col-md-7 modal-escola-mapa d-flex flex-column">
                                @if($latitude && $longitude)
                                    <iframe
                                        class="modal-escola-iframe"
                                        frameborder="0"
                                        scrolling="no"
                                        marginheight="0"
                                        marginwidth="0"
                                        src="https://maps.google.com/maps?q={{ $latitude }},{{ $longitude }}&z=17&output=embed"
                                        title="{{ __('Localização de') }} {{ $escola->nome }}"
                                        allowfullscreen>
                                    </iframe>
                                @else
                                    <div class="flex-grow-1 d-flex flex-column justify-content-center align-items-center bg-light text-center p-4">
                                        <i class="fas fa-map-marker-alt fa-3x mb-3 text-secondary"></i>
                                        <p class="text-muted mb-0">{{ __("Localização não disponível") }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    @endforeach
@endsection