@extends('adminlte.app')

@section('content')
<div class="content-wrapper tfcv-root">
    <div class="tfcv-header-row">
        <div>
            <h1 class="tfcv-h1">{{ $mapa ? 'Mapa de carga' : 'Novo mapa de carga' }}</h1>
            <p class="tfcv-sub">A volta pode ser alterada mesmo depois de o motorista começar: clique no cartão do cliente para mudar litros, meter ou tirar. Se o boletim já tiver a quantidade carregada, a programação não passa o que ainda está no carro.</p>
            <p class="tfcv-sub" id="mapa-atualizado">Dados da frota e das encomendas em {{ \Carbon\Carbon::parse($dados['atualizado_em'])->format('d/m/Y H:i') }}.</p>
            <p class="tfcv-sub" id="mapa-sync">Um mapa neste ecrã não está confirmado no servidor enquanto estiver pendente de sincronização.</p>
        </div>
        <div class="tfcv-actions">
            <a href="{{ route('encomendas_painel_alocacao') }}" class="tfcv-btn"><i class="fas fa-arrow-left" aria-hidden="true"></i> Voltar ao painel</a>
        </div>
    </div>
    <div id="mapa-app"
        data-editar="{{ $podeEditar ? '1' : '0' }}"
        data-gerar="{{ $podeGerar ? '1' : '0' }}"
        data-autorizar="{{ $podeAutorizar ? '1' : '0' }}">
        @if(session('success'))
            <div class="tfcv-alert ok"><i class="fas fa-check-circle" aria-hidden="true"></i> <span>{{ session('success') }}</span></div>
        @endif
        <div id="mapa-conflito"></div>
        <div id="mapa-alertas"></div>
        <div id="mapa-conteudo"></div>
    </div>
</div>
<script id="dados-mapa" type="application/json">@json(['dados' => $dados, 'mapa' => $mapa])</script>
<script src="/operacao-offline.js?v=20260930a"></script>
<script src="/mapas-preparacao/app.js?v=20260930e"></script>
<style>
    .mapa-comp { min-height: 140px; border: 0.5px dashed rgba(0,0,0,.2); border-radius: 12px; padding: 12px; background: #fff; }
    .mapa-comp.cheio { border-color: #993C1D; background: #FAECE7; }
    .mapa-linha { cursor: pointer; border: 0.5px solid rgba(0,0,0,.08); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fff; }
    .mapa-linha.fechado { cursor: default; }
    .mapa-cliente { cursor: pointer; }
    .mapa-cliente.fechado { cursor: default; opacity: .85; }
    .mapa-linha.arrastada { opacity: .5; }
    .mapa-grelha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; }
    .mapa-comps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 900px) {
        .mapa-grelha, .mapa-comps { grid-template-columns: 1fr; }
    }
    .mapa-modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 16px; }
    .mapa-modal { background: #fff; border-radius: 16px; padding: 20px; max-width: 440px; width: 100%; }
    .mapa-modal p { font-size: 1.05rem; margin: 0 0 16px; }
</style>
@endsection