<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice #{{ $invoice->id }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .info {
            margin-bottom: 20px;
        }
        .info table {
            width: 100%;
        }
        .items {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .items th, .items td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .items th {
            background-color: #f5f5f5;
        }
        .total {
            text-align: right;
            font-size: 1.2em;
            font-weight: bold;
        }
        .print-btn {
            margin-bottom: 20px;
        }
        @media print {
            .print-btn {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="print-btn">
        <button onclick="window.print()">Print</button>
        <button onclick="window.close()">Close</button>
    </div>
     <div class="invoice-box" style="max-width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,0.15); font-size: 14px; line-height: 1.5; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fff; margin-bottom: 30px; page-break-after: always;">

            <!-- Header -->
            <div style="text-align: center; margin-bottom: 30px;">
                <h1 style="margin: 0; font-size: 32px; font-weight: bold;">STARUP MIND</h1>
                <p style="margin: 5px 0 0; font-size: 16px;">Your Trusted Technology Partner</p>
            </div>

    <div class="header">
        <h1>INVOICE</h1>
        <p>Invoice #{{ $invoice->id }}</p>
    </div>

    <div class="info">
        <table>
            <tr>
                <td>
                    <strong>Customer:</strong> {{ $invoice->customer->name ?? '-' }}<br>
                    @if($invoice->customer->email)
                        {{ $invoice->customer->email }}<br>
                    @endif
                    @if($invoice->customer->phone)
                        {{ $invoice->customer->phone }}
                    @endif
                </td>
                <td style="text-align: right;">
                    <strong>Invoice Date:</strong> {{ $invoice->date->format('M d, Y') }}<br>
                    @if($invoice->due_date)
                        <strong>Due Date:</strong> {{ $invoice->due_date->format('M d, Y') }}<br>
                    @endif
                    <strong>Status:</strong> {{ ucfirst($invoice->status) }}
                </td>
            </tr>
        </table>
    </div>

    <table class="items">
        <thead>
            <tr>
                 <th>{{ $invoice->items->first()?->service_id ? 'Service' : 'Product' }}</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Subtotal</th>
            </tr>
        </thead>
        <tbody>
            @forelse($invoice->items as $item)
                <tr>
                    <td>{{ $item->service?->name ?? $item->product?->name ?? '-' }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>{{ number_format($item->unit_price, 2) }}</td>
                   <td>{{ number_format($item->total, 2) }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" style="text-align: center;">No items found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <div class="total">
        <p>Total: {{ number_format($invoice->total, 2) }}</p>
    </div>

    @if($invoice->notes)
        <div style="margin-top: 30px;">
            <strong>Notes:</strong>
            <p>{{ $invoice->notes }}</p>
        </div>
    @endif
</body>
</html>
