@extends('layouts.pmar.theme')
@section("title", env("APP_NAME") . " - Escolas Municipais")
@section('content')

    <div class="container my-4">

        {{-- Breadcrumb --}}
        <div class="row mb-4">
            <div class="col-12 my-3">
                @include('servicos.parts.breadcrumb', ['current' => __('Escolas Municipais')])
            </div>

            {{-- Título + filtros --}}
            <div class="col-12 mb-3">
                <h1 class="title">{{ __("Unidades Escolares da Rede Municipal") }}</h1>
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">
                        <div class="row g-2 align-items-end">

                            {{-- Pesquisa --}}
                            <div class="col-12 col-md-4">
                                <label for="searchInput" class="form-label small fw-semibold text-secondary mb-1">
                                    <i class="fas fa-search me-1"></i>{{ __("Pesquisar") }}
                                </label>
                                <input type="text"
                                       id="searchInput"
                                       class="form-control form-control-sm"
                                       placeholder="{{ __('Nome da escola ou bairro...') }}"
                                       aria-label="{{ __('Pesquisar escola') }}">
                            </div>

                            {{-- Bairro --}}
                            <div class="col-6 col-md-2">
                                <label for="bairroFilter" class="form-label small fw-semibold text-secondary mb-1">
                                    <i class="fas fa-map-marker-alt me-1"></i>{{ __("Bairro") }}
                                </label>
                                <select id="bairroFilter"
                                        class="form-select form-select-sm"
                                        aria-label="{{ __('Filtrar por bairro') }}">
                                    <option value="">{{ __("Todos") }}</option>
                                </select>
                            </div>

                            {{-- Climatização --}}
                            <div class="col-6 col-md-2">
                                <label for="climatizacaoFilter" class="form-label small fw-semibold text-secondary mb-1">
                                    <i class="fas fa-snowflake me-1"></i>{{ __("Climatização") }}
                                </label>
                                <select id="climatizacaoFilter"
                                        class="form-select form-select-sm"
                                        aria-label="{{ __('Filtrar por climatização') }}">
                                    <option value="">{{ __("Todas") }}</option>
                                    <option value="CLIMATIZADA">{{ __("Climatizada") }}</option>
                                    <option value="EM_ANDAMENTO">{{ __("Em andamento") }}</option>
                                    <option value="PENDENTE">{{ __("Pendente") }}</option>
                                </select>
                            </div>

                            {{-- Recursos Especiais --}}
                            <div class="col-6 col-md-2">
                                <label for="recursosFilter" class="form-label small fw-semibold text-secondary mb-1">
                                    <i class="fas fa-universal-access me-1"></i>{{ __("Recursos Especiais") }}
                                </label>
                                <select id="recursosFilter"
                                        class="form-select form-select-sm"
                                        aria-label="{{ __('Filtrar por recursos especiais') }}">
                                    <option value="">{{ __("Todos") }}</option>
                                    <option value="sim">{{ __("Com recursos especiais") }}</option>
                                </select>
                            </div>

                            {{-- Limpar --}}
                            <div class="col-12 col-md-2 d-flex align-items-end">
                                <button id="clearFilters"
                                        class="btn btn-sm btn-outline-secondary w-100"
                                        title="{{ __('Limpar todos os filtros') }}"
                                        aria-label="{{ __('Limpar filtros') }}">
                                    <i class="fas fa-times me-1"></i>{{ __("Limpar") }}
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Contador --}}
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-light mb-0" role="status" aria-live="polite">
                    <span id="resultCount">0</span> {{ __("escolas encontradas") }}
                </div>
            </div>
        </div>

        {{-- ============================================================
             CARDS
        ============================================================ --}}
        <div class="row" id="escolasContainer">
            @foreach($escolas as $escola)
                @php
                    $bairro = strtolower(optional($escola->endereco)->bairro ?? '');
                    $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'],
                        'EM_ANDAMENTO' => ['label' => __('Climatiz. andamento'), 'class' => 'badge-em-andamento', 'icon' => 'fa-spinner'],
                        default        => ['label' => __('Pend. climatização'),  'class' => 'badge-pendente',     'icon' => 'fa-clock'],
                    };
                @endphp

                <div class="col-md-6 col-lg-4 mb-4 escola-card"
                     data-nome="{{ strtolower($escola->nome) }}"
                     data-bairro="{{ $bairro }}"
                     data-recursos="{{ $escola->possuiRecursosMultifuncionais ? 'sim' : 'nao' }}"
                     data-climatizacao="{{ $clima }}">
                    <div class="card h-100 shadow-sm">
                        <img src="{{ $escola->foto_url }}"
                             class="card-img-top escola-card-foto escola-card-transition"
                             alt="{{ $escola->nome }}"
                             onerror="this.onerror=null;this.src='{{ asset('pmar/assets/img/icons/escola.png') }}'">
                        <div class="card-body">
                            <h5 class="card-title">{{ $escola->nome }}</h5>
                            <p class="card-text text-muted mb-2">
                                <i class="fas fa-map-marker-alt text-danger me-1"></i>
                                {{ $bairroLabel }}
                            </p>
                            <div class="d-flex flex-wrap gap-1">
                                @if($escola->possuiRecursosMultifuncionais)
                                    <span class="badge badge-recursos">
                                        <i class="fas fa-universal-access me-1"></i>{{ __("Recursos especiais") }}
                                    </span>
                                @endif
                                @if($clima === 'CLIMATIZADA')
                                    <span class="badge {{ $climaBadge['class'] }}">
                                        <i class="fas {{ $climaBadge['icon'] }} me-1"></i>{{ $climaBadge['label'] }}
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="card-footer bg-white border-top-0 pt-0">
                            <button type="button"
                                    class="btn btn-sm btn-primary w-100"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalEscolaMunicipal{{ $escola->id }}"
                                    aria-label="{{ __('Ver detalhes de') }} {{ $escola->nome }}">
                                <i class="fas fa-info-circle me-1"></i>{{ __("Detalhes") }}
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Nenhum resultado --}}
        <div id="noResults" class="row d-none">
            <div class="col-12">
                <div class="alert alert-warning text-center py-4">
                    <i class="fas fa-school fa-3x mb-3 d-block"></i>
                    <h4>{{ __("Nenhuma escola encontrada") }}</h4>
                    <p class="mb-0">{{ __("Tente ajustar os filtros de pesquisa") }}</p>
                </div>
            </div>
        </div>

    </div>

    {{-- ============================================================
         MODALS
    ============================================================ --}}
    @foreach($escolas as $escola)
        @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' => __('Climatização pendente'),    '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">

                    {{-- Cabeçalho: foto + nome --}}
                    <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>

                    {{-- Corpo: informações + mapa --}}
                    <div class="modal-body p-0">
                        <div class="row g-0">

                            {{-- Coluna esquerda: contato + climatização --}}
                            <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>

                                {{-- Climatização --}}
                                <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

                                {{-- Informações adicionais --}}
                                @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>

                            {{-- Coluna direita: mapa --}}
                            <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