@extends('layouts.app')
@section('title', $sale->reference)

@section('content')
    <div class="mb-4 flex items-center justify-between">
        <a href="{{ route('sales.index') }}" class="text-sm text-brand-600 hover:underline">&larr; {{ __('Back') }}</a>
        <div class="flex gap-2">
            <a href="{{ route('pos.ticket', $sale) }}" class="btn-secondary"><x-icon name="printer" class="h-4 w-4"/>{{ __('Ticket') }}</a>
            <a href="{{ route('pos.ticket.pdf', $sale) }}" class="btn-secondary">{{ __('Ticket PDF') }}</a>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="card lg:col-span-2">
            <div class="flex items-start justify-between">
                <div>
                    <h2 class="text-lg font-bold text-slate-800">{{ $sale->reference }}</h2>
                    <p class="text-sm text-slate-400">{{ $sale->created_at->format('d/m/Y H:i') }}</p>
                </div>
                <span class="badge {{ $sale->status === 'paid' ? 'bg-brand-100 text-brand-700' : 'bg-amber-100 text-amber-700' }}">{{ __(ucfirst(str_replace('_', ' ', $sale->status))) }}</span>
            </div>

            <table class="mt-4 min-w-full divide-y divide-slate-100">
                <thead>
                    <tr>
                        <th class="th">{{ __('Product') }}</th>
                        <th class="th">{{ __('Batch') }}</th>
                        <th class="th">{{ __('Qty') }}</th>
                        <th class="th">{{ __('Price') }}</th>
                        <th class="th text-right">{{ __('Total') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach ($sale->items as $item)
                        <tr>
                            <td class="td">{{ $item->product_name }}</td>
                            <td class="td font-mono text-xs">{{ $item->batch?->batch_number }}</td>
                            <td class="td">{{ $item->quantity }}</td>
                            <td class="td">{{ money($item->unit_price) }}</td>
                            <td class="td text-right font-semibold">{{ money($item->line_total) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="card">
            <dl class="space-y-2 text-sm">
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Client') }}</dt><dd>{{ $sale->client?->name ?? __('Walk-in') }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Employee') }}</dt><dd>{{ $sale->employee?->name }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Payment') }}</dt><dd>{{ __(ucfirst($sale->payment_method)) }}</dd></div>
                <div class="flex justify-between border-t border-slate-100 pt-2"><dt class="text-slate-400">{{ __('Subtotal') }}</dt><dd>{{ money($sale->subtotal) }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Discount') }}</dt><dd>- {{ money($sale->discount) }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('VAT') }}</dt><dd>{{ money($sale->vat) }}</dd></div>
                <div class="flex justify-between border-t border-slate-100 pt-2 text-base font-bold"><dt>{{ __('Total') }}</dt><dd>{{ money($sale->total) }}</dd></div>
            </dl>
        </div>
    </div>
@endsection