@extends('admin.base-chamados')

@section('page_title', 'Chamados |Admin Logística')

@section('styles')
    <style>
        .saas-cat-toggle {
            font-size: .8rem;
            padding: .25rem .7rem;
            border-radius: 20px;
            border: 1.5px solid #c0c7d4;
            cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
            margin: 2px;
        }

        .saas-cat-on {
            background: #4d7cf5;
            color: #fff;
            border-color: #4d7cf5;
        }

        .saas-cat-off {
            background: transparent;
            color: #555;
        }

        .saas-cat-off:hover {
            border-color: #4d7cf5;
            color: #4d7cf5;
        }
    </style>
@endsection

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

{{-- ── Topbar ── --}}
@section('page-header')
    <h1>
        <i class="bi bi-rocket-takeoff-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Logística | Expedição
    </h1>
@endsection

{{-- ── Stat cards ── --}}
@section('stat-cards')
    @php
        $movimento    = \App\Helpers\ChamadoHelper::movimentoDoDia($daily_chamado);
        $abertosHoje  = $movimento['abertos'];
        $fechadosHoje = $movimento['solucionados'];

        // Contados no banco: $chamados é só a página visível da listagem.
        $semInteracao = $cardSemInteracao;
        // Abertos há mais de 5 dias e ainda sem técnico assumindo.
        $emAndamento  = $cardArrastando;
    @endphp

    <div class="col-md-4 mb-3">
        <div class="card admin-stats text-center">
            <div class="topline" style="background:linear-gradient(45deg,#f7b558,#e3a02c);"></div>
            <h3 class="mt-3 mb-1">
                <i class="bi bi-activity mr-1" style="font-size:.9rem;color:#e3a02c;"></i>
                Atividade
            </h3>
            <h4>
                {{ $abertosHoje }}<i class="bi bi-caret-up-fill ml-2 fadeTop4" style="color:#22c97b;" title="Abertos"></i>
                <i class="bi bi-caret-down-fill mr-2 fadeDown" style="color:#e05252;" title="Fechados"></i>{{ $fechadosHoje }}
            </h4>
            <p class="text-muted small mb-2">abertos / fechados hoje</p>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card admin-stats text-center">
            <div class="topline" style="background:linear-gradient(45deg,#58f7b4,#0e9d61);"></div>
            <h3 class="mt-3 mb-1">
                <i class="bi bi-hourglass-split mr-1" style="font-size:.9rem;color:#0e9d61;"></i>
                Em andamento
            </h3>
            <h4 style="color:#0e9d61;">{{ $emAndamento }}</h4>
            <p class="text-muted small mb-2">pendentes há +5 dias</p>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card admin-stats text-center">
            <div class="topline" style="background:#e05252;"></div>
            <h3 class="mt-3 mb-1">
                <i class="bi bi-clock-history mr-1" style="font-size:.9rem;color:#e05252;"></i>
                Sem interação
            </h3>
            <h4 style="color:#e05252;">{{ $semInteracao }}</h4>
            <p class="text-muted small mb-2">chamados há +3 dias parados</p>
        </div>
    </div>
@endsection

{{-- ── Filtros do dropdown principal ── --}}
@section('toolbar-filters')
    <a class="dropdown-item filter-item active" data-value="todos">
        <i class="bi bi-list-ul mr-2"></i> Todos
    </a>
    <a class="dropdown-item filter-item" data-value="meus">
        <i class="bi bi-person mr-2"></i> Seus Chamados
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item filter-item" data-value="abertos">
        <i class="bi bi-envelope-open mr-2"></i> Em aberto
    </a>
    <a class="dropdown-item filter-item" data-value="andamento">
        <i class="bi bi-hourglass-split mr-2"></i> Em andamento
    </a>
    <a class="dropdown-item filter-item" data-value="planejados">
        <i class="bi bi-calendar mr-2"></i> Planejados
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item filter-item" data-value="sol">
        <i class="bi bi-check-circle mr-2" style="color:#22c97b;"></i> Solucionados
    </a>
@endsection

{{-- ── Filtros avançados: tipo de chamado → categoria → categoria do
     acessório solicitado, filial, data de abertura. Somem junto com a aba
     "Solucionados" — valem só para a fila em aberto. ── --}}
@section('toolbar-extra')
    <div class="dropdown saas-filter-drop" id="filtro-avancado-drop">
        <button class="saas-btn saas-filter-btn" id="filtro-avancado-btn"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bi bi-sliders"></i>
            <span class="saas-filter-label">Mais filtros</span>
            <i class="bi bi-chevron-down saas-filter-chevron"></i>
        </button>

        <div class="dropdown-menu saas-filter-menu sol-filtros-menu" id="filtro-avancado-menu">

            <div class="sol-grupo">
                <span class="sol-grupo-label"><i class="bi bi-tag mr-1"></i> Tipo de chamado</span>
                <select id="fa-tipo" class="saas-date-input sol-campo-cheio">
                    <option value="">Todos os tipos</option>
                    @foreach ($tiposFiltro as $tipo)
                        <option value="{{ $tipo->id }}">{{ $tipo->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="dropdown-divider"></div>

            <div class="sol-grupo">
                <span class="sol-grupo-label"><i class="bi bi-tags mr-1"></i> Categoria</span>
                <select id="fa-categoria" class="saas-date-input sol-campo-cheio">
                    <option value="">Todas as categorias</option>
                    @foreach ($categoriasFiltro as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="dropdown-divider"></div>

            <div class="sol-grupo">
                <span class="sol-grupo-label"><i class="bi bi-box-seam mr-1"></i> Categoria do acessório</span>
                <select id="fa-categoria-acessorio" class="saas-date-input sol-campo-cheio">
                    <option value="">Todas</option>
                    @foreach ($categoriaAcessorioOpcoes as $slug => $cat)
                        <option value="{{ $slug }}">{{ $cat['label'] }}</option>
                    @endforeach
                </select>
            </div>

            <div class="dropdown-divider"></div>

            <div class="sol-grupo">
                <span class="sol-grupo-label"><i class="bi bi-shop mr-1"></i> Filial</span>
                <select id="fa-filial" class="saas-date-input sol-campo-cheio">
                    <option value="">Todas as filiais</option>
                    @foreach ($filiais as $fid => $nome)
                        <option value="{{ $fid }}">{{ $nome }}</option>
                    @endforeach
                </select>
            </div>

            <div class="dropdown-divider"></div>

            <div class="sol-grupo">
                <span class="sol-grupo-label"><i class="bi bi-calendar-range mr-1"></i> Data de abertura</span>
                <div class="sol-range">
                    <input type="date" id="fa-data-inicio" class="saas-date-input" aria-label="Aberto a partir de">
                    <span class="sol-range-sep">até</span>
                    <input type="date" id="fa-data-fim" class="saas-date-input" aria-label="Aberto até">
                </div>
            </div>

            <div class="dropdown-divider"></div>

            <button type="button" id="fa-limpar" class="dropdown-item sol-limpar" disabled>
                <i class="bi bi-x-circle mr-2"></i> Limpar filtros
            </button>

        </div>
    </div>

    @if (in_array(auth()->user()->level, [2, 99]))
        <a class="saas-btn ml-2" data-toggle="modal" data-target="#modalCategoriaTecnicoLogistica"
           title="Gerenciar categorias por técnico">
            <i class="bi bi-shield-lock mr-1"></i> Acesso
        </a>
    @endif
@endsection

@section('scripts-extra')
    (function () {
        var faTipo   = document.getElementById('fa-tipo');
        var faCat    = document.getElementById('fa-categoria');
        var faCatAc  = document.getElementById('fa-categoria-acessorio');
        var faFilial = document.getElementById('fa-filial');
        var faIni    = document.getElementById('fa-data-inicio');
        var faFim    = document.getElementById('fa-data-fim');
        var faLimpar = document.getElementById('fa-limpar');
        var faBtn    = document.getElementById('filtro-avancado-btn');
        var faDrop   = document.getElementById('filtro-avancado-drop');

        {{-- Memória dos filtros avançados: sobrevive a reload/navegação, por
             navegador. Guarda só os valores dos selects/datas — nada sensível. --}}
        var FA_STORAGE_KEY = 'logistica.filtroAvancado.v1';

        function salvarFiltros() {
            try {
                localStorage.setItem(FA_STORAGE_KEY, JSON.stringify({
                    tipo:   faTipo.value,
                    cat:    faCat.value,
                    catAc:  faCatAc.value,
                    filial: faFilial.value,
                    ini:    faIni.value,
                    fim:    faFim.value
                }));
            } catch (e) { /* localStorage indisponível — filtro só não persiste */ }
        }

        function limparFiltrosSalvos() {
            try { localStorage.removeItem(FA_STORAGE_KEY); } catch (e) {}
        }

        {{-- Repõe os selects a partir da memória e devolve true se havia algo salvo. --}}
        function restaurarFiltros() {
            var raw;
            try { raw = localStorage.getItem(FA_STORAGE_KEY); } catch (e) { return false; }
            if (!raw) return false;

            var s;
            try { s = JSON.parse(raw); } catch (e) { limparFiltrosSalvos(); return false; }
            if (!s || typeof s !== 'object') return false;

            faTipo.value   = s.tipo   || '';
            faCat.value    = s.cat    || '';
            faCatAc.value  = s.catAc  || '';
            faFilial.value = s.filial || '';
            faIni.value    = s.ini    || '';
            faFim.value    = s.fim    || '';
            if (faIni.value) faFim.min = faIni.value;
            if (faFim.value) faIni.max = faFim.value;

            return !!(faTipo.value || faCat.value || faCatAc.value || faFilial.value || faIni.value || faFim.value);
        }

        function atualizarLabelAvancado() {
            var n = 0;
            if (chamadoFiltroTipo) n++;
            if (chamadoFiltroCategoria) n++;
            if (chamadoFiltroCategoriaAcessorio) n++;
            if (chamadoFiltroFilial) n++;
            if (chamadoFiltroDataInicio || chamadoFiltroDataFim) n++;
            $(faBtn).find('.saas-filter-label').text(n ? 'Filtros (' + n + ')' : 'Mais filtros');
            $(faLimpar).prop('disabled', n === 0);
        }

        function sincronizarVars() {
            chamadoFiltroTipo               = faTipo.value;
            chamadoFiltroCategoria          = faCat.value;
            chamadoFiltroCategoriaAcessorio = faCatAc.value;
            chamadoFiltroFilial             = faFilial.value;
            chamadoFiltroDataInicio         = faIni.value;
            chamadoFiltroDataFim            = faFim.value;
        }

        function aplicarAvancado() {
            sincronizarVars();
            salvarFiltros();
            atualizarLabelAvancado();
            loadChamados(1);
        }

        [faTipo, faCat, faCatAc, faFilial, faIni, faFim].forEach(function (el) {
            el.addEventListener('change', aplicarAvancado);
        });

        {{-- O Bootstrap fecha o .dropdown-menu em qualquer clique que não seja
             num <input>/<textarea> — clicar num <select> fecha o menu, e no
             Windows isso cancela o popup nativo do select antes da escolha
             ("seleciona e nada acontece"). Mantém o menu aberto enquanto se
             mexe nos campos, igual ao menu de Solucionados (#filtro-sol-menu). --}}
        $(document).on('click', '#filtro-avancado-menu', function (e) {
            if (!$(e.target).is('#fa-limpar, #fa-limpar *')) e.stopPropagation();
        });

        {{-- Início não pode passar do fim, nem o fim ficar antes do início. --}}
        faIni.addEventListener('change', function () { faFim.min = faIni.value || null; });
        faFim.addEventListener('change', function () { faIni.max = faFim.value || null; });

        faLimpar.addEventListener('click', function () {
            faTipo.value = faCat.value = faCatAc.value = faFilial.value = '';
            faIni.value = faFim.value = '';
            faFim.min = faIni.max = null;
            limparFiltrosSalvos();
            sincronizarVars();
            atualizarLabelAvancado();
            loadChamados(1);
        });

        {{-- Carga inicial: se havia filtro salvo, repõe os campos e recarrega a
             lista uma vez (a tabela renderizada no servidor não conhece a memória). --}}
        if (restaurarFiltros()) {
            sincronizarVars();
            atualizarLabelAvancado();
            loadChamados(1);
        } else {
            atualizarLabelAvancado();
        }

        {{-- Some junto com "Solucionados" — esses filtros valem só pra fila em aberto. --}}
        $(document).on('click', '.filter-item', function () {
            $(faDrop).toggleClass('hidden', $(this).data('value') === 'sol');
        });
        if (new URLSearchParams(window.location.search).get('preset') === 'sol') {
            $(faDrop).addClass('hidden');
        }
    })();

    @if (in_array(auth()->user()->level, [2, 99]))
        (function () {
        const selectTec = document.getElementById('selectTecnicoCategoriaLog');
        const blocoCats = document.getElementById('blocoCategoriasLog');
        const loading   = document.getElementById('loadingCategoriasLog');
        const btnSalvar = document.getElementById('btnSalvarCategoriasLog');
        const container = document.getElementById('containerCategoriasLog');

        let habilitadas = [];
        let userId = null;

        function renderCatBtns(categorias) {
            container.innerHTML = '';
            categorias.forEach(cat => {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'saas-btn saas-cat-toggle ' + (habilitadas.includes(cat.id) ? 'saas-cat-on' : 'saas-cat-off');
                btn.dataset.id = cat.id;
                btn.textContent = cat.name;
                btn.addEventListener('click', function () {
                    const id = parseInt(btn.dataset.id);
                    const idx = habilitadas.indexOf(id);
                    if (idx >= 0) {
                        habilitadas.splice(idx, 1);
                        btn.classList.replace('saas-cat-on', 'saas-cat-off');
                    } else {
                        habilitadas.push(id);
                        btn.classList.replace('saas-cat-off', 'saas-cat-on');
                    }
                });
                container.appendChild(btn);
            });
        }

        selectTec.addEventListener('change', function () {
            userId = this.value;
            if (!userId) {
                blocoCats.style.display = 'none';
                btnSalvar.disabled = true;
                return;
            }
            loading.style.display = 'block';
            blocoCats.style.display = 'none';
            btnSalvar.disabled = true;

            fetch(`/admin/logistica/tecnicos/${userId}/categorias`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(data => {
                habilitadas = data.habilitadas;
                renderCatBtns(data.categorias);
                loading.style.display = 'none';
                blocoCats.style.display = 'block';
                btnSalvar.disabled = false;
            })
            .catch(() => { loading.style.display = 'none'; });
        });

        btnSalvar.addEventListener('click', function () {
            if (!userId) return;
            btnSalvar.disabled = true;
            fetch(`/admin/logistica/tecnicos/${userId}/categorias`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({ category_ids: habilitadas }),
            })
            .then(r => r.json())
            .then(() => {
                btnSalvar.disabled = false;
                btnSalvar.innerHTML = '<i class="bi bi-check-lg mr-1"></i> Salvo!';
                setTimeout(() => { btnSalvar.innerHTML = '<i class="bi bi-floppy mr-1"></i> Salvar'; }, 2000);
            })
            .catch(() => { btnSalvar.disabled = false; });
        });

        $('#modalCategoriaTecnicoLogistica').on('hidden.bs.modal', function () {
            selectTec.value = '';
            blocoCats.style.display = 'none';
            btnSalvar.disabled = true;
            habilitadas = [];
            userId = null;
            container.innerHTML = '';
        });
        })();
    @endif
@endsection

{{-- ── Modal: categorias por técnico ── --}}
@section('modals')
    @if (in_array(auth()->user()->level, [2, 99]))
        <div class="modal fade" id="modalCategoriaTecnicoLogistica" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:520px;">
                <div class="modal-content saas-modal">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="bi bi-shield-lock mr-2" style="color:#4d7cf5;"></i>
                            Acesso por Categoria — Técnicos Logística
                        </h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <label class="form-label small text-muted mb-1">Técnico</label>
                            <select id="selectTecnicoCategoriaLog" class="form-control">
                                <option value="">— Selecione um técnico —</option>
                                @foreach ($tec as $t)
                                    @if ((int) ($t['level'] ?? 0) === 1)
                                        <option value="{{ $t['id'] }}">{{ $t['name'] }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        <div id="blocoCategoriasLog" style="display:none;">
                            <label class="form-label small text-muted mb-2">Categorias habilitadas</label>
                            <div id="containerCategoriasLog" class="d-flex flex-wrap gap-2"></div>
                        </div>

                        <div id="loadingCategoriasLog" class="text-center py-3" style="display:none;">
                            <span class="spinner-border spinner-border-sm text-primary"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="saas-btn saas-btn-ghost" data-dismiss="modal">Fechar</button>
                        <button type="button" class="saas-btn" id="btnSalvarCategoriasLog" disabled>
                            <i class="bi bi-floppy mr-1"></i> Salvar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

{{-- ── Cabeçalho da tabela ── --}}
@section('table-header')
    <div class="tr-header">
        <div class="tc tc-id">
            ID
            <a class="filtro ml-1" data-value="id" title="null"><i class="fa fa-sort"></i></a>
        </div>
        <div class="tc tc-opener">Solicitante</div>
        <div class="tc tc-title">Chamado</div>
        <div class="tc tc-status">
            Status
            <a class="filtro ml-1" data-value="status" title="null"><i class="fa fa-sort"></i></a>
        </div>
        <div class="tc tc-agents">Equipe</div>
        <div class="tc tc-dates">
            Datas
            <a class="filtro ml-1" data-value="date_mod" title="null"><i class="fa fa-sort"></i></a>
        </div>
        <div class="tc tc-actions"></div>
    </div>
@endsection

{{-- ── Linhas da tabela ── --}}
@section('table-rows')
    @include('admin.view.chamados')
@endsection