<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ $invoice->type == 'sale' ? 'Receipt' : 'Invoice' }} #{{ $invoice->invoice_number ?? $invoice->id }}</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, Helvetica, sans-serif; font-size:12pt; color:#1f2937; line-height:1.4; padding:0; background:#f8fafc; }

.invoice-container { width:100%; padding:0; background:white; position:relative; }

/* Header */
.header-section { width:100%; background:#f5365c; /* fallback for gradient */ padding:20px; color:white; display:table; }
.header-logo { display:block; width:80px; height:80px; text-align:center; vertical-align:middle; border-radius:50%; background:white; padding:10px; }
.header-logo img { max-width:60px; max-height:60px; width:auto; height:auto; object-fit:contain; }
.header-company { display:table-cell; vertical-align:middle; padding-left:20px; }
.header-company .company-name { font-size:20pt; font-weight:bold; color:white; }
.header-company .company-address { font-size:10pt; color:white; line-height:1.3; margin-top:5px; }
.header-contact { display:table-cell; vertical-align:middle; text-align:right; font-size:10pt; min-width:200px; }
.vat-card { border:1px solid rgba(255,255,255,0.5); padding:5px; border-radius:5px; margin-bottom:5px; }
.vat-label { font-weight:bold; text-transform:uppercase; font-size:9pt; color:white; }
.vat-number { font-weight:bold; font-size:10pt; color:white; }
.contact-info strong { color:white; }
.contact-info { line-height:1.2; }

/* Customer & Invoice Details */
.details-section { width:100%; display:table; margin-top:20px; padding:0 20px; }
.customer-info { display:table-cell; vertical-align:top; width:50%; padding-right:10px; }
.invoice-info { display:table-cell; vertical-align:top; width:50%; padding-left:10px; }
.customer-card { border:1px solid #f3f4f6; background:#f9fafb; padding:10px; border-radius:5px; font-size:10pt; }
.invoice-title { font-size:24pt; font-weight:bold; color:#111827; }
.paid-badge { background:#10b981; color:white; padding:5px 10px; border-radius:5px; font-size:10pt; font-weight:bold; display:inline-block; margin-top:5px; }
.invoice-meta { margin-top:10px; font-size:10pt; }
.invoice-meta div { margin-bottom:5px; }
.meta-label { font-weight:bold; color:#6b7280; display:inline-block; width:120px; }
.meta-value { color:#111827; font-weight:bold; display:inline-block; }
.customer-info h3 { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; margin-bottom: 0.75rem;}

/* Items Table */
.items-section { margin-top:20px; padding:0 20px; margin-bottom: 20px;}
.items-section table { width:100%; border-collapse: separate; border-spacing:0; font-size:10pt; }
.items-section th, .items-section td { border:1px solid #EEE; padding:8px; text-align:left; }
.items-section th { background: #6b7280; color:white; text-transform:uppercase; font-size:9pt; }
.items-section th:first-child { border-top-left-radius:8px; }
.items-section th:last-child { border-top-right-radius:8px; }
.items-section td { font-size:10pt; }
.items-section td:nth-child(1) { text-align:center; }
.items-section td:nth-child(3), .items-section td:nth-child(4), .items-section td:nth-child(5) { text-align:right; }
.items-section tr:last-child td:first-child { border-bottom-left-radius:8px; }
.items-section tr:last-child td:last-child { border-bottom-right-radius:8px; }

/* Totals */
.totals-section {margin-right: 20px;}
.totals-card { width:50%; float:right; border:1px solid #f3f4f6; background:#f9fafb; padding:10px; border-radius:5px; font-size:10pt; clear:both; }
.totals-row, .totals-final { width:100%; margin-bottom:5px; overflow:auto; }
.totals-label { color:#6b7280; font-weight:bold; }
.totals-amount { font-weight:bold; color:#111827; text-align:right; display:block; }
.totals-final { border-top:2px solid #e5e7eb; padding-top:5px; font-weight:bold; font-size:12pt; }

/* Payment Section */
.payment-section { margin-top:150px; padding:10px 20px; border:1px solid #fed7aa; border-radius:5px; background:#fef3e2; font-size:10pt; clear:both; margin-left:20px; margin-right: 20px; }
.payment-title { font-weight:bold; margin-bottom:5px; }
.payment-note { font-style:italic; margin-bottom:5px; }

/* Paid Stamp */
.paid-stamp { position:absolute; top:20%; right:60px; transform:translateY(-50%) rotate(-20deg); background:rgba(16,185,129,0.1); border:2px solid #10b981; color:#10b981; padding:10px 20px; border-radius:5px; font-weight:bold; font-size:18pt; }

@media print {
    body { background:white; padding:0; }
    .invoice-container { padding:0; }
    .paid-stamp { background:rgba(16,185,129,0.2); }
}
</style>
</head>
<body>
<div class="invoice-container">
    <!-- Header -->
    <div class="header-section">
        <div class="header-logo">
            <img src="{{ public_path('images/icons/logo_squre.png') }}" alt="CA Logo" />
        </div>
        <div class="header-company">
            <div class="company-name">{{ $company['name'] ?? 'Wiseserve Ltd' }}</div>
            <div class="company-address">
                {{ $company['address1'] ?? '' }}<br>
                {{ $company['address2'] ?? '' }}<br>
                {{ $company['address3'] ?? '' }}<br>
                {{ $company['postcode'] ?? '' }} {{ $company['country'] ?? '' }}
            </div>
        </div>
        <div class="header-contact">
            <div class="vat-card">
                <div class="vat-label">VAT Number</div>
                <div class="vat-number">{{ $company['vat_number'] ?? '' }}</div>
            </div>
            <div class="contact-info">
                <strong>T:</strong> {{ $company['phone'] ?? '' }}<br>
                <strong>E:</strong> {{ $company['email'] ?? '' }}
            </div>
        </div>
    </div>

    <!-- Customer & Invoice Details -->
    <div class="details-section">
        <div class="customer-info">
            <h3>Bill To</h3>
            <div class="customer-card">
                @if($client)
                    @if($invoice->client_type == 'client')
                        {{-- Business Client --}}
                        <div><strong>{{ $client->name ?? '' }}</strong></div>
                        @if(!empty($client->address) && !empty($client->town))
                            {{-- Use client's direct address if available --}}
                            @if(!empty($client->address))<div>{{ $client->address }}</div>@endif
                            @if(!empty($client->address2))<div>{{ $client->address2 }}</div>@endif
                            @if(!empty($client->town))<div>{{ $client->town }}</div>@endif
                            @if(!empty($client->county))<div>{{ $client->county }}</div>@endif
                            @if(!empty($client->postcode))<div>{{ $client->postcode }}</div>@endif
                        @elseif(!empty($client->sites) && $client->sites->count() > 0)
                            {{-- Fallback to first site address --}}
                            @php $firstSite = $client->sites->first(); @endphp
                            @if(!empty($firstSite->address))<div>{{ $firstSite->address }}</div>@endif
                            @if(!empty($firstSite->postcode))<div>{{ $firstSite->postcode }}</div>@endif
                        @endif
                        <div>United Kingdom</div>
                    @else
                        {{-- Individual Customer --}}
                        <div><strong>{{ trim(($client->first_name ?? '') . ' ' . ($client->last_name ?? '')) }}</strong></div>
                        @if(!empty($client->address))<div>{{ $client->address }}</div>@endif
                        @if(!empty($client->address2))<div>{{ $client->address2 }}</div>@endif
                        @if(!empty($client->town))<div>{{ $client->town }}</div>@endif
                        @if(!empty($client->county))<div>{{ $client->county }}</div>@endif
                        @if(!empty($client->postcode))<div>{{ $client->postcode }}</div>@endif
                        <div>United Kingdom</div>
                    @endif
                @endif
            </div>
        </div>
        <div class="invoice-info">
            <div class="invoice-title">Invoice</div>
            <!-- @if($invoice->type == 'sale' || $invoice->paid)
                {{ $invoice->type == 'sale' ? 'Receipt' : 'Invoice' }}
                <div class="paid-badge">PAID</div>
            @endif -->
            <div class="invoice-meta">
                <div><span class="meta-label">Number:</span> <span class="meta-value">{{ $invoice->invoice_number ?? $invoice->id }}</span></div>
                <div><span class="meta-label">Date:</span> <span class="meta-value">{{ date('jS M \'y', strtotime($invoice->invoice_date ?? $invoice->created_at)) }}</span></div>
                @if($invoice->type == 'invoice')
                <div><span class="meta-label">Due By:</span> <span class="meta-value">{{ date('jS M \'y', strtotime(($invoice->invoice_date ?? $invoice->created_at) . ' +30 days')) }}</span></div>
                @endif            
                <div><span class="meta-label">Account:</span> <span class="meta-value">{{ $accountCode ?: ($invoice->client->account_code ?? 'MICA03') }}</span></div>                
                @if($invoice->task_id)
                <div><span class="meta-label">Purchase Order:</span> <span class="meta-value">{{ $invoice->task_id }}</span></div>
                @endif
            </div>
        </div>
    </div>

    <!-- Items Table -->
    <div class="items-section">
        <table>
            <thead>
                <tr>
                    <th>Qty</th>
                    <th>Description</th>
                    <th>Rate</th>
                    <th>VAT</th>
                    <th>Total</th>                    
                </tr>
            </thead>
            <tbody>
                @foreach($items as $item)
                <tr>
                    <td>{{ $item->quantity }}</td>
                    <td>{{ $item->name }}</td>
                    <td>£{{ number_format($item->price_sold_exc, 2) }}</td>
                    <td>£{{ number_format(
                        $invoice->include_vat
                            ? (($item->quantity * $item->price_sold_exc) - (($item->quantity * $item->price_sold_exc) / (1 + ($invoice->vat / 100))))
                            : (($item->quantity * $item->price_sold_exc) * ($invoice->vat / 100)),
                        2) }}</td>
                    <td>£{{ number_format($item->quantity * $item->price_sold_exc, 2) }}</td>                    
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Totals -->
    <div class="totals-section">
        <div class="totals-card">
            <div class="totals-row"><span class="totals-label">Net:</span> <span class="totals-amount" style="float:right;">£{{ number_format($subtotal, 2) }}</span></div>
            <div class="totals-row"><span class="totals-label">VAT @ {{ $invoice->vat }}%:</span> <span class="totals-amount" style="float:right;">£{{ number_format($vatAmount, 2) }}</span></div>
            <div class="totals-final">
                <span class="totals-label">TOTAL:</span>
                <span class="totals-amount" style="float:right;">£{{ number_format($finalTotal, 2) }}</span>
            </div>
        </div>
    </div>


    <!-- Payment Section -->
    
    <div class="payment-section">
        <div class="payment-title">Payment Instructions</div>
        <div class="payment-note">
            Wherever possible, please include details about the invoice you are paying for when paying online/BACS
        </div>
        <div class="bank-details">
            <strong>Bank:</strong> Natwest<br>
            <strong>Name:</strong> Wiseserve LTD<br>
            <strong>Sort Code:</strong> 60-70-03<br>
            <strong>Account Number:</strong> 86167502
        </div>
    </div>
    
    <!-- Paid Stamp -->
    @if($invoice->type == 'sale' || $invoice->paid)
    <div class="paid-stamp">PAID</div>
    @endif
</div>
</body>
</html>
