@extends('layouts.app')

@section('title', 'Invoice ' . $invoice->invoice_number)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="page-title mb-0">Invoice {{ $invoice->invoice_number }}</h1>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-primary" onclick="window.print()"><i class="bi bi-printer me-1"></i> Print</button>
        <a href="{{ route('bills.show.thermal', $invoice) }}" target="_blank" class="btn btn-outline-secondary">Thermal</a>
        <a href="{{ route('bills.create') }}" class="btn btn-outline-primary">New Bill</a>
        <a href="{{ route('bills.index') }}" class="btn btn-outline-secondary">All Bills</a>
    </div>
</div>

<div class="card" id="invoiceCard">
    <div class="card-body p-4">
        <div class="row mb-4">
            <div class="col-6">
                <h5 class="fw-bold mb-1">Fashion Mart</h5>
                <small class="text-muted">Invoice</small>
            </div>
            <div class="col-6 text-end">
                <strong>{{ $invoice->invoice_number }}</strong><br>
                <span class="text-muted">{{ $invoice->invoice_date->format('d M Y') }}</span>
            </div>
        </div>
        @if($invoice->customer)
            <div class="mb-3">
                <span class="text-muted small">Bill to</span>
                <div class="fw-medium">{{ $invoice->customer->name }}</div>
                @if($invoice->customer->phone)<small class="text-muted">{{ $invoice->customer->phone }}</small>@endif
                @if($invoice->customer->address)<div class="small text-muted">{{ nl2br(e($invoice->customer->address)) }}</div>@endif
            </div>
        @else
            <div class="mb-3 text-muted small">Walk-in customer</div>
        @endif

        <table class="table table-sm table-bordered align-middle mb-0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Product</th>
                    <th class="text-center">Qty</th>
                    <th class="text-end">Rate</th>
                    <th class="text-end">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $idx => $item)
                    <tr>
                        <td>{{ $idx + 1 }}</td>
                        <td>{{ $item->product_name }}</td>
                        <td class="text-center">{{ $item->quantity }}</td>
                        <td class="text-end">{{ number_format($item->unit_price, 2) }}</td>
                        <td class="text-end">{{ number_format($item->total, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="row justify-content-end mt-3">
            <div class="col-md-5">
                <table class="table table-sm mb-0">
                    <tr>
                        <td class="text-muted">Subtotal</td>
                        <td class="text-end">{{ number_format($invoice->subtotal, 2) }}</td>
                    </tr>
                    @if($invoice->discount_amount > 0)
                        <tr><td class="text-muted">Discount</td><td class="text-end">- {{ number_format($invoice->discount_amount, 2) }}</td></tr>
                    @endif
                    @if($invoice->gst_amount > 0)
                        <tr><td class="text-muted">GST ({{ $invoice->gst_percent }}%)</td><td class="text-end">{{ number_format($invoice->gst_amount, 2) }}</td></tr>
                    @endif
                    <tr class="fw-bold"><td>Total</td><td class="text-end">{{ number_format($invoice->total, 2) }}</td></tr>
                </table>
                <p class="small text-muted mt-2 mb-0">Payment: <span class="text-capitalize">{{ $invoice->payment_type }}</span></p>
                @if($invoice->notes)<p class="small text-muted mt-1 mb-0">Note: {{ $invoice->notes }}</p>@endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
@media print {
    body * { visibility: hidden; }
    #invoiceCard, #invoiceCard * { visibility: visible; }
    #invoiceCard { position: absolute; left: 0; top: 0; width: 100%; }
    .main-wrap > .d-flex, .btn, .alert { display: none !important; }
}
</style>
@endpush
@endsection