@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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">

    <div class="list-page">
        <div class="container-fluid">
            
            <header class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-envelope-fill"></i>
                    </div>
                    <div class="header-text">
                        <h1>@lang('labels.newsletter')</h1>
                        <p>Gerencie o envio de newsletters e comunicados</p>
                    </div>
                </div>
                <div class="header-actions">
                    @can('mailing_adicionar')
                        <div class="btn-group-actions">
                            <a href="{{ route('publicador.newsletter.enviar_pauta') }}" class="btn-action btn-success">
                                <i class="bi bi-file-earmark-text"></i>
                                <span>@lang('labels.acoes.enviar') @lang('labels.pauta')</span>
                            </a>
                            <a href="{{ route('publicador.newsletter.enviar_mensagem') }}" class="btn-action btn-warning">
                                <i class="bi bi-chat-dots"></i>
                                <span>@lang('labels.acoes.enviar') @lang('labels.mensagem')</span>
                            </a>
                            <a href="{{ route('publicador.newsletter.enviar_arquivo') }}" class="btn-action btn-primary">
                                <i class="bi bi-paperclip"></i>
                                <span>@lang('labels.acoes.enviar') @choice('labels.arquivos', 1)</span>
                            </a>
                        </div>
                    @endcan
                </div>
            </header>

            <section class="filters-section">
                <div class="filters-header" id="filtersToggle">
                    <div class="filters-title">
                        <i class="bi bi-funnel"></i>
                        <span>Filtros de Busca</span>
                    </div>
                    <div class="filters-toggle">
                        <span class="filters-count" id="filtersCount"></span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                </div>

                <div class="filters-body" id="filtersBody">
                    {!! Form::open([
                        'route' => ['publicador.newsletter.index'],
                        'method' => 'GET',
                        'class' => 'filters-form',
                        'id' => 'filtersForm'
                    ]) !!}
                    
                    <div class="filters-grid">
                        <div class="filter-field">
                            <label class="filter-label">@lang('labels.titulo')</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-search"></i>
                                {{ Form::text('titulo', Request::query('titulo'), [
                                    'class' => 'filter-input',
                                    'placeholder' => 'Buscar por título...'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">@choice('labels.tipo', 1)</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-tag"></i>
                                {{ Form::select('tipo', Config::get('constants.tipos_newsletter'), Request::query('tipo'), [
                                    'class' => 'filter-input filter-select',
                                    'placeholder' => 'Todos os tipos'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">@lang('labels.status')</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-flag"></i>
                                {{ Form::select('status', Config::get('constants.status_newsletter'), Request::query('status'), [
                                    'class' => 'filter-input filter-select',
                                    'placeholder' => 'Todos os status'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">@lang('labels.created_at')</label>
                            <div class="filter-date-range">
                                {{ Form::text('data_cadastro_de', Request::query('data_cadastro_de'), [
                                    'class' => 'filter-input filter-date data-hora-filtro',
                                    'placeholder' => 'De',
                                    'autocomplete' => 'off'
                                ]) }}
                                <span class="date-separator">até</span>
                                {{ Form::text('data_cadastro_ate', Request::query('data_cadastro_ate'), [
                                    'class' => 'filter-input filter-date data-hora-filtro',
                                    'placeholder' => 'Até',
                                    'autocomplete' => 'off'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">@lang('labels.data_agendamento')</label>
                            <div class="filter-date-range">
                                {{ Form::text('data_agendamento_de', Request::query('data_agendamento_de'), [
                                    'class' => 'filter-input filter-date data-hora-filtro',
                                    'placeholder' => 'De',
                                    'autocomplete' => 'off'
                                ]) }}
                                <span class="date-separator">até</span>
                                {{ Form::text('data_agendamento_ate', Request::query('data_agendamento_ate'), [
                                    'class' => 'filter-input filter-date data-hora-filtro',
                                    'placeholder' => 'Até',
                                    'autocomplete' => 'off'
                                ]) }}
                            </div>
                        </div>
                    </div>

                    <div class="filters-actions">
                        <button type="button" class="btn-clear" id="btnClearFilters">
                            <i class="bi bi-x-lg"></i>
                            <span>Limpar</span>
                        </button>
                        <button type="submit" class="btn-search">
                            <i class="bi bi-search"></i>
                            <span>Pesquisar</span>
                        </button>
                    </div>
                    
                    {!! Form::close() !!}
                </div>
            </section>

            @if (session('status-success'))
                <div class="alert-box alert-success" id="alertSuccess">
                    <div class="alert-icon">
                        <i class="bi bi-check-circle-fill"></i>
                    </div>
                    <div class="alert-content">
                        <p>{{ session('status-success') }}</p>
                    </div>
                    <button type="button" class="alert-close" onclick="this.parentElement.remove()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            @endif

            @if (session('status-error'))
                <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>{{ session('status-error') }}</p>
                    </div>
                    <button type="button" class="alert-close" onclick="this.parentElement.remove()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            @endif

            <div class="alert-box alert-success alert-sucesso" style="display: none;">
                <div class="alert-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <div class="alert-content">
                    <p></p>
                </div>
                <button type="button" class="alert-close" onclick="this.parentElement.style.display='none'">
                    <i class="bi bi-x"></i>
                </button>
            </div>

            <div class="alert-box alert-error alert-erro" style="display: none;">
                <div class="alert-icon">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                </div>
                <div class="alert-content">
                    <p></p>
                </div>
                <button type="button" class="alert-close" onclick="this.parentElement.style.display='none'">
                    <i class="bi bi-x"></i>
                </button>
            </div>

            <section class="results-section">
                <div class="results-header">
                    <div class="results-info">
                        <span class="results-count">
                            <strong>{{ $lista->total() ?? $lista->count() }}</strong> 
                            {{ ($lista->total() ?? $lista->count()) == 1 ? 'registro encontrado' : 'registros encontrados' }}
                        </span>
                        @if($lista->total() > 0)
                            <span class="results-showing">
                                {!! __('labels.msg.mostrando_de', ['de' => $lista->firstItem(), 'ate' => $lista->lastItem()]) !!}
                            </span>
                        @endif
                    </div>
                </div>

                @unless ($lista->isEmpty())
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th class="th-title">@lang('labels.titulo')</th>
                                    <th class="th-category">@choice('labels.categorias', 0)</th>
                                    <th class="th-date">@lang('labels.data_agendamento')</th>
                                    <th class="th-status">@lang('labels.status')</th>
                                    <th class="th-progress">@lang('labels.progresso')</th>
                                    <th class="th-date hide-mobile">@lang('labels.data_cadastro')</th>
                                    <th class="th-actions">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($lista as $item)
                                    <tr>
                                        <td class="td-title">
                                            <div class="title-cell">
                                                <span class="newsletter-title">{{ Str::limit($item->titulo, 100, '...') }}</span>
                                                @if($item->tipo)
                                                    <span class="newsletter-type">
                                                        {{ Config::get('constants.tipos_newsletter')->get($item->tipo) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="td-category">
                                            {{ $item->categorias }}
                                        </td>
                                        <td class="td-date data" data-id="{{ $item->id }}">
                                            @if($item->agendamento)
                                                <div class="date-cell">
                                                    <span class="date-main">{{ $item->agendamento->format('d/m/Y') }}</span>
                                                    <span class="date-time">{{ $item->agendamento->format('H:i') }}</span>
                                                </div>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="td-status status" data-id="{{ $item->id }}">
                                            @php
                                                $statusConfig = [
                                                    0 => ['class' => 'status-draft', 'icon' => 'bi-pencil'],
                                                    1 => ['class' => 'status-scheduled', 'icon' => 'bi-clock'],
                                                    2 => ['class' => 'status-sending', 'icon' => 'bi-arrow-repeat'],
                                                    3 => ['class' => 'status-sent', 'icon' => 'bi-check-circle'],
                                                ];
                                                $config = $statusConfig[$item->status] ?? ['class' => 'status-draft', 'icon' => 'bi-circle'];
                                            @endphp
                                            <span class="status-badge {{ $config['class'] }}">
                                                <i class="bi {{ $config['icon'] }}"></i>
                                                {{ Config::get('constants.status_newsletter')->get($item->status) }}
                                            </span>
                                        </td>
                                        <td class="td-progress">
                                            <div class="progress-cell">
                                                <div class="progress-stats">
                                                    <span class="progress-label">Total:</span>
                                                    <span class="progress-value">{{ $item->envios->count() }}</span>
                                                </div>
                                                <div class="progress-stats">
                                                    <span class="progress-label">Enviados:</span>
                                                    <span class="progress-value text-success">{{ $item->envios_concluidos->count() }}</span>
                                                </div>
                                                <div class="progress-stats">
                                                    <span class="progress-label">Restantes:</span>
                                                    <span class="progress-value text-warning">{{ $item->envios_restantes->count() }}</span>
                                                </div>
                                                @if($item->envios->count() > 0)
                                                    <div class="progress-bar-wrapper">
                                                        @php
                                                            $percentage = round(($item->envios_concluidos->count() / $item->envios->count()) * 100);
                                                        @endphp
                                                        <div class="progress-bar-fill" style="width: {{ $percentage }}%"></div>
                                                    </div>
                                                    <span class="progress-percentage">{{ $percentage }}%</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="td-date hide-mobile">
                                            <div class="date-cell">
                                                <span class="date-main">{{ $item->created_at->format('d/m/Y') }}</span>
                                                <span class="date-time">{{ $item->created_at->format('H:i') }}</span>
                                            </div>
                                        </td>
                                        <td class="td-actions">
                                            <div class="actions-group">
                                                @can('mailing_alterar')
                                                    @if($item->status == 0 || $item->status == 1)
                                                        <button type="button" 
                                                                class="action-btn action-schedule btn-agendar" 
                                                                data-id="{{ $item->id }}"
                                                                title="Agendar">
                                                            <i class="bi bi-clock"></i>
                                                        </button>
                                                    @endif
                                                @endcan
                                                
                                                @can('mailing_excluir')
                                                    <button type="button" 
                                                            class="action-btn action-delete btn-delete" 
                                                            data-form-id="deleteForm{{ $item->id }}"
                                                            title="Excluir">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                    <form id="deleteForm{{ $item->id }}" 
                                                          action="{{ route('publicador.newsletter.excluir', $item->id) }}" 
                                                          method="POST" 
                                                          style="display: none;">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if($lista->hasPages())
                        <div class="pagination-wrapper">
                            <div class="pagination-info">
                                Mostrando {{ $lista->firstItem() }} - {{ $lista->lastItem() }} de {{ $lista->total() }}
                            </div>
                            <div class="pagination-nav">
                                @if($lista->onFirstPage())
                                    <span class="page-btn disabled"><i class="bi bi-chevron-left"></i></span>
                                @else
                                    <a href="{{ $lista->previousPageUrl() }}" class="page-btn"><i class="bi bi-chevron-left"></i></a>
                                @endif

                                @foreach($lista->getUrlRange(max(1, $lista->currentPage() - 2), min($lista->lastPage(), $lista->currentPage() + 2)) as $page => $url)
                                    @if($page == $lista->currentPage())
                                        <span class="page-btn active">{{ $page }}</span>
                                    @else
                                        <a href="{{ $url }}" class="page-btn">{{ $page }}</a>
                                    @endif
                                @endforeach

                                @if($lista->hasMorePages())
                                    <a href="{{ $lista->nextPageUrl() }}" class="page-btn"><i class="bi bi-chevron-right"></i></a>
                                @else
                                    <span class="page-btn disabled"><i class="bi bi-chevron-right"></i></span>
                                @endif
                            </div>
                        </div>
                    @endif

                @else
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="bi bi-inbox"></i>
                        </div>
                        <h3>Nenhum registro encontrado</h3>
                        <p>{{ __('labels.msg.nenhum_resultado') }}</p>
                    </div>
                @endunless
            </section>
        </div>
    </div>

    <div class="modal-overlay" id="modalAgendamento">
        <div class="modal-container">
            {!! Form::open(['id' => 'formAgendamento', 'route' => 'publicador.newsletter.agendar', 'method' => 'put']) !!}
            <div class="modal-header">
                <h3><i class="bi bi-clock"></i> @lang('labels.acoes.agendar')</h3>
                <button type="button" class="modal-close" onclick="closeAgendamentoModal()">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group-modal">
                    {{ Form::hidden('id', null, ['id' => 'newsletter_id']) }}
                    <label class="modal-label">@lang('labels.data_agendamento')</label>
                    <div class="modal-input-wrapper">
                        <i class="bi bi-calendar-event"></i>
                        {{ Form::text('agendamento', null, [
                            'id' => 'agendamento',
                            'class' => 'modal-input',
                            'placeholder' => 'DD/MM/AAAA HH:MM',
                            'autocomplete' => 'off'
                        ]) }}
                    </div>
                    <div class="invalid-feedback error-agendamento"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-modal btn-secondary" onclick="closeAgendamentoModal()">
                    @lang('labels.acoes.fechar')
                </button>
                <button type="submit" class="btn-modal btn-primary">
                    <i class="bi bi-check-lg"></i> @lang('labels.acoes.agendar')
                </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;
        }

        .list-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;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .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-group-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

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

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

        .btn-action.btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
        }

        .btn-action.btn-warning {
            background: linear-gradient(135deg, var(--color-warning), #e0a800);
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        }

        .btn-action.btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
        }

        .btn-action.btn-primary {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            box-shadow: 0 4px 12px rgba(0, 106, 161, 0.3);
        }

        .btn-action.btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 106, 161, 0.4);
            color: var(--color-white);
        }

        .filters-section {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .filters-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background: var(--color-gray-50);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .filters-header:hover {
            background: var(--color-gray-100);
        }

        .filters-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .filters-title i {
            font-size: 1.125rem;
            color: var(--color-primary);
        }

        .filters-toggle {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .filters-count {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            background: var(--color-primary);
            color: var(--color-white);
            border-radius: 999px;
            font-weight: 600;
            display: none;
        }

        .filters-count.show {
            display: inline-block;
        }

        .filters-toggle i {
            color: var(--color-gray-400);
            transition: transform var(--transition-base);
        }

        .filters-section.collapsed .filters-toggle i {
            transform: rotate(-90deg);
        }

        .filters-body {
            padding: 1.5rem;
            border-top: 1px solid var(--color-gray-200);
        }

        .filters-section.collapsed .filters-body {
            display: none;
        }

        .filters-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

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

        .filter-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-gray-600);
        }

        .filter-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .filter-input-wrapper i {
            position: absolute;
            left: 0.875rem;
            color: var(--color-gray-400);
            font-size: 0.875rem;
            pointer-events: none;
        }

        .filter-input {
            width: 100%;
            padding: 0.625rem 0.875rem 0.625rem 2.5rem;
            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);
        }

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

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

        .filter-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        .filter-date-range {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .filter-date {
            flex: 1;
            padding-left: 0.875rem;
            cursor: pointer;
        }

        .date-separator {
            font-size: 0.8125rem;
            color: var(--color-gray-400);
        }

        .filters-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--color-gray-200);
        }

        .btn-clear,
        .btn-search {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            border: 2px solid transparent;
        }

        .btn-clear {
            background: var(--color-white);
            color: var(--color-gray-600);
            border-color: var(--color-gray-300);
        }

        .btn-clear:hover {
            background: var(--color-gray-100);
            border-color: var(--color-gray-400);
        }

        .btn-search {
            background: var(--color-primary);
            color: var(--color-white);
        }

        .btn-search:hover {
            background: var(--color-primary-dark);
        }

        .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-success {
            background: var(--color-success-light);
            border-left: 4px solid var(--color-success);
        }

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

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

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

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

        .alert-content {
            flex: 1;
        }

        .alert-content p {
            margin: 0;
            font-size: 0.875rem;
        }

        .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);
        }

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

        .results-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background: var(--color-gray-50);
            border-bottom: 1px solid var(--color-gray-200);
        }

        .results-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .results-count {
            font-size: 0.875rem;
            color: var(--color-gray-600);
        }

        .results-count strong {
            color: var(--color-gray-800);
        }

        .results-showing {
            font-size: 0.75rem;
            color: var(--color-gray-500);
        }

        .table-container {
            overflow-x: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th {
            padding: 1rem 1.25rem;
            text-align: left;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-gray-500);
            background: var(--color-gray-50);
            border-bottom: 2px solid var(--color-gray-200);
        }

        .data-table td {
            padding: 1rem 1.25rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--color-gray-100);
        }

        .data-table tbody tr {
            transition: background var(--transition-fast);
        }

        .data-table tbody tr:hover {
            background: var(--color-gray-50);
        }

        .th-title {
            min-width: 280px;
        }

        .th-category,
        .th-date {
            width: 150px;
        }

        .th-status {
            width: 140px;
            text-align: center;
        }

        .th-progress {
            width: 200px;
        }

        .th-actions {
            width: 120px;
            text-align: center;
        }

        .title-cell {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .newsletter-title {
            font-weight: 500;
            color: var(--color-gray-800);
            line-height: 1.4;
        }

        .newsletter-type {
            font-size: 0.75rem;
            color: var(--color-gray-500);
        }

        .td-category {
            color: var(--color-gray-600);
            font-size: 0.875rem;
        }

        .td-status {
            text-align: center;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 999px;
        }

        .status-draft {
            background: var(--color-gray-200);
            color: var(--color-gray-700);
        }

        .status-scheduled {
            background: var(--color-info-light);
            color: var(--color-info);
        }

        .status-sending {
            background: var(--color-warning-light);
            color: #d39e00;
        }

        .status-sent {
            background: var(--color-success-light);
            color: var(--color-success);
        }

        .date-cell {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .date-main {
            font-weight: 500;
            color: var(--color-gray-800);
        }

        .date-time {
            font-size: 0.75rem;
            color: var(--color-gray-500);
        }

        .progress-cell {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .progress-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
        }

        .progress-label {
            color: var(--color-gray-500);
        }

        .progress-value {
            font-weight: 600;
            color: var(--color-gray-800);
        }

        .progress-bar-wrapper {
            height: 6px;
            background: var(--color-gray-200);
            border-radius: 999px;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--color-success), #3fb550);
            border-radius: 999px;
            transition: width var(--transition-base);
        }

        .progress-percentage {
            font-size: 0.6875rem;
            color: var(--color-gray-500);
            text-align: center;
        }

        .text-success {
            color: var(--color-success) !important;
        }

        .text-warning {
            color: #d39e00 !important;
        }

        .text-muted {
            color: var(--color-gray-400);
        }

        .actions-group {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-gray-100);
            border: none;
            border-radius: var(--radius-sm);
            color: var(--color-gray-600);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
        }

        .action-btn:hover {
            transform: translateY(-2px);
        }

        .action-schedule:hover {
            background: var(--color-info-light);
            color: var(--color-info);
        }

        .action-delete:hover {
            background: var(--color-danger-light);
            color: var(--color-danger);
        }

        .pagination-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--color-gray-200);
        }

        .pagination-info {
            font-size: 0.8125rem;
            color: var(--color-gray-500);
        }

        .pagination-nav {
            display: flex;
            gap: 0.25rem;
        }

        .page-btn {
            min-width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.75rem;
            background: var(--color-white);
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            color: var(--color-gray-600);
            text-decoration: none;
            transition: all var(--transition-fast);
        }

        .page-btn:hover:not(.disabled):not(.active) {
            background: var(--color-gray-100);
            border-color: var(--color-gray-300);
        }

        .page-btn.active {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);
        }

        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
        }

        .empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: var(--color-gray-100);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .empty-icon i {
            font-size: 2.5rem;
            color: var(--color-gray-400);
        }

        .empty-state h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--color-gray-700);
            margin-bottom: 0.5rem;
        }

        .empty-state p {
            color: var(--color-gray-500);
            margin-bottom: 1.5rem;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-container {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 480px;
            box-shadow: var(--shadow-lg);
            transform: scale(0.9);
            transition: transform var(--transition-base);
        }

        .modal-overlay.active .modal-container {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--color-gray-200);
        }

        .modal-header h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-gray-800);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

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

        .modal-close:hover {
            background: var(--color-gray-200);
            color: var(--color-gray-700);
        }

        .modal-body {
            padding: 1.5rem;
        }

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

        .modal-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--color-gray-700);
        }

        .modal-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .modal-input-wrapper i {
            position: absolute;
            left: 0.875rem;
            color: var(--color-gray-400);
            font-size: 0.875rem;
            pointer-events: none;
            z-index: 1;
        }

        .modal-input {
            width: 100%;
            padding: 0.75rem 0.875rem 0.75rem 2.5rem;
            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);
            cursor: pointer;
        }

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

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

        .invalid-feedback {
            display: none;
            font-size: 0.75rem;
            color: var(--color-danger);
            margin-top: 0.25rem;
        }

        .modal-input.is-invalid ~ .invalid-feedback {
            display: block;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            background: var(--color-gray-50);
            border-top: 1px solid var(--color-gray-200);
        }

        .btn-modal {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

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

        .btn-secondary:hover {
            background: var(--color-gray-300);
        }

        .btn-primary {
            background: var(--color-primary);
            color: var(--color-white);
        }

        .btn-primary:hover {
            background: var(--color-primary-dark);
        }

        .hide-mobile {
            display: table-cell;
        }

        @media (max-width: 1200px) {
            .filters-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 992px) {
            .hide-mobile {
                display: none;
            }

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

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

            .pagination-wrapper {
                flex-direction: column;
                gap: 1rem;
            }
        }

        @media (max-width: 768px) {
            .filters-grid {
                grid-template-columns: 1fr;
            }

            .list-page {
                padding: 1rem;
            }

            .data-table th,
            .data-table td {
                padding: 0.75rem;
            }

            .th-title {
                min-width: 200px;
            }

            .btn-group-actions {
                width: 100%;
                justify-content: center;
            }

            .btn-action {
                flex: 1;
                justify-content: center;
            }
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    
    <script>
        (function() {
            'use strict';

            function initFilters() {
                const toggle = document.getElementById('filtersToggle');
                const section = document.querySelector('.filters-section');
                const form = document.getElementById('filtersForm');
                const btnClear = document.getElementById('btnClearFilters');

                if (toggle && section) {
                    toggle.addEventListener('click', function() {
                        section.classList.toggle('collapsed');
                    });
                }

                if (btnClear && form) {
                    btnClear.addEventListener('click', function() {
                        form.querySelectorAll('input, select').forEach(function(field) {
                            if (field.type === 'text') {
                                field.value = '';
                            } else if (field.tagName === 'SELECT') {
                                field.selectedIndex = 0;
                            }
                        });
                        updateFilterCount();
                    });
                }

                updateFilterCount();

                form?.querySelectorAll('input, select').forEach(function(field) {
                    field.addEventListener('change', updateFilterCount);
                    field.addEventListener('input', updateFilterCount);
                });
            }

            function updateFilterCount() {
                const form = document.getElementById('filtersForm');
                const countBadge = document.getElementById('filtersCount');
                
                if (!form || !countBadge) return;

                let count = 0;
                form.querySelectorAll('input, select').forEach(function(field) {
                    if (field.value && field.value.trim() !== '') {
                        count++;
                    }
                });

                if (count > 0) {
                    countBadge.textContent = count + ' ativo' + (count > 1 ? 's' : '');
                    countBadge.classList.add('show');
                } else {
                    countBadge.classList.remove('show');
                }
            }

            function initDateTimePicker() {
                jQuery.datetimepicker.setLocale('pt-BR');

                jQuery('.data-hora-filtro').each(function() {
                    jQuery(this).datetimepicker({
                        format: 'd/m/Y H:i',
                        step: 30,
                        closeOnDateSelect: false,
                        closeOnTimeSelect: true,
                        validateOnBlur: false
                    });
                });
            }

            function initDeleteButtons() {
                document.querySelectorAll('.btn-delete').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        const formId = this.dataset.formId;
                        const form = document.getElementById(formId);
                        
                        if (confirm('Tem certeza que deseja excluir este registro?')) {
                            if (form) {
                                form.submit();
                            }
                        }
                    });
                });
            }

            function initAgendamento() {
                document.querySelectorAll('.btn-agendar').forEach(function(btn) {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();

                        const id = this.dataset.id;
                        const hoje = new Date();
                        const yyyy = hoje.getFullYear();
                        let dd = hoje.getDate();
                        let mm = hoje.getMonth() + 1;
                        let hh = hoje.getHours();
                        let ii = hoje.getMinutes();

                        if (dd < 10) dd = '0' + dd;
                        if (hh < 10) hh = '0' + hh;
                        if (mm < 10) mm = '0' + mm;
                        if (ii < 10) ii = '0' + ii;

                        const dataFormatada = dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + ii;

                        document.getElementById('newsletter_id').value = id;
                        document.getElementById('agendamento').value = dataFormatada;
                        
                        jQuery('#agendamento').datetimepicker({
                            format: 'd/m/Y H:i',
                            step: 30,
                            minDate: 0,
                            closeOnDateSelect: false,
                            closeOnTimeSelect: true,
                            validateOnBlur: false
                        });
                        
                        const modal = document.getElementById('modalAgendamento');
                        modal.classList.add('active');
                    });
                });

                const form = document.getElementById('formAgendamento');
                if (form) {
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();

                        const formData = new FormData(this);
                        const data = {};
                        formData.forEach((value, key) => data[key] = value);

                        fetch(this.action, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                ...data,
                                _method: 'PUT'
                            })
                        })
                        .then(response => {
                            if (!response.ok) {
                                return response.json().then(err => Promise.reject(err));
                            }
                            return response.json();
                        })
                        .then(data => {
                            const nid = document.getElementById('newsletter_id').value;
                            const input = document.getElementById('agendamento');
                            
                            closeAgendamentoModal();
                            
                            const statusCell = document.querySelector('td.status[data-id="' + nid + '"]');
                            if (statusCell) {
                                statusCell.innerHTML = '<span class="status-badge status-scheduled"><i class="bi bi-clock"></i> Agendado</span>';
                            }
                            
                            const dataCell = document.querySelector('td.data[data-id="' + nid + '"]');
                            if (dataCell) {
                                const parts = input.value.split(' ');
                                dataCell.innerHTML = '<div class="date-cell"><span class="date-main">' + parts[0] + '</span><span class="date-time">' + parts[1] + '</span></div>';
                            }

                            input.classList.remove('is-invalid');
                            
                            const alertSuccess = document.querySelector('.alert-sucesso');
                            if (alertSuccess) {
                                alertSuccess.querySelector('.alert-content p').textContent = data.message || 'Agendamento realizado com sucesso!';
                                alertSuccess.style.display = 'flex';
                                
                                setTimeout(() => {
                                    alertSuccess.style.display = 'none';
                                }, 5000);
                            }

                            const alertError = document.querySelector('.alert-erro');
                            if (alertError) {
                                alertError.style.display = 'none';
                            }
                        })
                        .catch(error => {
                            const input = document.getElementById('agendamento');

                            if (error.status === 404) {
                                closeAgendamentoModal();
                            } else if (error.status === 403) {
                                closeAgendamentoModal();
                                const alertError = document.querySelector('.alert-erro');
                                if (alertError) {
                                    alertError.querySelector('.alert-content p').textContent = error.message || 'Acesso negado.';
                                    alertError.style.display = 'flex';
                                }
                            } else if (error.errors && error.errors.agendamento) {
                                input.classList.add('is-invalid');
                                const errorDiv = document.querySelector('.error-agendamento');
                                if (errorDiv) {
                                    errorDiv.textContent = error.errors.agendamento[0];
                                    errorDiv.style.display = 'block';
                                }
                            } else {
                                const alertError = document.querySelector('.alert-erro');
                                if (alertError) {
                                    alertError.querySelector('.alert-content p').textContent = 'Erro ao processar agendamento.';
                                    alertError.style.display = 'flex';
                                }
                            }

                            const alertSuccess = document.querySelector('.alert-sucesso');
                            if (alertSuccess) {
                                alertSuccess.style.display = 'none';
                            }
                        });
                    });
                }
            }

            window.closeAgendamentoModal = function() {
                const modal = document.getElementById('modalAgendamento');
                const input = document.getElementById('agendamento');
                const errorDiv = document.querySelector('.error-agendamento');
                
                modal.classList.remove('active');
                input.classList.remove('is-invalid');
                if (errorDiv) {
                    errorDiv.style.display = 'none';
                    errorDiv.textContent = '';
                }
            };

            document.addEventListener('DOMContentLoaded', function() {
                initFilters();
                initDateTimePicker();
                initDeleteButtons();
                initAgendamento();

                document.querySelectorAll('.modal-overlay').forEach(function(modal) {
                    modal.addEventListener('click', function(e) {
                        if (e.target === modal) {
                            modal.classList.remove('active');
                        }
                    });
                });

                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        document.querySelectorAll('.modal-overlay.active').forEach(function(modal) {
                            modal.classList.remove('active');
                        });
                    }
                });

                const menuLateral = document.querySelector('.menu-lateral nav');
                if (menuLateral) {
                    function adjustMenuHeight() {
                        menuLateral.style.height = document.documentElement.scrollHeight + 'px';
                    }
                    
                    adjustMenuHeight();
                    window.addEventListener('resize', adjustMenuHeight);
                    window.addEventListener('load', adjustMenuHeight);
                }
            });
        })();
    </script>
@endsection