<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ $invoice->invoice_number }}</title>
    <style>
        body {
            font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
            background: #F7FBFC;
            color: #1A222B;
            margin: 0;
            padding: 0;
            font-size: 15px;
        }
        .container {
            max-width: 850px;
            margin: 24px auto 0 auto;
            background: #fff;
            border-radius: 13px;
            box-shadow: 0 2px 14px rgba(40,105,160,0.08);
            padding: 35px 32px 18px 32px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 2px solid #E6EBF0;
            padding-bottom: 13px;
        }
        .logo-company {
            display: flex;
            align-items: flex-start;
        }
        .logo {
            height: 50px;
            margin-right: 13px;
        }
        .company-details {
            margin-top: 0;
            font-size: 15px;
        }
        .company-title {
            font-size: 21px;
            font-weight: bold;
            margin-bottom: 2px;
        }
        .company-sub {
            font-size: 16px;
            margin-bottom: 8px;
            font-weight: 500;
        }
        .invoice-details {
            text-align: right;
            min-width: 220px;
        }
        .invoice-title {
            font-weight: bold;
            font-size: 23px;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }
        .paid-label {
            margin-top: 8px;
            margin-bottom: 2px;
        }
        .paid-tag {
            background: #23BF47;
            color: #fff;
            font-weight: bold;
            border-radius: 8px;
            padding: 4px 16px 4px 22px;
            font-size: 17px;
            display: inline-block;
            position: relative;
        }
        .paid-tag:before {
            content: '';
            position: absolute;
            left: 7px;
            top: 7px;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
        }
        .paid-date {
            font-size: 14px;
            color: #23BF47;
            margin-top: 2px;
        }

        .bill-section {
            background: #F3F7FB;
            border-radius: 11px;
            padding: 20px 18px 13px 18px;
            margin: 28px 0 16px 0;
            box-shadow: 0 0px 0px #0000;
        }
        .bill-title {
            font-size: 17px;
            font-weight: bold;
            color: #23355D;
            margin-bottom: 4px;
            letter-spacing: 0.3px;
        }
        .bill-details {
            font-size: 15px;
            line-height: 1.6;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 9px;
            margin-bottom: 13px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
        }
        th {
            background: #F6F7F9;
            padding: 10px 0;
            font-size: 15px;
            color: #6781A6;
            font-weight: bold;
            border: none;
            text-align: left;
        }
        td {
            padding: 7px 0;
            color: #222;
            font-size: 15px;
            border: none;
            text-align: left;
        }
        tbody tr:not(:last-child) td {
            border-bottom: 1px solid #E6EBF0;
        }
        tbody tr:last-child td {
            border-bottom: none;
        }
        .totals-row td {
            font-weight: bold;
            color: #23355D;
        }
        .gst-row td {
            font-weight: 500;
            color: #23BF47;
        }
        .total-row td {
            font-weight: bold;
            font-size: 17px;
            color: #222;
        }
        .payment-info {
            margin-top: 24px;
            margin-bottom: 9px;
            font-size: 15px;
        }
        .ref-number {
            font-size: 14px;
            color: #6781A6;
            margin-bottom: 8px;
            margin-top: 2px;
        }
        .footer {
            border-top: 1.2px solid #E6EBF0;
            margin-top: 25px;
            padding-top: 12px;
            font-size: 16px;
            color: #888;
            text-align: center;
        }
        .footer strong {
            color: #222;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header Section -->
        <div class="header">
            <div class="logo-company">
            <img src="{{ public_path('images/kent_logo2.png') }}" class="logo">
                <div class="company-details">
                    <div class="company-title">{{ $invoice->company_name ?? 'Kent International Pvt. Ltd.' }}</div>
                    <div class="company-sub"></div>
                    {{ $invoice->company_address ?? '123 Business Park, Sector 5' }}<br>
                    {{ $invoice->company_city ?? 'Gurugram, Haryana 122001' }}<br>
                    {{ $invoice->company_country ?? 'India' }}<br>
                    GST: {{ $invoice->company_gst ?? 'GST123456789' }}<br>
                    Email: {{ $invoice->company_email ?? 'billing@kent.com' }}<br>
                    Phone: {{ $invoice->company_phone ?? '+91 124 123 4567' }}
                </div>
            </div>
            <div class="invoice-details">
                <div class="invoice-title">INVOICE</div>
                Invoice #: {{ $invoice->invoice_number }}<br>
                Issue Date: {{ date('d M Y', strtotime($invoice->invoice_date)) }}<br>
                Due Date: {{ date('d M Y', strtotime($invoice->due_date)) }}
                @if(strtolower($invoice->status) == 'paid')
                <div class="paid-label">
                    <span class="paid-tag">Paid</span>
                </div>
                <div class="paid-date">
                    Paid on: {{ date('d M Y', strtotime($invoice->paid_date ?? now())) }}
                </div>
                @else
                <div class="paid-date" style="color:#d00;">Status: {{ ucfirst($invoice->status) }}</div>
                @endif
            </div>
        </div>
        <!-- Bill To Section -->
        <div class="bill-section">
            <div class="bill-title">Bill To</div>
            <div class="bill-details">
                <strong>{{ $invoice->customer_name }}</strong><br>
                {{ $invoice->customer_address }}<br>
                GST: {{ $invoice->customer_gst ?? '-' }}<br>
                Email: {{ $invoice->customer_email }}<br>
                Phone: {{ $invoice->customer_mobile }}
            </div>
        </div>
        <!-- Items Table -->
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Qty</th>
                    <th>Rate (₹)</th>
                    <th>Amount (₹)</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $item)
                <tr>
                    <td>{{ $item->description }}</td>
                    <td>{{ $item->qty }}</td>
                    <td>{{ number_format($item->price, 0) }}</td>
                    <td>{{ number_format($item->ttl_amount, 0) }}</td>
                </tr>
                @endforeach
                <tr class="totals-row">
                    <td colspan="3" style="text-align:right;">Subtotal:</td>
                    <td>{{ number_format($invoice->subtotal, 0) }}</td>
                </tr>
                <tr class="gst-row">
                    <td colspan="3" style="text-align:right;">GST ({{ $invoice->gst_percent }}%):</td>
                    <td>{{ number_format($invoice->gst_amount, 0) }}</td>
                </tr>
                <tr class="total-row">
                    <td colspan="3" style="text-align:right;">Total:</td>
                    <td>{{ number_format($invoice->final_amount_with_gst, 0) }}</td>
                </tr>
            </tbody>
        </table>
        <!-- Payment Info & Reference -->
        <div class="payment-info">
            <strong>Payment Method:</strong> {{ $invoice->payment_method ?? 'Bank Transfer' }}
        </div>
        <div class="ref-number">
            Reference Number: {{ $invoice->reference_no ?? "REF123456789" }}
        </div>
        <!-- Footer -->
        <div class="footer">
            Thank you for your business!<br>
            For any queries, please contact us at <strong>{{ $invoice->company_email ?? 'billing@kent.com' }}</strong>
        </div>
    </div>
</body>
</html>
