@extends('layouts.admin.theme')

@section('title', __('Lista - Boletins Meteorológicos'))

@section('content')
@include('errors.messageFlash')

@php
    $perms = auth()->user()?->getPermissaoDetalhes('GERENCIADOR_DE_BOLETINS_METEOROLOGICOS') ?? [];
    $canAdd = $perms['adicionar'] ?? false;
    $canEdit = $perms['editar'] ?? false;
    $canDelete = $perms['excluir'] ?? false;
@endphp

<div class="card shadow-sm border-0" id="boletim-meteorologico-admin"
    data-toggle-url="{{ route('admin.boletim.meteorologico.toggle-status') }}"
    data-toggle-success="{{ __('Status atualizado com sucesso!') }}"
    data-toggle-error="{{ __('Erro ao atualizar status!') }}">
    @component('components.buttons._headLineButtonsBackAdd', [
        'headLine' => "<i class='fa fa-cloud-sun me-2'></i> " . __('Boletins Meteorológicos'),
        'routeAdd' => 'admin.boletim.meteorologico.create',
        'nameAdd' => __('Novo Boletim'),
        'routeBack' => null,
        'permission' => 'GERENCIADOR_DE_BOLETINS_METEOROLOGICOS',
    ])
    @endcomponent

    <div class="card-body">
        {{-- Ações Rápidas --}}
        <div class="row g-2 mb-4">
            @if($canAdd)
                <div class="col-12 col-md-4">
                    <a href="{{ route('admin.sobreavisos.index') }}" class="card text-decoration-none border h-100 action-card">
                        <div class="card-body text-center py-2 px-3">
                            <div class="mb-1">
                                <i class="fa-solid fa-triangle-exclamation fa-lg text-warning"></i>
                            </div>
                            <small class="card-title mb-0 fw-semibold text-dark d-block" style="font-size: 0.875rem;">
                                {{ __('Sobreaviso') }}
                            </small>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-md-4">
                    <a href="{{ route('admin.tabua.index') }}" class="card text-decoration-none border h-100 action-card">
                        <div class="card-body text-center py-2 px-3">
                            <div class="mb-1">
                                <i class="fa-solid fa-water fa-lg text-info"></i>
                            </div>
                            <small class="card-title mb-0 fw-semibold text-dark d-block" style="font-size: 0.875rem;">
                                {{ __('Tábua de Marés') }}
                            </small>
                        </div>
                    </a>
                </div>
            @endif
            <div class="col-12 {{ $canAdd ? 'col-md-4' : 'col-md-6 offset-md-3' }}">
                <a href="{{ route('paginas.boletim-meteorologico.index') }}" target="_blank" class="card text-decoration-none border h-100 action-card">
                    <div class="card-body text-center py-2 px-3">
                        <div class="mb-1">
                            <i class="fa-solid fa-newspaper fa-lg text-primary"></i>
                        </div>
                        <small class="card-title mb-0 fw-semibold text-dark d-block" style="font-size: 0.875rem;">
                            {{ __('Boletins Publicados') }}
                            <i class="fa-solid fa-external-link-alt ms-1" style="font-size: 0.7em; opacity: 0.6;"></i>
                        </small>
                    </div>
                </a>
            </div>
        </div>
        @php
            $hasActiveFilters = request()->filled('q') || request()->filled('status');
        @endphp

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">
                    <i class="fa-solid fa-filter me-2 text-primary"></i>
                    {{ __('Filtros de Busca') }}
                </h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('admin.boletim.meteorologico.index') }}" id="filtrosForm">
                    <div class="row g-2 align-items-end">
                        <div class="col-12 col-lg-5">
                            <label for="filtro_q" class="form-label fw-semibold">
                                <i class="fa-solid fa-magnifying-glass me-1 text-muted"></i>
                                {{ __('Pesquisar') }}
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">
                                    <i class="fa-solid fa-newspaper text-muted"></i>
                                </span>
                                <input
                                    type="text"
                                    id="filtro_q"
                                    name="q"
                                    class="form-control"
                                    placeholder="{{ __('Buscar boletins...') }}"
                                    value="{{ request('q') }}"
                                >
                            </div>
                        </div>

                        <div class="col-12 col-lg-3">
                            <label for="filtro_status" class="form-label fw-semibold">
                                <i class="fa-solid fa-toggle-on me-1 text-muted"></i>
                                {{ __('Status') }}
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">
                                    <i class="fa-solid fa-circle-check text-muted"></i>
                                </span>
                                <select
                                    id="filtro_status"
                                    name="status"
                                    class="form-select"
                                >
                                    <option value="">{{ __('Todos os Status') }}</option>
                                    <option value="ATIVO" {{ request('status') == 'ATIVO' ? 'selected' : '' }}>{{ __('Ativos') }}</option>
                                    <option value="INATIVO" {{ request('status') == 'INATIVO' ? 'selected' : '' }}>{{ __('Inativos') }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-12 col-lg-4">
                            <div class="d-flex gap-2">
                                <button class="btn btn-primary flex-fill" type="submit">
                                    <i class="fa-solid fa-magnifying-glass me-1"></i>
                                    {{ __('Filtrar') }}
                                </button>
                                <a href="{{ route('admin.boletim.meteorologico.index') }}" class="btn btn-outline-secondary">
                                    <i class="fa-solid fa-rotate-left me-1"></i>
                                    {{ __('Limpar') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    @if($hasActiveFilters)
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    <small class="text-muted fw-semibold me-2">
                                        <i class="fa-solid fa-info-circle me-1"></i>
                                        {{ __('Filtros ativos:') }}
                                    </small>
                                    @if(request()->filled('q'))
                                        <span class="badge bg-secondary">
                                            <i class="fa-solid fa-magnifying-glass me-1"></i>
                                            {{ __('Busca') }}: "{{ request()->input('q') }}"
                                            <button type="button" class="btn-close btn-close-white ms-2" style="font-size: 0.7em;" onclick="document.getElementById('filtro_q').value=''; document.getElementById('filtrosForm').submit();"></button>
                                        </span>
                                    @endif
                                    @if(request()->filled('status'))
                                        <span class="badge bg-{{ request()->input('status') === 'ATIVO' ? 'success' : 'secondary' }}">
                                            <i class="fa-solid fa-toggle-{{ request()->input('status') === 'ATIVO' ? 'on' : 'off' }} me-1"></i>
                                            {{ request()->input('status') === 'ATIVO' ? __('Ativos') : __('Inativos') }}
                                            <button type="button" class="btn-close btn-close-white ms-2" style="font-size: 0.7em;" onclick="document.getElementById('filtro_status').value=''; document.getElementById('filtrosForm').submit();"></button>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>

        {{-- Tabela --}}
        <x-tables._table :thead="[
            __('Status'),
            __('Número'),
            __('Data'),
            __('Estado Manhã'),
            __('Estado Tarde'),
            __('Estado Noite'),
            __('Nível de Ação'),
            __('Link'),
            __('Ações'),
        ]" :pagination="$boletins->links()">
            <x-slot name="body">
                @forelse($boletins as $boletim)
                    <tr>
                        <td>
                            @if($canEdit)
                                <div class="form-check form-switch d-flex justify-content-center">
                                    <input class="form-check-input status-toggle js-status-toggle" type="checkbox"
                                        data-boletim-id="{{ $boletim->id }}"
                                        {{ $boletim->status == 'ATIVO' ? 'checked' : '' }}
                                        style="transform: scale(1.5); cursor: pointer;">
                                </div>
                            @else
                                <span class="badge {{ $boletim->status === 'ATIVO' ? 'bg-success' : 'bg-secondary' }}">
                                    {{ __($boletim->status === 'ATIVO' ? 'Ativo' : 'Inativo') }}
                                </span>
                            @endif
                        </td>
                        <td>{{ $boletim->numero_boletim }}</td>
                        <td>{{ \Carbon\Carbon::parse($boletim->data)->format('d/m/Y') }}</td>
                        <td>{{ $boletim->estado_manha }}</td>
                        <td>{{ $boletim->estado_tarde }}</td>
                        <td>{{ $boletim->estado_noite }}</td>
                        <td>
                            @php
                                $cores = [
                                    'VIGILÂNCIA' => 'success',
                                    'OBSERVAÇÃO' => 'warning',
                                    'ATENÇÃO' => 'danger',
                                    'ALERTA' => 'red',
                                    'ALERTA MÁXIMO' => 'purple',
                                ];
                                $cor = $cores[$boletim->nivel_de_acao] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $cor }}">
                                {{ $boletim->nivel_de_acao }}
                            </span>
                        </td>
                        <td>
                            <div class="link-container" data-boletim-id="{{ $boletim->id }}">
                                @if($boletim->status == 'ATIVO')
                                    <a target="_blank" href="{{ route('paginas.boletim-meteorologico.show', $boletim->id) }}"
                                        class="btn btn-sm btn-outline-primary">
                                        <i class="fa fa-external-link-alt"></i>
                                    </a>
                                @else
                                    <button class="btn btn-sm btn-outline-secondary" disabled title="Boletim desativado">
                                        <i class="fa fa-external-link-alt"></i>
                                    </button>
                                @endif
                            </div>
                        </td>
                        <td>
                            @if($canEdit || $canDelete)
                                <div class="d-flex justify-content-center gap-1">
                                    @if($canEdit)
                                        <a href="{{ route('admin.boletim.meteorologico.edit', $boletim->id) }}"
                                            class="btn btn-warning btn-sm" title="{{ __('Editar') }}">
                                            <i class="fa fa-pen"></i>
                                        </a>
                                    @endif

                                    @if($canDelete)
                                        <form action="{{ route('admin.boletim.meteorologico.destroy', $boletim->id) }}"
                                            method="POST"
                                            onsubmit="return confirm('{{ __('Deseja realmente excluir este boletim?') }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-danger btn-sm" title="{{ __('Excluir') }}">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted">
                            <i class="fa fa-info-circle"></i> {{ __('Nenhum boletim encontrado') }}
                        </td>
                    </tr>
                @endforelse
            </x-slot>
        </x-tables._table>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="{{ asset('pmar/css/defesa-civil/boletim-meteorologico-admin.css') }}">
<style>
    /* Cards de Ação Rápida - Pequenos e Sutis */
    .action-card {
        border: 1px solid #e9ecef !important;
        background: #fff;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .action-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        border-color: #ced4da !important;
        text-decoration: none;
        background-color: #f8f9fa;
    }

    .action-card .card-body {
        padding: 0.75rem 0.5rem;
    }

    .action-card:hover .fa-lg {
        transform: scale(1.05);
        transition: transform 0.2s ease;
    }

    .action-card .fa-lg {
        transition: transform 0.2s ease;
        opacity: 0.8;
    }

    .action-card:hover .fa-lg {
        opacity: 1;
    }

    .action-card .card-title {
        color: #495057;
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .action-card:hover .card-title {
        color: #212529;
    }

    /* Melhorias visuais para os filtros */
    .card-header.bg-light {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    }

    .input-group-text {
        border-right: none;
        transition: all 0.3s ease;
    }

    .form-control:focus,
    .form-select:focus {
        border-left: none;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    }

    .input-group:focus-within .input-group-text {
        background-color: #e7f1ff;
        border-color: #86b7fe;
    }

    .badge {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .badge .btn-close {
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    .badge .btn-close:hover {
        opacity: 1;
    }

    .btn-primary {
        box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

    .btn-outline-secondary {
        transition: all 0.3s ease;
        min-width: 100px;
    }

    .btn-outline-secondary:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
    }

    .d-flex.gap-2 {
        align-items: stretch;
    }

    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    @media (max-width: 991px) {
        .d-flex.gap-2 {
            flex-direction: column;
        }

        .d-flex.gap-2 .btn {
            width: 100%;
        }

        .badge {
            font-size: 0.75rem;
            padding: 0.4rem 0.6rem;
        }
    }

    /* Animação suave para os badges de filtros ativos */
    .badge {
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

</style>
@endpush

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