@extends('adminlte.app')

@section('content')
<div class="content-wrapper pb-4 encomendas-board-page">
    <div class="content-header">
        <div class="container-fluid">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                <div>
                    <h1 class="m-0">Carga do dia</h1>
                    <p class="text-muted mb-0">Painel operacional para alocação por compartimentos com base nas encomendas e na frota.</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('encomendas_index') }}" class="btn btn-outline-secondary">Ver lista clássica</a>
                    @if($permissoes->criar_encomenda)
                        <button class="btn btn-outline-primary" data-toggle="modal" data-target="#modalImportarEncomendas">Importar encomendas</button>
                    @endif
                    <button type="button" class="btn btn-info" disabled>+ Nova carga</button>
                    @if($cargaSelecionada)
                        <form method="POST" action="{{ route('encomendas_painel_alocacao_auto') }}" class="m-0">
                            @csrf
                            @foreach(request()->except('_token') as $campo => $valor)
                                <input type="hidden" name="{{ $campo }}" value="{{ $valor }}">
                            @endforeach
                            <button type="submit" class="btn btn-success">Auto-alocar</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        @if ($message = Session::get('success'))
            <div class="alert alert-success mt-3 mb-0">{{ $message }}</div>
        @endif

        @if ($message = Session::get('error'))
            <div class="alert alert-danger mt-3 mb-0">{{ $message }}</div>
        @endif

        <div class="card board-filters mt-3">
            <div class="card-body pb-2">
                <form method="GET" action="{{ route('encomendas_painel_alocacao') }}">
                    <input type="hidden" name="carga" value="{{ request('carga') }}">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-2">
                            <label for="filtroDataInicial">Data inicial</label>
                            <input type="date" class="form-control" id="filtroDataInicial" name="filtroDataInicial" value="{{ request('filtroDataInicial') ?? date('Y-m-01') }}">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="filtroDataFinal">Data final</label>
                            <input type="date" class="form-control" id="filtroDataFinal" name="filtroDataFinal" value="{{ request('filtroDataFinal') ?? date('Y-m-t') }}">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="filtroTipoDoc">Tipo doc</label>
                            <input type="text" class="form-control" id="filtroTipoDoc" name="filtroTipoDoc" value="{{ request('filtroTipoDoc') }}">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="filtroNomeCliente">Cliente</label>
                            <input type="text" class="form-control" id="filtroNomeCliente" name="filtroNomeCliente" value="{{ request('filtroNomeCliente') }}">
                        </div>
                        <div class="form-group col-md-2">
                            <label for="filtroEstado">Estado</label>
                            <select class="form-control" id="filtroEstado" name="filtroEstado">
                                <option value="">Todos</option>
                                <option value="Transformado" {{ request('filtroEstado') == 'Transformado' ? 'selected' : '' }}>Transformado</option>
                                <option value="Pendente" {{ request('filtroEstado') == 'Pendente' ? 'selected' : '' }}>Pendente</option>
                            </select>
                        </div>
                        <div class="form-group col-md-2">
                            <label for="filtroGestor">Gestor</label>
                            <select class="form-control" id="filtroGestor" name="filtroGestor">
                                <option value="">Todos</option>
                                @foreach($gestores as $gestor)
                                    <option value="{{ $gestor->id }}" {{ request('filtroGestor') == $gestor->id ? 'selected' : '' }}>{{ $gestor->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12 d-flex flex-wrap gap-2 mb-0">
                            <button type="submit" class="btn btn-primary">Aplicar filtros</button>
                            <a href="{{ route('encomendas_painel_alocacao') }}" class="btn btn-light border">Limpar</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-xl-3 col-lg-4 mb-3">
                <div class="board-sidebar card h-100">
                    <div class="card-body">
                        <div class="board-sidebar-header">
                            <div>
                                <h5 class="mb-1">Encomendas por alocar</h5>
                                <small>Próximas cargas do período</small>
                            </div>
                            <span class="board-count">{{ $resumoPainel['total_cargas'] }}</span>
                        </div>

                        <div class="board-summary-grid mt-3">
                            <div class="board-summary-pill">
                                <span>Cargas</span>
                                <strong>{{ $resumoPainel['total_cargas'] }}</strong>
                            </div>
                            <div class="board-summary-pill">
                                <span>Total</span>
                                <strong>{{ number_format($resumoPainel['total_litros'], 0, ',', '.') }} L</strong>
                            </div>
                            <div class="board-summary-pill warning">
                                <span>Sem conjunto</span>
                                <strong>{{ $resumoPainel['cargas_sem_alocacao'] }}</strong>
                            </div>
                            <div class="board-summary-pill danger">
                                <span>Com alerta</span>
                                <strong>{{ $resumoPainel['cargas_com_alerta'] }}</strong>
                            </div>
                        </div>

                        <div class="board-load-list mt-3">
                            @forelse($cargas as $carga)
                                <a href="{{ route('encomendas_painel_alocacao', array_merge(request()->except('page'), ['carga' => $carga['key']])) }}" class="board-load-card {{ $cargaSelecionada && $cargaSelecionada['key'] === $carga['key'] ? 'active' : '' }}">
                                    <div class="board-load-top">
                                        <strong>{{ $carga['titulo'] }}</strong>
                                        @if($carga['estado'] ==='Transformado')
                                            <span class="board-mini-badge ok">Transformado</span>
                                        @else
                                            <span class="board-mini-badge {{ $carga['tem_alocacao'] ? 'ok' : 'warning' }}">{{ $carga['tem_alocacao'] ? 'alocada' : 'pendente' }}</span>
                                        @endif
                                    </div>
                                    <div class="board-load-subtitle">{{ $carga['subtitulo'] ?: 'Sem detalhe operacional' }}</div>
                                    <div class="board-load-meta">
                                        <span>{{ number_format($carga['litros_total'], 0, ',', '.') }} L</span>
                                        <span>{{ $carga['linhas']->count() }} paragens</span>
                                    </div>
                                </a>
                            @empty
                                <div class="empty-state-box">
                                    Nenhuma carga encontrada para os filtros aplicados.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-9 col-lg-8 mb-3">
                @if($cargaSelecionada)
                    <div class="board-main card">
                        <div class="card-body">
                            <div class="board-main-header">
                                <div>
                                    <div class="board-title-row">
                                        <span class="board-vehicle-tag">{{ $cargaSelecionada['titulo'] }}</span>
                                        @if($cargaSelecionada['tipo_doc'])
                                            <span class="board-doc-ref">{{ $cargaSelecionada['tipo_doc'] }} {{ $cargaSelecionada['serie'] }}/{{ $cargaSelecionada['numero'] }}</span>
                                        @endif
                                    </div>
                                    <h4 class="mb-1 mt-2">{{ $cargaSelecionada['subtitulo'] ?: 'Carga do período' }}</h4>
                                    <div class="board-header-details">
                                        <span>{{ $cargaSelecionada['data_carga'] ? $cargaSelecionada['data_carga']->format('d/m/Y') : 'Sem data de carga' }}</span>
                                        <span>{{ $cargaSelecionada['motorista'] ?: 'Sem motorista alocado' }}</span>
                                        <span>{{ $cargaSelecionada['veiculo']->tipoVeiculo->nome ?? 'Sem categoria' }}</span>
                                        <span>{{ $cargaSelecionada['veiculo']->proprietario ?? 'Proprietário não definido' }}</span>
                                        @if($fornecedorSugerido && $fornecedorSugerido['fornecedor'])
                                            <span>Fornecedor: {{ $fornecedorSugerido['fornecedor']->nome_fornecedor }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="board-capacity-box">
                                    <div class="capacity-percent {{ $cargaSelecionada['percentual_alocacao'] > 100 ? 'danger' : '' }}">{{ number_format($cargaSelecionada['percentual_alocacao'], 1, ',', '.') }}%</div>
                                    <div class="capacity-total">{{ number_format($cargaSelecionada['litros_total'], 0, ',', '.') }} L</div>
                                </div>
                            </div>

                            <div class="board-tanks mt-4">
                                @forelse($cargaSelecionada['compartimentos'] as $compartimento)
                                    <div class="tank-card">
                                        <div class="tank-title">{{ $compartimento['nome'] }}</div>
                                        <div class="tank-fill">
                                            <div class="tank-fill-bar" style="height: {{ $compartimento['percentual'] }}%;"></div>
                                        </div>
                                        <div class="tank-product">{{ $compartimento['produto_sigla'] ?: 'LIVRE' }}</div>
                                        <div class="tank-note">{{ $compartimento['produto_descricao'] ?: 'Sem produto atribuído' }}</div>
                                        <div class="tank-volume">{{ number_format($compartimento['alocado'], 0, ',', '.') }} L</div>
                                    </div>
                                @empty
                                    <div class="empty-state-box w-100">
                                        Nenhuma configuração de compartimentos encontrada para esta carga. Cadastre a cisterna ou a capacidade por compartimento na viatura.
                                    </div>
                                @endforelse
                            </div>

                            @if(($cargaSelecionada['litros_nao_alocados'] ?? 0) > 0)
                                <div class="alert alert-warning mt-3 mb-0">
                                    Restam {{ number_format($cargaSelecionada['litros_nao_alocados'], 0, ',', '.') }} L sem compartimento disponível com a configuração atual.
                                </div>
                            @endif

                            <div class="board-stop-list mt-4">
                                @foreach($cargaSelecionada['linhas'] as $linha)
                                    <div class="board-stop-item">
                                        <div class="board-stop-order">{{ $linha['ordem'] }}</div>
                                        <div class="board-stop-content">
                                            <div class="board-stop-main">
                                                <strong>{{ $linha['cliente'] ?: 'Cliente não identificado' }}</strong>
                                                <span>{{ $linha['local'] ?: 'Local de carga por definir' }}</span>
                                            </div>
                                            <div class="board-stop-meta">
                                                <span>{{ $linha['entidade'] }}</span>
                                                <span>{{ number_format($linha['litros'], 0, ',', '.') }} L</span>
                                                @if($linha['documento'])
                                                    <span>{{ $linha['documento'] }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="board-stop-tags">
                                            <span class="product-badge">{{ $linha['produto_abreviado'] }}</span>
                                            <span class="status-badge {{ $linha['status_ui']['classe'] }}">{{ $linha['status_ui']['label'] }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="board-docs mt-4">
                                <div class="board-doc-chip">Mapa de Carga {{ $cargaSelecionada['data_mapa_carga'] ? $cargaSelecionada['data_mapa_carga']->format('d/m/Y') : 's/ data' }}</div>
                                <div class="board-doc-chip">Guia de transporte</div>
                                <div class="board-doc-chip">Fatura</div>
                                <div class="board-doc-chip">Comprov. descarga</div>
                                <div class="board-doc-chip">ADR</div>
                            </div>
                        </div>
                    </div>

                    <div class="card board-footer-card mt-3">
                        <div class="card-body">
                            <div class="board-footer-title">Pedido de carga gerado - enviar ao fornecedor</div>
                            <div class="table-responsive mt-3">
                                <table class="table table-sm board-footer-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>Mapa carga</th>
                                            <th>Viatura</th>
                                            <th>Motorista</th>
                                            <th>Local de carga</th>
                                            <th>Data</th>
                                            <th class="text-right">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{{ $cargaSelecionada['tipo_doc'] ?: 'MC' }}/{{ $cargaSelecionada['numero'] ?: $cargaSelecionada['key'] }}</td>
                                            <td>{{ $cargaSelecionada['matricula'] ?: ($cargaSelecionada['veiculo']->matricula ?? '-') }}</td>
                                            <td>{{ $cargaSelecionada['motorista'] ?: '-' }}</td>
                                            <td>{{ $cargaSelecionada['linhas']->first()['local'] ?? '-' }}</td>
                                            <td>{{ $cargaSelecionada['data_carga'] ? $cargaSelecionada['data_carga']->format('d/m/Y') : '-' }}</td>
                                            <td class="text-right"><strong>{{ number_format($cargaSelecionada['litros_total'], 0, ',', '.') }} L</strong></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex flex-wrap justify-content-end gap-2 mt-3">
                                <a href="{{ route('encomendas_painel_alocacao_pdf', request()->query()) }}" target="_blank" class="btn btn-outline-secondary">Pré-visualizar PDF</a>
                                <form method="POST" action="{{ route('encomendas_painel_alocacao_enviar_fornecedor') }}" class="m-0">
                                    @csrf
                                    @foreach(request()->except('_token') as $campo => $valor)
                                        <input type="hidden" name="{{ $campo }}" value="{{ $valor }}">
                                    @endforeach
                                    <button type="submit" class="btn btn-success" {{ !$fornecedorSugerido || empty($fornecedorSugerido['destinatario']) ? 'disabled' : '' }}>Enviar ao fornecedor</button>
                                </form>
                            </div>
                            @if(!$fornecedorSugerido || empty($fornecedorSugerido['destinatario']))
                                <small class="text-muted d-block text-right mt-2">Sem fornecedor com e-mail associado ao local de carga.</small>
                            @endif
                        </div>
                    </div>
                @else
                    <div class="card">
                        <div class="card-body">
                            <div class="empty-state-box mb-0">Nenhuma carga disponível para exibição.</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@if($permissoes->criar_encomenda)
<div class="modal fade" id="modalImportarEncomendas" tabindex="-1" role="dialog" aria-labelledby="modalImportarEncomendasLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalImportarEncomendasLabel">Importar encomendas</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ route('encomendas_importar') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-3">
                        <label for="arquivoCSV">Selecione o arquivo CSV</label>
                        <input type="file" class="form-control-file" id="arquivoCSV" name="arquivoCSV" accept=".csv" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Importar</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endif

<style>
    .encomendas-board-page {
        background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
        min-height: calc(100vh - 57px);
    }

    .encomendas-board-page .gap-2 {
        gap: .5rem;
    }

    .encomendas-board-page .gap-3 {
        gap: 1rem;
    }

    .board-filters,
    .board-sidebar,
    .board-main,
    .board-footer-card {
        border: 0;
        border-radius: 20px;
        box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
    }

    .board-sidebar {
        background: linear-gradient(180deg, #fbfbfc 0%, #f0f3f7 100%);
    }

    .board-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .board-count {
        min-width: 44px;
        height: 44px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffe1bf;
        color: #a35409;
        font-weight: 700;
    }

    .board-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .board-summary-pill {
        padding: .85rem 1rem;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #e4e9f1;
        display: flex;
        flex-direction: column;
        gap: .15rem;
    }

    .board-summary-pill.warning {
        background: #fff6e8;
        border-color: #ffd18a;
    }

    .board-summary-pill.danger {
        background: #fff0ee;
        border-color: #ffb8af;
    }

    .board-summary-pill span {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6b7280;
    }

    .board-summary-pill strong {
        font-size: 1rem;
        color: #18212f;
    }

    .board-load-list {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        max-height: 920px;
        overflow: auto;
        padding-right: .25rem;
    }

    .board-load-card {
        display: block;
        padding: 1rem;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e6ebf2;
        color: inherit;
        transition: .2s ease;
    }

    .board-load-card:hover,
    .board-load-card:focus {
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(15, 23, 42, .08);
    }

    .board-load-card.active {
        border-color: #1f7a5a;
        box-shadow: inset 0 0 0 1px #1f7a5a;
    }

    .board-load-top,
    .board-load-meta,
    .board-main-header,
    .board-title-row,
    .board-header-details,
    .board-docs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem;
    }

    .board-load-subtitle {
        margin-top: .35rem;
        font-size: .9rem;
        color: #6b7280;
    }

    .board-load-meta {
        margin-top: .75rem;
        color: #4b5563;
        font-size: .87rem;
        justify-content: space-between;
    }

    .board-mini-badge,
    .board-vehicle-tag,
    .board-doc-ref,
    .product-badge,
    .status-badge,
    .board-doc-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .3rem .65rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .board-mini-badge.ok,
    .status-badge.ok,
    .board-vehicle-tag {
        background: #e6f7ef;
        color: #0f7a48;
    }

    .board-mini-badge.warning,
    .status-badge.warning {
        background: #fff2d8;
        color: #a16207;
    }

    .status-badge.muted,
    .board-doc-chip {
        background: #f3f4f6;
        color: #4b5563;
    }

    .board-doc-ref,
    .product-badge {
        background: #18212f;
        color: #ffffff;
    }

    .board-capacity-box {
        min-width: 150px;
        padding: 1rem 1.15rem;
        border-radius: 18px;
        background: linear-gradient(135deg, #e8fff4 0%, #d7f6e5 100%);
        text-align: center;
    }

    .board-capacity-box .capacity-percent {
        font-size: 1.3rem;
        font-weight: 800;
        color: #0f7a48;
    }

    .board-capacity-box .capacity-percent.danger {
        color: #b42318;
    }

    .board-capacity-box .capacity-total {
        margin-top: .2rem;
        font-size: .95rem;
        font-weight: 700;
        color: #223041;
    }

    .board-header-details {
        color: #677487;
        font-size: .92rem;
    }

    .board-tanks {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
    }

    .tank-card {
        padding: 1rem;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e5ebf2;
    }

    .tank-title {
        font-size: .82rem;
        font-weight: 700;
        color: #445063;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .tank-fill {
        margin-top: .8rem;
        height: 72px;
        border-radius: 16px;
        background: #edf1f6;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .tank-fill-bar {
        width: 100%;
        background: linear-gradient(180deg, #0f7a48 0%, #115b3a 100%);
        border-radius: 12px 12px 0 0;
        min-height: 0;
        transition: width .3s ease;
        height: 100%;
        transform-origin: left center;
    }

    .tank-product {
        margin-top: .7rem;
        font-weight: 700;
        color: #1f7a5a;
    }

    .tank-note {
        margin-top: .15rem;
        color: #667085;
        font-size: .82rem;
        min-height: 34px;
    }

    .tank-volume {
        color: #334155;
        font-size: .92rem;
    }

    .board-stop-list {
        display: flex;
        flex-direction: column;
        gap: .8rem;
    }

    .board-stop-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
        padding: .95rem 1rem;
        border: 1px solid #e6ebf2;
        border-radius: 16px;
        background: #ffffff;
    }

    .board-stop-order {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #ff8f1f;
        color: #ffffff;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .board-stop-main {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        align-items: baseline;
    }

    .board-stop-main span,
    .board-stop-meta {
        color: #667085;
        font-size: .9rem;
    }

    .board-stop-meta {
        margin-top: .3rem;
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
    }

    .board-stop-tags {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .45rem;
    }

    .board-footer-title {
        font-weight: 800;
        color: #b45309;
    }

    .board-footer-table thead th {
        border-top: 0;
        color: #6b7280;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .empty-state-box {
        padding: 1.25rem;
        text-align: center;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px dashed #cdd6e1;
        color: #667085;
    }

    @media (max-width: 991.98px) {
        .board-stop-item {
            grid-template-columns: 36px minmax(0, 1fr);
        }

        .board-stop-tags {
            grid-column: 2;
            align-items: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
        }
    }
</style>
@endsection