@php
    $params = $section->parameters ?: [];
    $items = $params['items'] ?? [];
    $sourceType = $section->source_type ?? 'static';
    $sourceConfig = $section->source_config ?: [];
@endphp
@extends('v2-cms::layouts.app', ['title' => 'Homepage — Eventos'])

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col"><h1 class="h3 mb-0"><i class="bi bi-calendar3 me-2"></i> Eventos / Agenda</h1></div>
        <div class="col-auto"><a href="{{ route('v2.homepage.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Voltar</a></div>
    </div>
    <form action="{{ route('v2.homepage.update', $section->id) }}" method="POST">
    {{ method_field('PUT') }}
    {{ csrf_field() }}
    <div class="card"><div class="card-body">
        <div class="row mb-3">
            <div class="col"><label class="form-label fw-bold">Tipo de Fonte</label>
                <select name="source_type" class="form-select source-type-select">
                    <option value="static" {{ $sourceType === 'static' ? 'selected' : '' }}>Estático (dados manuais)</option>
                    <option value="dynamic-events" {{ $sourceType === 'dynamic-events' ? 'selected' : '' }}>Dinâmico (Agenda/Eventos)</option>
                </select>
            </div>
        </div>
        <div class="row mb-3 dynamic-config" style="{{ $sourceType !== 'dynamic-events' ? 'display:none' : '' }}">
            <div class="col-md-4"><label class="form-label">Limite de eventos</label>
                <input type="number" name="limit" class="form-control" value="{{ $sourceConfig['limit'] ?? 4 }}" min="1" max="20">
            </div>
        </div>
        <div class="static-fields" style="{{ $sourceType !== 'static' ? 'display:none' : '' }}">
            <div class="row g-3 mb-3">
                <div class="col-md-6"><label class="form-label">Subtítulo</label><input type="text" name="subtitle" class="form-control" value="{{ $params['subtitle'] ?? '' }}" maxlength="255"></div>
                <div class="col-md-6"><label class="form-label">Título</label><input type="text" name="title" class="form-control" value="{{ $params['title'] ?? '' }}" maxlength="255"></div>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-3"><label class="form-label fw-bold mb-0">Eventos</label><button type="button" class="btn btn-sm btn-outline-primary add-event"><i class="bi bi-plus-circle"></i> Adicionar</button></div>
            <div id="events-container">
                @foreach($items as $i => $ev)
                <div class="card mb-2 event-card"><div class="card-body py-2">
                    <div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Evento {{ $loop->iteration }}</h6><button type="button" class="btn btn-sm btn-outline-danger remove-event" aria-label="Remover evento"><i class="bi bi-trash"></i></button></div>
                    <div class="row g-2">
                        <div class="col-md-4"><input type="text" name="items[{{$i}}][title]" class="form-control form-control-sm" value="{{ $ev['title'] ?? '' }}" placeholder="Título" required></div>
                        <div class="col-md-4"><textarea name="items[{{$i}}][details]" class="form-control form-control-sm" rows="1" placeholder="Detalhes (HTML permitido)">{{ $ev['details'] ?? '' }}</textarea></div>
                        <div class="col-md-2"><input type="text" name="items[{{$i}}][url]" class="form-control form-control-sm" value="{{ $ev['url'] ?? '' }}" placeholder="URL"></div>
                        <div class="col-md-2">
                            @include('v2-service-media::components.media-input', [
                                'name'       => "items[".$i."][image_id]",
                                'label'      => 'Imagem do Evento',
                                'currentId'  => $ev['image_id'] ?? '',
                                'currentUrl' => !empty($ev['image']) ? v2_storage_url($ev['image']) : '',
                                'currentAlt' => $ev['title'] ?? '',
                                'ownerModule' => 'homepage',
                            ])
                        </div>
                    </div>
                </div></div>
                @endforeach
            </div>
        </div>
    </div></div>
    <div class="d-flex justify-content-end gap-2 mt-3">
        <a href="{{ route('v2.homepage.index') }}" class="btn btn-outline-secondary">Cancelar</a>
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle"></i> Salvar</button>
    </div>
    </form>
</div>
@endsection
@push('scripts')
<script>
(function(){var s=document.querySelector('.source-type-select');s.addEventListener('change',function(){document.querySelector('.dynamic-config').style.display=this.value==='dynamic-events'?'':'none';document.querySelector('.static-fields').style.display=this.value==='static'?'':'none';});var c=document.getElementById('events-container'),i={{ count($items) }};document.querySelector('.add-event')?.addEventListener('click',function(){var d=document.createElement('div');d.className='card mb-2 event-card';d.innerHTML='<div class="card-body py-2"><div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Evento '+(i+1)+'</h6><button type="button" class="btn btn-sm btn-outline-danger remove-event" aria-label="Remover evento"><i class="bi bi-trash"></i></button></div><div class="row g-2"><div class="col-md-4"><input type="text" name="items['+i+'][title]" class="form-control form-control-sm" placeholder="Título" required></div><div class="col-md-4"><textarea name="items['+i+'][details]" class="form-control form-control-sm" rows="1" placeholder="Detalhes"></textarea></div><div class="col-md-2"><input type="text" name="items['+i+'][url]" class="form-control form-control-sm" placeholder="URL"></div><div class="col-md-2"><input type="text" name="items['+i+'][image]" class="form-control form-control-sm" placeholder="Imagem"></div></div></div>';c.appendChild(d);i++;d.querySelector('.remove-event').addEventListener('click',function(){d.remove()});});document.querySelectorAll('.remove-event').forEach(function(b){b.addEventListener('click',function(){this.closest('.event-card').remove()})});})();
</script>
@endpush