ladill-pos/resources/views/pos/sales/show.blade.php

<x-app-layout :title="$sale->reference">
    <div class="mx-auto max-w-2xl space-y-5">
        <a href="{{ route('pos.sales.index') }}" class="text-sm text-slate-500 hover:text-slate-700">&larr; Sales</a>

        <div class="rounded-2xl border border-slate-200 bg-white p-6">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <h1 class="text-lg font-semibold text-slate-900">{{ $sale->reference }}</h1>
                    <p class="mt-1 text-sm text-slate-500">{{ $sale->created_at->format('M j, Y g:i A') }}</p>
                </div>
                @php
                    $badge = match ($sale->status) {
                        'paid' => 'bg-green-50 text-green-700',
                        'cancelled' => 'bg-slate-100 text-slate-500',
                        'failed' => 'bg-red-50 text-red-600',
                        default => 'bg-amber-50 text-amber-700',
                    };
                @endphp
                <span class="rounded-full px-3 py-1 text-xs font-semibold capitalize {{ $badge }}">
                    {{ $sale->status }}
                </span>
            </div>

            <dl class="mt-5 grid grid-cols-2 gap-4 text-sm">
                <div><dt class="text-slate-400">Payment</dt><dd class="capitalize text-slate-800">{{ $sale->payment_method }}</dd></div>
                <div><dt class="text-slate-400">Total</dt><dd class="font-semibold text-slate-900">{{ pos_money($sale->total_minor, $sale->currency) }}</dd></div>
                @if ($sale->customer_name)
                    <div><dt class="text-slate-400">Customer</dt><dd class="text-slate-800">{{ $sale->customer_name }}</dd></div>
                @endif
            </dl>

            <table class="mt-6 w-full text-sm">
                <thead class="border-b border-slate-100 text-left text-xs uppercase text-slate-400">
                    <tr><th class="pb-2">Item</th><th class="pb-2 text-right">Qty</th><th class="pb-2 text-right">Amount</th></tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach ($sale->lines as $line)
                        <tr>
                            <td class="py-2 text-slate-800">{{ $line->name }}</td>
                            <td class="py-2 text-right text-slate-600">{{ $line->quantity }}</td>
                            <td class="py-2 text-right text-slate-800">{{ pos_money($line->line_total_minor, $sale->currency) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if ($sale->location?->receipt_footer)
                <p class="mt-6 border-t border-slate-100 pt-4 text-center text-xs text-slate-500">{{ $sale->location->receipt_footer }}</p>
            @endif

            <div class="mt-6 flex flex-wrap gap-2 border-t border-slate-100 pt-4">
                <a href="{{ route('pos.sales.receipt', $sale) }}" target="_blank" rel="noopener"
                   class="inline-flex items-center justify-center rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-slate-800">
                    Print receipt
                </a>
            </div>

            @if ($sale->isPaid() && !empty($invoiceUrl))
                <div class="mt-6 border-t border-slate-100 pt-4">
                    <a href="{{ $invoiceUrl }}" class="btn-primary inline-flex w-full justify-center">Create invoice</a>
                </div>
            @endif

            @unless ($sale->isPaid())
                <div class="mt-6 flex flex-wrap gap-2 border-t border-slate-100 pt-4">
                    @if ($sale->status === 'pending')
                        <form method="post" action="{{ route('pos.sales.cancel', $sale) }}" x-data
                              @submit.prevent="window.ladillConfirm({
                                  title: 'Cancel this sale?',
                                  message: 'Sale {{ $sale->reference }} will be marked cancelled. You can still delete it afterwards.',
                                  confirmLabel: 'Cancel sale',
                                  cancelLabel: 'Keep sale',
                                  variant: 'primary',
                              }).then(ok => ok && $el.submit())">
                            @csrf
                            <button class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-700 transition hover:bg-amber-100">Cancel sale</button>
                        </form>
                    @endif
                    <form method="post" action="{{ route('pos.sales.destroy', $sale) }}" x-data
                          @submit.prevent="window.ladillConfirm({
                              title: 'Delete this sale?',
                              message: 'Sale {{ $sale->reference }} will be permanently deleted. This cannot be undone.',
                              confirmLabel: 'Delete sale',
                              cancelLabel: 'Keep sale',
                              variant: 'danger',
                          }).then(ok => ok && $el.submit())">
                        @csrf
                        @method('DELETE')
                        <button class="rounded-xl border border-red-200 bg-red-50 px-4 py-2 text-sm font-semibold text-red-600 transition hover:bg-red-100">Delete sale</button>
                    </form>
                </div>
            @endunless
        </div>
    </div>
</x-app-layout>