@extends('layouts.app')

@section('title', 'Calendário de Posts')

@push('styles')
<link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet">
<style>
/* Estilos customizados para o calendário */
.fc-event {
    cursor: pointer;
    padding: 4px 8px;
    margin-bottom: 2px;
    border-radius: 6px;
    border: none !important;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Cores específicas por plataforma */
.fc-event[data-platform="instagram"] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.fc-event[data-platform="tiktok"] {
    background-color: #000000;
    color: white;
}

.fc-event[data-platform="facebook"] {
    background-color: #1877f2;
    color: white;
}

.fc-event[data-platform="twitter"] {
    background-color: #1da1f2;
    color: white;
}

.fc-event[data-platform="linkedin"] {
    background-color: #0077b5;
    color: white;
}

.fc-event[data-platform="youtube"] {
    background-color: #ff0000;
    color: white;
}

/* Ícone da plataforma */
.fc-event-platform-icon {
    font-size: 14px;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Texto do evento */
.fc-event-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge de status */
.fc-event-status-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.fc-event-status-badge.published {
    background-color: #00d27a;
}

.fc-event-status-badge.scheduled {
    background-color: #f5803e;
}

.fc-event-status-badge.failed {
    background-color: #e63757;
}

/* Hora no evento */
.fc-event-time {
    font-size: 10px;
    opacity: 0.9;
    margin-left: 4px;
}

/* Tooltip customizado */
.calendar-tooltip {
    position: absolute;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    max-width: 300px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.calendar-tooltip.show {
    opacity: 1;
}

.calendar-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.calendar-tooltip-platform {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.calendar-tooltip-platform-icon {
    font-size: 18px;
}

.calendar-tooltip-status {
    margin-left: auto;
}

.calendar-tooltip-content {
    font-size: 13px;
    line-height: 1.5;
}

.calendar-tooltip-preview {
    margin: 8px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 12px;
    max-height: 100px;
    overflow-y: auto;
}

.calendar-tooltip-image {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.calendar-tooltip-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6c757d;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

/* Eventos na visualização de lista */
.fc-list-event-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Offcanvas de filtros */
#filterOffcanvas {
    width: 350px;
}

#filterOffcanvas .offcanvas-body {
    padding: 1.5rem;
}

#filterOffcanvas .form-label {
    color: #5e6e82;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

#filterOffcanvas .form-check {
    padding: 0.5rem 0;
}

#filterOffcanvas .form-check-label {
    cursor: pointer;
    transition: color 0.2s;
}

#filterOffcanvas .form-check-label:hover {
    color: #3874ff;
}

#filterOffcanvas .choices__inner {
    min-height: 38px;
    border-radius: 0.375rem;
}

#activeFiltersSummary {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
}

/* Badge do contador de filtros */
#activeFiltersCount {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}

/* Contador de resultados */
#resultsCounter {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

@media (max-width: 576px) {
    #filterOffcanvas {
        width: 100%;
    }
}

>>>>>>> da984273d06315ed82cc616a18b1a08d35246999
/* Responsividade */
@media (max-width: 768px) {
    .fc-event {
        font-size: 11px;
        padding: 2px 4px;
    }

    .fc-event-platform-icon {
        font-size: 12px;
    }

    .calendar-tooltip {
        max-width: 250px;
    }
}

.fc-event:hover {
    opacity: 0.8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fc-event-title {
    font-weight: 500;
}

.fc-daygrid-event {
    white-space: normal;
}

/* Indicador de publicado */
.event-published::before {
    content: '✓ ';
    color: #00d27a;
    font-weight: bold;
}

/* Ajustes para o tema Phoenix */
.fc-theme-standard .fc-toolbar {
    margin-bottom: 1.5rem;
}

.fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: 600;
}

.fc-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.fc-button-primary {
    background-color: #3874ff;
    border-color: #3874ff;
}

.fc-button-primary:hover {
    background-color: #2453d6;
    border-color: #2453d6;
}

.fc-button-primary:disabled {
    background-color: #3874ff;
    border-color: #3874ff;
}

.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
    background-color: #2453d6;
    border-color: #2453d6;
}

/* Dia de hoje */
.fc-day-today {
    background-color: rgba(56, 116, 255, 0.1) !important;
}

/* Hover nos dias */
.fc-daygrid-day:hover {
    background-color: rgba(56, 116, 255, 0.05);
    cursor: pointer;
}

/* Loading state */
.calendar-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.calendar-loading.show {
    display: block;
}
</style>
@endpush

@section('content')
<div class="row g-3 mb-4 align-items-center">
    <div class="col-auto">
        <h2 class="mb-0">Calendário de Posts</h2>
    </div>
    <div class="col-auto ms-auto">
        <!-- Contador de resultados -->
        <span class="badge badge-phoenix badge-phoenix-primary me-2" id="resultsCounter" style="display: none;">
            <span id="resultsCount">0</span> posts encontrados
        </span>

        <!-- Botão de filtros -->
        <button class="btn btn-phoenix-secondary btn-sm me-2"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#filterOffcanvas"
                aria-controls="filterOffcanvas">
            <i class="fas fa-filter me-1"></i>
            Filtros
            <span class="badge bg-primary ms-1" id="activeFiltersCount" style="display: none;">0</span>
        </button>

        <a href="{{ route('posts.index') }}" class="btn btn-phoenix-secondary btn-sm me-2">
            <i class="fas fa-list me-1"></i>Ver Lista
        </a>
        @if(auth()->user()->hasPermission('posts.create'))
        <a href="{{ route('posts.create') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus me-1"></i>Novo Post
        </a>
        @endif
    </div>
</div>

<div class="card">
    <div class="card-body position-relative">
        <!-- Loading indicator -->
        <div class="calendar-loading">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Carregando...</span>
            </div>
        </div>

        <!-- Calendário -->
        <div id="calendar"></div>
    </div>
</div>

<!-- Incluir modais -->
@include('calendar.partials.event-modal')
@include('calendar.partials.quick-create-modal')

<!-- Tooltip customizado -->
<div class="calendar-tooltip" id="calendarTooltip">
    <div class="calendar-tooltip-header">
        <div class="calendar-tooltip-platform">
            <i class="calendar-tooltip-platform-icon" id="tooltipPlatformIcon"></i>
            <span id="tooltipPlatformName"></span>
        </div>
        <div class="calendar-tooltip-status">
            <span class="badge badge-sm" id="tooltipStatus"></span>
        </div>
    </div>
    <div class="calendar-tooltip-content">
        <img class="calendar-tooltip-image" id="tooltipImage" style="display: none;">
        <div class="calendar-tooltip-preview" id="tooltipPreview"></div>
        <div class="calendar-tooltip-meta">
            <span id="tooltipDate"></span>
            <span id="tooltipTime"></span>
        </div>
    </div>
</div>

<!-- Offcanvas de Filtros -->
<div class="offcanvas offcanvas-end" id="filterOffcanvas" tabindex="-1" aria-labelledby="filterOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 id="filterOffcanvasLabel">
            <i class="fas fa-filter me-2"></i>Filtros do Calendário
        </h5>
        <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="calendarFiltersForm">
            <!-- MultiSelect para Clientes -->
            <div class="mb-4">
                <label class="form-label fw-bold">Clientes</label>
                <select class="form-select"
                        id="filterClientes"
                        name="clientes[]"
                        multiple
                        data-choices="data-choices"
                        data-options='{"removeItemButton":true,"placeholder":true}'>
                    <option value="">Selecione os clientes...</option>
                    @foreach($clientes as $cliente)
                    <option value="{{ $cliente->id }}">{{ $cliente->nome }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Checkboxes para Plataformas -->
            <div class="mb-4">
                <label class="form-label fw-bold d-block">Redes Sociais</label>
                @foreach($socialNetworks as $network)
                <div class="form-check">
                    <input class="form-check-input"
                           type="checkbox"
                           value="{{ $network->id }}"
                           id="filterNetwork{{ $network->id }}"
                           name="social_networks[]">
                    <label class="form-check-label d-flex align-items-center"
                           for="filterNetwork{{ $network->id }}">
                        <i class="{{ $network->icon }} me-2"
                           style="color: {{ $network->color }}; font-size: 1.2rem;"></i>
                        {{ $network->name }}
                    </label>
                </div>
                @endforeach
            </div>

            <!-- Radio buttons para Tipo de Conteúdo -->
            <div class="mb-4">
                <label class="form-label fw-bold d-block">Tipo de Conteúdo</label>
                <div class="form-check">
                    <input class="form-check-input"
                           type="radio"
                           name="tipo_conteudo"
                           value=""
                           id="filterTipoTodos"
                           checked>
                    <label class="form-check-label" for="filterTipoTodos">
                        Todos os tipos
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input"
                           type="radio"
                           name="tipo_conteudo"
                           value="feed"
                           id="filterTipoFeed">
                    <label class="form-check-label" for="filterTipoFeed">
                        <i class="fas fa-stream me-1"></i>Feed
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input"
                           type="radio"
                           name="tipo_conteudo"
                           value="reels"
                           id="filterTipoReels">
                    <label class="form-check-label" for="filterTipoReels">
                        <i class="fas fa-film me-1"></i>Reels
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input"
                           type="radio"
                           name="tipo_conteudo"
                           value="stories"
                           id="filterTipoStories">
                    <label class="form-check-label" for="filterTipoStories">
                        <i class="fas fa-circle-notch me-1"></i>Stories
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input"
                           type="radio"
                           name="tipo_conteudo"
                           value="carrossel"
                           id="filterTipoCarrossel">
                    <label class="form-check-label" for="filterTipoCarrossel">
                        <i class="fas fa-images me-1"></i>Carrossel
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input"
                           type="radio"
                           name="tipo_conteudo"
                           value="video"
                           id="filterTipoVideo">
                    <label class="form-check-label" for="filterTipoVideo">
                        <i class="fas fa-video me-1"></i>Vídeo
                    </label>
                </div>
            </div>

            <!-- Select para Status -->
            <div class="mb-4">
                <label class="form-label fw-bold" for="filterStatus">Status</label>
                <select class="form-select" id="filterStatus" name="status">
                    <option value="">Todos os status</option>
                    <option value="draft">Rascunho</option>
                    <option value="scheduled">Agendado</option>
                    <option value="published">Publicado</option>
                    <option value="failed">Falhou</option>
                </select>
            </div>

            <!-- Select para Responsável -->
            <div class="mb-4">
                <label class="form-label fw-bold" for="filterCreatedBy">Criado por</label>
                <select class="form-select"
                        id="filterCreatedBy"
                        name="created_by"
                        data-choices="data-choices"
                        data-options='{"searchEnabled":true,"placeholder":true}'>
                    <option value="">Todos os usuários</option>
                    @foreach(\App\Models\User::orderBy('name')->get() as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Botões de Ação -->
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search me-1"></i>Aplicar Filtros
                </button>
                <button type="button" class="btn btn-phoenix-secondary" id="clearFiltersBtn">
                    <i class="fas fa-times me-1"></i>Limpar Filtros
                </button>
            </div>
        </form>

        <!-- Resumo dos filtros ativos -->
        <div class="mt-4 pt-4 border-top" id="activeFiltersSummary" style="display: none;">
            <h6 class="mb-3">Filtros Ativos:</h6>
            <div id="activeFiltersList"></div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('vendors/fullcalendar/index.global.min.js') }}"></script>
<script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar Choices.js
    const clientesSelect = new Choices('#filterClientes', {
        removeItemButton: true,
        placeholderValue: 'Selecione os clientes...',
        searchPlaceholderValue: 'Buscar clientes...',
        noResultsText: 'Nenhum cliente encontrado',
        itemSelectText: 'Clique para selecionar',
    });

    const createdBySelect = new Choices('#filterCreatedBy', {
        searchEnabled: true,
        placeholderValue: 'Selecione um usuário...',
        searchPlaceholderValue: 'Buscar usuário...',
        noResultsText: 'Nenhum usuário encontrado',
    });
    var calendarEl = document.getElementById('calendar');
    var selectedDate = null;
    var calendar = null;

    // Inicializar calendário
    calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'pt-br',
        timeZone: 'America/Sao_Paulo',
        height: 'auto',

        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },

        buttonText: {
            today: 'Hoje',
            month: 'Mês',
            week: 'Semana',
            day: 'Dia'
        },

        // Configurações de eventos
        events: '{{ route('calendar.events') }}',
        eventDisplay: 'block',
        dayMaxEvents: 3,
        moreLinkText: 'mais',

        // Permitir interação
        editable: true,
        droppable: true,

        // Loading
        loading: function(isLoading) {
            document.querySelector('.calendar-loading').classList.toggle('show', isLoading);
        },

        // Personalizar a exibição dos eventos
        eventDidMount: function(info) {
            const props = info.event.extendedProps;
            const el = info.el;

            // Adicionar data-platform para estilização
            const platform = props.socialNetwork ? props.socialNetwork.toLowerCase() : '';
            el.setAttribute('data-platform', platform);

            // Reconstruir o conteúdo do evento
            const eventContent = el.querySelector('.fc-event-title') || el;

            // Criar estrutura customizada
            let customContent = '';

            // Ícone da plataforma
            if (props.socialNetworkIcon) {
                customContent += `<i class="${props.socialNetworkIcon} fc-event-platform-icon"></i>`;
            }

            // Texto do evento (truncado)
            const maxLength = 30;
            const title = info.event.title.length > maxLength
                ? info.event.title.substring(0, maxLength) + '...'
                : info.event.title;
            customContent += `<span class="fc-event-text">${title}</span>`;

            // Hora do evento (apenas em visualização de dia)
            if (info.view.type === 'timeGridDay' || info.view.type === 'timeGridWeek') {
                const time = info.event.start.toLocaleTimeString('pt-BR', {
                    hour: '2-digit',
                    minute: '2-digit'
                });
                customContent += `<span class="fc-event-time">${time}</span>`;
            }

            // Badge de status
            let statusClass = '';
            if (props.isChecked) {
                statusClass = 'published';
            } else if (props.status === 'scheduled') {
                statusClass = 'scheduled';
            } else if (props.status === 'failed') {
                statusClass = 'failed';
            }

            if (statusClass) {
                customContent += `<span class="fc-event-status-badge ${statusClass}"></span>`;
            }

            // Aplicar conteúdo customizado
            if (eventContent.innerHTML) {
                eventContent.innerHTML = customContent;
            }

            // Remover title nativo
            el.removeAttribute('title');

            // Adicionar eventos de mouse para tooltip
            el.addEventListener('mouseenter', function(e) {
                showTooltip(e, info.event);
            });

            el.addEventListener('mouseleave', function() {
                hideTooltip();
            });

            el.addEventListener('mousemove', function(e) {
                updateTooltipPosition(e);
            });
        },

        // Clique em uma data
        dateClick: function(info) {
            selectedDate = info.dateStr;
            document.getElementById('selectedDate').textContent =
                new Date(info.dateStr).toLocaleDateString('pt-BR', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });

            // Limpar o formulário
            document.getElementById('quickCreateForm').reset();

            // Mostrar modal
            var modal = new bootstrap.Modal(document.getElementById('quickCreateModal'));
            modal.show();
        },

        // Clique em um evento
        eventClick: function(info) {
            showEventDetails(info.event);
        },

        // Arrastar e soltar eventos
        eventDrop: function(info) {
            handleEventDrop(info);
        }
    });

    calendar.render();

    // Sistema de Filtros
        let activeFilters = {};

        // Função para aplicar filtros
        function applyFilters() {
            const formData = new FormData(document.getElementById('calendarFiltersForm'));
            const filters = {};

            // Processar clientes (array)
            const clientes = formData.getAll('clientes[]').filter(v => v);
            if (clientes.length > 0) filters.cliente_id = clientes;

            // Processar redes sociais (array)
            const networks = formData.getAll('social_networks[]');
            if (networks.length > 0) filters.social_networks = networks;

            // Processar tipo de conteúdo
            const tipoConteudo = formData.get('tipo_conteudo');
            if (tipoConteudo) filters.tipo_conteudo = tipoConteudo;

            // Processar status
            const status = formData.get('status');
            if (status) filters.status = status;

            // Processar criado por
            const createdBy = formData.get('created_by');
            if (createdBy) filters.created_by = createdBy;

            activeFilters = filters;

            // Atualizar contador de filtros ativos
            updateActiveFiltersCount();

            // Recarregar eventos do calendário com filtros
            calendar.removeAllEventSources();
            calendar.addEventSource({
                url: '{{ route('calendar.events.filtered') }}',
                method: 'GET',
                extraParams: activeFilters,
                success: function(events) {
                    // Atualizar contador de resultados
                    updateResultsCounter(events.length);
                }
            });

            // Fechar offcanvas
            const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('filterOffcanvas'));
            if (offcanvas) offcanvas.hide();
        }

        // Função para limpar filtros
        function clearFilters() {
            // Resetar formulário
            document.getElementById('calendarFiltersForm').reset();

            // Resetar Choices.js
            clientesSelect.removeActiveItems();
            createdBySelect.setChoiceByValue('');

            // Limpar filtros ativos
            activeFilters = {};

            // Atualizar UI
            updateActiveFiltersCount();
            document.getElementById('activeFiltersSummary').style.display = 'none';

            // Recarregar calendário sem filtros
            calendar.removeAllEventSources();
            calendar.addEventSource('{{ route('calendar.events') }}');

            // Esconder contador de resultados
            document.getElementById('resultsCounter').style.display = 'none';
        }

        // Função para atualizar contador de filtros ativos
        function updateActiveFiltersCount() {
            const count = Object.keys(activeFilters).length;
            const badge = document.getElementById('activeFiltersCount');

            if (count > 0) {
                badge.textContent = count;
                badge.style.display = 'inline-block';
                updateActiveFiltersSummary();
            } else {
                badge.style.display = 'none';
                document.getElementById('activeFiltersSummary').style.display = 'none';
            }
        }

        // Função para atualizar resumo de filtros ativos
        function updateActiveFiltersSummary() {
            const summaryEl = document.getElementById('activeFiltersSummary');
            const listEl = document.getElementById('activeFiltersList');

            let summaryHTML = '';

            // Clientes
            if (activeFilters.cliente_id && activeFilters.cliente_id.length > 0) {
                const clienteNames = Array.from(document.querySelectorAll('#filterClientes option'))
                    .filter(opt => activeFilters.cliente_id.includes(opt.value))
                    .map(opt => opt.textContent);
                summaryHTML += `<span class="badge badge-phoenix badge-phoenix-primary me-1 mb-1">
                    Clientes: ${clienteNames.join(', ')}
                </span>`;
            }

            // Redes Sociais
            if (activeFilters.social_networks && activeFilters.social_networks.length > 0) {
                const networkNames = Array.from(document.querySelectorAll('input[name="social_networks[]"]:checked'))
                    .map(input => input.nextElementSibling.textContent.trim());
                summaryHTML += `<span class="badge badge-phoenix badge-phoenix-info me-1 mb-1">
                    Redes: ${networkNames.join(', ')}
                </span>`;
            }

            // Tipo de Conteúdo
            if (activeFilters.tipo_conteudo) {
                const tipoLabel = document.querySelector(`input[name="tipo_conteudo"][value="${activeFilters.tipo_conteudo}"]`)
                    ?.nextElementSibling.textContent.trim();
                summaryHTML += `<span class="badge badge-phoenix badge-phoenix-warning me-1 mb-1">
                    Tipo: ${tipoLabel}
                </span>`;
            }

            // Status
            if (activeFilters.status) {
                const statusLabel = document.querySelector(`#filterStatus option[value="${activeFilters.status}"]`)?.textContent;
                summaryHTML += `<span class="badge badge-phoenix badge-phoenix-success me-1 mb-1">
                    Status: ${statusLabel}
                </span>`;
            }

            // Criado por
            if (activeFilters.created_by) {
                const userLabel = document.querySelector(`#filterCreatedBy option[value="${activeFilters.created_by}"]`)?.textContent;
                summaryHTML += `<span class="badge badge-phoenix badge-phoenix-secondary me-1 mb-1">
                    Criado por: ${userLabel}
                </span>`;
            }

            listEl.innerHTML = summaryHTML;
            summaryEl.style.display = summaryHTML ? 'block' : 'none';
        }

        // Função para atualizar contador de resultados
        function updateResultsCounter(count) {
            const counter = document.getElementById('resultsCounter');
            const countEl = document.getElementById('resultsCount');

            countEl.textContent = count;
            counter.style.display = count !== undefined ? 'inline-block' : 'none';
        }

        // Event listeners
        document.getElementById('calendarFiltersForm').addEventListener('submit', function(e) {
            e.preventDefault();
            applyFilters();
        });

        document.getElementById('clearFiltersBtn').addEventListener('click', clearFilters);

    // Função para mostrar detalhes do evento
    function showEventDetails(event) {
        const props = event.extendedProps;

        document.getElementById('eventModalTitle').textContent = event.title;

        let content = `
            <div class="row">
                <div class="col-md-6">
                    <p><strong>Rede Social:</strong> ${props.socialNetwork}</p>
                    <p><strong>Data:</strong> ${event.start.toLocaleString('pt-BR')}</p>
                    <p><strong>Status:</strong>
                        <span class="badge badge-phoenix badge-phoenix-${getStatusBadgeColor(props.status)}">
                            ${props.status}
                        </span>
                    </p>
                </div>
                <div class="col-md-6">
                    ${props.copywriter ? `<p><strong>Redator:</strong> ${props.copywriter}</p>` : ''}
                    ${props.designer ? `<p><strong>Designer:</strong> ${props.designer}</p>` : ''}
                    ${props.publisher ? `<p><strong>Publicador:</strong> ${props.publisher}</p>` : ''}
                </div>
            </div>
        `;

        if (props.isChecked) {
            content += `
                <div class="alert alert-success mt-3">
                    <i class="fas fa-check-circle me-1"></i> Este post foi publicado
                </div>
            `;
        }

        document.getElementById('eventModalBody').innerHTML = content;
        document.getElementById('eventModalLink').href = `/posts/${props.postId}`;

        // Mostrar botão duplicar se tiver permissão
        const duplicateBtn = document.getElementById('duplicateBtn');
        if (duplicateBtn) {
            @if(auth()->user()->hasPermission('posts.create'))
            duplicateBtn.style.display = 'inline-block';
            duplicateBtn.onclick = function() {
                duplicatePost(props.postId);
            };
            @else
            duplicateBtn.style.display = 'none';
            @endif
        }

        var modal = new bootstrap.Modal(document.getElementById('eventModal'));
        modal.show();
    }

    // Função para lidar com drag and drop
    function handleEventDrop(info) {
        // Verificar se a data é válida (hoje ou futuro)
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        const eventDate = new Date(info.event.start);
        eventDate.setHours(0, 0, 0, 0);

        if (eventDate < today) {
            alert('Atenção: Não é permitido agendar posts para datas passadas. Por favor, selecione uma data de hoje em diante.');
            info.revert();
            return;
        }

        if (confirm(`Confirma a alteração da data de "${info.event.title}" para ${info.event.start.toLocaleDateString('pt-BR')}?`)) {
            updateEventDate(info.event, info);
        } else {
            info.revert();
        }
    }

    // Função para atualizar data do evento
    function updateEventDate(event, dropInfo) {
        const props = event.extendedProps;

        if (!props.postId) {
            console.error('Post ID não encontrado!');
            alert('Erro: ID do post não encontrado!');
            if (dropInfo) dropInfo.revert();
            return;
        }

        // Formatar a data corretamente
        const scheduledDate = new Date(event.start);
        const year = scheduledDate.getFullYear();
        const month = String(scheduledDate.getMonth() + 1).padStart(2, '0');
        const day = String(scheduledDate.getDate()).padStart(2, '0');
        const hours = String(scheduledDate.getHours()).padStart(2, '0');
        const minutes = String(scheduledDate.getMinutes()).padStart(2, '0');
        const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:00`;

        // Mostrar loading
        document.querySelector('.calendar-loading').classList.add('show');

        fetch(`{{ url('calendar/posts') }}/${props.postId}/update-date`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                scheduled_at: formattedDate
            })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(errorData => {
                    throw errorData;
                });
            }
            return response.json();
        })
        .then(data => {
            // Esconder loading
            document.querySelector('.calendar-loading').classList.remove('show');

            if (data.success) {
                console.log('Post atualizado com sucesso');
            } else {
                throw data;
            }
        })
        .catch(error => {
            // Esconder loading
            document.querySelector('.calendar-loading').classList.remove('show');

            // Tratar erros
            if (error.errors && error.errors.scheduled_at) {
                alert('Atenção: ' + error.errors.scheduled_at[0]);
            } else if (error.message) {
                alert('Erro: ' + error.message);
            } else {
                alert('Erro ao atualizar a data. Por favor, tente novamente.');
            }

            // Reverter mudança
            if (dropInfo) {
                dropInfo.revert();
            } else {
                calendar.refetchEvents();
            }
        });
    }

    // Submissão do formulário de criação rápida
    document.getElementById('quickCreateForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const time = formData.get('time');
        const scheduled_at = selectedDate + ' ' + time;

        // Validar redes sociais
        const networks = formData.getAll('social_networks[]');
        if (networks.length === 0) {
            alert('Por favor, selecione pelo menos uma rede social!');
            return;
        }

        // Preparar dados
        const data = {
            title: formData.get('title'),
            scheduled_at: scheduled_at,
            cliente_id: formData.get('cliente_id') || null,
            tipo_conteudo: formData.get('tipo_conteudo'),
            social_networks: networks,
            notes: formData.get('notes') || null
        };

        // Desabilitar botão e mostrar loading
        const submitBtn = document.getElementById('quickCreateSubmit');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Criando...';

        // Enviar requisição
        fetch('{{ route('calendar.quick-store') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Recarregar eventos
                calendar.refetchEvents();

                // Fechar modal
                bootstrap.Modal.getInstance(document.getElementById('quickCreateModal')).hide();

                // Mostrar mensagem
                alert('Post agendado com sucesso!');
            } else {
                throw new Error(data.message || 'Erro ao criar post');
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            alert('Erro ao criar post: ' + error.message);
        })
        .finally(() => {
            // Reabilitar botão
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-save me-1"></i>Agendar Post';
        });
    });

    // Função para duplicar post
    function duplicatePost(postId) {
        const newDate = prompt('Digite a nova data e hora (DD/MM/AAAA HH:MM):');

        if (!newDate) return;

        // Converter formato brasileiro para ISO
        const [datePart, timePart] = newDate.split(' ');
        const [day, month, year] = datePart.split('/');
        const formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')} ${timePart || '09:00'}`;

        fetch(`{{ url('calendar/posts') }}/${postId}/duplicate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                scheduled_at: formattedDate
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                calendar.refetchEvents();
                alert('Post duplicado com sucesso!');
                bootstrap.Modal.getInstance(document.getElementById('eventModal')).hide();
            } else {
                throw new Error(data.message || 'Erro ao duplicar');
            }
        })
        .catch(error => {
            alert('Erro ao duplicar post: ' + error.message);
        });
    }

    // Helper para cor do badge
    function getStatusBadgeColor(status) {
        const colors = {
            'scheduled': 'primary',
            'completed': 'success',
            'pending': 'warning',
            'failed': 'danger'
        };
        return colors[status] || 'secondary';
    }

    // Sistema de Tooltip
    let tooltipTimeout;
    const tooltip = document.getElementById('calendarTooltip');

    function showTooltip(e, event) {
        clearTimeout(tooltipTimeout);

        const props = event.extendedProps;

        // Configurar ícone e nome da plataforma
        const iconEl = document.getElementById('tooltipPlatformIcon');
        const nameEl = document.getElementById('tooltipPlatformName');

        if (props.socialNetworkIcon) {
            iconEl.className = props.socialNetworkIcon + ' calendar-tooltip-platform-icon';
            iconEl.style.color = props.socialNetworkColor || '#6c757d';
        }
        nameEl.textContent = props.socialNetwork || 'Rede Social';

        // Status
        const statusEl = document.getElementById('tooltipStatus');
        statusEl.className = 'badge badge-sm badge-phoenix badge-phoenix-' + getStatusBadgeColor(props.status);
        statusEl.textContent = getStatusLabel(props.status);

        // Preview do conteúdo
        const previewEl = document.getElementById('tooltipPreview');
        if (props.content) {
            previewEl.innerHTML = `
                <strong>${event.title}</strong><br>
                ${props.content.substring(0, 150)}${props.content.length > 150 ? '...' : ''}
            `;
        } else {
            previewEl.innerHTML = `<strong>${event.title}</strong>`;
        }

        // Imagem (se houver)
        const imageEl = document.getElementById('tooltipImage');
        if (props.imageUrl) {
            imageEl.src = props.imageUrl;
            imageEl.style.display = 'block';
        } else {
            imageEl.style.display = 'none';
        }

        // Data e hora
        document.getElementById('tooltipDate').textContent = event.start.toLocaleDateString('pt-BR');
        document.getElementById('tooltipTime').textContent = event.start.toLocaleTimeString('pt-BR', {
            hour: '2-digit',
            minute: '2-digit'
        });

        // Posicionar e mostrar
        updateTooltipPosition(e);

        tooltipTimeout = setTimeout(() => {
            tooltip.classList.add('show');
        }, 300);
    }

    function hideTooltip() {
        clearTimeout(tooltipTimeout);
        tooltip.classList.remove('show');
    }

    function updateTooltipPosition(e) {
        const x = e.pageX;
        const y = e.pageY;
        const tooltipWidth = tooltip.offsetWidth;
        const tooltipHeight = tooltip.offsetHeight;
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const scrollX = window.pageXOffset;
        const scrollY = window.pageYOffset;

        // Calcular posição X (evitar sair da tela)
        let left = x + 10;
        if (left + tooltipWidth > windowWidth + scrollX) {
            left = x - tooltipWidth - 10;
        }

        // Calcular posição Y (evitar sair da tela)
        let top = y + 10;
        if (top + tooltipHeight > windowHeight + scrollY) {
            top = y - tooltipHeight - 10;
        }

        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';
    }

    function getStatusLabel(status) {
        const labels = {
            'draft': 'Rascunho',
            'scheduled': 'Agendado',
            'published': 'Publicado',
            'failed': 'Falhou',
            'pending': 'Pendente',
            'completed': 'Concluído',
            'in_progress': 'Em Progresso'
        };
        return labels[status] || status;
    }

    // Esconder tooltip ao rolar a página
    window.addEventListener('scroll', hideTooltip);
});
</script>