@extends('layouts.app')

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

@push('styles-custom')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
<style>
/* Configurações básicas do calendário */
.fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.fc-daygrid-event-harness {
    margin-bottom: 1px;
}

.fc-h-event {
    border: none !important;
}

/* Estilos principais dos eventos */
.fc-event {
    cursor: grab;
    border-radius: 6px !important;
    border-width: 2px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    color: #333333 !important;
    border-left-width: 5px !important;
    margin: 1px 0 !important;
    padding: 2px 6px !important;
}

.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.3);
    filter: brightness(1.05);
    background: #f8f9fa !important;
}

.fc-event:active {
    cursor: grabbing;
}

.fc-event.fc-dragging {
    opacity: 0.8;
    transform: scale(1.05);
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Títulos e textos dos eventos */
.fc-event-title {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.fc-event-time {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Visualização mensal */
.fc-daygrid-event {
    margin-bottom: 2px !important;
    border-radius: 4px !important;
    padding: 1px 3px !important;
}

.fc-daygrid-event .fc-event-title {
    font-size: 0.75rem !important;
    padding: 0 2px !important;
}

/* Visualização semanal/diária */
.fc-timegrid-event {
    border-radius: 4px !important;
    padding: 3px 6px !important;
}

.fc-timegrid-event .fc-event-title {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Estados por status */
.fc-event.status-confirmado {
    border-style: solid !important;
    border-left: 4px solid #198754 !important;
}

.fc-event.status-pendente {
    border-style: dashed !important;
    border-left: 4px solid #ffc107 !important;
}

.fc-event.status-cancelado {
    opacity: 0.7 !important;
    background: #f8f8f8 !important;
    border-style: dotted !important;
    border-left: 4px solid #dc3545 !important;
}

/* Eventos no passado */
.fc-event.past-event {
    opacity: 0.7 !important;
    background: #f5f5f5 !important;
    filter: grayscale(20%);
}

.fc-event.past-event:hover {
    filter: grayscale(10%);
    opacity: 0.8 !important;
}

/* Visualização lista - Versão Original */
.fc-list-event {
    border-left: 4px solid !important;
    background: #ffffff !important;
    margin-bottom: 1px !important;
}

.fc-list-event:hover {
    background: #f8f9fa !important;
}

.fc-list-event-title {
    color: #333 !important;
    font-weight: 500 !important;
}

.fc-list-event-time {
    color: #666 !important;
    font-weight: 600 !important;
}

/* Lista - Pequeno ajuste para sala */
.fc-list-event .fc-list-event-title {
    line-height: 1.4 !important;
}

.fc-list-event .fc-list-event-title span {
    display: inline-block;
    margin-bottom: 2px;
}

/* Melhorias para a visualização Lista do FullCalendar */
.fc-list-event {
    border-left: 4px solid !important;
    background: #ffffff !important;
    margin-bottom: 2px !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

.fc-list-event:hover {
    background: #f8f9fa !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    transform: translateY(-1px);
}

.fc-list-event-title {
    color: #333 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.fc-list-event-time {
    color: #666 !important;
    font-weight: 600 !important;
}

/* Dias passados */
.fc-day-past {
    background-color: rgba(108, 117, 125, 0.05) !important;
    position: relative;
    cursor: not-allowed;
}

.fc-day-past::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: rgba(108, 117, 125, 0.3);
    border-radius: 50%;
}

.fc-daygrid-day.fc-day-past .fc-daygrid-day-number {
    color: rgba(108, 117, 125, 0.7);
    text-decoration: none;
}

.fc-daygrid-day:not(.fc-day-past) {
    cursor: pointer;
}

.fc-daygrid-day:not(.fc-day-past):hover {
    background-color: rgba(var(--phoenix-primary-rgb), 0.05);
}

/* Sidebar */
.legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 5px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
}

.calendar-sidebar {
    max-height: 600px;
    overflow-y: auto;
}

.upcoming-event {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 4px solid;
    background-color: rgba(var(--phoenix-primary-rgb), 0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.upcoming-event:hover {
    transform: translateY(-1px);
    background-color: rgba(var(--phoenix-primary-rgb), 0.15);
}

.event-time {
    font-size: 0.8rem;
    font-weight: 600;
}

.event-title {
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.event-details {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Filtros */
.dropdown-menu {
    min-width: 250px;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background-color: rgba(var(--phoenix-primary-rgb), 0.1);
}

.dropdown-item.active {
    background-color: rgb(var(--phoenix-primary-rgb));
    color: white;
}

/* Responsividade */
@media (max-width: 991.98px) {
    .col-12.col-lg-4.col-xl-3 {
        order: -1;
    }
    
    .calendar-sidebar {
        max-height: 300px;
    }
}

@media (max-width: 767.98px) {
    .fc-event {
        border-radius: 3px !important;
        padding: 1px 2px !important;
        border-left-width: 4px !important;
    }
    
    .fc-daygrid-event .fc-event-title {
        font-size: 0.7rem !important;
    }
    
    .fc-timegrid-event .fc-event-title {
        font-size: 0.75rem !important;
    }
    
    .fc-event-time {
        font-size: 0.6rem !important;
    }
    
    .dropdown-menu {
        min-width: 200px;
        max-height: 250px;
    }
    
    .legend-item {
        margin-right: 10px;
        font-size: 0.85rem;
    }
    
    .upcoming-event {
        padding: 6px 10px;
        margin-bottom: 6px;
    }
    
    .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

/* Próximos Eventos - Visual Clean e Legível */
.upcoming-event-clean {
    padding: 12px 15px;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
}

.upcoming-event-clean:hover {
    cursor: pointer;
}

/* Remove os estilos antigos conflitantes */
.upcoming-event-colorful {
    display: none; /* Esconder se existir */
}

@media (max-width: 991.98px) {
    .upcoming-event-clean {
        padding: 10px 12px;
        margin-bottom: 10px;
    }
}

@media (max-width: 767.98px) {
    .upcoming-event-clean {
        padding: 8px 10px;
        margin-bottom: 8px;
    }
}
</style>
@endpush

@section('content')
<div class="mb-9">
    <div class="row g-3 mb-4">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('agendamento.calendario') }}">Agendamento</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Calendário</li>
                </ol>
            </nav>
            <h2 class="mb-0">Calendário de Agendamentos</h2>
        </div>
        <div class="col-auto">
            <a href="{{ route('agendamento.agendamentos.create') }}" class="btn btn-phoenix-primary me-2">
                <span class="fas fa-plus me-2"></span>Novo Agendamento
            </a>
            <a href="{{ route('agendamento.salas.index') }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-door-open me-2"></span>Gerenciar Salas
            </a>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-lg-8 col-xl-9">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0">Calendário</h5>
                            <small class="text-body-tertiary">Arraste os eventos para alterar data ou redimensione para alterar duração</small>
                        </div>
                        <div class="col-auto">
                            <!-- Filtros por Sala - Dropdown -->
                            <div class="dropdown">
                                <button class="btn btn-phoenix-secondary dropdown-toggle" type="button" id="filtroSalas" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="fas fa-filter me-2"></span>
                                    <span id="filtroAtual">Todas as Salas</span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="filtroSalas">
                                    <li>
                                        <a class="dropdown-item active" href="#" onclick="filterEventsBySala('all')" data-sala="all">
                                            <span class="fas fa-eye me-2"></span>Todas as Salas
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    @foreach($salas as $sala)
                                    <li>
                                        <a class="dropdown-item" href="#" onclick="filterEventsBySala('{{ $sala->id }}')" data-sala="{{ $sala->id }}">
                                            <div class="d-flex align-items-center">
                                                <div class="me-2" style="width: 12px; height: 12px; background-color: {{ $sala->cor_identificacao }}; border-radius: 50%;"></div>
                                                <span>{{ $sala->nome }}</span>
                                            </div>
                                        </a>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-lg-4 col-xl-3">
            <!-- Legenda das Salas -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Legenda das Salas</h5>
                </div>
                <div class="card-body">
                    @foreach($salas as $sala)
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: {{ $sala->cor_identificacao }};"></div>
                        <span class="text-body-emphasis">{{ $sala->nome }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            
            <!-- Próximos Agendamentos -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Próximos Agendamentos</h5>
                </div>
                <div class="card-body calendar-sidebar" id="upcomingEvents">
                    <div class="text-center text-body-tertiary py-3">
                        <span class="spinner-border spinner-border-sm me-2"></span>Carregando...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Detalhes do Agendamento -->
<div class="modal fade" id="agendamentoDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <span class="fas fa-calendar-alt me-2"></span>Detalhes do Agendamento
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="agendamentoDetailContent">
                <!-- Conteúdo será preenchido via JavaScript -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-phoenix-danger" id="excluirAgendamentoBtn">
                    <span class="fas fa-trash me-2"></span>Excluir
                </button>
                <button type="button" class="btn btn-phoenix-primary" id="editarAgendamentoBtn">
                    <span class="fas fa-edit me-2"></span>Editar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Novo Agendamento -->
@include('agendamento.modals.agendamento-form', ['salas' => $salas])

@endsection

@push('scripts-custom')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/locales/pt-br.global.min.js"></script>
<script>
let calendar;
window.calendar = null; // Tornar acessível globalmente
let currentAgendamentoId = null;
let allEvents = [];

$(document).ready(function() {
    initializeCalendar();
    loadUpcomingEvents();
});

function initializeCalendar() {
    const calendarEl = document.getElementById('calendar');
    
    calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'pt-br',
        height: 'auto',
        
        // Habilitar edição e drag & drop
        editable: true,
        droppable: true,
        
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        buttonText: {
            today: 'Hoje',
            month: 'Mês',
            week: 'Semana',
            day: 'Dia',
            list: 'Lista'
        },
        events: function(fetchInfo, successCallback, failureCallback) {
            fetch('{{ route("agendamento.calendario.eventos") }}?' + new URLSearchParams({
                start: fetchInfo.startStr,
                end: fetchInfo.endStr
            }))
            .then(response => response.json())
            .then(data => {
                allEvents = data;
                successCallback(data);
                updateUpcomingEvents(data);
            })
            .catch(error => {
                console.error('Error loading events:', error);
                failureCallback(error);
            });
        },
        
        // Event handlers
        eventClick: function(info) {
            showAgendamentoDetails(info.event);
        },
        
        dateClick: function(info) {
            // Validar se a data clicada não é no passado
            if (isDateInPast(info.date)) {
                Swal.fire({
                    title: 'Data Inválida',
                    text: 'Não é possível criar agendamentos em datas passadas.',
                    icon: 'warning',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000
                });
                return;
            }
            createAgendamentoOnDate(info.date);
        },
        
        // Validar antes de permitir o drop
        eventAllow: function(dropInfo, draggedEvent) {
            return !isDateInPast(dropInfo.start);
        },
        
        // Drag & Drop - quando o evento é movido
        eventDrop: function(info) {
            if (isDateTimeInPast(info.event.start)) {
                info.revert();
                Swal.fire({
                    title: 'Data Inválida',
                    text: 'Não é possível mover agendamentos para datas/horários passados.',
                    icon: 'warning'
                });
                return;
            }
            updateAgendamentoDate(info.event, info);
        },
        
        // Redimensionar evento (alterar duração)
        eventResize: function(info) {
            if (isDateTimeInPast(info.event.start)) {
                info.revert();
                Swal.fire({
                    title: 'Horário Inválido',
                    text: 'Não é possível alterar duração para horários passados.',
                    icon: 'warning'
                });
                return;
            }
            updateAgendamentoDuration(info.event, info);
        },
        
        // Renderização dos dias
        dayCellDidMount: function(info) {
            if (isDateInPast(info.date)) {
                info.el.classList.add('fc-day-past');
                info.el.style.backgroundColor = 'rgba(108, 117, 125, 0.1)';
            }
        },
        
        eventDidMount: function(info) {
            const props = info.event.extendedProps;
            const startTime = info.event.start.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'});
            const endTime = info.event.end ? info.event.end.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'}) : '';
            const startDate = info.event.start.toLocaleDateString('pt-BR');
            
            const isEventInPast = isDateTimeInPast(info.event.start);
            
            // Aplicar cor da sala na borda esquerda
            if (props.cor_sala) {
                info.el.style.borderLeftColor = props.cor_sala;
                info.el.style.borderColor = props.cor_sala;
            }
            
            // Aplicar estilo clean
            info.el.style.backgroundColor = '#ffffff';
            info.el.style.color = '#333333';
            
            // Tooltip organizado
            let tooltipText = `🏢 ${props.sala}\n`;
            tooltipText += `📋 ${info.event.title.replace(/^[●◐○•]\s/, '')}\n`;
            tooltipText += `📅 ${startDate}\n`;
            tooltipText += `🕐 ${startTime} - ${endTime}`;
            if (props.duracao) {
                tooltipText += ` (${props.duracao})`;
            }
            if (props.cliente) {
                tooltipText += `\n👤 Cliente: ${props.cliente}`;
            }
            tooltipText += `\n📊 Status: ${props.status.charAt(0).toUpperCase() + props.status.slice(1)}`;
            if (props.descricao) {
                tooltipText += `\n📝 Descrição: ${props.descricao}`;
            }
            if (props.observacoes) {
                tooltipText += `\n📄 Observações: ${props.observacoes}`;
            }
            
            if (isEventInPast) {
                info.el.classList.add('past-event');
                tooltipText += '\n✅ Evento realizado';
            } else {
                tooltipText += '\n\n💡 Dica: Clique para ver detalhes';
            }
            
            info.el.title = tooltipText;
            
            // Adicionar classes CSS
            info.el.classList.add(`status-${props.status}`);
            info.el.classList.add(`sala-${props.sala_id}`);
        },
        
        dayMaxEvents: 3,
        moreLinkText: function(num) {
            return `+${num} mais`;
        },
        eventDisplay: 'block',
        displayEventTime: true,
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false
        }
    });
    
    calendar.render();
    window.calendar = calendar; // Disponibilizar globalmente
    
    // Aplicar melhorias na lista quando necessário
    calendar.on('datesSet', function() {
        if (calendar.view.type === 'listWeek') {
            enhanceListView();
        }
    });
}

// Funções de validação
function isDateInPast(date) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    const checkDate = new Date(date);
    checkDate.setHours(0, 0, 0, 0);
    
    return checkDate < today;
}

function isDateTimeInPast(date) {
    const now = new Date();
    const checkDate = new Date(date);
    const oneMinuteAgo = new Date(now.getTime() - (1 * 60 * 1000));
    
    return checkDate < oneMinuteAgo;
}

function isDateTimeTodayInPast(date) {
    const now = new Date();
    const checkDate = new Date(date);
    
    if (checkDate.toDateString() === now.toDateString()) {
        return checkDate.getTime() < now.getTime();
    }
    
    return checkDate < now;
}

// Funções de atualização
function updateAgendamentoDate(event, info) {
    const agendamentoId = event.id;
    const newStart = info.event.start;
    const newEnd = info.event.end;
    
    if (isDateTimeInPast(newStart)) {
        info.revert();
        Swal.fire({
            title: 'Data Inválida',
            text: 'Não é possível mover agendamentos para datas/horários passados.',
            icon: 'warning'
        });
        return;
    }
    
    Swal.fire({
        title: 'Atualizando...',
        text: 'Movendo agendamento para nova data',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    const duration = new Date(info.oldEvent.end) - new Date(info.oldEvent.start);
    const calculatedEnd = new Date(newStart.getTime() + duration);
    
    const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day}T${hours}:${minutes}`;
    };
    
    const updateData = {
        data_inicio: formatDate(newStart),
        data_fim: formatDate(newEnd || calculatedEnd)
    };
    
    fetch(`/agendamento/agendamentos/${agendamentoId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(updateData)
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();
        
        if (data.success) {
            Swal.fire({
                title: 'Sucesso!',
                text: 'Agendamento movido com sucesso!',
                icon: 'success',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
            
            loadUpcomingEvents();
        } else {
            info.revert();
            
            Swal.fire({
                title: 'Erro!',
                text: data.message || 'Erro ao mover agendamento',
                icon: 'error'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        info.revert();
        Swal.close();
        
        Swal.fire({
            title: 'Erro!',
            text: 'Erro de conexão ao mover agendamento',
            icon: 'error'
        });
    });
}

function updateAgendamentoDuration(event, info) {
    const agendamentoId = event.id;
    const newEnd = info.event.end;
    
    // Validar se a nova duração não termina no passado
    if (isDateTimeInPast(newEnd)) {
        info.revert();
        Swal.fire({
            title: 'Horário Inválido',
            text: 'Não é possível definir fim do agendamento no passado.',
            icon: 'warning'
        });
        return;
    }
    
    Swal.fire({
        title: 'Atualizando...',
        text: 'Alterando duração do agendamento',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day}T${hours}:${minutes}`;
    };
    
    const updateData = {
        data_fim: formatDate(newEnd)
    };
    
    fetch(`/agendamento/agendamentos/${agendamentoId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(updateData)
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();
        
        if (data.success) {
            Swal.fire({
                title: 'Sucesso!',
                text: 'Duração alterada com sucesso!',
                icon: 'success',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
            
            loadUpcomingEvents();
        } else {
            info.revert();
            
            Swal.fire({
                title: 'Erro!',
                text: data.message || 'Erro ao alterar duração',
                icon: 'error'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        info.revert();
        Swal.close();
        
        Swal.fire({
            title: 'Erro!',
            text: 'Erro de conexão ao alterar duração',
            icon: 'error'
        });
    });
}

function showAgendamentoDetails(event) {
    currentAgendamentoId = event.id;
    const props = event.extendedProps;
    
    let statusClass = 'secondary';
    let statusIcon = 'question-circle';
    
    switch(props.status) {
        case 'confirmado':
            statusClass = 'success';
            statusIcon = 'check-circle';
            break;
        case 'pendente':
            statusClass = 'warning';
            statusIcon = 'clock';
            break;
        case 'cancelado':
            statusClass = 'danger';
            statusIcon = 'times-circle';
            break;
    }
    
    const startDate = new Date(event.start);
    const endDate = new Date(event.end);
    
    const content = `
        <div class="row g-3">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-start">
                    <h5 class="text-body-emphasis mb-0">${event.title}</h5>
                    <span class="badge bg-${statusClass}">
                        <span class="fas fa-${statusIcon} me-1"></span>${props.status.charAt(0).toUpperCase() + props.status.slice(1)}
                    </span>
                </div>
            </div>
            
            <div class="col-12">
                <div class="row g-2 text-body-secondary">
                    <div class="col-4"><strong>Sala:</strong></div>
                    <div class="col-8">${props.sala}</div>
                    
                    <div class="col-4"><strong>Data:</strong></div>
                    <div class="col-8">${startDate.toLocaleDateString('pt-BR')}</div>
                    
                    <div class="col-4"><strong>Horário:</strong></div>
                    <div class="col-8">${startDate.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})} - ${endDate.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})}</div>
                    
                    ${props.cliente ? `
                    <div class="col-4"><strong>Cliente:</strong></div>
                    <div class="col-8">${props.cliente}</div>
                    ` : ''}
                    
                    ${props.descricao ? `
                    <div class="col-12">
                        <strong>Descrição:</strong><br>
                        <span class="text-body">${props.descricao}</span>
                    </div>
                    ` : ''}
                    
                    ${props.observacoes ? `
                    <div class="col-12">
                        <strong>Observações:</strong><br>
                        <span class="text-body">${props.observacoes}</span>
                    </div>
                    ` : ''}
                </div>
            </div>
        </div>
    `;
    
    $('#agendamentoDetailContent').html(content);
    $('#agendamentoDetailModal').modal('show');
}

function createAgendamentoOnDate(date) {
    // Validar se a data não é no passado (apenas dia)
    if (isDateInPast(date)) {
        Swal.fire({
            title: 'Data Inválida',
            text: 'Não é possível criar agendamentos em datas passadas.',
            icon: 'warning',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
        return;
    }
    
    const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day}T${hours}:${minutes}`;
    };
    
    // Se a data clicada é hoje, definir horário atual + 1 hora
    const now = new Date();
    let startDate = new Date(date);
    
    if (startDate.toDateString() === now.toDateString()) {
        // Se clicou em hoje, usar horário atual + 1 hora como mínimo
        const minimumStart = new Date(now.getTime() + (60 * 60 * 1000)); // +1 hora
        startDate = minimumStart > startDate ? minimumStart : startDate;
    } else {
        // Se clicou em outro dia, usar 9:00 como padrão
        startDate.setHours(9, 0, 0, 0);
    }
    
    // Usar os IDs corretos do modal
    $('#modal_data_inicio').val(formatDate(startDate));
    
    // Definir data fim como 1 hora depois
    const endDate = new Date(startDate.getTime() + (60 * 60 * 1000));
    $('#modal_data_fim').val(formatDate(endDate));
    
    $('#novoAgendamentoModal').modal('show');
}

function filterEventsBySala(salaId) {
    // Atualizar dropdown
    $('.dropdown-item').removeClass('active');
    $(`.dropdown-item[data-sala="${salaId}"]`).addClass('active');
    
    // Atualizar texto do botão
    const salaTexto = salaId === 'all' ? 'Todas as Salas' : $(`.dropdown-item[data-sala="${salaId}"] span`).last().text();
    $('#filtroAtual').text(salaTexto);
    
    // Filtrar eventos
    if (salaId === 'all') {
        calendar.getEvents().forEach(event => event.remove());
        allEvents.forEach(eventData => calendar.addEvent(eventData));
    } else {
        calendar.getEvents().forEach(event => event.remove());
        const filteredEvents = allEvents.filter(event => 
            event.extendedProps && event.extendedProps.sala_id == salaId
        );
        filteredEvents.forEach(eventData => calendar.addEvent(eventData));
    }
}

function loadUpcomingEvents() {
    const now = new Date();
    const nextMonth = new Date();
    nextMonth.setMonth(nextMonth.getMonth() + 1);
    
    fetch('{{ route("agendamento.calendario.eventos") }}?' + new URLSearchParams({
        start: now.toISOString(),
        end: nextMonth.toISOString()
    }))
    .then(response => response.json())
    .then(events => {
        updateUpcomingEvents(events);
    })
    .catch(error => {
        console.error('Error loading upcoming events:', error);
        $('#upcomingEvents').html('<div class="text-center text-danger">Erro ao carregar eventos</div>');
    });
}

// Event handler para excluir agendamento
$('#excluirAgendamentoBtn').on('click', function() {
    if (currentAgendamentoId) {
        excluirAgendamento(currentAgendamentoId);
    }
});

// Função para excluir agendamento
function excluirAgendamento(agendamentoId) {
    // Buscar dados do agendamento atual
    const currentEvent = calendar.getEventById(agendamentoId);
    
    let tituloEvento = 'este agendamento';
    let detalhesEvento = '';
    
    if (currentEvent) {
        tituloEvento = currentEvent.title.replace(/^[✓⏳✗•]\s/, '');
        const startDate = new Date(currentEvent.start);
        const endDate = new Date(currentEvent.end);
        
        detalhesEvento = `
            <div class="text-start mt-3">
                <strong>📋 ${tituloEvento}</strong><br>
                📅 ${startDate.toLocaleDateString('pt-BR')}<br>
                🕐 ${startDate.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})} - ${endDate.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})}<br>
                🏢 ${currentEvent.extendedProps.sala}
            </div>
        `;
    }
    
    Swal.fire({
        title: '⚠️ Confirmar Exclusão',
        html: `Tem certeza que deseja excluir ${tituloEvento}?${detalhesEvento}`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '🗑️ Sim, Excluir',
        cancelButtonText: '❌ Cancelar',
        reverseButtons: true,
        allowOutsideClick: false
    }).then((result) => {
        if (result.isConfirmed) {
            // Executar exclusão
            confirmarExclusaoAgendamento(agendamentoId);
        }
    });
}

// Função para confirmar e executar a exclusão
function confirmarExclusaoAgendamento(agendamentoId) {
    Swal.fire({
        title: 'Excluindo...',
        text: 'Removendo agendamento do sistema',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch(`/agendamento/agendamentos/${agendamentoId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Fechar modal de detalhes
            $('#agendamentoDetailModal').modal('hide');
            
            // Mostrar sucesso
            Swal.fire({
                title: '✅ Excluído!',
                text: data.message || 'Agendamento excluído com sucesso!',
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            });
            
            // Atualizar calendário
            if (calendar) {
                calendar.refetchEvents();
            }
            
            // Atualizar próximos agendamentos
            loadUpcomingEvents();
            
        } else {
            Swal.fire({
                title: '❌ Erro!',
                text: data.message || 'Erro ao excluir agendamento',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            title: '❌ Erro!',
            text: 'Erro de conexão ao excluir agendamento',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    });
}

function updateUpcomingEvents(events) {
    const now = new Date();
    const upcomingEvents = events
        .filter(event => new Date(event.start) >= now)
        .sort((a, b) => new Date(a.start) - new Date(b.start))
        .slice(0, 10);
    
    const container = $('#upcomingEvents');
    
    if (upcomingEvents.length === 0) {
        container.html('<div class="text-center text-body-tertiary py-3">Nenhum agendamento futuro</div>');
        return;
    }
    
    let html = '';
    upcomingEvents.forEach(event => {
        const startDate = new Date(event.start);
        const isToday = startDate.toDateString() === now.toDateString();
        
        html += `
            <div class="upcoming-event" style="border-left-color: ${event.borderColor};" onclick="calendar.gotoDate('${event.start}')">
                <div class="event-time text-primary">
                    ${isToday ? 'HOJE' : startDate.toLocaleDateString('pt-BR', {weekday: 'short', day: '2-digit', month: '2-digit'})} 
                    ${startDate.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})}
                </div>
                <div class="event-sala text-body-secondary mb-1" style="font-size: 0.75rem; font-weight: 600; color: ${event.borderColor};">
                    🏢 ${event.extendedProps.sala}
                </div>
                <div class="event-title text-body-emphasis">${event.title}</div>
                <div class="event-details text-body-tertiary">
                    ${event.extendedProps.cliente ? `👤 ${event.extendedProps.cliente}` : 'Sem cliente definido'}
                </div>
            </div>
        `;
    });
    
    container.html(html);
}

// Event handler for edit button in detail modal
$('#editarAgendamentoBtn').on('click', function() {
    if (currentAgendamentoId) {
        window.location.href = `/agendamento/agendamentos/${currentAgendamentoId}/edit`;
    }
});

// Refresh calendar when modal is closed
$('#novoAgendamentoModal').on('hidden.bs.modal', function() {
    setTimeout(() => {
        calendar.refetchEvents();
        loadUpcomingEvents();
    }, 1000);
});

// Melhorar visualização lista quando for ativada
// Função para calcular cor de contraste
function getContrastColor(hexColor) {
    // Remove o # se presente
    const color = hexColor.replace('#', '');
    
    // Converte para RGB
    const r = parseInt(color.substring(0, 2), 16);
    const g = parseInt(color.substring(2, 4), 16);
    const b = parseInt(color.substring(4, 6), 16);
    
    // Calcula a luminosidade
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    
    // Retorna branco para cores escuras e preto para cores claras
    return luminance > 0.5 ? '#000000' : '#ffffff';
}

// Melhorar visualização lista quando for ativada
function enhanceListView() {
    setTimeout(() => {
        $('.fc-list-event').each(function() {
            const $event = $(this);
            const $title = $event.find('.fc-list-event-title');
            
            // Verificar se já foi processado
            if ($title.find('.sala-badge').length > 0) {
                return;
            }
            
            // Buscar evento correspondente no array allEvents
            const eventText = $title.text().trim();
            const matchingEvent = allEvents.find(event => {
                const eventTitle = event.title.replace(/^[✓⏳✗•]\s/, '').trim();
                return eventText.includes(eventTitle) || eventTitle.includes(eventText);
            });
            
            if (matchingEvent && matchingEvent.extendedProps) {
                const sala = matchingEvent.extendedProps.sala;
                const corSala = matchingEvent.extendedProps.cor_sala || matchingEvent.borderColor;
                const corTexto = getContrastColor(corSala);
                
                // Aplicar cor da sala na borda
                $event.css('border-left-color', corSala);
                
                // Adicionar badge da sala com cor de texto automática
                if (sala) {
                    $title.prepend(`
                        <span class="sala-badge me-2" style="
                            background-color: ${corSala}; 
                            color: ${corTexto}; 
                            padding: 3px 8px; 
                            border-radius: 6px; 
                            font-size: 0.75rem; 
                            font-weight: 600;
                            display: inline-block;
                            margin-right: 8px;
                            border: 1px solid rgba(0,0,0,0.1);
                            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                        ">
                            <i class="fas fa-door-open me-1"></i>${sala}
                        </span>
                    `);
                }
            }
        });
    }, 100);
}

// Aplicar quando trocar para lista
$('.fc-listWeek-button').on('click', function() {
    setTimeout(() => {
        enhanceListView();
    }, 200);
});
</script>
@endpush