@extends('layouts.landing_pages.boletim-meteorologico.theme')
@section('title', env('APP_NAME') . ' :: Boletim Meteorológico')




@section('content')

    @php
        use Carbon\Carbon;

        $horaAtual = Carbon::now()->subHours(3);

        $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',
        ];

        // Determinar condição atual
        $hora = $horaAtual->format('H');
        if ($hora >= 5 && $hora < 12) {
            $condicao = $boletim->estado_manha;
        } elseif ($hora >= 12 && $hora < 18) {
            $condicao = $boletim->estado_tarde;
        } else {
            $condicao = $boletim->estado_noite;
        }

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

    @endphp

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

        $cor = $cores[$boletim->nivel_de_acao] ?? 'secondary';

        $textClass = ($cor === 'warning') ? 'text-white' : '';
    @endphp

    @if (!$boletim)
        <p class="text-center text-white m-5">Nenhum boletim meteorológico disponível para hoje.</p>
    @else
        <div class="container-full dynamic-bg z-0" style="background-image: url('{{ asset($backgroundImage) }}');"
            id="boletimShow"
            data-share-title="{{ __('Boletim Meteorológico Nº :numero - Defesa Civil de Angra dos Reis', ['numero' => $boletim->numero_boletim]) }}"
            data-share-text="{{ __('Confira o Boletim Meteorológico da Defesa Civil de Angra dos Reis') }}"
            data-copy-success="{{ __('Link copiado com sucesso!') }}" data-copy-error="{{ __('Erro ao copiar link') }}">
            <div class="container content-container py-5 z-1">
                <div class="row ps-3 d-flex justify-content-center mx-auto">
                    <div class="col d-flex flex-wrap align-items-center gap-2 justify-content-start">
                        <a href="{{ route('paginas.boletim-meteorologico.index') }}"
                            class="d-flex align-items-center btn btn-outline-light rounded-pill">
                            <i class="fa-solid fa-arrow-left"></i>
                            <span class="d-none d-md-block ms-2">Boletins</span>
                        </a>
                        <a href="{{ route('paginas.boletim.imprimir', ['id' => $boletim->id]) }}"
                            class="d-flex align-items-center btn btn-outline-light rounded-pill shadow-sm" target="_blank">
                            <i class="fa-solid fa-file-pdf"></i>
                            <span class="d-none d-md-block ms-2">PDF</span>
                        </a>
                    </div>
                    <div class="col d-flex justify-content-end">
                        <div class="gap-3">
                            <div class="d-flex">
                                <span class="text-white small d-none d-sm-block my-auto px-2">Compartilhar:</span>
                                <button type="button" class="me-3 btn btn-sm btn-outline-white rounded-3 fs-6"
                                    onclick="shareOnSocial('whatsapp')" title="Compartilhar no WhatsApp">
                                    <i class="fab fa-whatsapp"></i>
                                </button>

                                <button type="button" class="me-3 btn btn-sm btn-outline-white rounded-3 fs-6"
                                    onclick="shareOnSocial('facebook')" title="Compartilhar no Facebook">
                                    <i class="fab fa-facebook-f"></i>
                                </button>

                                <button type="button" class="me-3 btn btn-sm btn-outline-white rounded-3 fs-6"
                                    onclick="shareOnSocial('twitter')" title="Compartilhar no X">
                                    <i class="fab fa-x-twitter"></i>
                                </button>

                                <button type="button" class="me-3 btn btn-sm btn-outline-white rounded-3 fs-6"
                                    onclick="copyToClipboard()" title="Copiar link">
                                    <i class="fas fa-link"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center m-sm-0 m-md-0 m-lg-4 m-xl-4">
                    <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">
                            <div class="card-body p-4">
                                <div class="main-weather-info d-flex justify-content-between align-items-center">
                                    <div class="flex-grow-1 {{ $textClass }}">
                                        <h3 class="fw-bolder">Boletim Meteorológico Nº {{ $boletim->numero_boletim }} -
                                            {{ $boletim->data->locale('pt_BR')->translatedFormat('d/m/Y (l)') }}
                                        </h3>
                                        <h4>Defesa Civil de Angra dos Reis</h4>

                                        <hr class="text-white border-3">
                                        <div class="mb-2 fs-2 fw-bolder">
                                            <span class="fw-light">NÍVEL DE AÇÃO:</span> {{ $boletim->nivel_de_acao }}
                                        </div>
                                        <div class="h5 fw-bold mb-1 fs-3 d-flex align-items-center gap-2">
                                            <i class="fa-solid fa-arrow-down fs-5 "></i> {{ $boletim->temperatura_minima }}° /
                                            {{ $boletim->temperatura_maxima }}° <i class="fa-solid fa-arrow-up fs-5 "></i>
                                        </div>

                                    </div>
                                    <div>
                                        @php
                                            $hora = $horaAtual->format('H');
                                            if ($hora >= 5 && $hora < 12) {
                                                $condicao = $boletim->estado_manha;
                                            } elseif ($hora >= 12 && $hora < 18) {
                                                $condicao = $boletim->estado_tarde;
                                            } else {
                                                $condicao = $boletim->estado_noite;
                                            }
                                        @endphp
                                        <img src="{{ asset($meteocons[$condicao]) }}" alt="{{ $condicao }}" class="img-fluid"
                                            style="width: 15rem;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Previsão do Dia -->
                <div class="container py-3">
                    <div class="row gx-3 gy-2">
                        <hr>
                        <h2 class="h4 fw-bold text-white text-center mb-3">Previsão por Período</h2>

                        <!-- Manhã -->
                        <div class="col-12 col-md-4">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <h6 class="fw-bold text-white mb-2 fs-5">Manhã</h6>
                                    <div class="mb-2">
                                        <img src="{{ asset($meteocons[$boletim->estado_manha]) }}"
                                            alt="{{ $boletim->estado_manha }}" class="img-fluid" style="width: 8rem;">
                                    </div>
                                    <p class="text-white fw-bold fs-4 mb-0">{{ $boletim->estado_manha }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Tarde -->
                        <div class="col-12 col-md-4">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <h6 class="fw-bold text-white mb-2 fs-5">Tarde</h6>
                                    <div class="mb-2">
                                        <img src="{{ asset($meteocons[$boletim->estado_tarde]) }}"
                                            alt="{{ $boletim->estado_tarde }}" class="img-fluid" style="width: 8rem;">
                                    </div>
                                    <p class="text-white fw-bold fs-4 mb-0">{{ $boletim->estado_tarde }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Noite -->
                        <div class="col-12 col-md-4">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <h6 class="fw-bold text-white mb-2 fs-5">Noite</h6>
                                    <div class="mb-2">
                                        <img src="{{ asset($meteocons[$boletim->estado_noite]) }}"
                                            alt="{{ $boletim->estado_noite }}" class="img-fluid" style="width: 8rem;">
                                    </div>
                                    <p class="text-white fw-bold fs-4 mb-0">{{ $boletim->estado_noite }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                @if($boletim->observacao)
                        <div class="container p-3 mb-3">
                            <div class="row g-3">
                                @if($boletim->observacao)
                                    <div class="col-12">
                                        <div class="card shadow-sm">
                                            <div class="card-body p-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="me-2 text-warning">
                                                        <i class="fa-solid fa-note-sticky fa-lg"></i>
                                                    </div>
                                                    <h6 class="text-white card-title fw-semibold mb-0">Observação</h6>
                                                </div>
                                                <p class="text-white mb-0" style="white-space: pre-wrap;">{{ $boletim->observacao }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif



                <!-- Destaques de Hoje -->
                <div class="container py-3  ">
                    <hr>
                    <h2 class="h4 fw-bold text-white text-center mb-3">Destaques para o dia {{ $boletim->data->locale('pt_BR')->translatedFormat('d/m/Y (l)') }} </h2>

                    <div class="row gx-3 gy-2">
                        <!-- Temperatura -->
                        <div class="col-12 col-md-3">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <div class="mb-2">
                                        <img src="{{ asset('pmar/assets/img/icons/weather/thermometer-celsius.svg') }}"
                                            alt="Temperatura" class="img-fluid" style="width: 5rem;">
                                    </div>
                                    <h6 class="card-title fw-semibold text-white mb-1">Temperatura</h6>
                                    <div class="h5 fw-bold text-white mb-1">
                                        {{ $boletim->temperatura_minima }}° / {{ $boletim->temperatura_maxima }}°
                                    </div>
                                    <small class="text-white fw-bold">Mín/Máx</small>
                                </div>
                            </div>
                        </div>

                        <!-- Umidade do Ar -->
                        <div class="col-12 col-md-3">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <div class="mb-2">
                                        <img src="{{ asset('pmar/assets/img/icons/weather/humidity.svg') }}"
                                            alt="Probabilidade de Chuva" class="img-fluid" style="width: 5rem;">
                                    </div>
                                    <h6 class="card-title fw-semibold text-white mb-1">Umidade do ar</h6>
                                    <div class="h5 fw-bold text-white mb-1">
                                        {{ $boletim->umidade_minima }}% / {{ $boletim->umidade_maxima }}%
                                    </div>
                                    <small class="text-white fw-bold">Mín/Máx</small>
                                </div>
                            </div>
                        </div>

                        <!-- Probabilidade de Chuva -->
                        <div class="col-12 col-md-3">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <div class="mb-2">
                                        <img src="{{ asset('pmar/assets/img/icons/weather/raindrops.svg') }}"
                                            alt="Probabilidade de Chuva" class="img-fluid" style="width: 5rem;">
                                    </div>
                                    <h6 class="card-title fw-semibold text-white fw-bold mb-1">Probabilidade de Chuva</h6>
                                    <div class="h5 fw-bold text-white mb-1">
                                        {{ $boletim->probabilidade_chuva }}%
                                    </div>
                                    <small class="text-white fw-bold">Probabilidade</small>
                                </div>
                            </div>
                        </div>

                        <!-- Volume de Chuva -->
                        <div class="col-12 col-md-3">
                            <div class="card  shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <div class="mb-2">
                                        <img src="{{ asset('pmar/assets/img/icons/weather/raindrops.svg') }}"
                                            alt="Volume de Chuva" class="img-fluid" style="width: 5rem;">
                                    </div>
                                    <h6 class="card-title fw-semibold text-white fw-bold mb-1">Volume de Chuva</h6>
                                    <div class="h5 fw-bold text-white mb-1">
                                        {{ $boletim->volume_chuva }} mm
                                    </div>
                                    <small class="text-white fw-bold">Precipitação</small>
                                </div>
                            </div>
                        </div>

                        <h2 class="h4 fw-bold text-white text-center mb-2 mt-4">Tábua de Marés</h2>

                        <div class="row g-2 d-flex justify-content-center">
                            <!-- Dia Anterior -->
                            <div class="col-12 col-md-3">
                                <div class="card shadow-sm h-100">
                                    <div class="card-body text-center p-3">
                                        <h6 class="card-title fw-semibold text-white fw-bold mb-3">
                                            <small class="fs-6">{{ $tabuaTresDias['anterior']['dataFormatada'] }}</small>
                                        </h6>

                                        @if($tabuaTresDias['anterior']['dados'])
                                            <ul class="text-white" style="list-style: none; padding: 0;">
                                                @foreach($tabuaTresDias['anterior']['dados'] as $m)
                                                    <li class="d-flex justify-content-between border-0 px-3 py-1">
                                                        <span><strong>{{ $m['hora'] }}</strong></span>
                                                        <span>{{ number_format($m['altura'], 2, ',', '.') }} m</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <p class="small mb-0 p-3 text-white">Dados não disponíveis.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Dia Atual -->
                            <div class="col-12 col-md-3">
                                <div class="card shadow-sm h-100 border-2 border-{{ $cor }}">
                                    <div class="card-body text-center p-3">
                                        <h6 class="card-title fw-semibold text-white fw-bold mb-3">
                                            <small class="fs-6">{{ $tabuaTresDias['atual']['dataFormatada'] }}</small>
                                        </h6>

                                        @if($tabuaTresDias['atual']['dados'])
                                            <ul class="text-white" style="list-style: none; padding: 0;">
                                                @foreach($tabuaTresDias['atual']['dados'] as $m)
                                                    <li class="d-flex justify-content-between border-0 px-3 py-1">
                                                        <span><strong>{{ $m['hora'] }}</strong></span>
                                                        <span>{{ number_format($m['altura'], 2, ',', '.') }} m</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <p class="small mb-0 p-3 text-white">Dados não disponíveis.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Dia Seguinte -->
                            <div class="col-12 col-md-3">
                                <div class="card shadow-sm h-100">
                                    <div class="card-body text-center p-3">
                                        <h6 class="card-title fw-semibold text-white fw-bold mb-3">
                                            <small class="fs-6">{{ $tabuaTresDias['seguinte']['dataFormatada'] }}</small>
                                        </h6>

                                        @if($tabuaTresDias['seguinte']['dados'])
                                            <ul class="text-white" style="list-style: none; padding: 0;">
                                                @foreach($tabuaTresDias['seguinte']['dados'] as $m)
                                                    <li class="d-flex justify-content-between border-0 px-3 py-1">
                                                        <span><strong>{{ $m['hora'] }}</strong></span>
                                                        <span>{{ number_format($m['altura'], 2, ',', '.') }} m</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <p class="small mb-0 p-3 text-white">Dados não disponíveis.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Alertas e Avisos -->
                <div class="row justify-content-center p-3 gx-3 gy-2">
                    <hr>
                    <h2 class="h4 fw-bold text-white text-center">
                        Informações Complementares
                    </h2>
                    <div class="col-12">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4 mb-3">
                                <div class="card h-100 shadow-sm border-0 rounded-4 border-start border-nivel-acao border-{{ $cor }} border-5">
                                    <div class="card-body p-4">
                                        <div class="d-flex align-items-center mb-4">
                                            <div class="bg-ligtm shadow bg-opacity-10 rounded-4 p-3 me-3">
                                                <i class="fa-solid fs-1 fa-fade fa-signal fa-lg text-{{ $cor }}"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="text-white card-title fw-bold mb-1 border-bottom-{{ $cor }}">Nível de
                                                    Ação</h6>
                                                <p class="mb-0 text-{{ $cor }} fw-semibold">{{ $boletim->nivel_de_acao }}</p>
                                            </div>
                                        </div>
                                        <p class="mb-1 text-white fw-bold">Legenda:</p>
                                        <div class="row text-center">
                                            <div class="p-1 text-start">
                                                <div class="badge text-start fs-6 bg-green  text-white p-2 rounded-3 col-8">
                                                    <span style="font-size: 0.78rem;" class="mb-0 small">VIGILÂNCIA -
                                                        Normalidade</span>
                                                </div>
                                            </div>
                                            <div class="p-1 text-start">
                                                <div class="badge text-start fs-6 bg-warning text-white p-2 rounded-3 col-9">
                                                    <span class="mb-0 small">OBSERVAÇÃO - Risco Baixo</span>
                                                </div>
                                            </div>
                                            <div class="p-1 text-start">
                                                <div class="badge text-start fs-6 bg-danger text-white p-2 rounded-3 col-10">
                                                    <span class="mb-0 small">ATENÇÃO - Risco Moderado</span>
                                                </div>
                                            </div>
                                            <div class="p-1 text-start">
                                                <div class="badge text-start fs-6 bg-red text-white p-2 rounded-3 col-11">
                                                    <span class="mb-0 small">ALERTA - Risco Elevado</span>
                                                </div>
                                            </div>
                                            <div class="p-1 text-start">
                                                <div class="badge text-start fs-6 bg-indigo text-black p-2 rounded-3 col-12">
                                                    <span class="mb-0 small">ALERTA MÁXIMO - Risco Crítico</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="col">
                                <div class="row-sm-6 row-md-12 row-lg-12 row-xl-12 row-xxl-12 gx-3 gy-2">
                                    <div class="card shadow-sm rounded-4 border-0 border-start border-nivel-acao border-{{ $cor }} border-5 mb-4">
                                        <div class="card-body p-4">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="me-2 text-danger">
                                                    <i class="fa-solid fa-triangle-exclamation fa-lg"></i>
                                                </div>
                                                <h6 class="text-white card-title fw-semibold mb-0">Avisos Meteorológicos</h6>
                                            </div>

                                            <div class="row justify-content-center text-center aviso-meteorologico">
                                                @php
                                                    $temAvisoAtivado = $boletim->status_aviso_chuva == 'ATIVADO' ||
                                                        $boletim->status_aviso_vento == 'ATIVADO' ||
                                                        $boletim->status_aviso_ressaca == 'ATIVADO';
                                                @endphp

                                                {{-- Regra 1: Se não houver nenhum ativado --}}
                                                @if (!$temAvisoAtivado)
                                                    <p class="text-start text-white fw-bolder">Estamos sem avisos meteorológicos
                                                        para nossa região.</p>
                                                @else
                                                    {{-- Regra 2: Se houver pelo menos 1 ativado --}}
                                                    @if ($boletim->status_aviso_chuva == 'ATIVADO')
                                                        <div class="col-md-4">
                                                            <p class="text-white mb-1 fw-medium">Chuva</p>
                                                            <img src="{{ asset('pmar/assets/img/icons/weather/rain.svg') }}" alt="Chuva"
                                                                class="img-fluid" style="width: 100px;">
                                                        </div>
                                                    @endif

                                                    @if ($boletim->status_aviso_vento == 'ATIVADO')
                                                        <div class="col-md-4">
                                                            <p class="text-white mb-1 fw-medium">Vento</p>
                                                            <img src="{{ asset('pmar/assets/img/icons/weather/wind.svg') }}"
                                                                alt="Ventania" class="img-fluid" style="width: 100px;">
                                                        </div>
                                                    @endif

                                                    @if ($boletim->status_aviso_ressaca == 'ATIVADO')
                                                        <div class="col-md-4">
                                                            <p class="text-white mb-0 fw-medium">Ressaca</p>
                                                            <img src="{{ asset('pmar/assets/img/icons/weather/rough-sea.svg') }}"
                                                                alt="Ressaca" class="img-fluid" style="width: 100px;">
                                                        </div>
                                                    @endif

                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card py-2 shadow-sm border-0 rounded-4 border-start border-nivel-acao border-{{ $cor }} border-5">
                                        <div class="card-body p-4">
                                            <div class="d-flex align-items-center mb-2">
                                                <div class="me-2 text-white">
                                                    <i class="fa-solid fa-circle-info fa-lg"></i>
                                                </div>
                                                <h6 class="card-title text-white fw-semibold mb-0">CEMADEN</h6>
                                            </div>
                                            <p class="mb-0 text-white"><strong>Responsável:</strong>
                                                {{ $boletim->creator->name ?? __('Não informado') }}</p>
                                            <p class="mb-0 text-white"><strong>Sobreaviso:</strong>
                                                {{ $boletim->sobreavisoCemaden->nome }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Estações Meteorológicas -->
                    <div class="container p-3 mb-3">
                        <hr>
                        <h2 class="h4 fw-bold text-white text-center mb-4">Estações Meteorológicas</h2>

                        <div class="row g-4 justify-content-center">
                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                <plugfield-widget-v1 data-device="3078" data-width="100%"
                                    data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjg5MzU5LCJhaWQiOjE0MjYxLCJvcmlnaW4iOiJhbmdyYS5yai5nb3YuYnIiLCJpYXQiOjE3NTk3Njg4MjB9.lrHlf43dZfLdiv8UXsw4hXwqTe52kbWv4w6pvrOym_M">
                                </plugfield-widget-v1>
                            </div>


                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                <plugfield-widget-v1 data-device="3194" data-width="100%"
                                    data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjg5MzU5LCJhaWQiOjE0MjYxLCJvcmlnaW4iOiJhbmdyYS5yai5nb3YuYnIiLCJpYXQiOjE3NTk3Njg4MjB9.lrHlf43dZfLdiv8UXsw4hXwqTe52kbWv4w6pvrOym_M">
                                </plugfield-widget-v1>
                            </div>


                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                <plugfield-widget-v1 data-device="3190" data-width="100%"
                                    data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjg5MzU5LCJhaWQiOjE0MjYxLCJvcmlnaW4iOiJhbmdyYS5yai5nb3YuYnIiLCJpYXQiOjE3NTk3Njg4MjB9.lrHlf43dZfLdiv8UXsw4hXwqTe52kbWv4w6pvrOym_M">
                                </plugfield-widget-v1>
                            </div>


                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                <plugfield-widget-v1 style="background: transparent!important;" data-device="3176"
                                    data-width="100%"
                                    data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjg5MzU5LCJhaWQiOjE0MjYxLCJvcmlnaW4iOiJhbmdyYS5yai5nb3YuYnIiLCJpYXQiOjE3NTk3Njg4MjB9.lrHlf43dZfLdiv8UXsw4hXwqTe52kbWv4w6pvrOym_M">
                                </plugfield-widget-v1>
                            </div>

                            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                                <plugfield-widget-v1 data-device="3002" data-width="100%"
                                    data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjg5MzU5LCJhaWQiOjE0MjYxLCJvcmlnaW4iOiJhbmdyYS5yai5nb3YuYnIiLCJpYXQiOjE3NTk3Njg4MjB9.lrHlf43dZfLdiv8UXsw4hXwqTe52kbWv4w6pvrOym_M">
                                </plugfield-widget-v1>
                            </div>
                        </div>
                    </div>

                    @if($boletim->acoes_programadas)
                        <div class="container p-3 mb-3">
                            <hr>
                            <h2 class="h4 fw-bold text-white text-center mb-3">Informações Adicionais</h2>
                            
                            <div class="row g-3">
                                @if($boletim->acoes_programadas)
                                    <div class="col-12">
                                        <div class="card shadow-sm">
                                            <div class="card-body p-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="me-2 text-success">
                                                        <i class="fa-solid fa-clipboard-list fa-lg"></i>
                                                    </div>
                                                    <h6 class="text-white card-title fw-semibold mb-0">Ações Programadas da Defesa Civil</h6>
                                                </div>
                                                <p class="text-white mb-0" style="white-space: pre-wrap;">{{ $boletim->acoes_programadas }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    <div class="container p-3 mb-3">
    <hr>
    <h2 class="h4 fw-bold text-white text-center mb-4">
        Cadastre-se para receber os ALERTAS da Defesa Civil pelos QR Codes abaixo:
    </h2>

    <div class="card shadow-sm">
        <div class="card-body p-4 text-uppercase">
            <div class="row text-center">

                <!-- ITEM -->
                <div class="col-12 col-md-4 d-flex mb-4">
                    <div class="w-100 d-flex flex-column align-items-center">

                        <h2 class="h6 fw-bold text-white mb-3 d-flex align-items-center justify-content-center"
                            style="min-height:48px;">
                            Alertas via WhatsApp
                        </h2>

                        <img src="{{ asset('pmar/assets/img/icons/weather/qr-spdc-whatsapp.png') }}"
                             style="width:120px;height:120px;object-fit:contain;"
                             class="mb-3">

                        <a href="https://api.whatsapp.com/send?phone=556120344611"
                           class="text-white fw-bold text-decoration-underline d-flex align-items-center justify-content-center text-center"
                           style="min-height:48px;"
                           target="_blank">
                            Clique aqui ou escaneie o QR Code acima
                        </a>

                    </div>
                </div>

                <!-- ITEM -->
                <div class="col-12 col-md-4 d-flex mb-4">
                    <div class="w-100 d-flex flex-column align-items-center">

                        <h2 class="h6 fw-bold text-white mb-3 d-flex align-items-center justify-content-center"
                            style="min-height:48px;">
                            Alertas via Telegram
                        </h2>

                        <img src="{{ asset('pmar/assets/img/icons/weather/qr-spdc-telegram.png') }}"
                             style="width:120px;height:120px;object-fit:contain;"
                             class="mb-3">

                        <a href="https://t.me/defesacivilbrbot"
                           class="text-white fw-bold text-decoration-underline d-flex align-items-center justify-content-center text-center"
                           style="min-height:48px;"
                           target="_blank">
                            Clique aqui ou escaneie o QR Code acima
                        </a>

                    </div>
                </div>

                <!-- ITEM -->
                <div class="col-12 col-md-4 d-flex mb-4">
                    <div class="w-100 d-flex flex-column align-items-center">

                        <h2 class="h6 fw-bold text-white mb-3 d-flex align-items-center justify-content-center"
                            style="min-height:48px;">
                            Alertas via SMS por CEP
                        </h2>

                        <img src="{{ asset('pmar/assets/img/icons/weather/qr-alertas-cep.png') }}"
                             style="width:120px;height:120px;object-fit:contain;"
                             class="mb-3">

                        <a href="https://angra.rj.gov.br/servicos/cadastro-do-cep-via-sms-para-recebimento-de-alertas-de-avisos-da-defesa-civil"
                           class="text-white fw-bold text-decoration-underline d-flex align-items-center justify-content-center text-center"
                           style="min-height:48px;"
                           target="_blank">
                            Clique aqui ou escaneie o QR Code acima
                        </a>

                    </div>
                </div>

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


    <h2 class="h4 fw-bold text-white text-center mb-4 mt-5">
    Áreas de Risco e Pontos de Apoio:
    </h2>

    
    <div class="card border-0 border-start border-nivel-acao border-{{ $cor }} border-5 col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4 my-3 mx-auto shadow-sm">
        <div class="card-body p-4 text-uppercase">
            <div class="row text-center">

                <div class="col-12 d-flex mb-4">
                    <div class="w-100 d-flex flex-column align-items-center">

                        <img src="{{ asset('pmar/assets/img/icons/weather/qr-areas-de-risco.png') }}"
                             style="width:120px;height:120px;object-fit:contain;"
                             class="mb-3 mt-2">

                        <a href="https://www.google.com/maps/d/u/0/viewer?mid=1UGdWq5wSWHfnWkn4GBx62J46A9hCzds&femb=1&ll=-23.028018903813%2C-44.36007029999998&z=11"
                           class="text-white fw-bold text-decoration-underline d-flex align-items-center justify-content-center text-center"
                           style="min-height:48px;"
                           target="_blank">
                            Clique aqui ou escaneie o QR Code acima
                        </a>

                    </div>
                </div>

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




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


        <script defer src="https://wdg.plugfield.com.br/device/plugfield-widget-v1-sd-x.js"></script>
    @endif

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

@endsection