@php
    $isEditing = isset($instituicao) && $instituicao->exists;
    $inst = $instituicao ?? null;
    $benefits = old('benefits', $isEditing ? $inst->benefits : []);
    $selectedUnidadeRegionalId = old('unidade_regional_id', $isEditing && $inst->unidadesRegionais->isNotEmpty() ? $inst->unidadesRegionais->first()->id : '');
    $storageSvc = app(\V2\Services\Storage\StorageService::class);
    $defaultSocial = [
        ['network' => 'linkedin', 'icon' => 'bi-linkedin', 'url' => '', 'order' => 1, 'active' => true],
        ['network' => 'facebook', 'icon' => 'bi-facebook', 'url' => '', 'order' => 2, 'active' => true],
        ['network' => 'instagram', 'icon' => 'bi-instagram', 'url' => '', 'order' => 3, 'active' => true],
    ];
    $socialMediaJson = old('social_media_json', $isEditing ? json_encode($inst->social_media) : json_encode($defaultSocial));
    /** @var array $selectedTags */
    $selectedTags = old('tags', $isEditing && $inst->relationLoaded('tags') ? $inst->tags->pluck('name')->toArray() : []);
@endphp

@push('css')
<style>
.social-row + .social-row {
    margin-top: 0.5rem;
}
</style>
@endpush

{{-- ============================================= --}}
{{-- SEÇÃO 1: METADADOS                           --}}
{{-- ============================================= --}}
<div class="card mb-4">
    <div class="card-header bg-white py-3">
        <h5 class="card-title mb-0">
            <i class="bi bi-info-circle me-1 text-primary"></i> Metadados
        </h5>
    </div>
    <div class="card-body">
        {{-- Linha 1: Nome + Categoria (área) --}}
        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <label for="name" class="form-label fw-semibold">
                    Nome <span class="text-danger">*</span>
                </label>
                <input type="text" id="name" name="name"
                       class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                       value="{{ old('name', $inst->name ?? '') }}" required maxlength="255"
                       placeholder="Nome da instituição">
                @if($errors->has('name'))
                    <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                @endif
            </div>
            <div class="col-md-6">
                <label class="form-label fw-semibold">
                    Tags <span class="text-danger">*</span>
                </label>
                <div id="tag-picker-container">
                    <div id="tag-selected" class="d-flex flex-wrap gap-1 mb-2">
                        @if(!empty($selectedTags))
                            @foreach($selectedTags as $tagName)
                                <span class="badge bg-info tag-badge d-inline-flex align-items-center gap-1">
                                    {{ $tagName }}
                                    <button type="button" class="btn-close btn-close-white tag-remove" aria-label="Remover tag" style="font-size:0.6em;"></button>
                                </span>
                            @endforeach
                        @endif
                    </div>
                    <div class="input-group input-group-sm">
                        <input type="text" id="tag-input" class="form-control"
                               placeholder="Digite o nome da tag e pressione Enter"
                               aria-label="Adicionar tag" autocomplete="off">
                        <button type="button" id="btn-add-tag" class="btn btn-outline-primary"
                                title="Adicionar tag" aria-label="Adicionar tag">
                            <i class="bi bi-plus"></i>
                        </button>
                    </div>
                    @if(isset($allTags) && $allTags->isNotEmpty())
                        <div class="mt-2 d-flex flex-wrap gap-1" id="tag-available">
                            @foreach($allTags as $tag)
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary tag-available"
                                        data-name="{{ $tag->name }}"
                                        title="Clique para adicionar '{{ $tag->name }}'">
                                    {{ $tag->name }}
                                </button>
                            @endforeach
                        </div>
                        <small class="text-muted">Clique em uma tag disponível para adicioná-la.</small>
                    @endif
                </div>
                <div id="tag-input-error" class="text-danger small mt-1" style="display:none;"></div>
                {{-- Hidden inputs para envio --}}
                <div id="tag-hidden-inputs"></div>
                @if($errors->has('tags'))
                    <div class="text-danger small">{{ $errors->first('tags') }}</div>
                @endif
            </div>
        </div>

        {{-- Unidade Regional (sempre visível e obrigatória) --}}
        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <label for="unidade_regional_id" class="form-label fw-semibold">
                    <i class="bi bi-geo-alt me-1"></i> Unidade Regional <span class="text-danger">*</span>
                </label>
                <select id="unidade_regional_id" name="unidade_regional_id"
                        class="form-select{{ $errors->has('unidade_regional_id') ? ' is-invalid' : '' }}" required>
                    <option value="">Selecione a unidade regional...</option>
                    @if(!empty($unidadesRegionais))
                        @foreach($unidadesRegionais as $ur)
                            <option value="{{ $ur->id }}" {{ $selectedUnidadeRegionalId === $ur->id ? 'selected' : '' }}>
                                {{ $ur->name }} ({{ $ur->acronym }})
                            </option>
                        @endforeach
                    @endif
                </select>
                @if($errors->has('unidade_regional_id'))
                    <div class="invalid-feedback">{{ $errors->first('unidade_regional_id') }}</div>
                @endif
                <small class="text-muted">Todos os associados devem estar vinculados a uma unidade regional.</small>
            </div>
        </div>

        {{-- Linha 2: Site + Redes Sociais --}}
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <label for="url" class="form-label fw-semibold">
                    <i class="bi bi-globe2 me-1"></i> Site
                </label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-globe2"></i></span>
                    <input type="url" id="url" name="url" class="form-control"
                           value="{{ old('url', $inst->url ?? '') }}"
                           placeholder="https://www.exemplo.com.br">
                </div>
            </div>
            <div class="col-md-8">
                <label class="form-label fw-semibold">
                    <i class="bi bi-share me-1"></i> Redes Sociais
                </label>
                <div id="social-builder-container">
                    <ul id="social-list" class="list-unstyled mb-0">
                    </ul>
                    <button type="button" id="btn-add-social" class="btn btn-sm btn-outline-primary mt-1 d-inline-flex align-items-center gap-1">
                        <i class="bi bi-plus-circle me-1"></i> Adicionar Rede Social
                    </button>
                    <textarea name="social_media_json" id="social_media_json" style="display:none;" aria-label="JSON das redes sociais">{{ $socialMediaJson }}</textarea>
                </div>
            </div>
        </div>

        {{-- Linha 3: Badge de Desconto + Benefícios key-value --}}
        <div class="row g-3">
            <div class="col-md-4">
                <label for="discount_badge" class="form-label fw-semibold">
                    <i class="bi bi-tag me-1"></i> Badge de Desconto
                </label>
                <input type="text" id="discount_badge" name="discount_badge"
                       class="form-control{{ $errors->has('discount_badge') ? ' is-invalid' : '' }}"
                       value="{{ old('discount_badge', $inst->discount_badge ?? '') }}"
                       placeholder="Ex: 15% OFF" maxlength="255">
                @if($errors->has('discount_badge'))
                    <div class="invalid-feedback">{{ $errors->first('discount_badge') }}</div>
                @endif
            </div>

            <div class="col-md-8">
                <label class="form-label fw-semibold">
                    <i class="bi bi-gift me-1"></i> Lista de Benefícios
                </label>
                <div id="benefits-container" data-benefit-count="{{ count($benefits) }}">
                    @if(count($benefits) > 0)
                        @foreach($benefits as $idx => $benefit)
                            <div class="benefit-row row g-2 mb-2">
                                <div class="col-5">
                                    <input type="text" name="benefits[{{ $idx }}][name]"
                                           class="form-control form-control-sm"
                                           value="{{ $benefit['name'] ?? '' }}"
                                           placeholder="Nome do benefício">
                                </div>
                                <div class="col-6">
                                    <input type="url" name="benefits[{{ $idx }}][link]"
                                           class="form-control form-control-sm"
                                           value="{{ $benefit['link'] ?? '' }}"
                                           placeholder="https://... (opcional)">
                                </div>
                                <div class="col-1 d-flex align-items-center">
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-benefit"
                                            title="Remover benefício">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <button type="button" class="btn btn-sm btn-outline-primary mt-1" id="add-benefit">
                    <i class="bi bi-plus-circle me-1"></i> Adicionar Benefício
                </button>
                <small class="text-muted d-block mt-1">Nome + link opcional para cada benefício.</small>
            </div>
        </div>
    </div>
</div>

{{-- ============================================= --}}
{{-- SEÇÃO 2: CONTEÚDO                            --}}
{{-- ============================================= --}}
<div class="card mb-4">
    <div class="card-header bg-white py-3">
        <h5 class="card-title mb-0">
            <i class="bi bi-card-text me-1 text-primary"></i> Conteúdo
        </h5>
    </div>
    <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <h6 class="fw-semibold mb-2"><i class="bi bi-image me-1"></i> Logo</h6>
                    @php $logoId = ($inst->metadata ?? [])['logo_id'] ?? ''; @endphp
                    <input type="hidden" name="logo_id" id="logo_id_sync" value="{{ $logoId }}">
                    @include('v2-service-media::components.media-input', [
                        'name' => 'gallery_logo_id',
                        'label' => 'Logo',
                        'accept' => 'image/*',
                        'required' => false,
                        'ownerModule' => 'associados',
                        'currentId' => $logoId,
                        'currentUrl' => $isEditing && $inst->logo ? v2_storage_url($inst->logo) : '',
                        'currentAlt' => $inst->name ?? '',
                    ])
                </div>
                <div class="col-md-6">
                    @php $coverId = ($inst->metadata ?? [])['cover_image_id'] ?? ''; @endphp
                    <h6 class="fw-semibold mb-2"><i class="bi bi-card-image me-1"></i> Imagem de Fundo (Hero)</h6>
                    <input type="hidden" name="cover_image_id" id="cover_image_id_sync" value="{{ $coverId }}">
                    @include('v2-service-media::components.media-input', [
                        'name' => 'gallery_cover_image_id',
                        'label' => 'Imagem de Fundo',
                        'accept' => 'image/*',
                        'required' => false,
                        'ownerModule' => 'associados',
                        'currentId' => $coverId,
                        'currentUrl' => $isEditing && $inst->cover_image ? v2_storage_url($inst->cover_image) : '',
                        'currentAlt' => $inst->name ?? '',
                        'help' => 'Recomendado: 1920×400px, formato landscape. Usada como fundo do cabeçalho da página.',
                    ])
                </div>
            </div>
        
{{-- Atalho para inputs hidden de is_active e sort_order --}}
<input type="hidden" name="is_active" value="{{ old('is_active', $inst->is_active ?? 1) }}">
<input type="hidden" name="sort_order" value="{{ old('sort_order', $inst->sort_order ?? 0) }}">

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // =============================================
    // Tag Picker — Multi-tag
    // =============================================
    var tagInput = document.getElementById('tag-input');
    var btnAddTag = document.getElementById('btn-add-tag');
    var tagSelected = document.getElementById('tag-selected');
    var tagHiddenInputs = document.getElementById('tag-hidden-inputs');
    var tagInputError = document.getElementById('tag-input-error');
    var tagNames = @json($selectedTags);

    function renderTags() {
        tagSelected.innerHTML = '';
        tagNames.forEach(function(name, idx) {
            var span = document.createElement('span');
            span.className = 'badge bg-info tag-badge d-inline-flex align-items-center gap-1';
            span.innerHTML = name + ' <button type="button" class="btn-close btn-close-white tag-remove" aria-label="Remover tag" style="font-size:0.6em;" data-idx="' + idx + '"></button>';
            tagSelected.appendChild(span);
        });

        // Sync hidden inputs
        tagHiddenInputs.innerHTML = '';
        tagNames.forEach(function(name) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'tags[]';
            input.value = name;
            tagHiddenInputs.appendChild(input);
        });

        // Bind remove buttons
        tagSelected.querySelectorAll('.tag-remove').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(this.getAttribute('data-idx'));
                tagNames.splice(idx, 1);
                renderTags();
            });
        });

        // Update available buttons state
        document.querySelectorAll('.tag-available').forEach(function(b) {
            if (tagNames.indexOf(b.getAttribute('data-name')) !== -1) {
                b.classList.remove('btn-outline-secondary');
                b.classList.add('btn-outline-success');
                b.classList.add('active');
            } else {
                b.classList.remove('btn-outline-success');
                b.classList.add('btn-outline-secondary');
                b.classList.remove('active');
            }
        });
    }

    function addTag(name) {
        name = name.trim();
        if (!name) return;
        if (tagNames.indexOf(name) !== -1) {
            tagInputError.textContent = 'Tag já adicionada.';
            tagInputError.style.display = 'block';
            setTimeout(function() { tagInputError.style.display = 'none'; }, 2000);
            return;
        }
        tagNames.push(name);
        tagInput.value = '';
        renderTags();
    }

    if (tagInput) {
        tagInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTag(tagInput.value);
            }
        });
    }

    if (btnAddTag) {
        btnAddTag.addEventListener('click', function() {
            addTag(tagInput.value);
        });
    }

    // Available tag buttons
    document.querySelectorAll('.tag-available').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var name = this.getAttribute('data-name');
            if (tagNames.indexOf(name) === -1) {
                addTag(name);
            } else {
                // Toggle off: remove
                tagNames = tagNames.filter(function(n) { return n !== name; });
                renderTags();
            }
        });
    });

    renderTags();

    // =============================================
    // Sync gallery media-input changes to real form fields
    // =============================================
    var mediaSync = {
        'wrapper-gallery_logo_id': 'logo_id_sync',
        'wrapper-gallery_cover_image_id': 'cover_image_id_sync',
    };

    Object.keys(mediaSync).forEach(function(wrapperId) {
        var $wrapper = $('#' + wrapperId);
        if ($wrapper.length) {
            $wrapper.on('media-selected.lotep', function(e, data) {
                if (data && data.id) {
                    document.getElementById(mediaSync[wrapperId]).value = data.id;
                }
            });
        }
    });

    // =============================================
    // Benefits key-value
    // =============================================
    var benefitsContainer = document.getElementById('benefits-container');
    var addBenefitBtn = document.getElementById('add-benefit');
    var benefitIdx = {{ count($benefits) }};

    if (addBenefitBtn) {
        addBenefitBtn.addEventListener('click', function() {
            var row = document.createElement('div');
            row.className = 'benefit-row row g-2 mb-2';
            row.innerHTML = [
                '<div class="col-5">',
                '<input type="text" name="benefits[' + benefitIdx + '][name]" class="form-control form-control-sm" placeholder="Nome do benefício">',
                '</div>',
                '<div class="col-6">',
                '<input type="url" name="benefits[' + benefitIdx + '][link]" class="form-control form-control-sm" placeholder="https://... (opcional)">',
                '</div>',
                '<div class="col-1 d-flex align-items-center">',
                '<button type="button" class="btn btn-sm btn-outline-danger remove-benefit" title="Remover benefício"><i class="bi bi-x"></i></button>',
                '</div>',
            ].join('');
            benefitsContainer.appendChild(row);
            benefitIdx++;
        });

        benefitsContainer.addEventListener('click', function(e) {
            if (e.target.closest('.remove-benefit')) {
                e.target.closest('.benefit-row').remove();
            }
        });
    }

    // =============================================
    // Social Media Builder
    // =============================================
    var socialContainer = document.getElementById('social-list');
    var socialInputJson = document.getElementById('social_media_json');
    var btnAddSocial = document.getElementById('btn-add-social');

    if (!socialContainer || !socialInputJson || !btnAddSocial) return;

    var socialData = [];
    try {
        socialData = JSON.parse(socialInputJson.value) || [];
    } catch (e) {
        socialData = [];
    }

    var availableNetworks = [
        { id: 'facebook', name: 'Facebook', icon: 'bi-facebook' },
        { id: 'instagram', name: 'Instagram', icon: 'bi-instagram' },
        { id: 'twitter', name: 'Twitter / X', icon: 'bi-twitter-x' },
        { id: 'youtube', name: 'YouTube', icon: 'bi-youtube' },
        { id: 'linkedin', name: 'LinkedIn', icon: 'bi-linkedin' },
        { id: 'whatsapp', name: 'WhatsApp', icon: 'bi-whatsapp' },
        { id: 'telegram', name: 'Telegram', icon: 'bi-telegram' },
        { id: 'tiktok', name: 'TikTok', icon: 'bi-tiktok' },
        { id: 'flickr', name: 'Flickr', icon: 'bi-image' }
    ];

    function renderSocial() {
        socialContainer.innerHTML = '';

        socialData.forEach(function(item, index) {
            var li = document.createElement('li');
            li.className = 'social-row row g-2';

            var selectOptions = '<option value="">Selecione a Rede...</option>';
            availableNetworks.forEach(function(net) {
                var selected = (item.network === net.id) ? 'selected' : '';
                selectOptions += '<option value="' + net.id + '" data-icon="' + net.icon + '" ' + selected + '>' + net.name + '</option>';
            });

            li.innerHTML = [
                '<div class="col-4">',
                '<select class="form-select form-select-sm network-select" data-idx="' + index + '" aria-label="Selecione a Rede Social">',
                selectOptions,
                '</select>',
                '</div>',
                '<div class="col-6">',
                '<input type="url" class="form-control form-control-sm url-input" placeholder="https://..." value="' + (item.url || '') + '" data-idx="' + index + '" aria-label="URL da Rede Social" inputmode="url" pattern="https?://.+" title="URL completa, começando com https://">',
                '</div>',
                '<div class="col-2 d-flex align-items-center gap-1">',
                '<button type="button" class="btn btn-sm btn-outline-danger btn-remove-social" data-idx="' + index + '" title="Remover" aria-label="Remover"><i class="bi bi-x"></i></button>',
                '</div>'
            ].join('');

            socialContainer.appendChild(li);
        });

        bindSocialEvents();
    }

    function bindSocialEvents() {
        socialContainer.querySelectorAll('.btn-remove-social').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                var idx = parseInt(e.currentTarget.getAttribute('data-idx'));
                socialData.splice(idx, 1);
                renderSocial();
                syncSocialJson();
            });
        });

        socialContainer.querySelectorAll('.network-select').forEach(function(sel) {
            sel.addEventListener('change', function(e) {
                var idx = parseInt(e.target.getAttribute('data-idx'));
                var opt = e.target.options[e.target.selectedIndex];
                socialData[idx].network = e.target.value;
                socialData[idx].icon = opt.getAttribute('data-icon') || '';
                renderSocial();
                syncSocialJson();
            });
        });

        socialContainer.querySelectorAll('input.url-input').forEach(function(inp) {
            inp.addEventListener('input', function(e) {
                var idx = parseInt(e.target.getAttribute('data-idx'));
                socialData[idx].url = e.target.value;
                syncSocialJson();
            });
        });
    }

    function syncSocialJson() {
        socialData.forEach(function(item, idx) { item.order = idx + 1; });
        socialInputJson.value = JSON.stringify(socialData);
    }

    if (btnAddSocial) {
        btnAddSocial.addEventListener('click', function() {
            socialData.push({ network: '', icon: '', url: '', active: true });
            renderSocial();
            syncSocialJson();
        });
    }

    renderSocial();
});
</script>
@endpush