@php
    $isEditing = isset($parceiro) && $parceiro->exists;
    $allTags = \V2\Core\Models\ConexaoTag::orderBy('name')->get();
    $selectedTags = old('tags', $isEditing && $parceiro->relationLoaded('tags') ? $parceiro->tags->pluck('name')->toArray() : []);

    // Redes sociais existentes convertidas para JSON do builder (SEM site — campo independente)
    $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],
    ];
    $socialInit = [];
    if ($parceiro->linkedin_url ?? '')  $socialInit[] = ['network'=>'linkedin', 'url'=>$parceiro->linkedin_url,  'icon'=>'bi-linkedin', 'order'=>1, 'active'=>true];
    if ($parceiro->facebook_url ?? '')  $socialInit[] = ['network'=>'facebook', 'url'=>$parceiro->facebook_url,  'icon'=>'bi-facebook', 'order'=>2, 'active'=>true];
    if ($parceiro->instagram_url ?? '') $socialInit[] = ['network'=>'instagram','url'=>$parceiro->instagram_url, 'icon'=>'bi-instagram','order'=>3, 'active'=>true];
    $socialInitJson = json_encode(!empty($socialInit) ? $socialInit : $defaultSocial);
@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 + Slug --}}
        <div class="row g-3 mb-3">
            <div class="col-md-8">
                <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' : '' }}" required maxlength="255"
                       value="{{ old('name', $parceiro->name ?? '') }}"
                       placeholder="Nome do parceiro...">
                @if($errors->has('name'))
                    <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                @endif
                <div class="form-text">Nome oficial do parceiro ou empresa.</div>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold text-muted">Slug (URL)</label>
                <div class="form-control bg-light text-muted font-monospace user-select-all d-flex align-items-center"
                     style="height: calc(1.5em + 0.75rem + 2px);">
                    /{{ $parceiro->slug ?? str_slug(old('name', 'nome-do-parceiro')) }}
                </div>
                <div class="form-text">Gerado automaticamente a partir do nome.</div>
            </div>
        </div>

        {{-- Tags --}}
        <div class="mb-3">
            <label class="form-label fw-semibold">
                <i class="bi bi-tags me-1"></i> Tags
            </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($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>
            <div id="tag-hidden-inputs"></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', $parceiro->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">{{ $socialInitJson }}</textarea>
                </div>
            </div>
        </div>

        {{-- Hidden inputs mantidos para compatibilidade com o controller --}}
        <input type="hidden" name="linkedin_url" id="social_hidden_linkedin" value="{{ old('linkedin_url', $parceiro->linkedin_url ?? '') }}">
        <input type="hidden" name="instagram_url" id="social_hidden_instagram" value="{{ old('instagram_url', $parceiro->instagram_url ?? '') }}">
        <input type="hidden" name="facebook_url" id="social_hidden_facebook" value="{{ old('facebook_url', $parceiro->facebook_url ?? '') }}">
        <div class="form-text mb-3"><i class="bi bi-info-circle me-1"></i> Links para as redes sociais do parceiro. Todos opcionais.</div>

        {{-- Linha 3: Endereço + Google Maps --}}
        <div class="row g-3">
            <div class="col-md-8">
                <label for="address" class="form-label fw-semibold">
                    <i class="bi bi-house me-1"></i> Endereço
                </label>
                <textarea id="address" name="address" rows="2"
                          class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}"
                          placeholder="Endereço completo do parceiro...">{{ old('address', $parceiro->address ?? '') }}</textarea>
                @if($errors->has('address'))
                    <div class="invalid-feedback">{{ $errors->first('address') }}</div>
                @endif
            </div>
            <div class="col-md-4">
                <label for="google_maps_url" class="form-label fw-semibold">
                    <i class="bi bi-map me-1"></i> Google Maps
                </label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-map"></i></span>
                    <input type="url" id="google_maps_url" name="google_maps_url"
                           class="form-control{{ $errors->has('google_maps_url') ? ' is-invalid' : '' }}"
                           value="{{ old('google_maps_url', $parceiro->google_maps_url ?? '') }}"
                           placeholder="https://maps.google.com/...">
                </div>
                @if($errors->has('google_maps_url'))
                    <div class="invalid-feedback">{{ $errors->first('google_maps_url') }}</div>
                @endif
                <div class="form-text">Link da localização no Google Maps.</div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // =============================================
    // Tag Picker — Parceiros
    // =============================================
    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);
        });
        tagHiddenInputs.innerHTML = '';
        tagNames.forEach(function(name) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'tags[]';
            input.value = name;
            tagHiddenInputs.appendChild(input);
        });
        tagSelected.querySelectorAll('.tag-remove').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(this.getAttribute('data-idx'));
                tagNames.splice(idx, 1);
                renderTags();
            });
        });
        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', 'active');
            } else {
                b.classList.remove('btn-outline-success', 'active');
                b.classList.add('btn-outline-secondary');
            }
        });
    }

    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); });
    }
    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 { tagNames = tagNames.filter(function(n) { return n !== name; }); renderTags(); }
        });
    });
    renderTags();

    // Função global para atualizar tags disponíveis (chamada pelo modal de gerenciamento)
    window.refreshAvailableTags = function() {
        fetch('{{ route("v2.cms.conexao-tags.json") }}', {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(tags) {
            var container = document.getElementById('tag-available');
            if (!container) return;
            container.innerHTML = '';
            tags.forEach(function(tag) {
                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-sm btn-outline-secondary tag-available';
                btn.setAttribute('data-name', tag.name);
                btn.setAttribute('title', 'Clique para adicionar \'' + tag.name + '\'');
                btn.textContent = tag.name;
                btn.addEventListener('click', function() {
                    var name = this.getAttribute('data-name');
                    if (tagNames.indexOf(name) === -1) { addTag(name); }
                    else { tagNames = tagNames.filter(function(n) { return n !== name; }); renderTags(); }
                });
                container.appendChild(btn);
            });
        });
    };

    // =============================================
    // Social Media Builder — Parceiros
    // =============================================
    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 fieldMap = {
        linkedin:  { field: 'social_hidden_linkedin',  label: 'LinkedIn',  icon: 'bi-linkedin' },
        instagram: { field: 'social_hidden_instagram', label: 'Instagram', icon: 'bi-instagram' },
        facebook:  { field: 'social_hidden_facebook',  label: 'Facebook',  icon: 'bi-facebook' },
        twitter:   { field: null, label: 'Twitter / X', icon: 'bi-twitter-x' },
        youtube:   { field: null, label: 'YouTube',     icon: 'bi-youtube' },
        whatsapp:  { field: null, label: 'WhatsApp',    icon: 'bi-whatsapp' },
        telegram:  { field: null, label: 'Telegram',    icon: 'bi-telegram' },
        tiktok:    { field: null, label: 'TikTok',      icon: 'bi-tiktok' }
    };

    var availableNetworks = Object.keys(fieldMap).map(function(k) {
        return { id: k, name: fieldMap[k].label, icon: fieldMap[k].icon };
    });

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

    function syncHiddenFields() {
        // Reseta todos os hidden fields
        Object.keys(fieldMap).forEach(function(k) {
            var f = fieldMap[k];
            if (f.field) document.getElementById(f.field).value = '';
        });
        // Popula a partir do socialData
        socialData.forEach(function(item) {
            var map = fieldMap[item.network];
            if (map && map.field) {
                document.getElementById(map.field).value = item.url || '';
            }
        });
    }

    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">',
                '</div>',
                '<div class="col-2 d-flex align-items-center">',
                '<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();
        syncHiddenFields();
    }

    function bindSocialEvents() {
        socialContainer.querySelectorAll('.btn-remove-social').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(this.getAttribute('data-idx'));
                socialData.splice(idx, 1);
                renderSocial();
                syncSocialJson();
            });
        });
        socialContainer.querySelectorAll('.network-select').forEach(function(sel) {
            sel.addEventListener('change', function() {
                var idx = parseInt(this.getAttribute('data-idx'));
                var opt = this.options[this.selectedIndex];
                socialData[idx].network = this.value;
                socialData[idx].icon = opt.getAttribute('data-icon') || '';
                renderSocial();
                syncSocialJson();
            });
        });
        socialContainer.querySelectorAll('input.url-input').forEach(function(inp) {
            inp.addEventListener('input', function() {
                var idx = parseInt(this.getAttribute('data-idx'));
                socialData[idx].url = this.value;
                syncSocialJson();
            });
        });
    }

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

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

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