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

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col"><h1 class="h3 mb-0"><i class="bi bi-file-earmark-image me-2"></i> Sobre</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="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="row g-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 class="col-12"><label class="form-label">Descrição</label><textarea name="description" class="form-control" rows="3" maxlength="2000">{{ $params['description'] ?? '' }}</textarea></div>
            <div class="col-md-4"><label class="form-label">Texto do CTA</label><input type="text" name="cta_text" class="form-control" value="{{ $params['cta_text'] ?? '' }}" maxlength="255"></div>
            <div class="col-md-4"><label class="form-label">URL do CTA</label><input type="text" name="cta_url" class="form-control" value="{{ $params['cta_url'] ?? '' }}" maxlength="500"></div>
            <div class="col-12">
                @include('v2-service-media::components.media-input', [
                    'name'       => 'image_id',
                    'label'      => 'Imagem Principal',
                    'currentId'  => $params['image_id'] ?? '',
                    'currentUrl' => !empty($params['image']) ? v2_storage_url($params['image']) : '',
                    'currentAlt' => $params['title'] ?? '',
                    'ownerModule' => 'homepage',
                ])
            </div>
        </div>
        <hr>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <label class="form-label fw-bold mb-0">Contadores</label>
            <button type="button" class="btn btn-sm btn-outline-primary add-counter"><i class="bi bi-plus-circle"></i> Adicionar</button>
        </div>
        <div id="counters-container">
            @foreach(($params['counters'] ?? []) as $i => $c)
            <div class="card mb-2 counter-card"><div class="card-body py-2">
                <div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Contador {{ $loop->iteration }}</h6><button type="button" class="btn btn-sm btn-outline-danger remove-counter" aria-label="Remover contador"><i class="bi bi-trash"></i></button></div>
                <div class="row g-2">
                    <div class="col-md-3"><input type="text" name="counters[{{ $i }}][value]" class="form-control form-control-sm" value="{{ $c['value'] ?? '' }}" placeholder="Valor"></div>
                    <div class="col-md-2"><input type="text" name="counters[{{ $i }}][suffix]" class="form-control form-control-sm" value="{{ $c['suffix'] ?? '' }}" placeholder="Sufixo"></div>
                    <div class="col-md-4"><input type="text" name="counters[{{ $i }}][label]" class="form-control form-control-sm" value="{{ $c['label'] ?? '' }}" placeholder="Label"></div>
                    <div class="col-md-3">
                        @include('v2-service-media::components.media-input', [
                            'name'       => "counters[".$i."][icon_id]",
                            'label'      => 'Ícone',
                            'currentId'  => $c['icon_id'] ?? '',
                            'currentUrl' => !empty($c['icon']) ? v2_storage_url($c['icon']) : '',
                            'currentAlt' => $c['label'] ?? '',
                            'ownerModule' => 'homepage',
                        ])
                    </div>
                </div>
            </div></div>
            @endforeach
        </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 c=document.getElementById('counters-container'),i={{ count($params['counters'] ?? []) }};document.querySelector('.add-counter').addEventListener('click',function(){var d=document.createElement('div');d.className='card mb-2 counter-card';d.innerHTML='<div class="card-body py-2"><div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Contador '+(i+1)+'</h6><button type="button" class="btn btn-sm btn-outline-danger remove-counter" aria-label="Remover contador"><i class="bi bi-trash"></i></button></div><div class="row g-2"><div class="col-md-3"><input type="text" name="counters['+i+'][value]" class="form-control form-control-sm" placeholder="Valor"></div><div class="col-md-2"><input type="text" name="counters['+i+'][suffix]" class="form-control form-control-sm" placeholder="Sufixo"></div><div class="col-md-4"><input type="text" name="counters['+i+'][label]" class="form-control form-control-sm" placeholder="Label"></div><div class="col-md-3"><input type="text" name="counters['+i+'][icon]" class="form-control form-control-sm" placeholder="Ícone (file_path)"></div></div></div>';c.appendChild(d);i++;d.querySelector('.remove-counter').addEventListener('click',function(){d.remove()});});document.querySelectorAll('.remove-counter').forEach(function(b){b.addEventListener('click',function(){this.closest('.counter-card').remove()})});})();
</script>
@endpush