@extends('admin.base-chamados')

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

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

{{-- ── Topbar ── --}}
@section('page-header')
    <h1>
        <i class="bi bi-rocket-takeoff-fill mr-2" style="font-size:1.1rem;color:#4d7cf5;"></i>
        Chamados
    </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;
        $emAndamento  = $cardEmAberto;
    @endphp

    <div class="col-md-4 mb-3">
        <div class="card admin-stats text-center">
            <div class="topline" style="background:linear-gradient(90deg,#0ea5e9,#2563eb);"></div>
            <h3 class="mt-3 mb-1">
                <i class="bi bi-activity mr-1" style="font-size:.9rem;color:#2563eb;"></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>
                Abertos
            </h3>
            <h4 style="color:#0e9d61;">{{ $emAndamento }}</h4>
            <p class="text-muted small mb-2">chamados em aberto / andamento / planejados</p>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card admin-stats text-center">
            <div class="topline" style="background:linear-gradient(90deg,#fb7185,#e11d48);"></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

{{-- ── Botão abrir chamado (lado direito da toolbar) ── --}}
@section('toolbar-extra')
    <div class="dropdown" style="margin-left:auto;">
        <button class="saas-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bi bi-plus-circle mr-1"></i> Abrir chamado
            <i class="bi bi-chevron-down saas-filter-chevron ml-1"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right" style="min-width:190px;">
            <a class="dropdown-item" href="{{ route('area.form.show', ['area' => 'ti', 'form' => 'chamado']) }}" target="_blank">
                <i class="bi bi-headset mr-2" style="color:#4d7cf5;"></i> Chamado TI
            </a>
            <div class="dropdown-divider"></div>
            <span class="dropdown-header" style="font-size:.7rem;color:#9aa4b2;padding:.25rem 1rem;">Fornecedores</span>
            <a class="dropdown-item" href="{{ route('area.form.show', ['area' => 'ti', 'form' => 'lupa_form']) }}" target="_blank">
                <i class="bi bi-search mr-2" style="color:#7fd637;"></i> Lupa
            </a>
            <a class="dropdown-item" href="{{ route('area.form.show', ['area' => 'ti', 'form' => 'rede_form']) }}" target="_blank">
                <i class="bi bi-credit-card-2-front mr-2" style="color:#e9660e;"></i> Rede
            </a>
            <a class="dropdown-item" href="{{ route('area.form.show', ['area' => 'ti', 'form' => 'spy_form']) }}" target="_blank">
                <i class="bi bi-battery-charging mr-2" style="color:#f0b429;"></i> Spy Nobreaks
            </a>
            
        </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

{{-- ── 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