@extends('portal.layout')

@section('title', 'Invoice ' . $sale->invoice_no)

@section('content')
<div class="fade-in">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold">Invoice {{ $sale->invoice_no }}</h1>
            <p class="text-slate-400 mt-1">Date: {{ displayDate($sale->created_at) }}</p>
        </div>
        <a href="{{ route('portal.invoices') }}" class="btn-primary px-4 py-2 rounded-xl text-sm font-semibold text-white no-print">
            <i class="fas fa-arrow-left mr-1"></i> Back
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
        <div class="glass-card rounded-xl p-6">
            <p class="text-sm text-slate-400">Total Amount</p>
            <p class="text-2xl font-bold mt-1">{{ number_format($sale->total_amount, 2) }}</p>
        </div>
        <div class="glass-card rounded-xl p-6">
            <p class="text-sm text-slate-400">Paid Amount</p>
            <p class="text-2xl font-bold mt-1">{{ number_format($sale->paid_amount, 2) }}</p>
        </div>
        @php $remainingInvoice = $sale->remaining_amount; @endphp
        <div class="glass-card rounded-xl p-6" style="{{ $remainingInvoice > 0 ? 'border: 2px solid rgba(52,211,153,0.3);' : '' }}">
            <p class="text-sm {{ $remainingInvoice > 0 ? 'text-emerald-400' : 'text-slate-400' }}">Remaining</p>
            <p class="text-2xl font-bold mt-1 {{ $remainingInvoice > 0 ? 'text-emerald-400' : '' }}">{{ number_format($remainingInvoice, 2) }}</p>
        </div>
        <div class="glass-card rounded-xl p-6">
            <p class="text-sm text-slate-400">Status</p>
            @if($sale->payment_status === 'paid')
                <span class="badge px-3 py-1 rounded-full text-sm font-medium text-emerald-400 mt-1 inline-block">Paid</span>
            @elseif($sale->payment_status === 'partial')
                <span class="badge px-3 py-1 rounded-full text-sm font-medium text-amber-400 mt-1 inline-block">Partial</span>
            @else
                <span class="badge px-3 py-1 rounded-full text-sm font-medium text-red-400 mt-1 inline-block">Unpaid</span>
            @endif
            @if($gatewayEnabled && $sale->payment_status !== 'paid')
                <a href="{{ route('portal.invoices.pay', $sale) }}" class="btn-primary mt-4 w-full px-4 py-2 rounded-xl text-sm font-semibold text-white inline-block text-center no-print">
                    <i class="fas fa-credit-card mr-1"></i> Pay Now
                </a>
            @endif
        </div>
    </div>

    <div class="glass-card rounded-xl p-6 mb-6">
        <h2 class="text-lg font-bold mb-4">Items</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-slate-400 border-b border-white/10">
                        <th class="pb-3 font-semibold">Product</th>
                        <th class="pb-3 font-semibold">Price</th>
                        <th class="pb-3 font-semibold">Qty</th>
                        <th class="pb-3 font-semibold">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sale->items as $item)
                        <tr class="border-b border-white/5">
                            <td class="py-3 font-medium">
                                {{ $item->product->name ?? 'N/A' }}
                                @if($item->is_promo)
                                    <span class="badge px-1.5 py-0.5 rounded text-xs font-semibold text-rose-400 ml-1">PROMO</span>
                                @endif
                            </td>
                            <td class="py-3 text-slate-400">
                                @if($item->is_promo && $item->regular_price)
                                    <span class="line-through text-slate-500 mr-1">{{ number_format($item->regular_price, 2) }}</span>
                                @endif
                                {{ number_format($item->price, 2) }}
                            </td>
                            <td class="py-3">{{ $item->quantity }}</td>
                            <td class="py-3">{{ number_format($item->subtotal, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="font-bold">
                        <td colspan="3" class="pt-4 text-right">Subtotal:</td>
                        <td class="pt-4">{{ number_format($sale->subtotal, 2) }}</td>
                    </tr>
                    @if($sale->discount > 0)
                    <tr>
                        <td colspan="3" class="pt-2 text-right text-slate-400">Discount:</td>
                        <td class="pt-2 text-slate-400">-{{ number_format($sale->discount, 2) }}</td>
                    </tr>
                    @endif
                    @if($sale->tax > 0)
                    <tr>
                        <td colspan="3" class="pt-2 text-right text-slate-400">Tax:</td>
                        <td class="pt-2 text-slate-400">{{ number_format($sale->tax, 2) }}</td>
                    </tr>
                    @endif
                    <tr class="font-bold text-lg">
                        <td colspan="3" class="pt-2 text-right">Total:</td>
                        <td class="pt-2">{{ number_format($sale->total_amount, 2) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    @if($sale->payments->count())
    <div class="glass-card rounded-xl p-6">
        <h2 class="text-lg font-bold mb-4">Payment History</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-slate-400 border-b border-white/10">
                        <th class="pb-3 font-semibold">Date</th>
                        <th class="pb-3 font-semibold">Amount</th>
                        <th class="pb-3 font-semibold">Method</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sale->payments as $payment)
                        <tr class="border-b border-white/5">
                            <td class="py-3">{{ displayDate($payment->created_at) }}</td>
                            <td class="py-3 font-medium">{{ number_format($payment->amount, 2) }}</td>
                            <td class="py-3 text-slate-400">{{ $payment->payment_method ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>
@endsection