@extends('adminlte::page')

@section('content')
    <div style="font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif; font-size: 12px; margin: 10mm; color: #2d3748; background-color: #fff; line-height: 1.4;">
        <div style="max-width: 148mm; margin: 0 auto; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 10px; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;">
                <div style="flex: 0.2; text-align: left;">
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <rect x="0" y="0" width="100" height="100" fill="#2c7a7b" rx="10" />
                        <text x="50" y="50" font-family="Roboto, sans-serif" font-size="30" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">SMA</text>
                        <circle cx="50" cy="50" r="45" fill="none" stroke="#ffffff" stroke-width="4" />
                    </svg>
                </div>
                <div style="flex: 1; text-align: center;">
                    <h2 style="font-size: 20px; font-weight: 700; color: #2c7a7b; margin: 0; padding: 5px 0;">Retail Invoice</h2>
                    <h1 style="font-size: 24px; font-weight: 700; color: #2d3748; margin: 0; padding: 5px 0;">S.Mamta Automobiles</h1>
                    <p style="font-size: 12px; color: #2d3748; margin: 0;">No.60/40, Vembuli Subadar St., Alandur, Chennai - 600016, Tamil Nadu</p>
                </div>
                <div style="flex: 0.3; text-align: center;">
                    <strong style="font-weight: 600; color: #2d3748;">Scan & Pay<br>(Amount: ₹6318)</strong><br>
                    <img src="https://api.qrserver.com/v1/create-qr-code/?data=upi%3A%2F%2Fpay%3Fpa%3Dmamta@upi%26pn%3DSMamtaAutomobiles%26am%3D6318%26cu%3DINR&size=100x100" alt="QR Code" style="width: 100px; height: 100px; border: 1px solid #e2e8f0; border-radius: 6px;">
                </div>
            </div>

            <!-- Header Table -->
            <div style="border: 1px solid #e2e8f0; padding: 10px; margin-bottom: 10px; border-radius: 8px; background-color: #fff;">
                <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                    <tr>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;"><strong style="font-weight: 600; color: #2d3748;">Invoice No:</strong> 1143/24-25</td>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;"><strong style="font-weight: 600; color: #2d3748;">Date:</strong> 24-06-2025</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;"><strong style="font-weight: 600; color: #2d3748;">Buyer:</strong> S. SARAVANAN</td>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;"><strong style="font-weight: 600; color: #2d3748;">GSTIN:</strong> 33AMPPT7332D1ZC</td>
                    </tr>
                </table>
            </div>

            <!-- Item Table -->
            <div style="border: 1px solid #e2e8f0; padding: 10px; margin-bottom: 10px; border-radius: 8px; background-color: #fff;">
                <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                    <thead>
                        <tr>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">Sl.</th>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">Material Description</th>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">HSN</th>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">Qty</th>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">Rate</th>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">Disc</th>
                            <th style="border: 1px solid #e2e8f0; padding: 8px; text-align: left; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748; text-transform: uppercase; font-size: 10px;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">1</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">
                                <span style="font-weight: 600; font-size: 12px; color: #2d3748;">Tyre A</span><br>
                                <small style="font-size: 10px; color: #718096;">Free Item: Tube A</small><br>
                                <small style="font-size: 10px; color: #718096;">Serial No: SN001</small>
                            </td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">4011.10.10</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">2</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">1050.00</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">42.00</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">2058.00</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">2</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">
                                <span style="font-weight: 600; font-size: 12px; color: #2d3748;">Tyre B</span><br>
                                <small style="font-size: 10px; color: #718096;">Free Item: Tube B</small><br>
                                <small style="font-size: 10px; color: #718096;">Serial No: SN002</small>
                            </td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">4011.20.20</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">2</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">1250.00</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">50.00</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">2450.00</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">3</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">
                                <span style="font-weight: 600; font-size: 12px; color: #2d3748;">Tyre C</span><br>
                                <small style="font-size: 10px; color: #718096;">Free Item: Tube C</small><br>
                                <small style="font-size: 10px; color: #718096;">Serial No: SN003</small>
                            </td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">4011.30.30</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">1</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">1800.00</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">36.00</td>
                            <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;">1764.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Total Payable -->
            <div style="border: 1px solid #e2e8f0; padding: 10px; margin-bottom: 10px; border-radius: 8px; background-color: #fff;">
                <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                    <tr>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;"><strong style="font-weight: 600; color: #2d3748;">Gross Amount</strong></td>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle; text-align: right;">6400.00</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle;"><strong style="font-weight: 600; color: #2d3748;">Discount</strong></td>
                        <td style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle; text-align: right;">82.00</td>
                    </tr>
                    <tr>
                        <th style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle; background-color: #edf2f7; font-weight: 600; color: #2d3748;"><strong>Total</strong></th>
                        <th style="border: 1px solid #e2e8f0; padding: 8px; vertical-align: middle; background-color: #edf2f7; text-align: right;">₹ 6318.00</th>
                    </tr>
                </table>
            </div>

            <!-- Signature Section -->
            <div style="text-align: right; padding: 10px; border: 2px solid #2c7a7b; background-color: #f9fafb; border-radius: 8px;">
                <img src="https://www.sign.plus/assets/images/electronic-signatures/sample-signature.png" alt="Digital Signature" style="width: 100px; height: auto; margin: 5px 0; border: 1px solid #e2e8f0; border-radius: 6px;">
                <p style="font-size: 10px; font-weight: 600; color: #2d3748; margin: 5px 0;">Authorised Signatory</p>
            </div>
        </div>
    </div>
@endsection