@extends('layouts.app')

@section('header_title', 'Historico do Cliente')
@section('header_description', 'Visualize compras e comportamento de consumo.')

@section('content')
<section class="kpi-grid">
    <article class="card kpi-card">
        <p class="kpi-label">Cliente</p>
        <h3>{{ $customer->name }}</h3>
        <span class="kpi-delta">{{ $customer->phone ?: 'Sem telefone' }}</span>
    </article>

    <article class="card kpi-card">
        <p class="kpi-label">Total Comprado</p>
        <h3>R$ {{ number_format($totalSpent, 2, ',', '.') }}</h3>
        <span class="kpi-delta">Historico total</span>
    </article>

    <article class="card kpi-card">
        <p class="kpi-label">Pedidos</p>
        <h3>{{ $totalOrders }}</h3>
        <span class="kpi-delta">Compras concluidas</span>
    </article>

    <article class="card kpi-card">
        <p class="kpi-label">Ultima Compra</p>
        <h3>{{ $lastPurchaseAt ? \Carbon\Carbon::parse($lastPurchaseAt)->format('d/m/Y') : '-' }}</h3>
        <span class="kpi-delta">Data mais recente</span>
    </article>

    <article class="card kpi-card">
        <p class="kpi-label">Limite de Credito</p>
        <h3>R$ {{ number_format((float) $customer->credit_limit, 2, ',', '.') }}</h3>
        <span class="kpi-delta">Usado: R$ {{ number_format((float) $customer->current_credit_used, 2, ',', '.') }}</span>
    </article>

    <article class="card kpi-card">
        <p class="kpi-label">Pontos Atuais</p>
        <h3>{{ $customer->loyalty_points }}</h3>
        <span class="kpi-delta">Total ganho: {{ $customer->loyalty_total_earned }}</span>
    </article>
</section>

<section class="page-head-row" style="margin-top: 14px;">
    <h2>Historico de Compras</h2>
    <a href="{{ route('customers.index') }}" class="secondary-btn">Voltar</a>
</section>

<article class="card panel">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Venda</th>
                    <th>Data</th>
                    <th>Total</th>
                    <th>Pagamentos</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($sales as $sale)
                    <tr>
                        <td>{{ $sale->number }}</td>
                        <td>{{ $sale->sold_at?->format('d/m/Y H:i') }}</td>
                        <td>R$ {{ number_format((float) $sale->total, 2, ',', '.') }}</td>
                        <td>
                            @forelse ($sale->payments as $payment)
                                <span>{{ str_replace('_', ' ', ucfirst($payment->method)) }}: R$ {{ number_format((float) $payment->amount, 2, ',', '.') }}</span><br>
                            @empty
                                -
                            @endforelse
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="empty-row">Sem compras registradas para este cliente.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</article>

<div class="pagination-wrap">{{ $sales->links() }}</div>

<section class="page-head-row" style="margin-top: 14px;">
    <h2>Extrato de Pontos</h2>
</section>

<article class="card panel">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Tipo</th>
                    <th>Pontos</th>
                    <th>Descricao</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($pointTransactions as $tx)
                    <tr>
                        <td>{{ $tx->created_at?->format('d/m/Y H:i') }}</td>
                        <td>{{ strtoupper($tx->type) }}</td>
                        <td>{{ $tx->points }}</td>
                        <td>{{ $tx->description ?: '-' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="empty-row">Sem movimentacoes de pontos.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</article>
@endsection