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

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col"><h1 class="h3 mb-0"><i class="bi bi-images me-2"></i> Marcas / Associados</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>
                <option value="dynamic-partners" {{ ($section->source_type ?? 'static') === 'dynamic-partners' ? 'selected' : '' }}>Dinâmico (Parceiros)</option>
            </select>
        </div>
    </div>
    <div class="dynamic-config" style="{{ ($section->source_type ?? 'static') !== 'dynamic-partners' ? 'display:none' : '' }}">
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Limite de parceiros</label>
                <input type="number" name="limit" class="form-control" value="{{ $section->source_config['limit'] ?? 12 }}" min="1" max="20">
            </div>
        </div>
    </div>
    <div class="card"><div class="card-body">
        <div class="mb-3"><label class="form-label">Título da seção</label><input type="text" name="title" class="form-control" value="{{ $params['title'] ?? '' }}" maxlength="500"></div>
        <div class="d-flex justify-content-between align-items-center mb-3"><label class="form-label fw-bold mb-0">Logos de Marcas</label><button type="button" class="btn btn-sm btn-outline-primary add-brand"><i class="bi bi-plus-circle"></i> Adicionar</button></div>
        <div id="brands-container">
            @foreach(($params['items'] ?? []) as $i => $b)
            <div class="card mb-2 brand-card"><div class="card-body py-2">
                <div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Marca {{ $loop->iteration }}</h6><button type="button" class="btn btn-sm btn-outline-danger remove-brand" aria-label="Remover marca"><i class="bi bi-trash"></i></button></div>
                <div class="row g-2"><div class="col-md-5">
                    <input type="text" name="items[{{ $i }}][name]" class="form-control form-control-sm" value="{{ $b['name'] ?? '' }}" placeholder="Nome">
                </div><div class="col-md-7">
                    @include('v2-service-media::components.media-input', [
                        'name'       => "items[".$i."][image_id]",
                        'label'      => 'Logo da Marca',
                        'currentId'  => $b['image_id'] ?? '',
                        'currentUrl' => !empty($b['image']) ? v2_storage_url($b['image']) : '',
                        'currentAlt' => $b['name'] ?? '',
                        '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 s=document.querySelector('.source-type-select');
    if(s){s.addEventListener('change',function(){var dc=document.querySelector('.dynamic-config');if(dc){dc.style.display=this.value==='dynamic-partners'?'':'none';}});}
    var c=document.getElementById('brands-container'),i={{ count($params['items'] ?? []) }};
    document.querySelector('.add-brand').addEventListener('click',function(){
        var d=document.createElement('div');d.className='card mb-2 brand-card';
        d.innerHTML='<div class="card-body py-2"><div class="d-flex justify-content-between mb-2"><h6 class="mb-0">Marca '+(i+1)+'</h6><button type="button" class="btn btn-sm btn-outline-danger remove-brand" aria-label="Remover marca"><i class="bi bi-trash"></i></button></div><div class="row g-2"><div class="col-md-6"><input type="text" name="items['+i+'][name]" class="form-control form-control-sm" placeholder="Nome"></div><div class="col-md-6"><input type="text" name="items['+i+'][image]" class="form-control form-control-sm" placeholder="URL da Imagem"></div></div></div>';
        c.appendChild(d);i++;
        d.querySelector('.remove-brand').addEventListener('click',function(){d.remove()});
    });
    document.querySelectorAll('.remove-brand').forEach(function(b){b.addEventListener('click',function(){this.closest('.brand-card').remove()})});
})();
</script>
@endpush