@extends('layouts.main')

{{-- Bloco de Metas OpenGraph para compartilhamento --}}
@section('og_type', 'website')
@section('og_title', 'Programação Completa - Febratex Summit')
@section('og_description', 'Explore a grade completa de palestras, workshops e eventos especiais. Planeje sua visita e não perca os principais nomes da indústria têxtil!')
@section('og_url', url('/programacao'))
@section('og_image', asset('img/programacao.webp'))
@section('og_image_alt', 'Programação completa do Febratex Summit')
{{-- Fim do Bloco OpenGraph --}}

@section('title', 'Febratex Summit - Programação')
@section('description', 'Confira a programação completa do Febratex Summit com palestras, workshops e eventos especiais!')

@section('content')

<section class="programacao-content">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 gap-md-5 py-4">
            <div class="d-flex align-items-center">
                <h1 class="m-0">Programação do Evento</h1>
            </div>
            <div class="d-flex justify-content-center">
                <a href="https://sigevent.pro/fcemeventos/visitantes/?id_edicao=876&linguagem=portugues" target="_blank"
                    class="btn-hero-7">
                    QUERO VISITAR
                </a>
            </div>
        </div>

        @if(empty($programacao))
            <div class="text-center my-5 py-5">
                <h3 class="text-muted">A programação será divulgada em breve.</h3>
                <p class="text-muted">Por favor, volte mais tarde para conferir as novidades!</p>
            </div>
        @else
            <!-- Navegação por dias -->
            <div class="day-navigation text-center">
                @foreach($programacao as $dayKey => $day)
                    <button class="day-nav-btn @if($loop->first) active @endif"
                            onclick="showDay('{{ $dayKey }}')">
                        {{ $day['date'] }} - {{ $day['name'] }}
                    </button>
                @endforeach
            </div>

            @foreach($programacao as $dayKey => $day)
            <!-- Dia: {{ ucfirst($day['name']) }} - {{ $day['date'] }} -->
            <div id="{{ $dayKey }}" class="content-section @if($loop->first) active @endif">
                <!-- Navegação por espaços -->
                <div class="space-navigation text-center">
                    @foreach($day['spaces'] as $spaceKey => $space)
                        <button class="space-nav-btn @if($loop->first) active @endif"
                                onclick="showSpace('{{ $dayKey }}', '{{ $spaceKey }}')">
                            {{ $space['name'] }}
                        </button>
                    @endforeach
                </div>

                @foreach($day['spaces'] as $spaceKey => $space)
                <!-- Espaço: {{ $space['name'] }} -->
                <div id="{{ $dayKey }}-{{ $spaceKey }}" class="space-content @if($loop->first) active @endif">
                    <div class="row">
                        @forelse($space['talks'] as $talk)
                            @if($talk['type'] === 'special-event')
                                <div class="col-md-12 mb-3">
                            @else
                                <div class="col-md-6 mb-3">
                            @endif
                                <div class="talk-card @if($talk['type'] === 'workshop') workshop-card @endif
                                                     @if($talk['type'] === 'special-event') special-event @endif
                                                     @if($talk['type'] === 'coming-soon') coming-soon @endif">
                                    <div class="talk-time">{{ $talk['time'] }}</div>

                                    {{-- VALIDAÇÃO ADICIONADA AQUI --}}
                                    @if(isset($talk['category']) && $talk['category'] !== 'sem categoria')
                                        <div class="talk-category {{ $talk['category'] }}">{{ $talk['categoryName'] }}</div>
                                    @endif

                                    <div class="talk-title">{{ $talk['title'] }}</div>

                                    @if(isset($talk['speaker']) && $talk['speaker'] !== '')
                                        <div class="talk-speaker">{{ $talk['speaker'] }}</div>
                                    @endif

                                    @if(isset($talk['company']) && $talk['company'] !== '')
                                        <div class="talk-company">{{ $talk['company'] }}</div>
                                    @endif

                                    @if(isset($talk['type']) && in_array($talk['type'], ['painel', 'workshop']))
                                        <div class="talk-type">{{ strtoupper($talk['type']) }}</div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <p class="text-center text-muted my-4">Nenhuma palestra programada para este espaço ainda.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
                @endforeach
            </div>
            @endforeach
        @endif

        <!-- Disclaimer -->
        <div class="disclaimer">
            <strong>*Programação de palestras sujeita à alteração sem aviso prévio.</strong>
        </div>

    </div>
</section>

<script>
function showDay(dayId) {
    document.querySelectorAll('.content-section').forEach(section => {
        section.classList.remove('active');
    });

    document.querySelectorAll('.day-nav-btn').forEach(btn => {
        btn.classList.remove('active');
    });

    document.getElementById(dayId).classList.add('active');
    event.target.classList.add('active');

    // Show first space by default for the selected day
    const firstSpaceBtn = document.querySelector(`#${dayId} .space-nav-btn`);
    if (firstSpaceBtn) {
        firstSpaceBtn.click();
    }
}

function showSpace(dayId, spaceId) {
    document.querySelectorAll(`#${dayId} .space-content`).forEach(section => {
        section.classList.remove('active');
    });

    document.querySelectorAll(`#${dayId} .space-nav-btn`).forEach(btn => {
        btn.classList.remove('active');
    });

    const targetSpace = document.getElementById(`${dayId}-${spaceId}`);
    if (targetSpace) {
        targetSpace.classList.add('active');
    }

    event.target.classList.add('active');
}

document.addEventListener('DOMContentLoaded', function() {
    // Ativa o primeiro dia e o primeiro espaço ao carregar a página
    const firstDayBtn = document.querySelector('.day-nav-btn');
    if (firstDayBtn) {
        firstDayBtn.click();
    }
});
</script>

@endsection