@extends('layouts.app')
@section('title', 'Sale ' . $sale->invoice_no)
@section('content')
@php
    $qty = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
    $method = fn ($key) => $methodNames[$key] ?? ucwords(str_replace('_', ' ', (string) $key));
    $paid = (float) ($sale->total_paid ?: $sale->payments->sum('amount'));
    $change = max(0, $paid - (float) $sale->total_amount);
    $status = strtolower((string) $sale->payment_status);
    $cashier = $sale->user?->name ?? $sale->register?->user?->name;
@endphp

<div class="container-fluid py-4 sale-page">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-8">

            <!-- Actions -->
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <a href="{{ route('sales.index') }}" class="btn btn-light border btn-sm">
                    <i class="bi bi-arrow-left me-1"></i> Back to Sales
                </a>
                <div class="d-flex gap-2 flex-wrap">
                    <x-report-buttons />
                    @if(auth()->user()->hasPermission('edit_pos_sell'))
                        <a href="{{ route('sales.edit', $sale->id) }}" class="btn btn-primary btn-sm">
                            <i class="bi bi-pencil me-1"></i> Edit Sale
                        </a>
                    @endif
                    @if(auth()->user()->hasPermission('delete_pos_sell'))
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmDelete({{ $sale->id }})">
                            <i class="bi bi-trash me-1"></i> Delete
                        </button>
                    @endif
                </div>
            </div>

            <!-- Invoice -->
            <div class="invoice card border-0 shadow-sm mb-4">
                <!-- Letterhead -->
                <div class="invoice-head">
                    <div class="d-flex align-items-center gap-3">
                        @if($letterhead['logo'])
                            <img src="{{ $letterhead['logo'] }}" alt="" class="invoice-logo">
                        @else
                            <div class="invoice-initials">{{ $letterhead['initials'] }}</div>
                        @endif
                        <div>
                            <div class="invoice-shop">{{ $letterhead['name'] }}</div>
                            <div class="invoice-shop-meta">
                                {{ collect([$letterhead['address'], $letterhead['phone'] ? 'Tel: ' . $letterhead['phone'] : null, $letterhead['email']])->filter()->implode(' · ') }}
                                @if($letterhead['tax_number'])<br>TPIN: {{ $letterhead['tax_number'] }}@endif
                            </div>
                        </div>
                    </div>
                    <div class="text-sm-end mt-3 mt-sm-0">
                        <div class="invoice-word">Invoice</div>
                        <div class="invoice-number">#{{ $sale->invoice_no }}</div>
                        <div class="d-flex gap-1 justify-content-sm-end mt-2 flex-wrap">
                            <span class="invoice-pill {{ $status === 'paid' ? 'pill-paid' : 'pill-due' }}">{{ ucfirst($status ?: 'unknown') }}</span>
                            @if($sale->is_edited)
                                <span class="invoice-pill pill-edited"><i class="bi bi-pencil-fill me-1"></i>Edited</span>
                            @endif
                            @if($sale->hasDiscount())
                                <span class="invoice-pill pill-paid"><i class="bi bi-tag-fill me-1"></i>Discounted</span>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Who, when, how -->
                <div class="invoice-info row g-0">
                    <div class="col-6 col-md-3 info-cell">
                        <div class="info-label">Billed to</div>
                        <div class="info-value">{{ $sale->customer_name ?: 'Walk-in customer' }}</div>
                        @if($sale->contact_number)<div class="info-sub"><i class="bi bi-telephone me-1"></i>{{ $sale->contact_number }}</div>@endif
                    </div>
                    <div class="col-6 col-md-3 info-cell">
                        <div class="info-label">Date</div>
                        <div class="info-value">{{ $sale->created_at->format('d M Y') }}</div>
                        <div class="info-sub">{{ $sale->created_at->format('H:i') }}</div>
                    </div>
                    <div class="col-6 col-md-3 info-cell">
                        <div class="info-label">Served by</div>
                        <div class="info-value">{{ $cashier ?? '-' }}</div>
                    </div>
                    <div class="col-6 col-md-3 info-cell">
                        <div class="info-label">Payment</div>
                        @if($sale->payment_method === 'split' && $sale->payments->isNotEmpty())
                            <div class="info-value">Split</div>
                            @foreach($sale->payments as $payment)
                                <div class="info-sub">{{ $method($payment->method) }}: {{ formatCurrency($payment->amount) }}</div>
                            @endforeach
                        @else
                            <div class="info-value">{{ $method($sale->payment_method) }}</div>
                        @endif
                    </div>
                </div>

                <!-- Items -->
                <div class="table-responsive">
                    <table class="table invoice-table align-middle mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4" style="width: 44px;">#</th>
                                <th>Product</th>
                                <th class="text-center">Qty</th>
                                <th class="text-end">Unit price</th>
                                <th class="text-end pe-4">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($sale->items as $item)
                                @php $itemBatches = $sale->batches->where('product_id', $item->product_id); @endphp
                                <tr>
                                    <td class="ps-4 text-muted">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="fw-semibold text-dark">{{ $item->product?->name ?? 'Deleted product' }}</div>
                                        <div class="small text-muted">
                                            @if($item->product?->sku)SKU {{ $item->product->sku }}@endif
                                            @if($itemBatches->isNotEmpty())
                                                <span class="ms-1"><i class="bi bi-upc"></i> Batch {{ \App\Services\BatchStock::describe($itemBatches) }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="text-center">{{ $qty($item->quantity) }}</td>
                                    <td class="text-end text-muted">{{ formatCurrency($item->price) }}</td>
                                    <td class="text-end pe-4 fw-semibold">{{ formatCurrency($item->subtotal) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Totals -->
                <div class="invoice-totals">
                    <div class="totals-box">
                        <div class="totals-row"><span>Items</span><span>{{ $qty($sale->items->sum('quantity')) }}</span></div>
                        @if($sale->hasDiscount())
                            <div class="totals-row"><span>Items total</span><span>{{ formatCurrency($sale->grossAmount()) }}</span></div>
                            <div class="totals-row text-success fw-semibold">
                                <span><i class="bi bi-tag-fill me-1"></i>Discount{{ $sale->discount_percent ? ' (' . rtrim(rtrim(number_format($sale->discount_percent, 2), '0'), '.') . '%)' : '' }}</span>
                                <span>- {{ formatCurrency($sale->discount_amount) }}</span>
                            </div>
                            <div class="small text-muted text-end">Reason: {{ $sale->discount_reason }}</div>
                        @endif
                        <div class="totals-row totals-grand"><span>Total</span><span>{{ formatCurrency($sale->total_amount) }}</span></div>
                        <div class="totals-row"><span>Paid</span><span>{{ formatCurrency($paid) }}</span></div>
                        @if($change > 0.004)
                            <div class="totals-row"><span>Change given</span><span>{{ formatCurrency($change) }}</span></div>
                        @endif
                        @if((float) $sale->sell_due > 0)
                            <div class="totals-row text-danger fw-semibold"><span>Balance due</span><span>{{ formatCurrency($sale->sell_due) }}</span></div>
                        @endif
                    </div>
                </div>

                @if(setting('receipt_footer'))
                    <div class="invoice-foot">{{ setting('receipt_footer') }}</div>
                @endif
            </div>

            <!-- Edit history -->
            @if($sale->is_edited && $sale->edit_log)
                @php
                    $editLog = is_string($sale->edit_log) ? json_decode($sale->edit_log, true) : $sale->edit_log;
                    $paymentText = function ($methodKey, $payments) use ($method) {
                        if ($methodKey === 'split' && !empty($payments)) {
                            return collect($payments)->map(fn ($p) => $method($p['method']) . ': ' . formatCurrency($p['amount']))->implode(', ');
                        }
                        return $method($methodKey);
                    };
                @endphp
                <div class="card border-0 shadow-sm mb-4 history-card">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div class="history-icon"><i class="bi bi-clock-history"></i></div>
                            <div>
                                <h5 class="fw-bold mb-0">Changes to this sale</h5>
                                <small class="text-muted">Last edited {{ $sale->edited_at?->format('d M Y, H:i') }}</small>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="compare-box">
                                    <div class="compare-title text-muted"><i class="bi bi-file-earmark-minus me-1"></i> Original sale</div>
                                    <div class="totals-row"><span>Total</span><span>{{ formatCurrency($editLog['original_total'] ?? 0) }}</span></div>
                                    <div class="totals-row"><span>Payment</span><span class="text-end">{{ $paymentText($editLog['original_payment_method'] ?? null, $editLog['original_payments'] ?? []) }}</span></div>
                                    <div class="totals-row"><span>Products</span><span>{{ count($editLog['original_items'] ?? []) }}</span></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="compare-box compare-new">
                                    <div class="compare-title text-primary"><i class="bi bi-file-earmark-check me-1"></i> After the change</div>
                                    <div class="totals-row"><span>Total</span><span class="fw-bold text-primary">{{ formatCurrency($editLog['new_total'] ?? 0) }}</span></div>
                                    <div class="totals-row"><span>Payment</span><span class="text-end">{{ $paymentText($editLog['new_payment_method'] ?? null, $editLog['new_payments'] ?? []) }}</span></div>
                                    <div class="totals-row"><span>Products</span><span>{{ count($editLog['new_items'] ?? []) }}</span></div>
                                </div>
                            </div>
                        </div>

                        @if(($editLog['total_change'] ?? 0) != 0)
                            <div class="alert alert-{{ $editLog['total_change'] > 0 ? 'success' : 'danger' }} d-flex align-items-center mt-3 mb-0 border-0">
                                <i class="bi bi-{{ $editLog['total_change'] > 0 ? 'arrow-up-circle-fill' : 'arrow-down-circle-fill' }} fs-4 me-3"></i>
                                <div>The total was {{ $editLog['total_change'] > 0 ? 'increased' : 'reduced' }} by <strong>{{ formatCurrency(abs($editLog['total_change'])) }}</strong>.</div>
                            </div>
                        @endif

                        @if(isset($editLog['original_items'], $editLog['new_items']))
                            @php
                                $originalItems = collect($editLog['original_items'])->keyBy('product_id');
                                $newItems = collect($editLog['new_items'])->keyBy('product_id');
                                $allProducts = $originalItems->keys()->merge($newItems->keys())->unique();
                            @endphp
                            <h6 class="fw-bold mt-4 mb-2">Products changed</h6>
                            <div class="table-responsive border rounded-3">
                                <table class="table table-sm invoice-table align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th class="ps-3">Product</th>
                                            <th class="text-center">Was</th>
                                            <th class="text-center">Now</th>
                                            <th class="text-end">Price was</th>
                                            <th class="text-end pe-3">Price now</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($allProducts as $productId)
                                            @php
                                                $original = $originalItems->get($productId);
                                                $new = $newItems->get($productId);
                                                $originalQty = $original['quantity'] ?? $original['original_quantity'] ?? 0;
                                                $newQty = $new['quantity'] ?? $new['new_quantity'] ?? 0;
                                                $originalPrice = $original['price'] ?? $original['original_price'] ?? 0;
                                                $newPrice = $new['price'] ?? $new['new_price'] ?? 0;
                                                $changed = $originalQty != $newQty || $originalPrice != $newPrice;
                                            @endphp
                                            <tr class="{{ $changed ? 'row-changed' : '' }}">
                                                <td class="ps-3 fw-medium">{{ $original['product_name'] ?? $new['product_name'] ?? 'Unknown' }}</td>
                                                <td class="text-center {{ $originalQty != $newQty ? 'text-decoration-line-through text-muted' : '' }}">{{ $qty($originalQty) }}</td>
                                                <td class="text-center fw-bold {{ $originalQty != $newQty ? 'text-danger' : '' }}">{{ $qty($newQty) }}</td>
                                                <td class="text-end {{ $originalPrice != $newPrice ? 'text-decoration-line-through text-muted' : '' }}">{{ formatCurrency($originalPrice) }}</td>
                                                <td class="text-end pe-3 fw-bold {{ $originalPrice != $newPrice ? 'text-danger' : '' }}">{{ formatCurrency($newPrice) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif

                        @if(!empty($editLog['history']))
                            <h6 class="fw-bold mt-4 mb-2">Who changed it</h6>
                            <div class="timeline">
                                @foreach(array_reverse($editLog['history']) as $h)
                                    <div class="timeline-item">
                                        <div class="d-flex justify-content-between flex-wrap gap-1">
                                            <strong>{{ $h['by'] ?? 'Unknown' }}</strong>
                                            <span class="text-muted small">{{ \Carbon\Carbon::parse($h['at'])->format('d M Y, H:i') }}{{ !empty($h['via']) ? ' · ' . $h['via'] : '' }}</span>
                                        </div>
                                        <div class="small">{{ formatCurrency($h['from_total'] ?? 0) }} → {{ formatCurrency($h['to_total'] ?? 0) }}</div>
                                        @if(!empty($h['reason']))<div class="small text-muted"><i class="bi bi-chat-left-text me-1"></i>{{ $h['reason'] }}</div>@endif
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            @if(config('brand.full'))
                <p class="text-center text-muted small mb-0">Powered by <span class="fw-medium">{{ config('brand.full') }}</span></p>
            @endif
        </div>
    </div>
</div>

<style>
    .sale-page { background: #f4f6f8; min-height: 100vh; }
    .invoice { border-radius: 14px; overflow: hidden; }
    .invoice-head {
        background: var(--theme-primary); color: #fff; padding: 1.5rem 1.75rem;
        display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;
    }
    .invoice-logo { width: 60px; height: 60px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
    .invoice-initials {
        width: 60px; height: 60px; border-radius: 10px; background: rgba(255,255,255,0.18); color: #fff;
        display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem;
    }
    .invoice-shop { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
    .invoice-shop-meta { font-size: 0.82rem; opacity: 0.85; margin-top: 2px; }
    .invoice-word { text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; opacity: 0.8; }
    .invoice-number { font-size: 1.4rem; font-weight: 800; }
    .invoice-pill { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
    .pill-paid { background: #d1fae5; color: #065f46; }
    .pill-due { background: #fee2e2; color: #991b1b; }
    .pill-edited { background: #fef3c7; color: #92400e; }

    .invoice-info { border-bottom: 1px solid #e5e7eb; }
    .info-cell { padding: 1rem 1.75rem; border-right: 1px solid #f1f5f9; }
    .info-cell:last-child { border-right: 0; }
    .info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; font-weight: 700; }
    .info-value { font-weight: 700; color: #111827; margin-top: 2px; }
    .info-sub { font-size: 0.82rem; color: #6b7280; }

    .invoice-table thead th {
        background: #f8fafc; color: var(--theme-primary); font-size: 0.72rem; text-transform: uppercase;
        letter-spacing: 0.6px; font-weight: 700; border-bottom: 2px solid var(--theme-primary); padding-top: 0.75rem; padding-bottom: 0.75rem;
    }
    .invoice-table td { padding-top: 0.8rem; padding-bottom: 0.8rem; border-color: #f1f5f9; }

    .invoice-totals { display: flex; justify-content: flex-end; padding: 1.25rem 1.75rem; }
    .totals-box { width: 100%; max-width: 320px; }
    .totals-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; color: #374151; }
    .totals-grand {
        border-top: 2px solid var(--theme-primary); border-bottom: 2px solid var(--theme-primary);
        margin: 0.35rem 0; padding: 0.55rem 0; font-size: 1.2rem; font-weight: 800; color: var(--theme-primary);
    }
    .invoice-foot { background: #f8fafc; border-top: 1px solid #e5e7eb; text-align: center; padding: 0.9rem; color: #4b5563; font-size: 0.9rem; }

    .history-card { border-radius: 14px; border-left: 4px solid #f59e0b !important; }
    .history-icon {
        width: 42px; height: 42px; border-radius: 50%; background: #fef3c7; color: #b45309;
        display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }
    .compare-box { border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.9rem 1rem; background: #fff; height: 100%; }
    .compare-new { border-color: var(--theme-primary); }
    .compare-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.4rem; }
    .row-changed td { background: #fffbeb !important; }
    .timeline { border-left: 2px solid #e5e7eb; margin-left: 0.4rem; }
    .timeline-item { position: relative; padding: 0 0 0.9rem 1rem; }
    .timeline-item::before {
        content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
        background: var(--theme-primary); border: 2px solid #fff;
    }

    @media (max-width: 767px) {
        .info-cell { padding: 0.85rem 1rem; border-bottom: 1px solid #f1f5f9; }
        .invoice-head, .invoice-totals { padding-left: 1rem; padding-right: 1rem; }
    }
</style>

<script>
function confirmDelete(saleId) {
    if (confirm('Are you sure you want to delete this sale? This action cannot be undone.')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/sales/${saleId}`;
        form.style.display = 'none';

        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        if (csrfToken) {
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken.getAttribute('content');
            form.appendChild(csrfInput);
        }

        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        form.appendChild(methodInput);

        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection