@extends('layouts.publicador.novo_padrao')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    <div class="form-page">
        <div class="container-fluid">
            
            <header class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-newspaper"></i>
                    </div>
                    <div class="header-text">
                        <h1>@lang('labels.newsletter')</h1>
                        <p>@lang('labels.acoes.enviar') @lang('labels.pauta')</p>
                    </div>
                </div>
                <div class="header-actions">
                    <a href="{{ route('publicador.newsletter.index') }}" class="btn-back">
                        <i class="bi bi-arrow-left"></i>
                        <span>Voltar</span>
                    </a>
                </div>
            </header>

            @if ($errors->any())
                <div class="alert-box alert-error" id="alertError">
                    <div class="alert-icon">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                    <div class="alert-content">
                        <p>@lang('labels.msg.verifique')</p>
                    </div>
                    <button type="button" class="alert-close" onclick="this.parentElement.remove()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            @endif

            {!! Form::model($model, ['route' => ['publicador.newsletter.salvar_pauta'], 'method' => 'post', 'id' => 'main-form']) !!}
            {{ Form::hidden('tipo', 1) }}

            <div class="form-sections">
                
                <section class="form-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="section-title">
                            <h2>Destinatários</h2>
                            <p>Selecione os filtros para definir quem receberá a pauta</p>
                        </div>
                    </div>

                    <div class="section-body">
                        <div class="filter-groups">
                            
                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-tag"></i>
                                    <label>@choice('labels.categorias', 0)</label>
                                    <span class="filter-required">*</span>
                                </div>
                                <div class="checkbox-list @if ($errors->has('categorias')) has-error @endif">
                                    @foreach($categorias as $c)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('categorias[]', $c->id, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $c->descricao }}</span>
                                        </div>
                                    @endforeach
                                </div>
                                @if ($errors->has('categorias'))
                                    <div class="field-error">
                                        @foreach ($errors->get('categorias') as $error)
                                            <span>{{ $error }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-gender-ambiguous"></i>
                                    <label>@lang('labels.sexo')</label>
                                </div>
                                <div class="checkbox-list">
                                    @foreach(\Config::get('constants.sexo') as $sexo)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('sexo[]', $sexo, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $sexo }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-geo-alt"></i>
                                    <label>@choice('labels.cidades', 0)</label>
                                </div>
                                <div class="checkbox-list">
                                    @foreach($cidades as $cidade)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('cidades[]', $cidade, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $cidade }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="filter-group">
                                <div class="filter-group-header">
                                    <i class="bi bi-map"></i>
                                    <label>@choice('labels.estados', 0)</label>
                                </div>
                                <div class="checkbox-list">
                                    @foreach($estados as $estado)
                                        <div class="checkbox-item">
                                            {{ Form::checkbox('estado[]', $estado, null, ['class' => 'checkbox-input']) }}
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-label">{{ $estado }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

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

                <section class="form-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="bi bi-card-heading"></i>
                        </div>
                        <div class="section-title">
                            <h2>Título da Newsletter</h2>
                            <p>Defina o título que será exibido no e-mail</p>
                        </div>
                    </div>

                    <div class="section-body">
                        <div class="form-field">
                            <label class="field-label">
                                <i class="bi bi-type"></i>
                                @lang('labels.titulo')
                                <span class="field-required">*</span>
                            </label>
                            {{ Form::text('titulo', old('titulo', __('labels.msg.titulo_newsletter')), [
                                'class' => 'field-input '.($errors->has('titulo') ? 'is-invalid' : ''),
                                'maxlength' => 250,
                                'placeholder' => 'Digite o título da newsletter...'
                            ]) }}
                            @if ($errors->has('titulo'))
                                <div class="field-error">
                                    <span>{{ $errors->first('titulo') }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>

                <section class="form-section">
                    <div class="section-header">
                        <div class="section-icon">
                            <i class="bi bi-file-earmark-text"></i>
                        </div>
                        <div class="section-title">
                            <h2>Notícias</h2>
                            <p>@lang('labels.msg.selecione_noticias')</p>
                        </div>
                        <div class="section-badge">
                            <span class="badge-count" id="noticiasCount">0 selecionadas</span>
                        </div>
                    </div>

                    <div class="section-body">
                        <div class="news-list @if ($errors->has('noticias')) has-error @endif">
                            @foreach($noticias as $noticia)
                                <div class="news-item @if($noticia->data_publicacao > now()) news-scheduled @endif">
                                    {{ Form::checkbox('noticias[]', $noticia->id, null, ['class' => 'news-checkbox']) }}
                                    <span class="news-custom-check"></span>
                                    <div class="news-content">
                                        <div class="news-date">
                                            <i class="bi bi-calendar-event"></i>
                                            {{ $noticia->data_publicacao->format('d/m/Y H:i') }}
                                        </div>
                                        <div class="news-title">{{ $noticia->titulo }}</div>
                                        @if($noticia->data_publicacao > now())
                                            <span class="news-badge">Agendada</span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if ($errors->has('noticias'))
                            <div class="field-error">
                                @foreach ($errors->get('noticias') as $error)
                                    <span>{{ $error }}</span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </section>

                @if($podcasts->isNotEmpty())
                    <section class="form-section">
                        <div class="section-header">
                            <div class="section-icon">
                                <i class="bi bi-mic"></i>
                            </div>
                            <div class="section-title">
                                <h2>@choice('labels.podcasts', 0)</h2>
                                <p>Selecione os podcasts que deseja incluir na pauta</p>
                            </div>
                            <div class="section-badge">
                                <span class="badge-count" id="podcastsCount">0 selecionados</span>
                            </div>
                        </div>

                        <div class="section-body">
                            <div class="news-list">
                                @foreach($podcasts as $podcast)
                                    <div class="news-item @if($podcast->data_publicacao > now()) news-scheduled @endif">
                                        {{ Form::checkbox('noticias[]', $podcast->id, null, ['class' => 'news-checkbox podcast-checkbox']) }}
                                        <span class="news-custom-check"></span>
                                        <div class="news-content">
                                            <div class="news-date">
                                                <i class="bi bi-calendar-event"></i>
                                                {{ $podcast->data_publicacao->format('d/m/Y H:i') }}
                                            </div>
                                            <div class="news-title">{{ $podcast->titulo }}</div>
                                            @if($podcast->data_publicacao > now())
                                                <span class="news-badge">Agendado</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </section>
                @endif

            </div>

            <div class="form-actions">
                <a href="{{ route('publicador.newsletter.index') }}" class="btn-action btn-cancel">
                    <i class="bi bi-x-lg"></i>
                    <span>@lang('labels.acoes.cancelar')</span>
                </a>
                <button type="submit" class="btn-action btn-save" id="submit-btn">
                    <i class="bi bi-check-lg"></i>
                    <span>@lang('labels.acoes.salvar')</span>
                </button>
            </div>

            {!! Form::close() !!}

        </div>
    </div>

    <style>
        :root {
            --color-primary: #006AA1;
            --color-primary-dark: #005580;
            --color-primary-light: #e8f4f9;
            --color-secondary: #6c757d;
            --color-success: #28a745;
            --color-success-light: #d4edda;
            --color-danger: #dc3545;
            --color-danger-light: #f8d7da;
            --color-warning: #ffc107;
            --color-warning-light: #fff3cd;
            --color-info: #17a2b8;
            --color-info-light: #d1ecf1;
            
            --color-white: #ffffff;
            --color-gray-50: #f8fafc;
            --color-gray-100: #f1f5f9;
            --color-gray-200: #e2e8f0;
            --color-gray-300: #cbd5e1;
            --color-gray-400: #94a3b8;
            --color-gray-500: #64748b;
            --color-gray-600: #475569;
            --color-gray-700: #334155;
            --color-gray-800: #1e293b;
            --color-gray-900: #0f172a;
            
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--color-gray-100);
            color: var(--color-gray-800);
            line-height: 1.6;
        }

        .form-page {
            min-height: 100vh;
            padding: 1.5rem;
        }

        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--color-white);
            padding: 1.5rem 2rem;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
        }

        .header-content {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .header-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 16px rgba(0, 106, 161, 0.3);
        }

        .header-icon i {
            font-size: 1.75rem;
            color: var(--color-white);
        }

        .header-text h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-gray-800);
            margin-bottom: 0.25rem;
        }

        .header-text p {
            font-size: 0.875rem;
            color: var(--color-gray-500);
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: var(--color-gray-200);
            color: var(--color-gray-700);
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all var(--transition-base);
        }

        .btn-back:hover {
            background: var(--color-gray-300);
            color: var(--color-gray-800);
            transform: translateX(-2px);
        }

        .alert-box {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-radius: var(--radius-lg);
            margin-bottom: 1.5rem;
            animation: slideDown 0.3s ease;
        }

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

        .alert-error {
            background: var(--color-danger-light);
            border-left: 4px solid var(--color-danger);
        }

        .alert-icon {
            font-size: 1.25rem;
        }

        .alert-error .alert-icon {
            color: var(--color-danger);
        }

        .alert-content {
            flex: 1;
        }

        .alert-content p {
            margin: 0;
            font-size: 0.875rem;
            color: var(--color-gray-700);
        }

        .alert-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--color-gray-500);
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .alert-close:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .form-sections {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-section {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem 2rem;
            background: var(--color-gray-50);
            border-bottom: 1px solid var(--color-gray-200);
        }

        .section-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .section-icon i {
            font-size: 1.5rem;
            color: var(--color-primary-dark);
        }

        .section-title {
            flex: 1;
        }

        .section-title h2 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-gray-800);
            margin-bottom: 0.25rem;
        }

        .section-title p {
            font-size: 0.8125rem;
            color: var(--color-gray-500);
        }

        .section-badge {
            display: flex;
            align-items: center;
        }

        .badge-count {
            padding: 0.375rem 0.875rem;
            background: var(--color-primary-light);
            color: var(--color-primary-dark);
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .section-body {
            padding: 2rem;
        }

        .filter-groups {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .filter-group-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: var(--color-gray-50);
            border-radius: var(--radius-md);
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .filter-group-header i {
            font-size: 1rem;
            color: var(--color-primary);
        }

        .filter-group-header label {
            flex: 1;
            margin: 0;
            font-size: 0.875rem;
        }

        .filter-required {
            color: var(--color-danger);
            font-weight: 700;
        }

        .checkbox-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1rem;
            background: var(--color-gray-50);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            max-height: 240px;
            overflow-y: auto;
        }

        .checkbox-list.has-error {
            border-color: var(--color-danger);
        }

        .checkbox-list::-webkit-scrollbar {
            width: 8px;
        }

        .checkbox-list::-webkit-scrollbar-track {
            background: var(--color-gray-100);
            border-radius: var(--radius-sm);
        }

        .checkbox-list::-webkit-scrollbar-thumb {
            background: var(--color-gray-300);
            border-radius: var(--radius-sm);
        }

        .checkbox-list::-webkit-scrollbar-thumb:hover {
            background: var(--color-gray-400);
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.625rem 0.75rem;
            background: var(--color-white);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            user-select: none;
        }

        .checkbox-item:hover {
            background: var(--color-primary-light);
        }

        .checkbox-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .checkbox-custom {
            position: relative;
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-gray-300);
            border-radius: var(--radius-sm);
            background: var(--color-white);
            transition: all var(--transition-fast);
            flex-shrink: 0;
        }

        .checkbox-input:checked + .checkbox-custom {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

        .checkbox-input:checked + .checkbox-custom::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 4px;
            height: 9px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .checkbox-label {
            flex: 1;
            font-size: 0.875rem;
            color: var(--color-gray-700);
            line-height: 1.4;
        }

        .field-error {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            padding: 0.5rem 0.75rem;
            background: var(--color-danger-light);
            border-left: 3px solid var(--color-danger);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--color-danger);
            font-weight: 500;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .field-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .field-label i {
            font-size: 1rem;
            color: var(--color-primary);
        }

        .field-required {
            color: var(--color-danger);
            font-weight: 700;
        }

        .field-input {
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            color: var(--color-gray-800);
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .field-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-light);
        }

        .field-input.is-invalid {
            border-color: var(--color-danger);
        }

        .field-input::placeholder {
            color: var(--color-gray-400);
        }

        .news-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            max-height: 500px;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .news-list.has-error {
            border: 2px solid var(--color-danger);
            border-radius: var(--radius-md);
            padding: 1rem;
        }

        .news-list::-webkit-scrollbar {
            width: 8px;
        }

        .news-list::-webkit-scrollbar-track {
            background: var(--color-gray-100);
            border-radius: var(--radius-sm);
        }

        .news-list::-webkit-scrollbar-thumb {
            background: var(--color-gray-300);
            border-radius: var(--radius-sm);
        }

        .news-list::-webkit-scrollbar-thumb:hover {
            background: var(--color-gray-400);
        }

        .news-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            background: var(--color-gray-50);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            user-select: none;
        }

        .news-item:hover {
            background: var(--color-white);
            border-color: var(--color-primary);
            box-shadow: var(--shadow-sm);
        }

        .news-item.news-scheduled {
            background: var(--color-warning-light);
            border-color: var(--color-warning);
        }

        .news-item.news-scheduled:hover {
            background: #fff9e6;
            border-color: #e0a800;
        }

        .news-checkbox {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .news-custom-check {
            position: relative;
            width: 22px;
            height: 22px;
            border: 2px solid var(--color-gray-300);
            border-radius: var(--radius-sm);
            background: var(--color-white);
            transition: all var(--transition-fast);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .news-checkbox:checked + .news-custom-check {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

        .news-checkbox:checked + .news-custom-check::after {
            content: '';
            position: absolute;
            left: 7px;
            top: 3px;
            width: 4px;
            height: 9px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .news-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .news-date {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--color-gray-500);
            font-weight: 500;
        }

        .news-date i {
            font-size: 0.875rem;
        }

        .news-title {
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--color-gray-800);
            line-height: 1.5;
        }

        .news-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            background: var(--color-warning);
            color: var(--color-white);
            border-radius: 999px;
            font-size: 0.6875rem;
            font-weight: 600;
            align-self: flex-start;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            padding: 2rem;
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
        }

        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 2rem;
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: var(--radius-md);
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all var(--transition-base);
            min-width: 160px;
            justify-content: center;
        }

        .btn-cancel {
            background: var(--color-gray-200);
            color: var(--color-gray-700);
        }

        .btn-cancel:hover {
            background: var(--color-gray-300);
            color: var(--color-gray-800);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-save {
            background: linear-gradient(135deg, var(--color-success), #218838);
            color: var(--color-white);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        .btn-save:hover {
            background: linear-gradient(135deg, #218838, #1e7e34);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
        }

        @media (max-width: 992px) {
            .filter-groups {
                grid-template-columns: 1fr;
            }

            .page-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .header-content {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .form-page {
                padding: 1rem;
            }

            .section-body {
                padding: 1.25rem;
            }

            .form-actions {
                flex-direction: column;
            }

            .btn-action {
                width: 100%;
            }

            .section-header {
                flex-wrap: wrap;
            }

            .section-badge {
                width: 100%;
                justify-content: center;
                margin-top: 0.5rem;
            }
        }
    </style>

    <script>
        (function() {
            'use strict';

            document.addEventListener('DOMContentLoaded', function() {
                const form = document.getElementById('main-form');
                
                if (form) {
                    form.addEventListener('submit', function(e) {
                        const categorias = document.querySelectorAll('input[name="categorias[]"]:checked');
                        
                        if (categorias.length === 0) {
                            e.preventDefault();
                            
                            const checkboxList = document.querySelector('.checkbox-list.has-error');
                            if (checkboxList) {
                                checkboxList.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }
                        }
                    });
                }

                const checkboxItems = document.querySelectorAll('.checkbox-item');
                checkboxItems.forEach(function(item) {
                    item.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        const checkbox = item.querySelector('.checkbox-input');
                        if (checkbox && e.target !== checkbox) {
                            checkbox.checked = !checkbox.checked;
                        }
                    });
                });

                const newsItems = document.querySelectorAll('.news-item');
                newsItems.forEach(function(item) {
                    item.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        const checkbox = item.querySelector('.news-checkbox');
                        if (checkbox && e.target !== checkbox) {
                            checkbox.checked = !checkbox.checked;
                            updateNewsCount();
                        }
                    });
                });

                const newsCheckboxes = document.querySelectorAll('.news-checkbox');
                newsCheckboxes.forEach(function(checkbox) {
                    checkbox.addEventListener('change', updateNewsCount);
                });

                function updateNewsCount() {
                    const noticiasCount = document.querySelectorAll('.news-checkbox:not(.podcast-checkbox):checked').length;
                    const podcastsCount = document.querySelectorAll('.podcast-checkbox:checked').length;
                    
                    const noticiasCountElement = document.getElementById('noticiasCount');
                    if (noticiasCountElement) {
                        noticiasCountElement.textContent = noticiasCount + (noticiasCount === 1 ? ' selecionada' : ' selecionadas');
                    }
                    
                    const podcastsCountElement = document.getElementById('podcastsCount');
                    if (podcastsCountElement) {
                        podcastsCountElement.textContent = podcastsCount + (podcastsCount === 1 ? ' selecionado' : ' selecionados');
                    }
                }

                updateNewsCount();
            });
        })();
    </script>
@endsection