@extends('layouts.app')

@section('title', 'Pedido de Compra Abbott | IntegraçõesVH')
@section('topbar_title', 'Integração Pedido de Compra Abbott (IQVIA)')

@section('content')
<style>
    .abbott-header {
        background: linear-gradient(135deg, rgba(200, 16, 46, 0.12) 0%, rgba(15, 23, 42, 0.4) 100%);
        border: 1px solid rgba(200, 16, 46, 0.25);
        border-radius: 12px;
        padding: 20px 24px;
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }
    .abbott-header-title {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .abbott-header-desc {
        color: var(--text-muted);
        font-size: 0.88rem;
        margin-top: 4px;
    }

    /* CARD DE FILTROS */
    .filter-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 18px 20px;
        margin-bottom: 24px;
        box-shadow: var(--shadow-card);
    }
    .filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: flex-end;
    }
    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        min-width: 180px;
    }
    .filter-label {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }
    .filter-input {
        background: var(--bg-input);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.88rem;
        outline: none;
        transition: all 0.2s;
    }
    .filter-input:focus {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
    }
    .btn-filter {
        background: var(--brand-primary);
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.88rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.2s;
        height: 42px;
    }
    .btn-filter:hover {
        background: var(--brand-primary-hover);
    }
    .btn-clear {
        background: transparent;
        color: var(--text-muted);
        border: 1px solid var(--border-color);
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 42px;
        transition: all 0.2s;
    }
    .btn-clear:hover {
        background: var(--bg-card-hover);
        color: var(--text-main);
    }

    /* TABELA DE PEDIDOS */
    .panel-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 24px;
        box-shadow: var(--shadow-card);
    }
    .panel-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .panel-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .badge-count {
        background: rgba(59, 130, 246, 0.15);
        color: var(--accent-blue);
        border: 1px solid rgba(59, 130, 246, 0.3);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }
    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.86rem;
    }
    .data-table th {
        background: var(--bg-input);
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }
    .data-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color-subtle);
        color: var(--text-main);
        vertical-align: middle;
    }
    .data-table tbody tr:hover {
        background: var(--bg-card-hover);
    }

    .btn-action-send {
        background: rgba(16, 185, 129, 0.12);
        color: var(--accent-green);
        border: 1px solid rgba(16, 185, 129, 0.3);
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
    }
    .btn-action-send:hover {
        background: var(--accent-green);
        color: #ffffff;
    }

    .alert-banner-success {
        background: rgba(16, 185, 129, 0.12);
        border: 1px solid rgba(16, 185, 129, 0.3);
        color: var(--accent-green);
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 0.88rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .alert-banner-error {
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: var(--accent-red);
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 0.88rem;
    }

    .empty-message {
        padding: 36px 20px;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.9rem;
    }
</style>

<div class="abbott-header">
    <div>
        <div class="abbott-header-title">
            <span>📦</span> Pedido Abbott | Pedidos de Compra (Fornecedor 245)
        </div>
        <div class="abbott-header-desc">
            Consulta pedidos de compra diretamente no Oracle (<code>VIMAN.VETEPD01</code>) e dispara a sincronização via API IQVIA.
        </div>
    </div>
    <div class="viman-status-pill">
        <span class="viman-status-dot"></span>
        <span>Oracle VIMAN Conectado</span>
    </div>
</div>

@if (session('success'))
    <div class="alert-banner-success">
        <svg style="width:20px; height:20px; flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        <div>{{ session('success') }}</div>
    </div>
@endif

@if ($errors->any())
    <div class="alert-banner-error">
        @foreach ($errors->all() as $error)
            <div>⚠️ {{ $error }}</div>
        @endforeach
    </div>
@endif

{{-- FORMULÁRIO DE FILTROS --}}
<div class="filter-card">
    <form method="GET" action="{{ route('opme.pedido-compra-abbott.index') }}" class="filter-form">
        <div class="filter-group">
            <label for="pedido" class="filter-label">Número do Pedido</label>
            <input id="pedido" name="pedido" type="text" class="filter-input" value="{{ $pedido }}" placeholder="Ex.: 123456">
        </div>
        <div class="filter-group">
            <label for="data_pedido_de" class="filter-label">Data Inicial</label>
            <input id="data_pedido_de" name="data_pedido_de" type="date" class="filter-input" value="{{ $dataPedidoDe }}">
        </div>
        <div class="filter-group">
            <label for="data_pedido_ate" class="filter-label">Data Final</label>
            <input id="data_pedido_ate" name="data_pedido_ate" type="date" class="filter-input" value="{{ $dataPedidoAte }}">
        </div>
        <div>
            <button type="submit" class="btn-filter">
                <svg style="width:16px; height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                Filtrar Pedidos
            </button>
        </div>
        @if ($pedido !== '' || $dataPedidoDe !== '' || $dataPedidoAte !== '')
            <div>
                <a href="{{ route('opme.pedido-compra-abbott.index') }}" class="btn-clear">Limpar</a>
            </div>
        @endif
    </form>
</div>

{{-- LISTA DE PEDIDOS NO ORACLE --}}
<div class="panel-card">
    <div class="panel-header">
        <div class="panel-title">
            <span>📋</span> Pedidos de Compra Encontrados
            <span class="badge-count">{{ count($pedidos) }}</span>
        </div>
    </div>

    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Número do Pedido</th>
                    <th>Fornecedor</th>
                    <th>Data do Pedido</th>
                    <th style="text-align: right;">Ação</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($pedidos as $pedidoItem)
                    @php
                        $pedidoNumero = $pedidoItem->pedido_numero ?? $pedidoItem->numpedido ?? '-';
                        $fornecedor = $pedidoItem->fornecedor ?? $pedidoItem->pdforn ?? '245';
                        $dataPedido = $pedidoItem->data_pedido ?? $pedidoItem->pddtpd ?? null;
                    @endphp
                    <tr>
                        <td>
                            <strong style="color: var(--brand-primary);">#{{ $pedidoNumero }}</strong>
                        </td>
                        <td>
                            <span>Abbott Laboratórios (Cód {{ $fornecedor }})</span>
                        </td>
                        <td>
                            {{ is_string($dataPedido) ? $dataPedido : ($dataPedido ? \Illuminate\Support\Facades\Date::parse($dataPedido)->format('d/m/Y') : '-') }}
                        </td>
                        <td style="text-align: right;">
                            <form method="POST" action="{{ route('opme.pedido-compra-abbott.executar', ['pedido' => $pedidoNumero]) }}" style="display:inline;" data-confirm="Deseja disparar o envio do pedido #{{ $pedidoNumero }} para a API IQVIA?">
                                @csrf
                                <input type="hidden" name="data_pedido" value="{{ is_string($dataPedido) ? $dataPedido : ($dataPedido ? \Illuminate\Support\Facades\Date::parse($dataPedido)->format('Y-m-d') : '') }}">
                                <button type="submit" class="btn-action-send">
                                    <svg style="width:14px; height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M22 2 11 13"/><path d="m22 2-7 20-4-9-9-4 20-7z"/></svg>
                                    Disparar IQVIA
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="empty-message">
                            Nenhum pedido de compra Abbott encontrado com os filtros selecionados.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- LOGS DO PROCESSAMENTO ABBOTT --}}
<div class="panel-card">
    <div class="panel-header">
        <div class="panel-title">
            <span>📜</span> Logs Recentes do Processamento Abbott
            @if (!empty($logs))
                <span class="badge-count">{{ count($logs) }}</span>
            @endif
        </div>
    </div>

    @if (empty($logs))
        <div class="empty-message">
            Nenhum registro de log recente para este pedido. Selecione um pedido e clique em "Disparar IQVIA" para monitorar.
        </div>
    @else
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Data / Hora</th>
                        <th>Status</th>
                        <th>Número API</th>
                        <th>Mensagem de Retorno</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($logs as $log)
                        <tr>
                            <td>{{ $log['data'] ? \Illuminate\Support\Facades\Date::parse($log['data'])->format('d/m/Y H:i:s') : '-' }}</td>
                            <td>
                                <span class="badge-count" style="background: rgba(16, 185, 129, 0.15); color: var(--accent-green); border-color: rgba(16, 185, 129, 0.3);">
                                    {{ strtoupper($log['status'] ?? 'INFO') }}
                                </span>
                            </td>
                            <td>{{ $log['api_numero'] ?? '-' }}</td>
                            <td style="white-space: pre-wrap; font-family: monospace; font-size: 0.8rem; color: var(--text-muted); max-width: 650px;">{{ $log['observacao'] ?? '-' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection