@extends('layouts.app')

@section('title', 'Agendamento de Estúdio')

@push('styles-custom')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
<style>
.fc-event {
    cursor: pointer;
}
.agenda-card {
    transition: transform 0.2s;
}
.agenda-card:hover {
    transform: translateY(-2px);
}
.status-badge {
    font-size: 0.75rem;
}

.fc-event {
    cursor: pointer;
    font-size: 0.8rem;
}

.agenda-card {
    transition: transform 0.2s;
}

.agenda-card:hover {
    transform: translateY(-2px);
}

.status-badge {
    font-size: 0.75rem;
}

/* Melhorar responsividade */
@media (max-width: 1199.98px) {
    .navbar-vertical.navbar-expand-lg.show ~ .content {
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .card-body {
        padding: 1rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .agenda-card .card-body {
        padding: 0.75rem;
    }
    
    .fc-event {
        font-size: 0.7rem;
    }
    
    .table-responsive {
        font-size: 0.85rem;
    }
}

/* Ajustes para calendário */
.fc {
    max-width: 100%;
}

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

/* Cards de estatísticas mais compactos em mobile */
@media (max-width: 575.98px) {
    .col-12.col-sm-6.col-md-3 {
        margin-bottom: 0.75rem;
    }
    
    .card-body h4 {
        font-size: 1.5rem;
    }
}

</style>
@endpush

@section('content')
<div class="mb-9">
    <div class="row g-2 mb-4">
        <div class="col-auto">
            <h2 class="mb-0">Agendamento de Estúdio</h2>
        </div>
        @can('manage_schedules')
        <div class="col-auto">
            <button class="btn btn-phoenix-primary" type="button" data-bs-toggle="modal" data-bs-target="#novoAgendamentoModal">
                <span class="fas fa-plus me-2"></span>Novo Agendamento
            </button>
        </div>
        <div class="col-auto">
            <button class="btn btn-phoenix-secondary" type="button" data-bs-toggle="modal" data-bs-target="#novaSalaModal">
                <span class="fas fa-door-open me-2"></span>Nova Sala
            </button>
        </div>
        @endcan
    </div>

    <!-- Cards de Estatísticas -->
    <div class="row g-3 mb-6">
        <div class="col-12 col-sm-6 col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="text-body-emphasis mb-2">{{ $stats['agendamentos_hoje'] }}</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Hoje</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="fas fa-calendar-day text-primary fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="text-body-emphasis mb-2">{{ $stats['salas_ativas'] }}</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Salas Ativas</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="fas fa-door-open text-success fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="text-body-emphasis mb-2">{{ $stats['agendamentos_pendentes'] }}</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Pendentes</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="fas fa-clock text-warning fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="text-body-emphasis mb-2">{{ $stats['agendamentos_mes'] }}</h4>
                            <p class="text-body-tertiary fs-9 mb-0">Este Mês</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="fas fa-chart-line text-info fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navegação de Views -->
    <div class="card mb-3">
        <div class="card-header border-bottom">
            <div class="row align-items-center">
                <div class="col">
                    <ul class="nav nav-tabs card-header-tabs" id="agendamentoTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="hoje-tab" data-bs-toggle="tab" data-bs-target="#hoje" type="button" role="tab">
                                <span class="fas fa-list me-2"></span>Agendamentos de Hoje
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="calendario-tab" data-bs-toggle="tab" data-bs-target="#calendario" type="button" role="tab">
                                <span class="fas fa-calendar me-2"></span>Calendário
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="salas-tab" data-bs-toggle="tab" data-bs-target="#salas" type="button" role="tab">
                                <span class="fas fa-door-open me-2"></span>Salas
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="tab-content" id="agendamentoTabContent">
                <!-- Aba: Agendamentos de Hoje -->
                <div class="tab-pane fade show active p-3" id="hoje" role="tabpanel">
                <!-- Aba: Agendamentos de Hoje -->
                <div class="tab-pane fade show active" id="hoje" role="tabpanel">
                    @if($agendamentosHoje->count() > 0)
                        <div class="row g-3">
                            @foreach($agendamentosHoje as $agendamento)
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="card agenda-card h-100">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start mb-3">
                                            <h5 class="card-title mb-0">{{ $agendamento->titulo }}</h5>
                                            <span class="badge bg-{{ $agendamento->status === 'confirmado' ? 'success' : ($agendamento->status === 'pendente' ? 'warning' : 'danger') }} status-badge">
                                                {{ ucfirst($agendamento->status) }}
                                            </span>
                                        </div>
                                        
                                        <div class="mb-2">
                                            <span class="fas fa-door-open text-body-tertiary me-2"></span>
                                            <span class="text-body-emphasis fw-semibold">{{ $agendamento->sala->nome }}</span>
                                        </div>
                                        
                                        <div class="mb-2">
                                            <span class="fas fa-clock text-body-tertiary me-2"></span>
                                            <span class="text-body">{{ $agendamento->data_inicio->format('H:i') }} - {{ $agendamento->data_fim->format('H:i') }}</span>
                                            <small class="text-body-tertiary">({{ $agendamento->duracao_human }})</small>
                                        </div>
                                        
                                        @if($agendamento->cliente_responsavel)
                                        <div class="mb-2">
                                            <span class="fas fa-user text-body-tertiary me-2"></span>
                                            <span class="text-body">{{ $agendamento->cliente_responsavel }}</span>
                                        </div>
                                        @endif
                                        
                                        @if($agendamento->descricao)
                                        <div class="mb-3">
                                            <small class="text-body-tertiary">{{ Str::limit($agendamento->descricao, 100) }}</small>
                                        </div>
                                        @endif
                                        
                                        <div class="d-flex gap-2">
                                            @can('manage_schedules')
                                            <button class="btn btn-phoenix-primary btn-sm" onclick="editarAgendamento({{ $agendamento->id }})">
                                                <span class="fas fa-edit"></span>
                                            </button>
                                            @if($agendamento->status === 'pendente')
                                            <button class="btn btn-phoenix-success btn-sm" onclick="confirmarAgendamento({{ $agendamento->id }})">
                                                <span class="fas fa-check"></span>
                                            </button>
                                            @endif
                                            <button class="btn btn-phoenix-danger btn-sm" onclick="cancelarAgendamento({{ $agendamento->id }})">
                                                <span class="fas fa-times"></span>
                                            </button>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <span class="fas fa-calendar-times text-body-tertiary fs-1 mb-3 d-block"></span>
                            <h5 class="text-body-tertiary">Nenhum agendamento para hoje</h5>
                            <p class="text-body-secondary">Clique em "Novo Agendamento" para criar o primeiro.</p>
                        </div>
                    @endif
                </div>

                <!-- Aba: Calendário -->
                <div class="tab-pane fade p-3" id="calendario" role="tabpanel">
                    <div id="calendar"></div>
                </div>

                <!-- Aba: Salas -->
                <div class="tab-pane fade p-3" id="salas" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-striped table-sm fs-9 mb-0">
                            <thead>
                                <tr>
                                    <th>Nome</th>
                                    <th>Capacidade</th>
                                    <th>Status</th>
                                    <th>Agendamentos</th>
                                    <th class="text-end">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="salas-tbody">
                                @foreach($salas as $sala)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-2" style="width: 16px; height: 16px; background-color: {{ $sala->cor_identificacao }}; border-radius: 3px;"></div>
                                            {{ $sala->nome }}
                                        </div>
                                    </td>
                                    <td>{{ $sala->capacidade ? $sala->capacidade . ' pessoas' : 'Não definida' }}</td>
                                    <td>
                                        <span class="badge bg-{{ $sala->status === 'ativa' ? 'success' : 'secondary' }}">
                                            {{ ucfirst($sala->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $sala->agendamentos_count }} futuros</td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-phoenix-primary" onclick="editarSala({{ $sala->id }})">
                                                <span class="fas fa-edit"></span>
                                            </button>
                                            <button class="btn btn-phoenix-{{ $sala->status === 'ativa' ? 'warning' : 'success' }}" onclick="toggleStatusSala({{ $sala->id }})">
                                                <span class="fas fa-{{ $sala->status === 'ativa' ? 'pause' : 'play' }}"></span>
                                            </button>
                                            <button class="btn btn-phoenix-danger" onclick="excluirSala({{ $sala->id }})">
                                                <span class="fas fa-trash"></span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modais -->
@include('agendamento.modals.agendamento-form')
@include('agendamento.modals.sala-form')

@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>
$(document).ready(function() {
    // Inicializar calendário quando a aba for ativada
    $('#calendario-tab').on('shown.bs.tab', function () {
        if (!window.calendar) {
            initializeCalendar();
        } else {
            // Se já existe, apenas refaz o render para ajustar tamanho
            setTimeout(() => {
                window.calendar.updateSize();
            }, 100);
        }
    });
});

function initializeCalendar() {
    const calendarEl = document.getElementById('calendar');
    
    if (!calendarEl) {
        console.error('Elemento calendar não encontrado');
        return;
    }
    
    window.calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'pt-br',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        buttonText: {
            today: 'Hoje',
            month: 'Mês',
            week: 'Semana',
            day: 'Dia'
        },
        events: '{{ route("agendamento.calendario.eventos") }}',
        eventClick: function(info) {
            showAgendamentoDetails(info.event);
        },
        dateClick: function(info) {
            createAgendamentoOnDate(info.date);
        },
        height: 'auto',
        aspectRatio: 1.8,
        eventDisplay: 'block',
        dayMaxEvents: 3,
        moreLinkText: function(num) {
            return `+${num} mais`;
        },
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false
        }
    });
    
    window.calendar.render();
}

// Funções de gerenciamento
function editarAgendamento(id) {
    // TODO: Implementar modal de edição
    console.log('Editar agendamento:', id);
}

function confirmarAgendamento(id) {
    if (confirm('Confirmar este agendamento?')) {
        fetch(`/agendamento/agendamentos/${id}/confirmar`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                location.reload();
            } else {
                showAlert('error', data.message);
            }
        });
    }
}

function cancelarAgendamento(id) {
    if (confirm('Cancelar este agendamento?')) {
        fetch(`/agendamento/agendamentos/${id}/cancelar`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                location.reload();
            } else {
                showAlert('error', data.message);
            }
        });
    }
}

function editarSala(id) {
    // TODO: Implementar modal de edição de sala
    console.log('Editar sala:', id);
}

function toggleStatusSala(id) {
    fetch(`/agendamento/salas/${id}/toggle-status`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            location.reload();
        } else {
            showAlert('error', data.message);
        }
    });
}

function excluirSala(id) {
    if (confirm('Excluir esta sala? Esta ação não pode ser desfeita.')) {
        fetch(`/agendamento/salas/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                location.reload();
            } else {
                showAlert('error', data.message);
            }
        });
    }
}

function showAlert(type, message) {
    Swal.fire({
        title: type === 'success' ? 'Sucesso!' : 'Erro!',
        text: message,
        icon: type === 'success' ? 'success' : 'error',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
    });
    
}

// Função melhorada para detalhes do agendamento
function showAgendamentoDetails(event) {
    const props = event.extendedProps;
    
    Swal.fire({
        title: event.title,
        html: `
            <div class="text-start">
                <p><strong>Sala:</strong> ${props.sala}</p>
                <p><strong>Data:</strong> ${new Date(event.start).toLocaleDateString('pt-BR')}</p>
                <p><strong>Horário:</strong> ${new Date(event.start).toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})} - ${new Date(event.end).toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'})}</p>
                ${props.cliente ? `<p><strong>Cliente:</strong> ${props.cliente}</p>` : ''}
                ${props.descricao ? `<p><strong>Descrição:</strong> ${props.descricao}</p>` : ''}
                <p><strong>Status:</strong> <span class="badge bg-${props.status === 'confirmado' ? 'success' : (props.status === 'pendente' ? 'warning' : 'danger')}">${props.status.charAt(0).toUpperCase() + props.status.slice(1)}</span></p>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Editar',
        cancelButtonText: 'Fechar',
        customClass: {
            confirmButton: 'btn btn-phoenix-primary',
            cancelButton: 'btn btn-phoenix-secondary'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = `/agendamento/agendamentos/${event.id}/edit`;
        }
    });
}

function createAgendamentoOnDate(date) {
    $('#data_inicio').val(date.toISOString().slice(0, 16));
    const endDate = new Date(date);
    endDate.setHours(endDate.getHours() + 1);
    $('#data_fim').val(endDate.toISOString().slice(0, 16));
    $('#novoAgendamentoModal').modal('show');
}
</script>
@endpush