<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Commercial Invoice - {{ $invoice->invoice_number }}</title>
    @include('components.style')
    <style>
        body {
            background-color: #fff;
            padding: 20px;
        }
        .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 30px;
            border: 1px solid #eee;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            font-size: 16px;
            line-height: 24px;
            font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color: #555;
        }
        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
            border-collapse: collapse;
        }
        .invoice-box table td, .invoice-box table th {
            padding: 5px;
            vertical-align: top;
        }
        .invoice-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .invoice-title {
            font-size: 32px;
            font-weight: bold;
            color: #333;
        }
        .company-info {
            text-align: right;
        }
        .customer-info {
            margin-bottom: 20px;
            padding-top: 10px;
            border-top: 2px solid #eee;
        }
        .items-table {
            margin-top: 20px;
        }
        .items-table th {
            background: #f8f8f8;
            border-bottom: 2px solid #ddd;
        }
        .items-table td, .items-table th {
            border: 1px solid #eee;
        }
        .summary-box {
            width: 300px;
            float: right;
            margin-top: 20px;
        }
        @media print {
            .invoice-box {
                box-shadow: none;
                border: 0;
            }
            body {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            .no-print {
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="text-center mb-3 no-print">
        <button onclick="window.print()" class="btn btn-primary"><i class="fas fa-print"></i> Print Invoice</button>
        <button onclick="window.close()" class="btn btn-secondary">Close</button>
    </div>

    <div class="invoice-box">
        <div class="invoice-header">
            <div>
                <img src="{{ asset('assets/images/logo.png') }}" style="max-height: 60px;" alt="Logo" onerror="this.style.display='none'">
                <h4 class="mt-2">{{ config('app.name', 'Habib Cables') }}</h4>
            </div>
            <div class="company-info">
                <div class="invoice-title">COMMERCIAL INVOICE</div>
                <div class="mt-2">
                    <strong>Invoice #:</strong> {{ $invoice->invoice_number }}<br>
                    <strong>Date:</strong> {{ $invoice->invoice_date ? $invoice->invoice_date->format('M d, Y') : 'N/A' }}<br>
                    <strong>Status:</strong> {{ ucfirst(str_replace('_', ' ', $invoice->status)) }}
                </div>
            </div>
        </div>

        <div class="customer-info row">
            <div class="col-6">
                <strong>Billed To:</strong><br>
                {{ $invoice->customer->name ?? 'N/A' }}<br>
                {{ $invoice->customer->contact->phone ?? '' }}<br>
                {{ $invoice->customer->contact->email ?? '' }}
            </div>
            <div class="col-6 text-end">
                <strong>Sales Rep:</strong><br>
                {{ $invoice->supervisingEmployee->name ?? 'N/A' }}
            </div>
        </div>

        <table class="items-table table table-sm mt-4">
            <thead>
                <tr>
                    <th>Item</th>
                    <th class="text-center">Qty</th>
                    <th class="text-end">Price</th>
                    <th class="text-end">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $item)
                    <tr>
                        <td>
                            <strong>{{ $item->item->name ?? 'N/A' }}</strong><br>
                            <small class="text-muted">{{ $item->item->sku ?? '' }}</small>
                        </td>
                        <td class="text-center">{{ $item->ordered_quantity }}</td>
                        <td class="text-end">{{ number_format($item->ordered_unit_price, 2) }}</td>
                        <td class="text-end">{{ number_format($item->ordered_total, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="row mt-4">
            <div class="col-6">
                @if($invoice->remarks)
                    <strong>Notes:</strong><br>
                    <p class="text-muted">{{ $invoice->remarks }}</p>
                @endif
            </div>
            <div class="col-6">
                <table class="table table-sm table-borderless summary-box">
                    <tr>
                        <td><strong>SubTotal:</strong></td>
                        <td class="text-end">Rs. {{ number_format($invoice->total_ordered_amount, 2) }}</td>
                    </tr>
                    @if($invoice->discount_amount > 0)
                    <tr>
                        <td><strong>Discount:</strong></td>
                        <td class="text-end text-danger">-Rs. {{ number_format($invoice->discount_amount, 2) }}</td>
                    </tr>
                    @endif
                    <tr class="border-top">
                        <td class="fs-5"><strong>Net Total:</strong></td>
                        <td class="text-end fs-5 fw-bold">Rs. {{ number_format($invoice->net_total, 2) }}</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="text-center mt-5 pt-5 border-top text-muted">
            <small>Thank you for your business!</small>
        </div>
    </div>

    @include('components.script')
    <script>
        window.onload = function() {
            // Un-comment to auto-print
            // window.print();
        }
    </script>
</body>
</html>
