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

    $cores = [
        'VIGILÂNCIA' => 'green',
        'OBSERVAÇÃO' => 'warning',
        'ATENÇÃO' => 'danger',
        'ALERTA' => 'red',
        'ALERTA MÁXIMO' => 'indigo',
    ];
    $nivelAtual = old('nivel_de_acao', $boletim?->nivel_de_acao ?? 'VIGILÂNCIA');
    $corNivel = $cores[$nivelAtual] ?? 'secondary';

    $estadoManha = old('estado_manha', $boletim?->estado_manha ?? null);
    $estadoTarde = old('estado_tarde', $boletim?->estado_tarde ?? null);
    $estadoNoite = old('estado_noite', $boletim?->estado_noite ?? null);
@endphp

<!-- Modal Sobreaviso -->
<div class="modal fade" id="modalSobreaviso" tabindex="-1" aria-labelledby="modalSobreavisoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalSobreavisoLabel">
                    <i class="fas fa-bell me-2"></i>{{ __('Novo Sobreaviso') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{{ __('Fechar') }}"></button>
            </div>
            <form method="POST" action="{{ route('admin.sobreavisos.quick-store') }}" data-quick-sobreaviso-form>
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold" for="novo_nome_sobreaviso">{{ __('Nome do Sobreaviso') }} *</label>
                        <input type="text" name="nome" id="novo_nome_sobreaviso" class="form-control"
                            value="{{ old('nome') }}"
                            placeholder="{{ __('Ex: João Silva') }}" required>
                        <div class="form-text">{{ __('Nome do agente de sobreaviso') }}</div>
                        @error('nome')
                        <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancelar') }}</button>
                    <button type="button" class="btn btn-success js-save-sobreaviso">
                        <i class="fas fa-save me-2"></i>{{ __('Salvar') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <input type="hidden" data-quick-sobreaviso-message="{{ __('Agente salvo com sucesso!') }}">
</div>

<div class="card shadow-lg">
    <div class="card-body">
        <form action="{{ $formAction }}" method="POST" id="boletimMeteorologicoForm">
            @csrf
            @if($method !== 'POST')
                @method($method)
            @endif

            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 text-primary">
                        <i class="fas fa-info-circle me-2"></i>{{ __('Informações Básicas') }}
                    </h5>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold" for="numero_boletim">{{ __('Número do Boletim') }}</label>
                    <input type="text" name="numero_boletim" id="numero_boletim" class="form-control" readonly
                        value="{{ $boletim?->numero_boletim ?? __('Será gerado automaticamente') }}"
                        placeholder="{{ __('Gerado automaticamente pela data') }}">
                    <div class="form-text">{{ __('Número gerado automaticamente baseado na data') }}</div>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold" for="data">{{ __('Data') }} *</label>
                    <input type="date" name="data" id="data" class="form-control"
                        value="{{ old('data', $boletim?->data?->format('Y-m-d') ?? date('Y-m-d', strtotime('+1 day'))) }}" required>
                    <div class="form-text">{{ __('Data de referência do boletim') }}</div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 text-primary">
                        <i class="fas fa-sun me-2"></i>{{ __('Previsão por Período') }}
                    </h5>
                </div>

                @foreach (['manha' => __('Manhã'), 'tarde' => __('Tarde'), 'noite' => __('Noite')] as $periodo => $label)
                    @php
                        $estado = $periodo === 'manha' ? $estadoManha : ($periodo === 'tarde' ? $estadoTarde : $estadoNoite);
                        $iconUrl = $estado && isset($meteocons[$estado]) ? asset($meteocons[$estado]) : null;
                    @endphp
                    <div class="col-md-12 mb-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-soft text-black fw-bold d-flex justify-content-between align-items-center">
                                <span>{{ $label }}</span>
                            </div>
                            <div class="card-body">
                                <label class="form-label fw-bold" for="estado_{{ $periodo }}">{{ __('Estado') }} {{ $label }} *</label>
                                <div class="d-flex align-items-center gap-3 flex-wrap">
                                    <div class="flex-shrink-0 d-flex align-items-center justify-content-center bg-light rounded-3 border" style="width: 64px; height: 64px;">
                                        <img src="{{ $iconUrl ?? asset('pmar/assets/img/icons/weather/nublado.svg') }}" alt="" class="estado-select-icon img-fluid" style="max-width: 56px; max-height: 56px; {{ !$iconUrl ? 'opacity:0.3;' : '' }}" data-estado-icon="{{ $periodo }}">
                                    </div>
                                    <div class="flex-grow-1" style="min-width: 200px;">
                                        <select name="estado_{{ $periodo }}" id="estado_{{ $periodo }}" class="form-select form-select-lg js-weather-select" required>
                                            <option value="">{{ __('Selecione o estado...') }}</option>
                                            @foreach ($options['estados'] as $est)
                                                <option value="{{ $est }}" data-icon="{{ asset($meteocons[$est]) }}"
                                                    {{ old("estado_{$periodo}", $boletim?->{"estado_{$periodo}"}) === $est ? 'selected' : '' }}>
                                                    {{ __($est) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-text mt-1">{{ __('Define o ícone exibido no boletim') }}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 text-primary">
                        <i class="fas fa-thermometer-half me-2"></i>{{ __('Dados Meteorológicos') }}
                    </h5>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold" for="temperatura_minima">{{ __('Temperatura Mínima (°C)') }} *</label>
                    <input type="number" name="temperatura_minima" id="temperatura_minima" class="form-control"
                        value="{{ old('temperatura_minima', $boletim->temperatura_minima ?? null) }}"
                        step="0.1" min="-50" max="50"
                        placeholder="{{ __('Ex: 18.5') }}" required>
                    <div class="form-text">{{ __('Temperatura mínima prevista (use ponto para decimais)') }}</div>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold" for="temperatura_maxima">{{ __('Temperatura Máxima (°C)') }} *</label>
                    <input type="number" name="temperatura_maxima" id="temperatura_maxima" class="form-control"
                        value="{{ old('temperatura_maxima', $boletim->temperatura_maxima ?? null) }}"
                        step="0.1" min="-50" max="50"
                        placeholder="{{ __('Ex: 28.5') }}" required>
                    <div class="form-text">{{ __('Temperatura máxima prevista (use ponto para decimais)') }}</div>
                </div>

                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold" for="probabilidade_chuva">{{ __('Probabilidade de Chuva (%)') }} *</label>
                    <input type="number" name="probabilidade_chuva" id="probabilidade_chuva" class="form-control"
                        value="{{ old('probabilidade_chuva', $boletim->probabilidade_chuva ?? null) }}"
                        min="0" max="100"
                        placeholder="{{ __('Ex: 30') }}" required>
                    <div class="form-text">{{ __('0% a 100% (apenas números inteiros)') }}</div>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold" for="volume_chuva">{{ __('Volume de Chuva (mm)') }} *</label>
                    <input type="number" name="volume_chuva" id="volume_chuva" class="form-control"
                        value="{{ old('volume_chuva', $boletim->volume_chuva ?? null) }}"
                        step="0.1" min="0"
                        placeholder="{{ __('Ex: 100') }}" required>
                    <div class="form-text">{{ __('Volume total previsto (use ponto para decimais)') }}</div>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold" for="umidade_minima">{{ __('Umidade Mínima do Ar (%)') }} *</label>
                    <input type="number" name="umidade_minima" id="umidade_minima" class="form-control"
                        value="{{ old('umidade_minima', $boletim->umidade_minima ?? null) }}"
                        step="0.1" min="0" max="100"
                        placeholder="{{ __('Ex: 30') }}" required>
                    <div class="form-text">{{ __('Umidade mínima prevista (use ponto para decimais)') }}</div>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label fw-bold" for="umidade_maxima">{{ __('Umidade Máxima do Ar (%)') }} *</label>
                    <input type="number" name="umidade_maxima" id="umidade_maxima" class="form-control"
                        value="{{ old('umidade_maxima', $boletim->umidade_maxima ?? null) }}"
                        step="0.1" min="0" max="100"
                        placeholder="{{ __('Ex: 80') }}" required>
                    <div class="form-text">{{ __('Umidade máxima prevista (use ponto para decimais)') }}</div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 text-primary">
                        <i class="fas fa-signal me-2"></i>{{ __('Nível de Ação e Alertas') }}
                    </h5>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold" for="nivel_de_acao">{{ __('Nível de Ação') }} *</label>
                    <div class="rounded-3 border border-start border-nivel-acao border-{{ $corNivel }} border-5 p-3 bg-light bg-opacity-50" id="nivel-acao-input-wrap">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="flex-shrink-0">
                                <i class="fa-solid fa-signal fa-lg text-{{ $corNivel }}"></i>
                            </span>
                            <select name="nivel_de_acao" id="nivel_de_acao" class="form-select form-select-lg js-nivel-acao-select flex-grow-1" style="max-width: 280px;" required>
                        @foreach ($options['niveis_acao'] as $nivel)
                            <option value="{{ $nivel }}" data-cor="{{ $cores[$nivel] ?? 'secondary' }}"
                                {{ old('nivel_de_acao', $boletim?->nivel_de_acao ?? 'VIGILÂNCIA') === $nivel ? 'selected' : '' }}>
                                {{ __($nivel) }}
                            </option>
                        @endforeach
                    </select>
                    </div>
                    <div class="form-text mt-2 mb-0">{{ __('Define a cor e gravidade mostrada no boletim') }}</div>
                    </div>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">{{ __('Avisos Meteorológicos') }}</label>
                    <div class="border rounded p-3 bg-light">
                        <div class="row">
                            @foreach ([
                                'status_aviso_chuva' => ['label' => __('Chuva'), 'icon' => 'fas fa-cloud-rain'],
                                'status_aviso_vento' => ['label' => __('Vento'), 'icon' => 'fas fa-wind'],
                                'status_aviso_ressaca' => ['label' => __('Ressaca'), 'icon' => 'fas fa-water'],
                            ] as $campo => $info)
                                <div class="col-md-4 mb-2">
                                    <label class="form-label small fw-bold" for="{{ $campo }}">{{ $info['label'] }}</label>
                                    <select name="{{ $campo }}" id="{{ $campo }}" class="form-select form-select-sm">
                                        @foreach($options['status_avisos'] as $statusAviso)
                                            <option value="{{ $statusAviso }}" {{ old($campo, $boletim->{$campo} ?? 'DESATIVADO') === $statusAviso ? 'selected' : '' }}>
                                                {{ __($statusAviso) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endforeach
                        </div>
                        <div class="form-text">{{ __('Avisos ativados mostram ícones especiais no boletim') }}</div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="border-bottom pb-2 mb-3 text-primary">
                        <i class="fas fa-circle-info me-2"></i>{{ __('Informações Complementares') }}
                    </h5>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold" for="sobreaviso_cemaden_id">{{ __('Sobreaviso CEMADEN') }} *</label>
                    <div class="input-group">
                        <select name="sobreaviso_cemaden_id" class="form-select" id="sobreaviso_cemaden_id" required data-sobreaviso-select>
                            <option value="">{{ __('Selecione o sobreaviso...') }}</option>
                            @foreach ($sobreavisos as $sobreaviso)
                            <option value="{{ $sobreaviso->id }}" {{ old('sobreaviso_cemaden_id', $boletim->sobreaviso_cemaden_id ?? null) == $sobreaviso->id ? 'selected' : '' }}>
                                {{ $sobreaviso->nome }}
                            </option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-outline-secondary btn-add-sobreaviso" data-bs-toggle="modal" data-bs-target="#modalSobreaviso">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="form-text">{{ __('Agente de sobreaviso designado') }}</div>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold" for="status">{{ __('Status do Boletim') }} *</label>
                    <select name="status" id="status" class="form-select" required>
                        @foreach($options['status_publicacao'] as $statusPublicacao)
                            <option value="{{ $statusPublicacao }}" {{ old('status', $boletim->status ?? 'ATIVO') === $statusPublicacao ? 'selected' : '' }}>
                                {{ __($statusPublicacao === 'ATIVO' ? 'Ativo' : 'Inativo') }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">{{ __('Status de publicação do boletim') }}</div>
                </div>
                <div class="col-md-12 mb-3">
                    <label class="form-label fw-bold" for="acoes_programadas">{{ __('Ações Programadas da Defesa Civil') }}</label>
                    <textarea name="acoes_programadas" id="acoes_programadas" class="form-control" rows="5"
                        placeholder="{{ __('Descreva as ações programadas pela Defesa Civil...') }}">{{ old('acoes_programadas', $boletim->acoes_programadas ?? '') }}</textarea>
                    <div class="form-text">{{ __('Campo opcional para descrever ações programadas (não obrigatório)') }}</div>
                </div>
                <div class="col-md-12 mb-3">
                    <label class="form-label fw-bold" for="observacao">{{ __('Observação') }}</label>
                    <textarea name="observacao" id="observacao" class="form-control" rows="5"
                        placeholder="{{ __('Adicione observações gerais sobre o boletim...') }}">{{ old('observacao', $boletim->observacao ?? '') }}</textarea>
                    <div class="form-text">{{ __('Campo opcional para observações gerais (não obrigatório)') }}</div>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center border-top pt-4">
                <a href="{{ route('admin.boletim.meteorologico.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times me-2"></i>{{ __('Cancelar') }}
                </a>
                <button type="submit" class="btn btn-success btn-lg">
                    <i class="fas fa-save me-2"></i>{{ $submitLabel }}
                </button>
            </div>
        </form>
    </div>
</div>