@extends('admin.layouts.master')
@section('title', ($saleInvoice->sale_number ?? 'Invoice') . ' | Vogue Technics')

@php
    $invoiceLabel = $saleInvoice->invoice_type === 'proforma' ? 'PROFORMA INVOICE' : 'SALE INVOICE';
    $quoteReference = $quote?->quote_number ?: ($quote?->quoteJob?->job_number ?? 'N/A');
    $vehicleMake = $quote?->vehicle?->make ?: '';
    $vehicleModel = $quote?->vehicle?->model ?: '';
    $vehicleVin = $quote?->vehicle?->vin ?: 'N/A';
    $vehicleMileage = $saleInvoice->mileage ?: ($quote?->mileage ?: 'N/A');
    $websiteUrl = rtrim(
        preg_replace('#^https?://#', '', $saleInvoice->website?->url ?: ($quote?->website?->url ?: 'www.voguetechnics.co.uk')),
        '/'
    );
    $websiteLogo = $saleInvoice->website?->logo ?: ($quote?->website?->logo ?: 'assets/logo.png');
    $websiteAddress = $saleInvoice->website?->address ?: ($quote?->website?->address ?: 'Unit 1 Hedley Avenue, RM9 4EU, United Kingdom');
    $websiteLandline = $saleInvoice->website?->landline ?: ($quote?->website?->landline ?: '01753675355');
    $websitePhone = $saleInvoice->website?->phone ?: ($quote?->website?->phone ?: '07411095629');
    $websiteEmail = $saleInvoice->website?->email ?: ($quote?->website?->email ?: 'info@voguetechnics.co.uk');
@endphp

@section('styles')
    <style>
        .invoice-page-shell {
            max-width: 210mm;
            margin: 0 auto;
            padding: 0;
        }

        .invoice-actions {
            position: sticky;
            top: 1rem;
            z-index: 5;
        }

        .invoice-sheet {
            background: #fff;
            color: #111827;
            width: 210mm;
            min-height: 297mm;
            padding: 4mm 9mm 8mm;
            border: 1px solid #cfd4dc;
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
            font-size: 10px;
            line-height: 1.3;
            position: relative;
            overflow: hidden;
            page-break-after: always;
        }

        .invoice-sheet * {
            color: inherit;
        }

        .invoice-watermark-layer {
            position: absolute;
            left: 50%;
            top: 50mm;
            /* bottom: 34mm; */
            transform: translateX(-50%);
            width: 96%;
            opacity: 0.11;
            z-index: 0;
            pointer-events: none;
        }

        .invoice-watermark-layer img {
            width: 100%;
            height: auto;
            display: block;
        }

        .invoice-content {
            position: relative;
            z-index: 1;
        }

        .invoice-top {
            display: grid;
            grid-template-columns: 44mm 1fr 44mm;
            gap: 7mm;
            align-items: start;
        }

        .invoice-brand-strip img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
        }

        .invoice-company {
            text-align: center;
        }

        .invoice-company img {
            max-width: 175px;
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .invoice-company-title {
            margin-top: 6px;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0.02em;
        }

        .invoice-company-url {
            font-size: 11px;
            margin-top: 2px;
        }

        .invoice-company-tagline {
            font-size: 13px;
            font-weight: 700;
            margin-top: 6px;
        }

        .invoice-company-subtag {
            margin-top: 4px;
            background: #0f8a4b;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            width: 100%;
            display: block;
            box-sizing: border-box;
        }

        .invoice-meta-top {
            text-align: right;
            font-size: 10px;
        }

        .invoice-meta-top strong {
            font-weight: 700;
        }

        .invoice-title {
            text-align: center;
            font-size: 16px;
            font-weight: 800;
            text-decoration: underline;
            margin: 8px 0 8px;
        }

        .invoice-address-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 8px;
        }

        .invoice-box {
            border: 1px solid #242424;
            min-height: 70px;
            padding: 6px 8px;
        }

        .invoice-box-title {
            font-size: 10px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .invoice-box p {
            margin: 0;
        }

        .invoice-vehicle-table,
        .invoice-parts-table,
        .invoice-bank-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 8px;
        }

        .invoice-vehicle-table th,
        .invoice-vehicle-table td,
        .invoice-parts-table th,
        .invoice-parts-table td,
        .invoice-bank-table td {
            border: 1px solid #242424;
            padding: 5px 6px;
        }

        .invoice-vehicle-table th,
        .invoice-parts-table th {
            text-transform: uppercase;
            font-size: 10px;
            background: #f6f7f9;
            text-align: center;
            font-weight: 700;
        }

        .invoice-vehicle-table td,
        .invoice-parts-table td {
            text-align: center;
            font-size: 10px;
        }

        .invoice-banner-note {
            text-align: center;
            font-size: 9px;
            margin: 5px 0 8px;
        }

        .invoice-parts-table td.text-start {
            text-align: left;
        }

        .invoice-totals-row td {
            font-weight: 700;
        }

        .invoice-bank-notes {
            display: grid;
            grid-template-columns: 1.4fr 0.95fr;
            gap: 0;
            border: 1px solid #242424;
            border-top: 0;
            margin-top: -1px;
            position: relative;
            overflow: hidden;
        }

        /* .invoice-bank-notes::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 55%, rgba(15, 138, 75, 0.08), transparent 24%),
                radial-gradient(circle at 50% 58%, rgba(59, 130, 246, 0.08), transparent 24%),
                radial-gradient(circle at 80% 55%, rgba(239, 68, 68, 0.08), transparent 24%);
            pointer-events: none;
        } */

        .invoice-bank-panel,
        .invoice-total-panel {
            position: relative;
            z-index: 1;
            padding: 10px 10px 12px;
            min-height: 116px;
        }

        .invoice-bank-panel {
            border-right: 1px solid #242424;
        }

        .invoice-bank-title {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .invoice-bank-line {
            font-size: 10px;
            margin-bottom: 4px;
        }

        .invoice-total-panel table {
            width: 100%;
            border-collapse: collapse;
        }

        .invoice-total-panel td {
            border: 1px solid #242424;
            padding: 6px;
            font-size: 10px;
        }

        .invoice-note-box {
            border: 1px solid #242424;
            border-top: 0;
            padding: 8px 10px;
            font-size: 9px;
        }

        .invoice-note-box strong {
            font-weight: 800;
        }

        .invoice-by-line {
            margin-top: 6px;
            font-size: 14px;
            font-weight: 400;
        }

        .invoice-terms {
            margin-top: 10px;
            font-size: 9px;
        }

        .invoice-terms-title {
            margin-bottom: 4px;
            font-size: 11px;
            font-weight: 800;
        }

        .invoice-terms h1,
        .invoice-terms h2,
        .invoice-terms h3,
        .invoice-terms h4,
        .invoice-terms h5,
        .invoice-terms h6 {
            font-size: 11px;
            margin-bottom: 4px;
        }

        .invoice-terms ul {
            margin: 4px 0 0 16px;
            padding: 0;
        }

        .invoice-terms li + li {
            margin-top: 4px;
        }

        .invoice-signature {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
            font-weight: 800;
            font-size: 14px;
        }

        .invoice-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 26px;
            font-size: 9px;
        }

        .invoice-terms-rich p:last-child,
        .invoice-terms-rich ul:last-child {
            margin-bottom: 0;
        }

        @media print {
            @page {
                size: A4 portrait;
                margin: 5mm 0mm 0mm 0mm;
            }

            html,
            body {
                background: #fff !important;
                margin: 0 !important;
                padding: 0 !important;
                width: 210mm !important;
                height: 297mm !important;
            }

            body * {
                visibility: hidden !important;
            }

            .invoice-sheet,
            .invoice-sheet * {
                visibility: visible !important;
            }

            .invoice-sheet {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                box-shadow: none;
                border: 0;
                width: 210mm;
                min-height: 297mm;
                padding: 3mm 8mm 8mm;
                margin: 0 !important;
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
                overflow: hidden !important;
            }

            .invoice-page-shell {
                max-width: none;
                margin: 0 !important;
                padding: 0 !important;
            }

            .invoice-top {
                grid-template-columns: 44mm 1fr 44mm !important;
                gap: 7mm !important;
            }

            .invoice-address-grid {
                grid-template-columns: 1fr 1fr !important;
            }

            .invoice-bank-notes {
                grid-template-columns: 1.4fr 0.95fr !important;
            }

            .invoice-bank-panel {
                border-right: 1px solid #242424 !important;
                border-bottom: 0 !important;
            }
        }

        @media screen and (max-width: 991px) {
            .invoice-top,
            .invoice-address-grid,
            .invoice-bank-notes {
                grid-template-columns: 1fr;
                justify-items: center;
                justify-content: center;
            }

            .invoice-bank-panel {
                border-right: 0;
                border-bottom: 1px solid #242424;
            }

            .invoice-sheet {
                width: auto;
                min-height: auto;
            }
        }
    </style>
@endsection

@section('content')
    <section class="invoice-page-shell">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4 no-print invoice-actions">
            <div>
                <h4 class="mb-1">{{ ucfirst($saleInvoice->invoice_type) }} Invoice</h4>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ $saleInvoice->invoice_type === 'proforma' ? route('sale-invoices.proforma-invoice') : route('sale-invoices.invoice.index') }}" class="btn btn-label-secondary">
                    Back to Listing
                </a>
                @if ($saleInvoice->status !== 'paid')
                    @can('edit-sale-invoice')
                        <a href="{{ route('sale-invoices.invoice.edit', $saleInvoice) }}" class="btn btn-outline-primary">
                            Edit Invoice
                        </a>
                    @endcan
                @endif
                <button type="button" class="btn btn-primary" onclick="window.print()">
                    Print Invoice
                </button>
            </div>
        </div>

        <div class="invoice-sheet">
            <div class="invoice-watermark-layer">
                <img src="{{ asset('assets/invoice-images/invoice-bg.png') }}" alt="Invoice Background">
            </div>
            <div class="invoice-content">
                <div class="invoice-top">
                    <div class="invoice-brand-strip">
                        <img src="{{ asset('assets/invoice-images/brand-logos.jpeg') }}" alt="Brand Logos">
                    </div>

                    <div class="invoice-company">
                        <img src="{{ asset($websiteLogo) }}" alt="Vogue Technics">
                        <div class="invoice-company-url">{{ $websiteUrl }}</div>
                        <div class="invoice-company-tagline">Engine Repair & Replacement Specialists.</div>
                        <div class="invoice-company-subtag">Range Rover, Jaguar, BMW & Other Prestige Makes</div>
                    </div>

                    <div class="invoice-meta-top">
                        <div><strong>Created Date:</strong> {{ $saleInvoice->created_at?->format('d M Y') ?? optional($saleInvoice->date)->format('d M Y') }}</div>
                        <div class="mt-2"><strong>Address:</strong> {{ $websiteAddress }}</div>
                        <div><strong>Landline No:</strong> {{ $websiteLandline }}</div>
                        <div><strong>Mobile:</strong> {{ $websitePhone }}</div>
                        <div><strong>Email:</strong> {{ $websiteEmail }}</div>
                    </div>
                </div>

                <div class="invoice-title">{{ $invoiceLabel }}</div>

                <div class="invoice-address-grid">
                    <div class="invoice-box">
                        <div class="invoice-box-title">Name & Address</div>
                        <p><strong>{{ $saleInvoice->name }}</strong></p>
                        @if ($saleInvoice->address)
                            <p>{!! nl2br(e($saleInvoice->address)) !!}</p>
                        @endif
                        @if ($saleInvoice->city)
                            <p>{{ $saleInvoice->city }}</p>
                        @endif
                        @if ($saleInvoice->phone)
                            <p>{{ $saleInvoice->phone }}</p>
                        @endif
                    </div>
                    <div class="invoice-box">
                        <div class="invoice-box-title">Invoice Info</div>
                        <p><strong>Invoice No:</strong> {{ $saleInvoice->sale_number }}</p>
                        <p><strong>Date:</strong> {{ optional($saleInvoice->date)->format('d-M-y') }}</p>
                        <p><strong>Order No:</strong> {{ $quoteReference }}</p>
                    </div>
                </div>

                <table class="invoice-vehicle-table">
                    <thead>
                        <tr>
                            <th>Make / Model</th>
                            <th>Engine Code</th>
                            <th>Mileage</th>
                            <th>VRM</th>
                            <th>VIN</th>
                            <th>Served By</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ trim($saleInvoice->make_model ?: trim($vehicleMake . ' ' . $vehicleModel)) ?: 'N/A' }}</td>
                            <td>{{ $saleInvoice->engine_code ?: 'N/A' }}</td>
                            <td>{{ $vehicleMileage }}</td>
                            <td>{{ $saleInvoice->vrm ?: 'N/A' }}</td>
                            <td>{{ $vehicleVin }}</td>
                            <td>{{ $saleInvoice->served_by ?: 'N/A' }}</td>
                        </tr>
                    </tbody>
                </table>

                <table class="invoice-parts-table">
                    <thead>
                        <tr>
                            <th style="width: 8%;">Sr</th>
                            <th style="width: 40%;">Parts Description</th>
                            <th style="width: 10%;">Qty</th>
                            <th style="width: 20%;">Unit Price</th>
                            <th style="width: 22%;">Net Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($saleInvoice->details as $index => $detail)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td class="text-start">{{ $detail->description ?: ($detail->part?->name ?: 'N/A') }}</td>
                                <td>{{ rtrim(rtrim(number_format((float) $detail->qty, 2, '.', ''), '0'), '.') }}</td>
                                <td>{{ number_format((float) $detail->amount, 2) }}</td>
                                <td>{{ number_format((float) $detail->total_amount, 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5">No service rows added.</td>
                            </tr>
                        @endforelse
                        <tr class="invoice-totals-row">
                            <td colspan="4" class="text-end">Sub Total</td>
                            <td>{{ number_format((float) $saleInvoice->sub_total, 2) }}</td>
                        </tr>
                        <tr class="invoice-totals-row">
                            <td colspan="4" class="text-end">Initial Deposit</td>
                            <td>{{ number_format((float) $saleInvoice->initial_deposit, 2) }}</td>
                        </tr>
                        <tr class="invoice-totals-row">
                            <td colspan="4" class="text-end">Discount</td>
                            <td>{{ number_format((float) $saleInvoice->discount, 2) }}</td>
                        </tr>
                        <tr class="invoice-totals-row">
                            <td colspan="4" class="text-end">VAT</td>
                            <td>{{ number_format((float) $saleInvoice->vat, 2) }}</td>
                        </tr>
                        <tr class="invoice-totals-row">
                            <td colspan="4" class="text-end">Net</td>
                            <td>{{ number_format((float) $saleInvoice->total, 2) }}</td>
                        </tr>
                    </tbody>
                </table>

                <div class="invoice-bank-notes">
                    <div class="invoice-bank-panel">
                        <div class="invoice-bank-title">Bank Details:</div>
                        <div class="invoice-bank-line"><strong>Name:</strong> {{ $saleInvoice->bank?->name ?: 'N/A' }}</div>
                        <div class="invoice-bank-line"><strong>Account Number:</strong> {{ $saleInvoice->bank?->account_number ?: 'N/A' }}</div>
                        <div class="invoice-bank-line"><strong>Sort Code:</strong> {{ $saleInvoice->bank?->sort_code ?: 'N/A' }}</div>
                        <div class="invoice-bank-line"><strong>Account Title:</strong> {{ $saleInvoice->bank?->account_title ?: 'N/A' }}</div>
                        <div class="invoice-bank-line"><strong>Branch:</strong> {{ $saleInvoice->bank?->branch_name ?: 'N/A' }}</div>
                    </div>
                    <div class="invoice-total-panel">
                        <table>
                            <tr>
                                <td><strong>Vat</strong></td>
                                <td class="text-end">{{ number_format((float) $saleInvoice->vat, 2) }}</td>
                            </tr>
                            <tr>
                                <td><strong>Total</strong></td>
                                <td class="text-end">{{ number_format((float) $saleInvoice->total, 2) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="invoice-note-box">
                    <strong>Note:</strong>
                    {{ $saleInvoice->notes ?: 'Engine oil and coolant level needs to be checked regularly. This repair covers the recorded fault only.' }}
                </div>

                @if (($selectedTermsAndConditions ?? collect())->isNotEmpty())
                    <div class="invoice-terms">
                        <div class="invoice-terms-title">Terms & Conditions:</div>
                        @foreach ($selectedTermsAndConditions as $term)
                            <div class="invoice-terms-rich">{!! $term['content'] ?? '' !!}</div>
                        @endforeach
                    </div>
                @endif

                <div class="invoice-signature">SIGNATURE</div>

                {{-- <div class="invoice-footer">
                    <div>{{ $websiteUrl }}</div>
                    <div>1/1</div>
                </div> --}}
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    @if ($isPrintMode ?? false)
        <script>
            window.addEventListener('load', function() {
                window.print();
            });
        </script>
    @endif
@endsection