@php
    /** @var \V2\Modules\Conexoes\UnidadeRegional\Models\UnidadeRegional|null $unidade */
    $unidade = $unidade ?? null;
    $isEditing = $unidade && $unidade->exists;

    $ufs = [
        'AC','AL','AP','AM','BA','CE','DF','ES','GO',
        'MA','MT','MS','MG','PA','PB','PR','PE','PI',
        'RJ','RN','RS','RO','RR','SC','SP','SE','TO',
    ];

    $meta = $unidade->metadata ?? [];
    $storageSvc = app(\V2\Services\Storage\StorageService::class);
    $allTags = \V2\Core\Models\ConexaoTag::orderBy('name')->get();
    $selectedTags = old('tags', $isEditing && $unidade->relationLoaded('tags') ? $unidade->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],
    ];
    $urSocialInit = [];
    if ($meta['linkedin_url'] ?? '')     $urSocialInit[] = ['network'=>'linkedin', 'url'=>$meta['linkedin_url'],     'icon'=>'bi-linkedin', 'order'=>1, 'active'=>true];
    if ($meta['facebook_url'] ?? '')     $urSocialInit[] = ['network'=>'facebook', 'url'=>$meta['facebook_url'],     'icon'=>'bi-facebook', 'order'=>2, 'active'=>true];
    if ($meta['instagram_url'] ?? '')    $urSocialInit[] = ['network'=>'instagram','url'=>$meta['instagram_url'],    'icon'=>'bi-instagram','order'=>3, 'active'=>true];
    $urSocialInitJson = json_encode(!empty($urSocialInit) ? $urSocialInit : $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 + Sigla + UF --}}
        <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', $unidade->name ?? '') }}" required maxlength="255">
                @if($errors->has('name'))
                    <div class="invalid-feedback">{{ $errors->first('name') }}</div>
                @endif
            </div>
            <div class="col-md-3">
                <label for="acronym" class="form-label fw-semibold">Sigla <span class="text-danger">*</span></label>
                <input type="text" id="acronym" name="acronym"
                       class="form-control{{ $errors->has('acronym') ? ' is-invalid' : '' }}"
                       value="{{ old('acronym', $unidade->acronym ?? '') }}" required maxlength="10"
                       placeholder="Ex: SUCESU-DF">
                @if($errors->has('acronym'))
                    <div class="invalid-feedback">{{ $errors->first('acronym') }}</div>
                @endif
            </div>
            <div class="col-md-3">
                <label for="state" class="form-label fw-semibold">UF <span class="text-danger">*</span></label>
                <select id="state" name="state"
                        class="form-select{{ $errors->has('state') ? ' is-invalid' : '' }}" required>
                    <option value="">Selecione...</option>
                    @foreach($ufs as $uf)
                        <option value="{{ $uf }}" {{ old('state', $unidade->state ?? '') === $uf ? 'selected' : '' }}>
                            {{ $uf }}
                        </option>
                    @endforeach
                </select>
                @if($errors->has('state'))
                    <div class="invalid-feedback">{{ $errors->first('state') }}</div>
                @endif
            </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: Cidade + Telefone + E-mail --}}
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <label for="city" class="form-label fw-semibold"><i class="bi bi-geo-alt me-1"></i> Cidade</label>
                <input type="text" id="city" name="city"
                       class="form-control{{ $errors->has('city') ? ' is-invalid' : '' }}"
                       value="{{ old('city', $unidade->city ?? '') }}" maxlength="255">
                @if($errors->has('city'))
                    <div class="invalid-feedback">{{ $errors->first('city') }}</div>
                @endif
            </div>
            <div class="col-md-4">
                <label for="phone" class="form-label fw-semibold"><i class="bi bi-telephone me-1"></i> Telefone</label>
                <input type="text" id="phone" name="phone"
                       class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}"
                       value="{{ old('phone', $unidade->phone ?? '') }}" placeholder="(61) 99999-9999" maxlength="50">
                @if($errors->has('phone'))
                    <div class="invalid-feedback">{{ $errors->first('phone') }}</div>
                @endif
            </div>
            <div class="col-md-4">
                <label for="email" class="form-label fw-semibold"><i class="bi bi-envelope me-1"></i> E-mail</label>
                <input type="email" id="email" name="email"
                       class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                       value="{{ old('email', $unidade->email ?? '') }}" placeholder="contato@regional.org.br" maxlength="255">
                @if($errors->has('email'))
                    <div class="invalid-feedback">{{ $errors->first('email') }}</div>
                @endif
            </div>
        </div>

        {{-- Linha 3: Endereço + Coordenadas --}}
        <div class="row g-3 mb-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>
                <input type="text" id="address" name="address"
                       class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}"
                       value="{{ old('address', $unidade->address ?? '') }}" maxlength="255"
                       placeholder="Setor Comercial Sul, Qd. 05, Bl. A">
                @if($errors->has('address'))
                    <div class="invalid-feedback">{{ $errors->first('address') }}</div>
                @endif
            </div>
            <div class="col-md-4">
                <label for="map_coordinates" class="form-label fw-semibold"><i class="bi bi-geo me-1"></i> Coordenadas</label>
                <input type="text" id="map_coordinates" name="map_coordinates"
                       class="form-control{{ $errors->has('map_coordinates') ? ' is-invalid' : '' }}"
                       value="{{ old('map_coordinates', $unidade->map_coordinates ?? '') }}" maxlength="255"
                       placeholder="-15.7934, -47.8822">
                @if($errors->has('map_coordinates'))
                    <div class="invalid-feedback">{{ $errors->first('map_coordinates') }}</div>
                @endif
            </div>
        </div>

        {{-- Linha 4: Site + Redes Sociais --}}
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <label for="site_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="site_url" name="site_url" class="form-control"
                           value="{{ old('site_url', $unidade->site_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">{{ $urSocialInitJson }}</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', $meta['linkedin_url'] ?? '') }}">
        <input type="hidden" name="instagram_url" id="social_hidden_instagram" value="{{ old('instagram_url', $meta['instagram_url'] ?? '') }}">
        <input type="hidden" name="facebook_url" id="social_hidden_facebook" value="{{ old('facebook_url', $meta['facebook_url'] ?? '') }}">

        {{-- Linha 5: Ativo --}}
        <div class="row g-3">
            <div class="col-md-12">
                <div class="form-check form-switch">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" id="is_active" name="is_active" value="1"
                           class="form-check-input{{ $errors->has('is_active') ? ' is-invalid' : '' }}"
                           {{ old('is_active', $unidade->is_active ?? true) ? 'checked' : '' }}>
                    <label class="form-check-label" for="is_active">Registro ativo</label>
                    @if($errors->has('is_active'))
                        <div class="invalid-feedback">{{ $errors->first('is_active') }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================= --}}
{{-- SEÇÃO 2: CONTEÚDO (Logo + Cover)             --}}
{{-- ============================================= --}}
<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>
                @include('v2-service-media::components.media-input', [
                    'name' => 'logo_id',
                    'label' => 'Logo',
                    'accept' => 'image/*',
                    'required' => false,
                    'ownerModule' => 'unidade-regional',
                    'currentId' => $meta['logo_id'] ?? '',
                    'currentUrl' => $isEditing && $unidade->logo ? v2_storage_url($unidade->logo) : '',
                    'currentAlt' => $unidade->name ?? '',
                ])
            </div>
            <div class="col-md-6">
                <h6 class="fw-semibold mb-2"><i class="bi bi-card-image me-1"></i> Imagem de Fundo (Hero)</h6>
                @include('v2-service-media::components.media-input', [
                    'name' => 'cover_image_id',
                    'label' => 'Imagem de Fundo',
                    'accept' => 'image/*',
                    'required' => false,
                    'ownerModule' => 'unidade-regional',
                    'currentId' => $meta['cover_image_id'] ?? '',
                    'currentUrl' => $isEditing && !empty($meta['cover_image']) ? v2_storage_url($meta['cover_image']) : '',
                    'currentAlt' => $unidade->name ?? '',
                    'help' => 'Recomendado: 1920×400px, formato landscape. Usada como fundo do cabeçalho da página.',
                ])
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // =============================================
    // Tag Picker — UnidadeRegional
    // =============================================
    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 — UnidadeRegional
    // =============================================
    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() {
        Object.keys(fieldMap).forEach(function(k) {
            var f = fieldMap[k];
            if (f.field) document.getElementById(f.field).value = '';
        });
        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