@extends('admin.base-chamados')

@section('page_title', 'Chamados | Admin RH')

@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;
        }

        #filtro-sol-drop:not(.hidden) ~ #toolbar-cat-btns {
            display: none !important;
        }
    </style>
@endsection

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

{{-- ── Topbar ── --}}
@section('page-header')
    <h1>
        <i class="bi bi-people-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Chamados — RH
    </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.
        $totalAbertos = $cardTotalAbertos;
        $semInteracao = $cardSemInteracao;
        $preContratos = $cardNovos;
    @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:#379d0e;" title="Abertos"></i>
                <i class="bi bi-caret-down-fill mr-2 fadeDown" style="color:#cf2828;" 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,#4d7cf5,#2b55c9);"></div>
            <h3 class="mt-3 mb-1">
                <i class="bi bi-file-earmark-person-fill mr-1" style="font-size:.9rem;color:#4d7cf5;"></i>
                Pré-contratos
            </h3>
            <h4 style="color:#4d7cf5;">{{ $preContratos }}</h4>
            <p class="text-muted small mb-2">contratações sem técnico atribuído</p>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card admin-stats text-center">
            <div class="topline" style="background:#cf2828;"></div>
            <h3 class="mt-3 mb-1">
                <i class="bi bi-clock-history mr-1" style="font-size:.9rem;color:#cf2828;"></i>
                Sem interação
            </h3>
            <h4 style="color:#cf2828;">{{ $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

{{-- ── Botões de categoria na toolbar ── --}}
@section('toolbar-extra')
    @if (in_array(auth()->user()->level, [2, 99]))
        <div id="toolbar-cat-btns" class="d-flex align-items-center">
            <a class="saas-btn filter-item ml-2" data-value="contratacoes">
                <i class="bi bi-person-plus mr-1"></i> Contratações
            </a>
            <a class="saas-btn filter-item ml-2" data-value="assinatura">
                <i class="bi bi-pen mr-1"></i> Assinatura
            </a>
            <a class="saas-btn filter-item ml-2" data-value="duvidas">
                <i class="bi bi-question-circle mr-1"></i> Dúvidas
            </a>

            <a class="saas-btn ml-2" data-toggle="modal" data-target="#modalCategoriaTecnico"
                title="Gerenciar categorias por técnico">
                <i class="bi bi-shield-lock mr-1"></i> Acesso
            </a>
        </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

{{-- ── Modal: categorias por técnico ── --}}
@section('modals')
    @if (in_array(auth()->user()->level, [2, 99]))
        <div class="modal fade" id="modalCategoriaTecnico" 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 RH
                        </h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        {{-- Seleção do técnico --}}
                        <div class="form-group mb-3">
                            <label class="form-label small text-muted mb-1">Técnico</label>
                            <select id="selectTecnicoCategoria" 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>

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

                        <div id="loadingCategorias" 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="btnSalvarCategorias" disabled>
                            <i class="bi bi-floppy mr-1"></i> Salvar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('scripts-extra')
    @if (in_array(auth()->user()->level, [2, 99]))
        (function () {
        const selectTec = document.getElementById('selectTecnicoCategoria');
        const blocoCats = document.getElementById('blocoCategorias');
        const loading = document.getElementById('loadingCategorias');
        const btnSalvar = document.getElementById('btnSalvarCategorias');

        let habilitadas = [];
        let userId = null;
        const container = document.getElementById('containerCategorias');

        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/rh/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/rh/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; });
        });

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