@extends('layouts.pmar.theme')
@section('title', env('APP_NAME') . ' :: ' . __('Boletim Meteorológico'))
@section('content')

<section class="py-2">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mt-5 mb-2">
                <h1 class="fw-bold mb-2 text-primary">{{ __('Boletim Meteorológico') }}</h1>
                <h2 class="h5 text-muted">{{ __('Boletim do Centro Municipal de Monitoramento e Alertas de Desastres Naturais de Angra dos Reis') }} <br>
                    (CEMADEN-AR)</h2>
                <div class="divider bg-primary mx-auto my-3" style="width: 80px; height: 3px;"></div>
            </div>
        </div>
    </div>
</section>

@if (!empty($boletimHoje))
    @php
        $horaAtual = \Carbon\Carbon::now()->subHours(3);
        $hora = $horaAtual->format('H');

        $meteocons = [
            'Ensolarado' => 'pmar/assets/img/icons/weather/ensolarado.svg',
            'Sol com poucas nuvens' => 'pmar/assets/img/icons/weather/sol-com-poucas-nuvens.svg',
            'Sol com muitas nuvens' => 'pmar/assets/img/icons/weather/sol-com-muitas-nuvens.svg',
            'Nublado' => 'pmar/assets/img/icons/weather/nublado.svg',
            'Sol com possibilidade de chuva' => 'pmar/assets/img/icons/weather/sol-com-possibilidade-de-chuva.svg',
            'Nublado com possibilidade de chuva' => 'pmar/assets/img/icons/weather/nublado-com-possibilidade-de-chuva.svg',
            'Chuvoso' => 'pmar/assets/img/icons/weather/chuvoso.svg',
            'Pancadas de chuva e trovoada' => 'pmar/assets/img/icons/weather/pancadas-de-chuva-e-trovoada.svg',
            'Pancadas de chuva' => 'pmar/assets/img/icons/weather/pancadas-de-chuva.svg',
            'Sem nuvens' => 'pmar/assets/img/icons/weather/sem-nuvens.svg',
            'Poucas nuvens' => 'pmar/assets/img/icons/weather/poucas-nuvens.svg',
            'Muitas nuvens' => 'pmar/assets/img/icons/weather/muitas-nuvens.svg',
            'Muitas nuvens com possibilidade de chuva' => 'pmar/assets/img/icons/weather/muitas-nuvens-com-possibilidade-de-chuva.svg',
        ];

        if ($hora >= 5 && $hora < 12) {
            $condicao = $boletimHoje->estado_manha;
        } elseif ($hora >= 12 && $hora < 18) {
            $condicao = $boletimHoje->estado_tarde;
        } else {
            $condicao = $boletimHoje->estado_noite;
        }

        $backgroundImage = 'pmar/assets/img/icons/weather/backgrounds/' . str_replace(' ', '-', strtolower($condicao)) . '.png';

        $cores = [
            'VIGILÂNCIA' => 'green',
            'OBSERVAÇÃO' => 'warning',
            'ATENÇÃO' => 'danger',
            'ALERTA' => 'red',
            'ALERTA MÁXIMO' => 'indigo',
        ];

        $cor = $cores[$boletimHoje->nivel_de_acao] ?? 'secondary';
        $textClass = $cor === 'warning' ? 'text-white' : '';
    @endphp

    <section class="py-2">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div
                        class="card main-weather-card border-0 border-start border-nivel-acao border-{{ $cor }} border-5 text-white rounded-4 shadow-lg"
                        style="background-image: linear-gradient(135deg, rgba(8, 30, 54, 0.66), rgba(34, 74, 122, 0.57)), url('{{ asset($backgroundImage) }}'); background-size: cover; background-position: center;">
                        <div class="card-body p-4">
                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                                <div class="flex-grow-1 {{ $textClass }}">
                                    <h3 class="fw-bolder mb-1">
                                        Nº {{ $boletimHoje->numero_boletim }} -
                                        {{ $boletimHoje->data->locale('pt_BR')->translatedFormat('d/m/Y (l)') }}
                                    </h3>
                                    <hr class="text-white border-3">
                                    <div class="mb-2 fs-3 fs-md-3 fw-bolder">
                                        <span class="fw-light">NÍVEL DE AÇÃO:</span> {{ $boletimHoje->nivel_de_acao }}
                                    </div>
                                    <div class="h5 fw-bold mb-0 fs-2 d-flex align-items-center gap-2">
                                        <i class="fa-solid fa-arrow-down fs-2"></i>
                                        {{ $boletimHoje->temperatura_minima }}°
                                        /
                                        {{ $boletimHoje->temperatura_maxima }}°
                                        <i class="fa-solid fa-arrow-up fs-2"></i>
                                    </div>
                                </div>

                                <div class="text-center mt-4 mt-md-0 ms-md-4">
                                    @php
                                        $iconeCondicao = $meteocons[$condicao] ?? null;
                                    @endphp
                                    @if ($iconeCondicao)
                                        <img src="{{ asset($iconeCondicao) }}" alt="{{ $condicao }}" class="img-fluid"
                                            style="width: 9rem;">
                                    @endif
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-2">
                                <a href="{{ route('paginas.boletim-meteorologico.show', ['boletim' => $boletimHoje->id]) }}"
                                    class="btn btn-light btn-lg fw-semibold">
                                    {{ __('Ver Boletim Completo') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

<section>
    <div class="container">
        <div class="row justify-content-center mb-3">
            <div class="col-12 d-flex justify-content-end px-4 mt-2">
                <button class="btn btn-outline-primary d-flex align-items-center gap-2"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#filtrosBoletim"
                    aria-expanded="false"
                    aria-controls="filtrosBoletim">
                    <i class="fas fa-search"></i>
                    <span>{{ __('Pesquisar boletins') }}</span>
                </button>
            </div>
        </div>

        <div class="collapse" id="filtrosBoletim">
            <div class="row justify-content-center mb-4">
                <div class="col">
                    <div class="card border-0 shadow-sm rounded-3">
                        <div class="card-body p-4">
                            <h5 class="card-title text-center mb-4">Pesquisar boletins</h5>
                            <form action="{{ route('paginas.boletim-meteorologico.index') }}" method="get"
                                id="formBoletimMetereologico">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-3">
                                        <label for="data" class="form-label fw-semibold">{{ __('Data') }}</label>
                                        <input type="date" name="data" id="data" class="form-control"
                                            value="{{ request('data') }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="numero_boletim" class="form-label fw-semibold">{{ __('Número do Boletim') }}</label>
                                        <input type="number" name="numero_boletim" id="numero_boletim" class="form-control"
                                            value="{{ request('numero_boletim') }}">
                                    </div>
                                    <div class="col-md-3 d-flex gap-2">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fas fa-search me-1"></i> {{ __('Buscar') }}
                                        </button>
                                        <a href="{{ route('paginas.boletim-meteorologico.index') }}"
                                            class="btn btn-outline-secondary w-100">
                                            <i class="fas fa-times me-1"></i> {{ __('Limpar') }}
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center my-5">
            <div class="col-12">
                <div class="d-flex px-4 justify-content-between align-items-center mb-4">
                    <h5 class="m-0">{{ __('Boletins publicados') }}</h5>
                    <span class="badge bg-softGray text-dark">{{ $boletins->total() }} {{ __('registros') }}</span>
                </div>

                <div id="loadingIndicator" class="text-center py-4 d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{{ __('Carregando...') }}</span>
                    </div>
                    <p class="mt-2">{{ __('Buscando boletins...') }}</p>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4 text-center">{{ __('Data de Previsão') }}</th>
                                    <th class="text-center">{{ __('Nº') }}</th>
                                    <th class="text-center">{{ __('Opções') }}</th>
                                </tr>
                            </thead>
                            <tbody id="bulletinsTable">
                                @foreach ($boletins as $boletim)

                                <tr>
                                    <td class="ps-4 fw-semibold text-center">{{ date('d/m/Y', strtotime($boletim->data)) }}</td>
                                    <td class="text-center">{{ $boletim->numero_boletim }}</td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center gap-2">
                                            <a title="{{ __('Ver Boletim') }}"
                                                class="btn btn-sm btn-outline-primary d-flex align-items-center"
                                                href='{{ route('paginas.boletim-meteorologico.show', ['boletim' => $boletim->id]) }}'
                                                target="_blank">
                                                <i class="fas fa-eye fs-4"></i>
                                                <span class="d-none d-md-block"></span>
                                            </a>
                                            <a title="{{ __('Baixar Boletim em .PDF') }}" download="" class="btn btn-sm btn-outline-secondary d-flex align-items-center"
                                                href='{{ route('paginas.boletim.imprimir', ['id' => $boletim->id]) }}'
                                                target="_blank">
                                                <i class="fas fa-download fs-4"> </i>
                                                <span class="d-none d-md-block"></span>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach

                                @if ($boletins->count() == 0)
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">
                                        <i class="fas fa-inbox fs-1 mb-2"></i>
                                        <p>{{ __('Nenhum boletim encontrado com os filtros aplicados.') }}</p>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    @if ($boletins->hasPages())
                    <div class="card-footer bg-white">
                        <div class="d-flex justify-content-center">
                            {!! $boletins->links() !!}
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>






    </div>

</section>

@push('scripts')
<script src="{{ asset('pmar/js/defesa-civil/boletim-meteorologico-public.js') }}"></script>
@endpush
@endsection