@extends('admin.base-admin')

@section('page_title', 'Filiais | Admin')

@section('nav')
    @include('admin.partials.nav-dynamic')
@endsection

@section('page-header')
    <h1>
        <i class="bi bi-houses-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Filiais
    </h1>
@endsection

@section('styles')
<style>
    .tr-header.filial-header,
    .tr-row.filial-row {
        grid-template-columns: 76px 1fr 200px 180px 220px 52px;
    }
    .tr-row.filial-row { cursor: default; }
    .tr-row.filial-row:hover { background: var(--dm-surface-2); }
    .tr-row.filial-row .tc-name { font-weight: 400; }
    .saas-empty.hidden { display: none !important; }
    @media (max-width: 768px) {
        .tr-header.filial-header,
        .tr-row.filial-row { grid-template-columns: 76px 1fr 52px; }
        .tr-row.filial-row .tc-gerente,
        .tr-row.filial-row .tc-telefone,
        .tr-row.filial-row .tc-cidade { display: none; }
    }

    .tc-numero .num-badge {
        display: inline-block;
        min-width: 30px;
        padding: 1px 7px;
        border-radius: 6px;
        background: var(--dm-surface-2);
        border: 1px solid var(--dm-border);
        font-size: .74rem;
        font-weight: 600;
        text-align: center;
        color: var(--dm-text-muted);
    }
    .tc-name .nome-completo {
        display: block;
        font-size: .72rem;
        color: var(--dm-text-muted);
        margin-top: 1px;
    }

    .tc-gerente .ger-sub {
        display: block;
        font-size: .72rem;
        color: var(--dm-text-muted);
        margin-top: 1px;
    }

    /* ── Select com busca (gerente / sub-gerente) ── */
    .ss-select { position: relative; }
    .ss-select .ss-search { padding-right: 30px; }
    .ss-clear {
        position: absolute; right: 8px; top: 9px;
        border: none; background: transparent; color: var(--dm-text-muted);
        font-size: 1.15rem; line-height: 1; cursor: pointer; display: none; padding: 0;
    }
    .ss-select.has-value .ss-clear { display: block; }
    .ss-menu {
        position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
        background: var(--dm-surface); border: 1px solid var(--dm-border);
        border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
        max-height: 220px; overflow-y: auto; display: none;
    }
    .ss-menu.open { display: block; }
    .ss-opt {
        padding: .5rem .75rem; font-size: .85rem; cursor: pointer;
        color: var(--dm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ss-opt:hover, .ss-opt.active { background: var(--dm-surface-2); }
    .ss-empty { padding: .6rem .75rem; font-size: .8rem; color: var(--dm-text-muted); }
</style>
@endsection

@section('content')
<div class="container-fluid mt-2">

    {{-- ── Toolbar ── --}}
    <div class="saas-toolbar mb-3">

        <div style="position:relative;display:flex;align-items:center;">
            <i class="bi bi-search"
               style="position:absolute;left:10px;font-size:.8rem;color:var(--dm-text-muted);pointer-events:none;"></i>
            <input id="filial-search" class="ramal-search" type="text"
                   placeholder="Nome, gerente ou cidade..." autocomplete="off">
        </div>

        @if(\App\Helpers\UserHelper::isInSector('ti'))
        <a class="saas-btn primary" data-toggle="modal" data-target="#modalAddFilial"
           style="text-decoration:none;margin-left:auto;">
            <i class="bi bi-plus-lg"></i> Nova filial
        </a>
        @endif

    </div>

    {{-- ── Cabeçalho ── --}}
    <div class="tr-header filial-header">
        <div class="tc">Nº</div>
        <div class="tc">Filial</div>
        <div class="tc">Gerente</div>
        <div class="tc">Telefone</div>
        <div class="tc">Cidade / UF</div>
        <div class="tc"></div>
    </div>

    {{-- ── Linhas ── --}}
    <div id="lista-filiais">
        @forelse($filiais as $filial)
        @php
            $gerNome = $filial->manager_id ? ($userNomes[$filial->manager_id] ?? null) : null;
            $subNome = $filial->sub_manager_id ? ($userNomes[$filial->sub_manager_id] ?? null) : null;
        @endphp
        <div class="tr-row filial-row item_filial"
             data-nome="{{ strtolower($filial->comment . ' ' . $filial->numero . ' ' . $filial->nomeCompleto()) }}"
             data-gerente="{{ strtolower(trim(($gerNome ?? '') . ' ' . ($subNome ?? ''))) }}"
             data-cidade="{{ strtolower($filial->town ?? '') }}">

            <div class="tc tc-numero">
                <span class="num-badge">{{ $filial->numero }}</span>
            </div>
            <div class="tc tc-name">
                <div>
                    <i class="bi bi-building" style="color:var(--dm-accent);font-size:1rem;flex-shrink:0;"></i>
                    {{ $filial->comment }}
                    <span class="nome-completo">{{ $filial->nomeCompleto() }}</span>
                </div>
            </div>
            <div class="tc tc-gerente">
                {{ $gerNome ?? '—' }}
                @if($subNome)
                    <span class="ger-sub"><i class="bi bi-person-badge" style="font-size:.7rem;"></i> {{ $subNome }}</span>
                @endif
            </div>
            <div class="tc tc-telefone">
                @if($filial->telefone)
                    <i class="bi bi-telephone" style="font-size:.75rem;margin-right:.25rem;color:var(--dm-text-muted);"></i>{{ $filial->telefone }}
                @else
                    —
                @endif
            </div>
            <div class="tc tc-cidade">
                @if($filial->town)
                    {{ $filial->town }}{{ $filial->state ? ', ' . $filial->state : '' }}
                @else
                    —
                @endif
            </div>
            <div class="tc tc-actions">
                @if(\App\Helpers\UserHelper::isInSector('ti'))
                <div class="dropdown" style="position:relative;">
                    <button class="dots-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="bi bi-three-dots-vertical"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" style="cursor:pointer;"
                           data-toggle="modal" data-target="#modalEditFilial{{ $filial->id }}">
                            <i class="bi bi-pencil mr-2"></i> Editar
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" style="color:#e05252!important;cursor:pointer;"
                           onclick="confirmarRemocao({{ $filial->id }}, '{{ addslashes($filial->comment) }}')">
                            <i class="bi bi-trash3 mr-2"></i> Remover
                        </a>
                    </div>
                </div>
                @endif
            </div>

        </div>
        @empty
        <div class="saas-empty">
            <i class="bi bi-buildings" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
            Nenhuma filial cadastrada.
        </div>
        @endforelse
    </div>

    <div id="filial-no-result" class="saas-empty hidden">
        <i class="bi bi-search" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
        Nenhum resultado encontrado.
    </div>

</div>

{{-- ═══════════════════ MODAL — Nova Filial ═══════════════════ --}}
@if(\App\Helpers\UserHelper::isInSector('ti'))
<div class="modal fade" id="modalAddFilial" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header conteudo-modal-header">
                <h5 style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
                    <i class="bi bi-plus-circle mr-2" style="color:var(--dm-accent);"></i> Nova Filial
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <form action="{{ route('admin.filiais.store') }}" method="POST">
                @csrf
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label>Nº interno <span style="color:#e05252;">*</span></label>
                                <input type="number" class="form-control" name="id_interno"
                                       min="1" max="999" required placeholder="Ex: 42">
                                <small style="color:var(--dm-text-muted);font-size:.7rem;">
                                    {{ \App\Models\Location::NUMERO_MATRIZ }} = Matriz
                                </small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label>Código Senior <span style="color:#e05252;">*</span></label>
                                <input type="number" class="form-control" name="codfil"
                                       min="1" required placeholder="codFil">
                                <small style="color:var(--dm-text-muted);font-size:.7rem;">
                                    Código da filial na Senior — se ainda não existir lá, espere o
                                    sync automático criar a filial e edite depois em vez de criar aqui.
                                </small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Nome da Filial <span style="color:#e05252;">*</span></label>
                                <input type="text" class="form-control" name="comment" required
                                       placeholder="Ex: 42 - Criciúma">
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>Nome completo <span style="color:var(--dm-text-muted);font-weight:400;">(usado na assinatura — deixe em branco para gerar automático)</span></label>
                        <input type="text" class="form-control" name="name"
                               placeholder="Ex: Filial 42 - Pinheirinho, Criciúma/SC">
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Gerente <span style="color:var(--dm-text-muted);font-weight:400;">(Gerente de Loja)</span></label>
                                <div class="ss-select" data-source="gerentes">
                                    <input type="hidden" name="manager_id" value="">
                                    <input type="text" class="form-control ss-search" autocomplete="off"
                                           placeholder="Pesquisar gerente…">
                                    <button type="button" class="ss-clear" tabindex="-1" title="Remover vínculo">&times;</button>
                                    <div class="ss-menu"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Sub-Gerente <span style="color:var(--dm-text-muted);font-weight:400;">(cobre ausências)</span></label>
                                <div class="ss-select" data-source="subgerentes">
                                    <input type="hidden" name="sub_manager_id" value="">
                                    <input type="text" class="form-control ss-search" autocomplete="off"
                                           placeholder="Pesquisar sub-gerente…">
                                    <button type="button" class="ss-clear" tabindex="-1" title="Remover vínculo">&times;</button>
                                    <div class="ss-menu"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Telefone</label>
                                <input type="text" class="form-control mask-phone" name="telefone"
                                       placeholder="(00) 00000-0000">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>E-mail</label>
                                <input type="email" class="form-control" name="email">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>CNPJ</label>
                                <input type="text" class="form-control mask-cnpj" name="cnpj"
                                       placeholder="00.000.000/0000-00">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Endereço</label>
                                <input type="text" class="form-control" name="address"
                                       placeholder="Ex: Av. Presidente Kennedy">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label>Número</label>
                                <input type="text" class="form-control" name="building"
                                       placeholder="Ex: 1284">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>CEP</label>
                                <input type="text" class="form-control mask-cep" name="postcode"
                                       placeholder="00000-000">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Bairro</label>
                                <input type="text" class="form-control" name="bairro">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Cidade</label>
                                <input type="text" class="form-control" name="town">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Estado</label>
                                <input type="text" class="form-control" name="state"
                                       placeholder="Ex: SC">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-0">
                                <label>Funcionamento Seg a Sex</label>
                                <input type="text" class="form-control" name="semanal"
                                       placeholder="Ex: 07:00 às 19:00">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-0">
                                <label>Funcionamento Sábado</label>
                                <input type="text" class="form-control" name="off_semanal"
                                       placeholder="Ex: 07:00 às 18:00">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="saas-btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="saas-btn primary" style="margin-left:auto;">
                        <i class="bi bi-check-lg mr-1"></i> Salvar
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>

{{-- ═══════════════════ MODAIS — Editar ═══════════════════ --}}
@foreach($filiais as $filial)
<div class="modal fade" id="modalEditFilial{{ $filial->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header conteudo-modal-header">
                <h5 style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
                    <i class="bi bi-pencil-square mr-2" style="color:var(--dm-accent);"></i> Editar Filial
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <form id="editFormFilial{{ $filial->id }}"
                  action="{{ route('admin.filiais.update', $filial->id) }}" method="POST">
                @csrf
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label>Nº interno <span style="color:#e05252;">*</span></label>
                                <input type="number" class="form-control" name="id_interno"
                                       value="{{ $filial->id_interno }}" min="1" max="999" required>
                                <small style="color:var(--dm-text-muted);font-size:.7rem;">
                                    {{ \App\Models\Location::NUMERO_MATRIZ }} = Matriz
                                </small>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="form-group mb-3">
                                <label>Nome da Filial <span style="color:#e05252;">*</span></label>
                                <input type="text" class="form-control" name="comment"
                                       value="{{ $filial->comment }}" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>Nome completo <span style="color:var(--dm-text-muted);font-weight:400;">(usado na assinatura — deixe em branco para gerar automático)</span></label>
                        <input type="text" class="form-control" name="name"
                               value="{{ $filial->name }}"
                               placeholder="{{ $filial->montarNome() }}">
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Gerente <span style="color:var(--dm-text-muted);font-weight:400;"></span></label>
                                <div class="ss-select {{ $filial->manager_id ? 'has-value' : '' }}" data-source="gerentes">
                                    <input type="hidden" name="manager_id" value="{{ $filial->manager_id }}">
                                    <input type="text" class="form-control ss-search" autocomplete="off"
                                           placeholder="Pesquisar gerente…"
                                           value="{{ $filial->manager_id ? ($userNomes[$filial->manager_id] ?? ('#' . $filial->manager_id)) : '' }}">
                                    <button type="button" class="ss-clear" tabindex="-1" title="Remover vínculo">&times;</button>
                                    <div class="ss-menu"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Sub-Gerente <span style="color:var(--dm-text-muted);font-weight:400;"></span></label>
                                <div class="ss-select {{ $filial->sub_manager_id ? 'has-value' : '' }}" data-source="subgerentes">
                                    <input type="hidden" name="sub_manager_id" value="{{ $filial->sub_manager_id }}">
                                    <input type="text" class="form-control ss-search" autocomplete="off"
                                           placeholder="Pesquisar sub-gerente…"
                                           value="{{ $filial->sub_manager_id ? ($userNomes[$filial->sub_manager_id] ?? ('#' . $filial->sub_manager_id)) : '' }}">
                                    <button type="button" class="ss-clear" tabindex="-1" title="Remover vínculo">&times;</button>
                                    <div class="ss-menu"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Telefone</label>
                                <input type="text" class="form-control mask-phone" name="telefone"
                                       value="{{ $filial->telefone }}" placeholder="(00) 00000-0000">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>E-mail</label>
                                <input type="email" class="form-control" name="email"
                                       value="{{ $filial->email }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>CNPJ</label>
                                <input type="text" class="form-control mask-cnpj" name="cnpj"
                                       value="{{ $filial->cnpj }}" placeholder="00.000.000/0000-00">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Endereço</label>
                                <input type="text" class="form-control" name="address"
                                       value="{{ $filial->address }}" placeholder="Ex: Av. Presidente Kennedy">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label>Número</label>
                                <input type="text" class="form-control" name="building"
                                       value="{{ $filial->building }}" placeholder="Ex: 1284">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>CEP</label>
                                <input type="text" class="form-control mask-cep" name="postcode"
                                       value="{{ $filial->postcode }}" placeholder="00000-000">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Bairro</label>
                                <input type="text" class="form-control" name="bairro"
                                       value="{{ $filial->bairro }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Cidade</label>
                                <input type="text" class="form-control" name="town"
                                       value="{{ $filial->town }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label>Estado</label>
                                <input type="text" class="form-control" name="state"
                                       value="{{ $filial->state }}" placeholder="Ex: SC">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-0">
                                <label>Funcionamento Seg a Sex</label>
                                <input type="text" class="form-control" name="semanal"
                                       value="{{ $filial->semanal }}" placeholder="Ex: 07:00 às 19:00">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-0">
                                <label>Funcionamento Sábado</label>
                                <input type="text" class="form-control" name="off_semanal"
                                       value="{{ $filial->off_semanal }}" placeholder="Ex: 07:00 às 18:00">
                            </div>
                        </div>
                    </div>

                </div>
            </form>

            <div class="modal-footer">
                <button type="button" class="saas-btn" data-dismiss="modal">Cancelar</button>
                <button type="submit" form="editFormFilial{{ $filial->id }}"
                        class="saas-btn primary" style="margin-left:auto;">
                    <i class="bi bi-check-lg mr-1"></i> Salvar
                </button>
            </div>

        </div>
    </div>
</div>
@endforeach

{{-- ═══════════════════ MODAL — Confirmar remoção ═══════════════════ --}}
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" style="max-width:360px;margin-top:80px;">
        <div class="modal-content">

            <div class="modal-header conteudo-modal-header">
                <h5 style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
                    <i class="bi bi-exclamation-triangle mr-2" style="color:#e05252;"></i> Confirmar remoção
                </h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>

            <div class="modal-body text-center" style="padding:1.5rem 1.25rem;">
                <p style="font-size:.9rem;color:var(--dm-text);">
                    Remover a filial <strong id="confirm-nome"></strong>?
                </p>
                <p style="font-size:.78rem;color:#e05252;">Esta ação é irreversível.</p>
            </div>

            <form id="deleteForm" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST">
                <div class="modal-footer" style="justify-content:space-between;">
                    <button type="button" class="saas-btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="saas-btn"
                            style="background:#e05252;border-color:#c94040;color:#fff;">
                        <i class="bi bi-trash3 mr-1"></i> Sim, remover
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
@endif {{-- isInSector('ti') --}}

<div class="text-center p-4 page-footer-divider">
    © 2022 Desenvolvido por Casas da Água
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(document).ready(function () {
    $('#filial-search').on('input', filtrar);

    function filtrar() {
        var q = $('#filial-search').val().toLowerCase().trim();
        var n = 0;

        $('.item_filial').each(function () {
            var nome    = String($(this).data('nome')    || '');
            var gerente = String($(this).data('gerente') || '');
            var cidade  = String($(this).data('cidade')  || '');
            var ok = !q || nome.includes(q) || gerente.includes(q) || cidade.includes(q);
            $(this).toggle(ok);
            if (ok) n++;
        });

        $('#filial-no-result').toggleClass('hidden', n > 0);
    }

    var phoneBehavior = function (val) {
        return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
    };
    var phoneOptions = {
        onKeyPress: function (val, e, field, options) {
            field.mask(phoneBehavior.apply({}, arguments), options);
        }
    };
    $('.mask-phone').mask(phoneBehavior, phoneOptions);
    $('.mask-cnpj').mask('00.000.000/0000-00');
    $('.mask-cep').mask('00000-000');
});

function confirmarRemocao(id, nome) {
    var url = '{{ route('admin.filiais.destroy', ['id' => 'PLACEHOLDER']) }}'.replace('PLACEHOLDER', id);
    $('#deleteForm').attr('action', url);
    $('#confirm-nome').text(nome);
    $('#modalConfirmDelete').modal('show');
}

/* ── Select com busca (gerente / sub-gerente) ── */
window.SS_SOURCES = {
    gerentes:    @json($gerentes),
    subgerentes: @json($subgerentes),
};

(function () {
    function esc(s) {
        return String(s).replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        });
    }

    function renderMenu(wrap, q) {
        var list = window.SS_SOURCES[$(wrap).data('source')] || [];
        q = String(q || '').toLowerCase().trim();
        var f = list.filter(function (o) {
            return !q || String(o.name).toLowerCase().indexOf(q) >= 0;
        });
        var $menu = $(wrap).find('.ss-menu');
        if (!f.length) {
            $menu.html('<div class="ss-empty">Nenhum resultado</div>');
            return;
        }
        $menu.html(f.slice(0, 80).map(function (o) {
            return '<div class="ss-opt" data-id="' + o.id + '">' + esc(o.name) + '</div>';
        }).join(''));
    }

    // Guarda o nome selecionado inicial para reconciliar o texto
    $('.ss-select').each(function () {
        $(this).attr('data-selected-name', $(this).find('.ss-search').val() || '');
    });

    // Abrir (mostra lista completa)
    $(document).on('focus click', '.ss-select .ss-search', function () {
        var wrap = $(this).closest('.ss-select');
        $('.ss-menu').not(wrap.find('.ss-menu')).removeClass('open');
        renderMenu(wrap[0], '');
        wrap.find('.ss-menu').addClass('open');
    });

    // Filtrar ao digitar
    $(document).on('input', '.ss-select .ss-search', function () {
        var wrap = $(this).closest('.ss-select');
        renderMenu(wrap[0], $(this).val());
        wrap.find('.ss-menu').addClass('open');
    });

    // Selecionar (mousedown p/ disparar antes do blur/fechamento)
    $(document).on('mousedown', '.ss-opt', function (e) {
        e.preventDefault();
        var $opt = $(this);
        var wrap = $opt.closest('.ss-select');
        wrap.find('input[type=hidden]').val(String($opt.data('id')));
        wrap.find('.ss-search').val($opt.text());
        wrap.attr('data-selected-name', $opt.text());
        wrap.addClass('has-value');
        wrap.find('.ss-menu').removeClass('open');
    });

    // Limpar vínculo
    $(document).on('click', '.ss-clear', function () {
        var wrap = $(this).closest('.ss-select');
        wrap.find('input[type=hidden]').val('');
        wrap.find('.ss-search').val('');
        wrap.attr('data-selected-name', '');
        wrap.removeClass('has-value');
        wrap.find('.ss-menu').removeClass('open');
    });

    // Fechar ao clicar fora + reconciliar o texto com o valor selecionado
    $(document).on('mousedown', function (e) {
        if ($(e.target).closest('.ss-select').length) return;
        $('.ss-select').each(function () {
            var wrap = $(this);
            wrap.find('.ss-menu').removeClass('open');
            var hidden = wrap.find('input[type=hidden]').val();
            wrap.find('.ss-search').val(hidden ? (wrap.attr('data-selected-name') || '') : '');
        });
    });
})();
</script>
@endsection