<?php $__env->startSection('title', env('APP_NAME') . ' :: Boletim Meteorológico'); ?>




<?php $__env->startSection('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';

    ?>

    <?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' : '';
    ?>

    <?php if(!$boletim): ?>
        <p class="text-center text-white m-5">Nenhum boletim meteorológico disponível para hoje.</p>
    <?php else: ?>
        <div class="container-full dynamic-bg z-0" style="background-image: url('<?php echo e(asset($backgroundImage)); ?>');"
            id="boletimShow"
            data-share-title="<?php echo e(__('Boletim Meteorológico Nº :numero - Defesa Civil de Angra dos Reis', ['numero' => $boletim->numero_boletim])); ?>"
            data-share-text="<?php echo e(__('Confira o Boletim Meteorológico da Defesa Civil de Angra dos Reis')); ?>"
            data-copy-success="<?php echo e(__('Link copiado com sucesso!')); ?>" data-copy-error="<?php echo e(__('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="<?php echo e(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="<?php echo e(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-<?php echo e($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 <?php echo e($textClass); ?>">
                                        <h3 class="fw-bolder">Boletim Meteorológico Nº <?php echo e($boletim->numero_boletim); ?> -
                                            <?php echo e($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> <?php echo e($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> <?php echo e($boletim->temperatura_minima); ?>° /
                                            <?php echo e($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;
                                            }
                                        ?>
                                        <img src="<?php echo e(asset($meteocons[$condicao])); ?>" alt="<?php echo e($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="<?php echo e(asset($meteocons[$boletim->estado_manha])); ?>"
                                            alt="<?php echo e($boletim->estado_manha); ?>" class="img-fluid" style="width: 8rem;">
                                    </div>
                                    <p class="text-white fw-bold fs-4 mb-0"><?php echo e($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="<?php echo e(asset($meteocons[$boletim->estado_tarde])); ?>"
                                            alt="<?php echo e($boletim->estado_tarde); ?>" class="img-fluid" style="width: 8rem;">
                                    </div>
                                    <p class="text-white fw-bold fs-4 mb-0"><?php echo e($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="<?php echo e(asset($meteocons[$boletim->estado_noite])); ?>"
                                            alt="<?php echo e($boletim->estado_noite); ?>" class="img-fluid" style="width: 8rem;">
                                    </div>
                                    <p class="text-white fw-bold fs-4 mb-0"><?php echo e($boletim->estado_noite); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <?php if($boletim->observacao): ?>
                        <div class="container p-3 mb-3">
                            <div class="row g-3">
                                <?php 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;"><?php echo e($boletim->observacao); ?></p>
                                            </div>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php 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 <?php echo e($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="<?php echo e(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">
                                        <?php echo e($boletim->temperatura_minima); ?>° / <?php echo e($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="<?php echo e(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">
                                        <?php echo e($boletim->umidade_minima); ?>% / <?php echo e($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="<?php echo e(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">
                                        <?php echo e($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="<?php echo e(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">
                                        <?php echo e($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"><?php echo e($tabuaTresDias['anterior']['dataFormatada']); ?></small>
                                        </h6>

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

                            <!-- Dia Atual -->
                            <div class="col-12 col-md-3">
                                <div class="card shadow-sm h-100 border-2 border-<?php echo e($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"><?php echo e($tabuaTresDias['atual']['dataFormatada']); ?></small>
                                        </h6>

                                        <?php if($tabuaTresDias['atual']['dados']): ?>
                                            <ul class="text-white" style="list-style: none; padding: 0;">
                                                <?php $__currentLoopData = $tabuaTresDias['atual']['dados']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <li class="d-flex justify-content-between border-0 px-3 py-1">
                                                        <span><strong><?php echo e($m['hora']); ?></strong></span>
                                                        <span><?php echo e(number_format($m['altura'], 2, ',', '.')); ?> m</span>
                                                    </li>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </ul>
                                        <?php else: ?>
                                            <p class="small mb-0 p-3 text-white">Dados não disponíveis.</p>
                                        <?php 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"><?php echo e($tabuaTresDias['seguinte']['dataFormatada']); ?></small>
                                        </h6>

                                        <?php if($tabuaTresDias['seguinte']['dados']): ?>
                                            <ul class="text-white" style="list-style: none; padding: 0;">
                                                <?php $__currentLoopData = $tabuaTresDias['seguinte']['dados']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <li class="d-flex justify-content-between border-0 px-3 py-1">
                                                        <span><strong><?php echo e($m['hora']); ?></strong></span>
                                                        <span><?php echo e(number_format($m['altura'], 2, ',', '.')); ?> m</span>
                                                    </li>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </ul>
                                        <?php else: ?>
                                            <p class="small mb-0 p-3 text-white">Dados não disponíveis.</p>
                                        <?php 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-<?php echo e($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-<?php echo e($cor); ?>"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="text-white card-title fw-bold mb-1 border-bottom-<?php echo e($cor); ?>">Nível de
                                                    Ação</h6>
                                                <p class="mb-0 text-<?php echo e($cor); ?> fw-semibold"><?php echo e($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-<?php echo e($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';
                                                ?>

                                                
                                                <?php if(!$temAvisoAtivado): ?>
                                                    <p class="text-start text-white fw-bolder">Estamos sem avisos meteorológicos
                                                        para nossa região.</p>
                                                <?php else: ?>
                                                    
                                                    <?php if($boletim->status_aviso_chuva == 'ATIVADO'): ?>
                                                        <div class="col-md-4">
                                                            <p class="text-white mb-1 fw-medium">Chuva</p>
                                                            <img src="<?php echo e(asset('pmar/assets/img/icons/weather/rain.svg')); ?>" alt="Chuva"
                                                                class="img-fluid" style="width: 100px;">
                                                        </div>
                                                    <?php endif; ?>

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

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

                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card py-2 shadow-sm border-0 rounded-4 border-start border-nivel-acao border-<?php echo e($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>
                                                <?php echo e($boletim->creator->name ?? __('Não informado')); ?></p>
                                            <p class="mb-0 text-white"><strong>Sobreaviso:</strong>
                                                <?php echo e($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>

                    <?php 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">
                                <?php 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;"><?php echo e($boletim->acoes_programadas); ?></p>
                                            </div>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php 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="<?php echo e(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="<?php echo e(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="<?php echo e(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-<?php echo e($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="<?php echo e(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>
    <?php endif; ?>

    <?php $__env->startPush('scripts'); ?>
        <script src="<?php echo e(asset('pmar/js/defesa-civil/boletim-meteorologico-show.js')); ?>"></script>
    <?php $__env->stopPush(); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.landing_pages.boletim-meteorologico.theme', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/portal/resources/views/paginas/boletim-meteorologico/show.blade.php ENDPATH**/ ?>