@php
    $params = $section->parameters ?: [];
    $items = $params['items'] ?? [];
@endphp
@extends('v2-cms::layouts.app', ['title' => 'Homepage — Serviços'])

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col"><h1 class="h3 mb-0"><i class="bi bi-grid-3x3-gap-fill me-2"></i> Serviços</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" class="needs-validation">
        {{ method_field('PUT') }}
        {{ csrf_field() }}
        <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" {{ ($section->source_type ?? 'static') === 'static' ? 'selected' : '' }}>Estático (dados manuais)</option>
        </select>
    </div>
</div>

        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <label class="form-label fw-bold mb-0">Itens de Serviço</label>
                    <button type="button" class="btn btn-sm btn-outline-primary add-item"><i class="bi bi-plus-circle"></i> Adicionar</button>
                </div>
                <div id="items-container">
                    @foreach($items as $index => $item)
                    <div class="card mb-3 item-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <h6 class="mb-0">Item {{ $loop->iteration }}</h6>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-item" aria-label="Remover serviço"><i class="bi bi-trash"></i></button>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Título</label>
                                    <input type="text" name="items[{{ $index }}][title]" class="form-control" value="{{ $item['title'] ?? '' }}" maxlength="255" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Descrição</label>
                                    <textarea name="items[{{ $index }}][description]" class="form-control" rows="2" maxlength="1000">{{ $item['description'] ?? '' }}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">URL</label>
                                    <input type="text" name="items[{{ $index }}][url]" class="form-control" value="{{ $item['url'] ?? '' }}" maxlength="500">
                                </div>
                                <div class="col-12">
                                    @include('v2-service-media::components.media-input', [
                                        'name'       => "items[{$index}][icon_id]",
                                        'label'      => 'Ícone do Serviço',
                                        'currentId'  => $item['icon_id'] ?? '',
                                        'currentUrl' => !empty($item['icon']) ? v2_storage_url($item['icon']) : '',
                                        'currentAlt' => $item['title'] ?? '',
                                        'ownerModule' => 'homepage',
                                    ])
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @if(empty($items))
                <div id="no-items-msg" class="text-center py-4 text-muted"><i class="bi bi-grid-3x3 fs-2 d-block mb-2"></i><p>Nenhum item cadastrado.</p></div>
                @endif
            </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 container = document.getElementById('items-container');
    var noMsg = document.getElementById('no-items-msg');
    var idx = {{ count($items) }};
    document.querySelector('.add-item').addEventListener('click', function() {
        var div = document.createElement('div');
        div.className = 'card mb-3 item-card';
        div.innerHTML = '<div class="card-body"><div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Item ' + (idx + 1) + '</h6><button type="button" class="btn btn-sm btn-outline-danger remove-item" aria-label="Remover serviço"><i class="bi bi-trash"></i></button></div><div class="row g-3"><div class="col-md-4"><label class="form-label">Título</label><input type="text" name="items[' + idx + '][title]" class="form-control" maxlength="255" required></div><div class="col-md-4"><label class="form-label">Descrição</label><textarea name="items[' + idx + '][description]" class="form-control" rows="2" maxlength="1000"></textarea></div><div class="col-md-4"><label class="form-label">URL</label><input type="text" name="items[' + idx + '][url]" class="form-control" maxlength="500"></div><div class="col-12"><label class="form-label">Ícone</label><input type="text" name="items[' + idx + '][icon]" class="form-control" placeholder="Ex: sucesu/icon/02.svg"></div></div></div>';
        container.appendChild(div);
        idx++;
        if (noMsg) noMsg.style.display = 'none';
        div.querySelector('.remove-item').addEventListener('click', function() { div.remove(); });
    });
    document.querySelectorAll('.remove-item').forEach(function(b) { b.addEventListener('click', function() { this.closest('.item-card').remove(); }); });
})();
</script>
@endpush