@extends('adminlte.app')

{{--
    Portal de Encomendas e Descargas — lista de mapas de carga.

    Layout: segue o design system TFDS (classes tfcv-*), o mesmo da
    Validação de Comissões. O tfds.css já é carregado em adminlte/app.blade.php,
    não é preciso incluir nada aqui.
--}}

@section('content')
<div class="content-wrapper tfcv-root">

    @if ($message = Session::get('success'))
        <div class="tfcv-alert ok"><i class="fas fa-check-circle" aria-hidden="true"></i> <span>{!! $message !!}</span></div>
    @endif
    @if ($message = Session::get('error'))
        <div class="tfcv-alert danger"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> <span>{{ $message }}</span></div>
    @endif

    {{-- ====================== HEADER ====================== --}}
    <div class="tfcv-header-row">
        <div>
            <h1 class="tfcv-h1">Portal de Encomendas e Descargas</h1>
            <p class="tfcv-sub">
                {{ \Carbon\Carbon::parse($periodo['de'])->format('d/m/Y') }} a {{ \Carbon\Carbon::parse($periodo['ate'])->format('d/m/Y') }}
                · {{ $mapas->total() }} {{ $mapas->total() == 1 ? 'mapa' : 'mapas' }}
                @if(request('motorista'))
                    · Motorista: {{ optional($motoristas->firstWhere('id', (int) request('motorista')))->nome }}
                @endif
            </p>
        </div>
        <div class="tfcv-actions">
            <a href="{{ route('encomendas_index') }}" class="tfcv-btn"><i class="fas fa-file-import" aria-hidden="true"></i> Importar CSV</a>
            <a href="{{ route('resumo_rh.index') }}" class="tfcv-btn"><i class="fas fa-calendar-alt" aria-hidden="true"></i> Mapa de RH</a>
            <a href="{{ route('portal_descargas.configuracao') }}" class="tfcv-btn"><i class="fas fa-sliders-h" aria-hidden="true"></i> Parâmetros</a>
            @if($ultimaImportacao)
                <span class="tfcv-counter" style="align-self:center">
                    Último upload: <b>{{ $ultimaImportacao->concluido_em ? $ultimaImportacao->concluido_em->format('d/m H:i') : '—' }}</b>
                </span>
            @endif
        </div>
    </div>

    {{-- ====================== ALERTAS ====================== --}}
    @if($resumo['por_confirmar'] > 0)
        <div class="tfcv-alert warn">
            <i class="fas fa-user-clock" aria-hidden="true"></i>
            <span>
                <b>{{ $resumo['por_confirmar'] }}</b> {{ $resumo['por_confirmar'] == 1 ? 'mapa aguarda' : 'mapas aguardam' }} confirmação do motorista —
                <a href="{{ route('portal_descargas.index', ['so_por_confirmar' => 1]) }}">resolver agora</a>.
            </span>
        </div>
    @endif

    @if($resumo['divergencias'] > 0)
        <div class="tfcv-alert danger">
            <i class="fas fa-balance-scale" aria-hidden="true"></i>
            <span>
                <b>{{ $resumo['divergencias'] }}</b> {{ $resumo['divergencias'] == 1 ? 'mapa tem' : 'mapas têm' }} divergência entre o registado pelo motorista e o CSV —
                <a href="{{ route('portal_descargas.index', ['so_divergencias' => 1]) }}">analisar</a>.
            </span>
        </div>
    @endif

    @if($resumo['sem_boletim'] > 0)
        <div class="tfcv-alert warn">
            <i class="fas fa-gas-pump" aria-hidden="true"></i>
            <span><b>{{ $resumo['sem_boletim'] }}</b> {{ $resumo['sem_boletim'] == 1 ? 'mapa em curso sem' : 'mapas em curso sem' }} Boletim de Enchimento anexado.</span>
        </div>
    @endif

    {{-- ====================== FILTRO ====================== --}}
    <div class="tfcv-card">
        <form action="{{ route('portal_descargas.index') }}" method="GET" id="tfpd-form">
            <div class="tfcv-toolbar">
                <div class="tfcv-chip-group">
                    <span class="tfcv-chip @if($atalho === 'hoje') active @endif" data-de="{{ now()->toDateString() }}" data-ate="{{ now()->toDateString() }}">Hoje</span>
                    <span class="tfcv-chip @if($atalho === 'amanha') active @endif" data-de="{{ now()->addDay()->toDateString() }}" data-ate="{{ now()->addDay()->toDateString() }}">Amanhã</span>
                    <span class="tfcv-chip @if($atalho === 'semana') active @endif" data-de="{{ now()->startOfWeek()->toDateString() }}" data-ate="{{ now()->endOfWeek()->toDateString() }}">Esta semana</span>
                    <span class="tfcv-chip @if($atalho === 'mes') active @endif" data-de="{{ now()->startOfMonth()->toDateString() }}" data-ate="{{ now()->endOfMonth()->toDateString() }}">Este mês</span>

                    <input type="date" name="data_inicial" id="tfpd-de"  class="tfcv-select" value="{{ $periodo['de'] }}">
                    <input type="date" name="data_final"   id="tfpd-ate" class="tfcv-select" value="{{ $periodo['ate'] }}">
                </div>

                <div style="display:flex; gap:8px; flex-wrap:wrap">
                    <select name="estado" class="tfcv-select">
                        <option value="">Estado: todos</option>
                        @foreach(\App\Models\MapaCarga::estados() as $valor => $rotulo)
                            <option value="{{ $valor }}" @if(request('estado') === $valor) selected @endif>{{ $rotulo }}</option>
                        @endforeach
                    </select>

                    <select name="motorista" class="tfcv-select">
                        <option value="">Motorista: todos</option>
                        @foreach($motoristas as $motorista)
                            <option value="{{ $motorista->id }}" @if((string) request('motorista') === (string) $motorista->id) selected @endif>
                                {{ $motorista->first_name }}
                            </option>
                        @endforeach
                    </select>

                    <input type="text" name="matricula" class="tfcv-select" style="min-width:130px"
                           placeholder="Matrícula" value="{{ request('matricula') }}">

                    <button type="submit" class="tfcv-btn-primary"><i class="fas fa-sync-alt" aria-hidden="true"></i> Atualizar</button>
                </div>
            </div>

            <div style="margin-top:12px; display:flex; gap:8px; flex-wrap:wrap">
                <label class="tfcv-chip @if(request('so_por_confirmar')) active @endif" style="cursor:pointer">
                    <input type="checkbox" name="so_por_confirmar" value="1" style="margin:0"
                           @if(request('so_por_confirmar')) checked @endif onchange="document.getElementById('tfpd-form').submit()">
                    Só motorista por confirmar
                </label>
                <label class="tfcv-chip @if(request('so_divergencias')) active @endif" style="cursor:pointer">
                    <input type="checkbox" name="so_divergencias" value="1" style="margin:0"
                           @if(request('so_divergencias')) checked @endif onchange="document.getElementById('tfpd-form').submit()">
                    Só com divergência
                </label>
                <a href="{{ route('portal_descargas.index') }}" class="tfcv-chip">Limpar filtros</a>
            </div>
        </form>
    </div>

    {{-- ====================== KPIs ====================== --}}
    {{--
        Agenda de amanhã = mapas com data de carga amanhã e ainda por concluir.
        Descargas de hoje = descargas fechadas hoje no terreno pela app.
        Como o CSV só entra ao fim do dia, é a app que dá o "hoje" em tempo real.
    --}}
    <div class="tfcv-grid-4">
        <div class="tfcv-stat">
            <i class="fas fa-calendar-day accent" aria-hidden="true"></i>
            <div class="lbl">Agenda de amanhã</div>
            <div class="num">{{ $resumo['agenda_amanha'] }}</div>
            <div class="delta">{{ $resumo['agenda_amanha_descargas'] }} descargas · {{ number_format($resumo['agenda_amanha_litros'], 0, ',', ' ') }} L</div>
        </div>

        <div class="tfcv-stat">
            <i class="fas fa-check-circle accent" aria-hidden="true"></i>
            <div class="lbl">Descargas feitas hoje</div>
            <div class="num">{{ $resumo['entregas_hoje'] }}</div>
            <div class="delta">{{ number_format($resumo['litros_hoje'], 0, ',', ' ') }} L entregues</div>
        </div>

        <div class="tfcv-stat">
            <i class="fas fa-truck-moving accent" aria-hidden="true"></i>
            <div class="lbl">Mapas em curso</div>
            <div class="num">{{ $resumo['em_curso'] }}</div>
            <div class="delta">{{ $resumo['motoristas_em_rota'] }} {{ $resumo['motoristas_em_rota'] == 1 ? 'motorista em rota' : 'motoristas em rota' }}</div>
        </div>

        <div class="tfcv-stat">
            <i class="fas fa-user-clock accent" aria-hidden="true"></i>
            <div class="lbl">Por confirmar</div>
            <div class="num">{{ $resumo['por_confirmar'] }}</div>
            <div class="delta">{{ $resumo['divergencias'] }} com divergência</div>
        </div>
    </div>

    {{-- ====================== TABELA ====================== --}}
    <div class="tfcv-table-wrap" style="margin-top:14px">
        <div class="tfcv-table-toolbar">
            <input type="text" class="tfcv-search" id="tfpd-search" placeholder="Pesquisar mapa, motorista, matrícula...">
            <div class="tfcv-export">
                <button type="button" class="tfcv-btn" id="tfpd-btn-print"><i class="fas fa-print" aria-hidden="true"></i> Imprimir</button>
            </div>
        </div>

        <div style="overflow-x:auto">
        <table class="tfcv-tbl" id="tfpd-tabela">
            <thead>
                <tr>
                    <th>Mapa</th>
                    <th>Data carga</th>
                    <th>Viatura</th>
                    <th>Motorista</th>
                    <th class="r">Descargas</th>
                    <th>Execução</th>
                    <th class="r">Litros</th>
                    <th>Estado</th>
                    <th class="c">Ações</th>
                </tr>
            </thead>
            <tbody id="tfpd-tbody">
            @forelse($mapas as $mapa)
                @php
                    $total = $mapa->descargas_count;
                    $feitas = $mapa->descargas_concluidas_count;
                    $pct = $total ? round(($feitas / $total) * 100) : 0;
                    $corBarra = $pct >= 100 ? 'green' : ($pct > 0 ? 'amber' : '');
                @endphp
                <tr>
                    <td>
                        <a href="{{ route('portal_descargas.show', $mapa->id) }}"><b>{{ $mapa->referencia }}</b></a>
                        @if($mapa->tem_divergencia)
                            <span class="tfcv-tag coral" title="Divergência entre o registado e o CSV">divergência</span>
                        @endif
                        <div class="tfcv-sub" style="margin:2px 0 0">
                            criado {{ optional($mapa->data_mapa_carga)->format('d/m/Y') ?: '—' }}
                        </div>
                    </td>

                    <td>{{ optional($mapa->data_carga)->format('d/m/Y') ?: '—' }}</td>

                    <td>
                        {{ $mapa->matricula ?: '—' }}
                        @if($mapa->matricula && !$mapa->viatura_reconhecida)
                            <span class="tfcv-tag amber" title="Matrícula sem correspondência no cadastro de viaturas">?</span>
                        @endif
                    </td>

                    <td>
                        @if($mapa->driver && $mapa->motorista_confirmado)
                            {{ $mapa->driver->first_name }}
                            @if($mapa->motorista_origem === 'externo')
                                <span class="tfcv-tag gray">externo</span>
                            @endif
                        @elseif($mapa->cdu_nome)
                            <span title="Nome vindo do CSV, ainda por confirmar">{{ $mapa->cdu_nome }}</span>
                            <span class="tfcv-tag amber">por confirmar</span>
                        @else
                            <span class="tfcv-sub">—</span>
                        @endif
                    </td>

                    <td class="r">{{ $feitas }} / {{ $total }}</td>

                    <td style="min-width:130px">
                        <div class="tfcv-bar {{ $corBarra }}"><i style="width: {{ $pct }}%"></i></div>
                        <div class="tfcv-bar-row"><span>{{ $pct }}%</span>
                            <span>{{ $mapa->enchimento_id ? 'enchimento ok' : 'sem enchimento' }}</span></div>
                    </td>

                    <td class="r">{{ number_format($mapa->litros_previstos, 0, ',', ' ') }}</td>

                    <td>
                        <span class="tfcv-pill {{ $mapa->pill_cor }}">{{ $mapa->estado_label }}</span>
                    </td>

                    <td class="c">
                        <div class="tfcv-actions-cell">
                            <a href="{{ route('portal_descargas.show', $mapa->id) }}" class="tfcv-btn">
                                <i class="fas fa-eye" aria-hidden="true"></i> Abrir
                            </a>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="9"><div class="tfcv-empty">Sem mapas de carga para os filtros escolhidos.</div></td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>

    {{-- Paginação em Bootstrap 4, para acompanhar o AdminLTE. --}}
    <div style="margin-top:12px">{{ $mapas->links('pagination::bootstrap-4') }}</div>

</div>

<script>
/* Chips de período: preenchem as datas e submetem. */
document.querySelectorAll('.tfcv-chip[data-de]').forEach(function (chip) {
    chip.addEventListener('click', function () {
        document.getElementById('tfpd-de').value  = chip.dataset.de;
        document.getElementById('tfpd-ate').value = chip.dataset.ate;
        document.getElementById('tfpd-form').submit();
    });
});

/* Pesquisa local na tabela — sem ir ao servidor. */
document.getElementById('tfpd-search').addEventListener('input', function () {
    var termo = this.value.toLowerCase();
    document.querySelectorAll('#tfpd-tbody tr').forEach(function (linha) {
        linha.style.display = linha.textContent.toLowerCase().indexOf(termo) > -1 ? '' : 'none';
    });
});

document.getElementById('tfpd-btn-print').addEventListener('click', function () { window.print(); });
</script>
@endsection