@extends('layouts.app')
@section('title', 'Invoice ' . $invoice->invoice_number)
@section('content')
@php
    $msgLines = [];
    $msgLines[] = "Invoice {$invoice->invoice_number}";
    $msgLines[] = "Status: " . ($invoice->status === 'paid' ? 'Paid' : 'Unpaid');
    $msgLines[] = "Date: " . ($invoice->invoice_date?->format('d M, Y') ?? '');
    $msgLines[] = "";
    $msgLines[] = "Items:";
    foreach ($invoice->items as $i => $item) {
        $msgLines[] = ($i + 1) . ". {$item->product->name} - {$item->quantity} x ₹" . number_format($item->price, 2) . " = ₹" . number_format($item->line_total, 2) . " (GST @ {$item->tax_percentage}%)";
    }
    $msgLines[] = "";
    $msgLines[] = "Subtotal: ₹" . number_format($invoice->subtotal, 2);
    if ($invoice->discount_total > 0) {
        $msgLines[] = "Discount: -₹" . number_format($invoice->discount_total, 2);
    }
    $msgLines[] = "Tax Total: ₹" . number_format($invoice->tax_total, 2);
    $msgLines[] = "Round Off: ₹" . number_format($invoice->round_off, 2);
    $msgLines[] = "Grand Total: ₹" . number_format($invoice->grand_total, 2);
    if ($invoice->status === 'paid') {
        $msgLines[] = "Paid Amount: ₹" . number_format($invoice->paid_amount, 2);
    } elseif ($invoice->paid_amount > 0) {
        $msgLines[] = "Paid: ₹" . number_format($invoice->paid_amount, 2);
        $msgLines[] = "Remaining: ₹" . number_format($invoice->remaining_amount, 2);
    }
    $msgLines[] = "";
    $msgLines[] = "Thank you for your business!";
@endphp
<div class="space-y-6 animate-fade-in">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-dark-text">{{ $invoice->invoice_number }}</h1>
                <p class="text-sm text-gray-500 dark:text-dark-muted mt-1">Invoice details and items</p>
            </div>
            @php
                $statusDot = [
                    'pending' => 'bg-amber-500',
                    'paid' => 'bg-emerald-500',
                    'cancelled' => 'bg-red-500',
                ][$invoice->status] ?? 'bg-gray-400';
                $statusBg = [
                    'pending' => 'bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-500/20',
                    'paid' => 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20',
                    'cancelled' => 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 border-red-200 dark:border-red-500/20',
                ][$invoice->status] ?? 'bg-gray-50 dark:bg-gray-500/10 text-gray-700';
            @endphp
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border {{ $statusBg }}">
                <span class="w-2 h-2 rounded-full {{ $statusDot }}"></span>
                {{ $invoice->status === 'pending' ? 'Unpaid' : ucfirst($invoice->status) }}
            </span>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            @if($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
                <form action="{{ route('invoices.record-payment', $invoice->id) }}" method="POST" class="inline" x-data="{ amount: {{ $invoice->remaining_amount }} }">
                    @csrf
                    <input type="hidden" name="amount" :value="amount">
                    <button type="submit" onclick="return window.confirmDialog ? window.confirmDialog({title:'Record Payment', message:'Receive payment of ₹' + {{ $invoice->remaining_amount }} + '?', type:'warning'}).then(r => r) : confirm('Receive payment?')" class="btn-primary">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Paid ₹{{ number_format($invoice->remaining_amount, 0) }}
                    </button>
                </form>
            @endif
            @if($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
            <a href="{{ route('invoices.edit', $invoice->id) }}" class="btn-secondary">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                Edit
            </a>
            @endif
            <a href="{{ route('invoices.preview', $invoice->id) }}" class="btn-secondary">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                Preview
            </a>
            <a href="{{ route('invoices.print', $invoice->id) }}" class="btn-secondary">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                Print
            </a>
            <a href="{{ route('invoices.pdf', $invoice->id) }}" class="btn-primary">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                PDF
            </a>
            @if($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
            <form action="{{ route('invoices.destroy', $invoice->id) }}" method="POST" class="inline">
                @csrf @method('DELETE')
                <button type="submit" onclick="return window.confirmDialog ? window.confirmDialog({title:'Delete Invoice', message:'Are you sure you want to delete this invoice?', type:'danger'}).then(r => r) : confirm('Delete?')" class="btn-danger">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    Delete
                </button>
            </form>
            @endif
            @if($invoice->customer->whatsapp_number)
            <button type="button" onclick="shareInvoicePdf({{ $invoice->id }}, {{ json_encode($msgLines) }})" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 bg-emerald-500 hover:bg-emerald-600 text-white shadow-sm hover:shadow-emerald-500/25">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                WhatsApp
            </button>
            @endif
        </div>
    </div>

    {{-- Address Cards --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card-elevated rounded-2xl p-6 dark:bg-dark-card dark:border-dark-border">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-dark-text">Company</h2>
                    <p class="text-xs text-gray-500 dark:text-dark-muted">From</p>
                </div>
            </div>
            @php
                $company = App\Models\CompanySetting::forCurrentUser();
            @endphp
            @if($company)
            <div class="space-y-2 text-sm">
                <p class="font-medium text-gray-900 dark:text-dark-text">{{ $company->company_name }}</p>
                <p class="text-gray-500 dark:text-dark-muted">{{ $company->address }}</p>
                <p class="text-gray-500 dark:text-dark-muted">{{ $company->city }}{{ $company->state ? ', ' . $company->state : '' }}{{ $company->zip ? ' - ' . $company->zip : '' }}</p>
                @if($company->email)<p class="text-gray-500 dark:text-dark-muted">{{ $company->email }}</p>@endif
                @if($company->phone)<p class="text-gray-500 dark:text-dark-muted">{{ $company->phone }}</p>@endif
                @if($company->gst_number)<p class="text-xs text-gray-400 dark:text-dark-muted/60 mt-1">GST: {{ $company->gst_number }}</p>@endif
            </div>
            @else
            <p class="text-sm text-gray-400 dark:text-dark-muted">Company details not configured.</p>
            @endif
        </div>

        <div class="card-elevated rounded-2xl p-6 dark:bg-dark-card dark:border-dark-border">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-gray-900 dark:text-dark-text">Customer</h2>
                    <p class="text-xs text-gray-500 dark:text-dark-muted">Bill To</p>
                </div>
            </div>
            <div class="space-y-2 text-sm">
                <p class="font-medium text-gray-900 dark:text-dark-text">{{ $invoice->customer->customer_name ?? '—' }}</p>
                @if($invoice->customer->billing_address)
                <p class="text-gray-500 dark:text-dark-muted">{{ $invoice->customer->billing_address }}</p>
                @endif
                @if($invoice->customer->billing_district || $invoice->customer->billing_state)
                <p class="text-gray-500 dark:text-dark-muted">{{ $invoice->customer->billing_district }}{{ $invoice->customer->billing_district && $invoice->customer->billing_state ? ', ' : '' }}{{ $invoice->customer->billing_state }}</p>
                @endif
                @if($invoice->customer->email)<p class="text-gray-500 dark:text-dark-muted">{{ $invoice->customer->email }}</p>@endif
                @if($invoice->customer->whatsapp_number)<p class="text-gray-500 dark:text-dark-muted">{{ $invoice->customer->whatsapp_number }}</p>@endif
                <div class="flex flex-wrap gap-3 mt-2 pt-2 border-t border-gray-100 dark:border-dark-border">
                    @if($invoice->customer->gst_number)
                    <span class="text-xs text-gray-400 dark:text-dark-muted/60">GST: {{ $invoice->customer->gst_number }}</span>
                    @endif
                    @if($invoice->customer->pan_number)
                    <span class="text-xs text-gray-400 dark:text-dark-muted/60">PAN: {{ $invoice->customer->pan_number }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Invoice Info & Payment Details --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card-elevated rounded-2xl p-6 dark:bg-dark-card dark:border-dark-border">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-indigo-50 dark:bg-indigo-500/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-dark-text">Invoice Details</h2>
            </div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Invoice Number</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5 font-mono">{{ $invoice->invoice_number }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Invoice Type</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">
                        @if($invoice->invoice_type === 'tax')
                            <span class="badge badge-purple">Tax Invoice</span>
                        @else
                            <span class="badge badge-gray">Non-Tax Invoice</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Invoice Date</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $invoice->invoice_date?->format('d M, Y') }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Due Date</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $invoice->due_date?->format('d M, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Created By</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $invoice->creator?->name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Created At</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">{{ $invoice->created_at?->format('d M, Y h:i A') }}</dd>
                </div>
            </dl>
        </div>

        <div class="card-elevated rounded-2xl p-6 dark:bg-dark-card dark:border-dark-border">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-amber-50 dark:bg-amber-500/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                </div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-dark-text">Payment Details</h2>
            </div>
            <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Subtotal</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">₹{{ number_format($invoice->subtotal, 2) }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Discount</dt>
                    <dd class="font-medium text-red-600 mt-0.5">-₹{{ number_format($invoice->discount_total, 2) }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Tax Total</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">₹{{ number_format($invoice->tax_total, 2) }}</dd>
                </div>
                <div>
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Round Off</dt>
                    <dd class="font-medium text-gray-900 dark:text-dark-text mt-0.5">₹{{ number_format($invoice->round_off, 2) }}</dd>
                </div>
                <div class="col-span-2 pt-2 border-t border-gray-100 dark:border-dark-border">
                    <div class="flex justify-between items-center">
                        <dt class="text-sm font-semibold text-gray-900 dark:text-dark-text">Grand Total</dt>
                        <dd class="text-xl font-bold text-primary-600 dark:text-primary-400">₹{{ number_format($invoice->grand_total, 2) }}</dd>
                    </div>
                </div>
                @if($invoice->paid_amount > 0)
                <div class="col-span-2">
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-emerald-600 dark:text-emerald-400 font-medium">Paid Amount</dt>
                        <dd class="text-lg font-bold text-emerald-600 dark:text-emerald-400">₹{{ number_format($invoice->paid_amount, 2) }}</dd>
                    </div>
                </div>
                @endif
                @if($invoice->remaining_amount > 0)
                <div class="col-span-2">
                    <div class="flex justify-between items-center">
                        <dt class="text-sm text-amber-600 dark:text-amber-400 font-medium">Remaining</dt>
                        <dd class="text-lg font-bold text-amber-600 dark:text-amber-400">₹{{ number_format($invoice->remaining_amount, 2) }}</dd>
                    </div>
                </div>
                @endif
                <div class="col-span-2">
                    <dt class="text-gray-400 dark:text-dark-muted text-xs uppercase tracking-wider">Amount in Words</dt>
                    <dd class="text-xs text-gray-500 dark:text-dark-muted mt-1 italic">{{ $invoice->amount_in_words ?? '—' }}</dd>
                </div>
            </dl>
        </div>
    </div>

    {{-- Invoice Items Table --}}
    <div class="card-elevated rounded-2xl overflow-hidden dark:bg-dark-card dark:border-dark-border">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-dark-border flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center">
                    <svg class="w-4 h-4 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-dark-text">Invoice Items</h2>
            </div>
            <span class="text-xs text-gray-400 dark:text-dark-muted">{{ $invoice->items->count() }} item(s)</span>
        </div>
        <div class="overflow-x-auto scrollbar-thin">
            <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
                <thead>
                    <tr>
                        <th class="table-th">#</th>
                        <th class="table-th">Product</th>
                        <th class="table-th text-right">Qty</th>
                        <th class="table-th text-right">MRP</th>
                        <th class="table-th text-right">Price</th>
                        
                        <th class="table-th text-right">Tax %</th>
                        <th class="table-th text-right">Tax</th>
                        <th class="table-th text-right">Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50 dark:divide-dark-border/50">
                    @foreach($invoice->items as $item)
                    <tr class="table-row">
                        <td class="table-td text-gray-400 dark:text-dark-muted w-10">{{ $loop->iteration }}</td>
                        <td class="table-td">
                            <div class="flex items-center gap-3">
                                @if($item->product->first_image_url)
                                    <img src="{{ $item->product->first_image_url }}" alt="{{ $item->product->name }}" class="w-10 h-10 rounded-lg object-cover border border-gray-200 dark:border-dark-border flex-shrink-0">
                                @else
                                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-500/20 dark:to-primary-500/10 flex items-center justify-center text-xs font-bold text-primary-700 dark:text-primary-300 flex-shrink-0">
                                        {{ strtoupper(substr($item->product->name ?? '?', 0, 2)) }}
                                    </div>
                                @endif
                                <span class="font-medium text-gray-900 dark:text-dark-text">{{ $item->product->name ?? '—' }}</span>
                            </div>
                        </td>
                        <td class="table-td text-right text-gray-600 dark:text-dark-muted">{{ $item->quantity }}</td>
                        <td class="table-td text-right text-gray-600 dark:text-dark-muted font-mono">₹{{ number_format($item->mrp, 2) }}</td>
                        <td class="table-td text-right text-gray-600 dark:text-dark-muted font-mono">₹{{ number_format($item->price, 2) }}</td>
                       
                        <td class="table-td text-right text-gray-600 dark:text-dark-muted">{{ number_format($item->tax_percentage, 1) }}%</td>
                        <td class="table-td text-right text-gray-600 dark:text-dark-muted font-mono">₹{{ number_format($item->tax_amount, 2) }}</td>
                        <td class="table-td text-right font-semibold text-gray-900 dark:text-dark-text font-mono">₹{{ number_format($item->line_total, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-6 py-5 border-t border-gray-100 dark:border-dark-border bg-gray-50/50 dark:bg-dark-surface/50">
            <dl class="space-y-2 text-sm ml-auto max-w-xs">
                <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                    <dt>Subtotal</dt>
                    <dd class="font-medium">₹{{ number_format($invoice->subtotal, 2) }}</dd>
                </div>
                <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                    <dt>Discount Total</dt>
                    <dd class="font-medium text-red-600">-₹{{ number_format($invoice->discount_total, 2) }}</dd>
                </div>
                <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                    <dt>Tax Total</dt>
                    <dd class="font-medium">₹{{ number_format($invoice->tax_total, 2) }}</dd>
                </div>
                <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                    <dt>Round Off</dt>
                    <dd class="font-medium">₹{{ number_format($invoice->round_off, 2) }}</dd>
                </div>
                <hr class="border-gray-200 dark:border-dark-border">
                <div class="flex justify-between text-lg font-bold text-gray-900 dark:text-dark-text">
                    <dt>Grand Total</dt>
                    <dd>₹{{ number_format($invoice->grand_total, 2) }}</dd>
                </div>
                <div class="flex justify-between text-gray-400 dark:text-dark-muted/60 text-xs pt-1">
                    <dt>Amount in Words</dt>
                    <dd class="text-right max-w-[200px] italic">{{ $invoice->amount_in_words ?? '—' }}</dd>
                </div>
            </dl>
        </div>
    </div>

    {{-- Notes --}}
    @if($invoice->notes)
    <div class="card-elevated rounded-2xl p-6 dark:bg-dark-card dark:border-dark-border">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-dark-surface flex items-center justify-center">
                <svg class="w-4 h-4 text-gray-500 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
            </div>
            <h2 class="text-sm font-semibold text-gray-900 dark:text-dark-text">Notes</h2>
        </div>
        <p class="text-sm text-gray-600 dark:text-dark-muted leading-relaxed">{{ $invoice->notes }}</p>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
function shareInvoicePdf(id, lines) {
    const msg = lines.join('\n');
    const waUrl = `https://wa.me/{{ preg_replace('/\D/', '', $invoice->customer->whatsapp_number) }}?text=${encodeURIComponent(msg)}`;
    const number = lines[0].replace('Invoice ', '');

    fetch(`/invoices/${id}/pdf`)
        .then(r => r.blob())
        .then(blob => {
            const file = new File([blob], `invoice-${number}.pdf`, { type: 'application/pdf' });
            if (navigator.canShare && navigator.canShare({ files: [file] })) {
                navigator.share({ title: `Invoice ${number}`, text: msg, files: [file] })
                    .catch(() => window.open(waUrl, '_blank'));
            } else {
                window.open(waUrl, '_blank');
            }
        })
        .catch(() => window.open(waUrl, '_blank'));
}
</script>
@endpush