<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice - {{ $invoice->invoice_no }}</title>
    <style>
        body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 13px; color: #1A1A1A; margin: 0; padding: 20px; }
        .invoice-box { width: 100%; margin: auto; }
        
        .header-table { width: 100%; border-bottom: 3px solid #6A1B9A; padding-bottom: 20px; margin-bottom: 30px; }
        .company-name { font-size: 32px; color: #6A1B9A; margin: 0 0 5px 0; font-weight: bold; text-transform: uppercase; }
        .tagline { background: #6A1B9A; color: #FFD54F; padding: 4px 12px; font-weight: bold; display: inline-block; margin-bottom: 10px; font-size: 13px; }
        .company-address { font-size: 12px; color: #64748B; line-height: 1.5; }
        .invoice-title { font-size: 38px; color: #CBD5E1; margin: 0; text-align: right; text-transform: uppercase; letter-spacing: 1px; }
        .invoice-meta { text-align: right; margin-top: 15px; font-size: 14px; }
        
        .customer-box { background: #F8FAFC; border-left: 4px solid #6A1B9A; padding: 20px; margin-bottom: 30px; }
        .customer-box h3 { margin: 0 0 10px 0; color: #6A1B9A; font-size: 15px; text-transform: uppercase; }
        .customer-box p { margin: 4px 0; color: #334155; font-size: 14px; }
        
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        .items-table th { background: #6A1B9A; color: white; padding: 10px; text-align: left; font-size: 13px; text-transform: uppercase; }
        .items-table td { padding: 10px; border-bottom: 1px solid #E2E8F0; color: #334155; }
        .items-table tr:nth-child(even) td { background-color: #F8FAFC; }
        
        .text-right { text-align: right; }
        .text-center { text-align: center; }
        
        .totals-table { width: 300px; float: right; border-collapse: collapse; margin-bottom: 40px; }
        .totals-table td { padding: 8px 10px; border-bottom: 1px solid #F1F5F9; color: #334155; text-align: right; }
        .totals-table .grand-total td { background: #6A1B9A; color: white; font-size: 16px; font-weight: bold; border: none; }
        
        .footer { clear: both; margin-top: 50px; padding-top: 20px; border-top: 2px solid #E2E8F0; width: 100%; }
        .footer-note { float: left; font-weight: bold; color: #6A1B9A; font-size: 15px; font-style: italic; }
        .signature-box { float: right; text-align: center; width: 200px; }
        .signature-line { border-top: 1px solid #1A1A1A; margin-bottom: 5px; padding-top: 5px; font-weight: bold; }
    </style>
</head>
<body>
    <div class="invoice-box">
        <!-- Header -->
        <table class="header-table">
            <tr>
                <td width="60%" valign="top">
                    <h1 class="company-name">RIYASRI SILKS</h1>
                    <div class="tagline">Mrs. of High Class Fancy Sarees</div>
                    <div class="company-address">
                        107/B, Gandhi Nagar, Salem Main Road,<br>
                        Elampillai – 637502, Salem, Tamil Nadu.<br>
                        <strong>Phone:</strong> 9244443777, 9244441999
                    </div>
                </td>
                <td width="40%" valign="top">
                    <h2 class="invoice-title">INVOICE</h2>
                    <div class="invoice-meta">
                        <p><strong>Invoice No:</strong> #{{ $invoice->invoice_no }}</p>
                        <p><strong>Date:</strong> {{ $invoice->invoice_date->format('d M, Y') }}</p>
                    </div>
                </td>
            </tr>
        </table>

        <!-- Customer Section -->
        <div class="customer-box">
            <h3>Billed To:</h3>
            <p><strong>{{ $invoice->customer->customer_name }}</strong></p>
            <p>{{ $invoice->customer->address1 }}
               @if($invoice->customer->address2), {{ $invoice->customer->address2 }} @endif
            </p>
            <p>{{ $invoice->customer->city }}, {{ $invoice->customer->state }} - {{ $invoice->customer->pincode }}</p>
            <p><strong>Mobile:</strong> {{ $invoice->customer->mobile }}</p>
            @if($invoice->customer->gst_number)<p><strong>GSTIN:</strong> {{ $invoice->customer->gst_number }}</p>@endif
        </div>

        <!-- Items -->
        <table class="items-table">
            <thead>
                <tr>
                    <th width="5%" class="text-center">#</th>
                    <th width="45%">Item Description</th>
                    <th width="15%" class="text-center">Qty</th>
                    <th width="15%" class="text-right">Rate</th>
                    <th width="20%" class="text-right">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $index => $item)
                <tr>
                    <td class="text-center">{{ $index + 1 }}</td>
                    <td><strong>{{ $item->product_name }}</strong></td>
                    <td class="text-center">{{ number_format($item->qty, 2) }}</td>
                    <td class="text-right">₹{{ number_format($item->rate, 2) }}</td>
                    <td class="text-right font-weight-bold">₹{{ number_format($item->amount, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Totals -->
        <table class="totals-table">
            <tr>
                <td>Sub Total:</td>
                <td>₹{{ number_format($invoice->subtotal, 2) }}</td>
            </tr>
            @if($invoice->discount > 0)
            <tr>
                <td>Discount:</td>
                <td style="color: #E53935;">- ₹{{ number_format($invoice->discount, 2) }}</td>
            </tr>
            @endif
            <tr class="grand-total">
                <td>Grand Total:</td>
                <td>₹{{ number_format($invoice->grand_total, 2) }}</td>
            </tr>
        </table>

        <!-- Footer -->
        <div class="footer">
            <div class="footer-note">Thank You, Visit Again!</div>
            <div class="signature-box">
                <div class="signature-line">Authorized Signature</div>
                <div style="font-size: 11px; color: #64748B;">For Riyasri Silks</div>
            </div>
        </div>
    </div>
</body>
</html>
