@php
    /** @var \V2\Modules\Publicacoes\Agenda\Models\Evento|null $evento */
    $evento = isset($evento) ? $evento : null;
    $isEditing = !is_null($evento) && $evento->exists;

    $topicsList = isset($topicsList) ? $topicsList : '';
    $scheduleItems = $isEditing && !empty($evento->schedule) ? $evento->schedule : [];
@endphp

<div class="card">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-8">
                <label for="title" class="form-label fw-semibold">
                    Título do Evento <span class="text-danger">*</span>
                </label>
                <input type="text" id="title" name="title"
                       class="form-control form-control-lg" required
                       value="{{ old('title', $evento->title ?? '') }}"
                       placeholder="Digite o título do evento..."
                       maxlength="255">
            </div>

            <div class="col-md-4">
                @include('v2-service-media::components.media-input', [
                    'name' => 'image_id',
                    'label' => 'Imagem do Evento',
                    'accept' => 'image/*',
                    'required' => false,
                    'ownerModule' => 'eventos',
                    'currentId' => $evento->image_id ?? '',
                    'currentUrl' => $isEditing ? $evento->getImageUrl() : '',
                    'currentAlt' => $evento->title ?? '',
                ])
            </div>

            <div class="col-md-6">
                <label for="event_date_start" class="form-label fw-semibold">
                    Data de Início <span class="text-danger">*</span>
                </label>
                <input type="text" id="event_date_start" name="event_date_start"
                       class="form-control" required
                       data-picker="datetime"
                       value="{{ old('event_date_start', $isEditing && $evento->event_date_start ? $evento->event_date_start->format('Y-m-d H:i') : '') }}">
            </div>

            <div class="col-md-6">
                <label for="event_date_end" class="form-label fw-semibold">Data de Término</label>
                <input type="text" id="event_date_end" name="event_date_end"
                       class="form-control"
                       data-picker="datetime"
                       value="{{ old('event_date_end', $isEditing && $evento->event_date_end ? $evento->event_date_end->format('Y-m-d H:i') : '') }}">
            </div>

            <div class="col-md-6">
                <label for="location" class="form-label fw-semibold">Local</label>
                <input type="text" id="location" name="location"
                       class="form-control"
                       value="{{ old('location', $evento->location ?? '') }}"
                       placeholder="Local do evento..."
                       maxlength="255">
            </div>

            <div class="col-md-6">
                <label for="organizer" class="form-label fw-semibold">Organizador</label>
                <input type="text" id="organizer" name="organizer"
                       class="form-control"
                       value="{{ old('organizer', $evento->organizer ?? '') }}"
                       placeholder="Nome do organizador..."
                       maxlength="255">
            </div>

            <div class="col-md-6">
                <label for="target_audience" class="form-label fw-semibold">Público-Alvo</label>
                <input type="text" id="target_audience" name="target_audience"
                       class="form-control"
                       value="{{ old('target_audience', $evento->target_audience ?? '') }}"
                       placeholder="Ex: Profissionais de TI, Gestores..."
                       maxlength="255">
            </div>

            <div class="col-12">
                <label for="description" class="form-label fw-semibold">Descrição</label>
                <textarea id="description" name="description"
                          class="form-control" rows="6"
                          placeholder="Descrição do evento...">{{ old('description', $evento->description ?? '') }}</textarea>
            </div>

            <div class="col-md-6">
                <label for="topics_list" class="form-label fw-semibold">Tópicos (um por linha)</label>
                <textarea id="topics_list" name="topics_list"
                          class="form-control" rows="5"
                          placeholder="Tópico 1&#10;Tópico 2&#10;Tópico 3">{{ old('topics_list', $topicsList) }}</textarea>
                <div class="form-text">Cada linha será exibida como um item na lista de tópicos.</div>
            </div>

            <div class="col-md-6">
                <label class="form-label fw-semibold">Programação</label>
                <div id="schedule-container">
                    @if(count($scheduleItems) > 0)
                        @foreach($scheduleItems as $index => $item)
                            <div class="schedule-row row g-2 mb-2 align-items-center">
                                <div class="col-md-3">
                                    <input type="text" name="schedule[{{ $index }}][time]"
                                           class="form-control form-control-sm"
                                           placeholder="Horário"
                                           value="{{ $item['time'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" name="schedule[{{ $index }}][activity]"
                                           class="form-control form-control-sm"
                                           placeholder="Atividade"
                                           value="{{ $item['activity'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" name="schedule[{{ $index }}][speaker]"
                                           class="form-control form-control-sm"
                                           placeholder="Palestrante"
                                           value="{{ $item['speaker'] ?? '' }}">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-outline-danger btn-sm remove-schedule-row" title="Remover">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="schedule-row row g-2 mb-2 align-items-center">
                            <div class="col-md-3">
                                <input type="text" name="schedule[0][time]"
                                       class="form-control form-control-sm"
                                       placeholder="Horário">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="schedule[0][activity]"
                                       class="form-control form-control-sm"
                                       placeholder="Atividade">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="schedule[0][speaker]"
                                       class="form-control form-control-sm"
                                       placeholder="Palestrante">
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-outline-danger btn-sm remove-schedule-row" title="Remover">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    @endif
                </div>
                <button type="button" id="add-schedule-row" class="btn btn-outline-primary btn-sm mt-1">
                    <i class="bi bi-plus-circle me-1"></i> Adicionar item
                </button>
                <div class="form-text">Adicione horários, atividades e palestrantes da programação.</div>
            </div>

            <div class="col-md-4">
                <div class="form-check form-switch mt-2">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" id="is_active" name="is_active"
                           class="form-check-input" value="1"
                           {{ old('is_active', $isEditing ? $evento->is_active : true) ? 'checked' : '' }}>
                    <label class="form-check-label fw-semibold" for="is_active">Ativo</label>
                </div>
            </div>

            <div class="col-md-4">
                <label for="published_at" class="form-label fw-semibold">Data de Publicação</label>
                <input type="text" id="published_at" name="published_at"
                       class="form-control"
                       data-picker="date"
                       value="{{ old('published_at', $isEditing && $evento->published_at ? $evento->published_at->format('Y-m-d') : '') }}">
                <div class="form-text">Deixe em branco para salvar como rascunho.</div>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between">
        <a href="{{ route('v2.agenda.cms.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1" aria-hidden="true"></i> Voltar
        </a>
        <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg me-1" aria-hidden="true"></i>
            {{ $isEditing ? 'Atualizar Evento' : 'Criar Evento' }}
        </button>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    let scheduleIndex = {{ count($scheduleItems) }};

    $('#add-schedule-row').on('click', function() {
        const container = $('#schedule-container');
        const row = `
            <div class="schedule-row row g-2 mb-2 align-items-center">
                <div class="col-md-3">
                    <input type="text" name="schedule[${scheduleIndex}][time]"
                           class="form-control form-control-sm" placeholder="Horário">
                </div>
                <div class="col-md-4">
                    <input type="text" name="schedule[${scheduleIndex}][activity]"
                           class="form-control form-control-sm" placeholder="Atividade">
                </div>
                <div class="col-md-4">
                    <input type="text" name="schedule[${scheduleIndex}][speaker]"
                           class="form-control form-control-sm" placeholder="Palestrante">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger btn-sm remove-schedule-row" title="Remover">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        `;
        container.append(row);
        scheduleIndex++;
    });

    $(document).on('click', '.remove-schedule-row', function() {
        const row = $(this).closest('.schedule-row');
        if ($('#schedule-container .schedule-row').length > 1) {
            row.remove();
        }
    });
});
</script>
@endpush