@extends('adminlte::page')

@section('content')
    <style>
        body {
            font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
            font-size: 14px;
            margin: 20px;
            color: #2d3748;
            background-color: #f7fafc;
            line-height: 1.5;
        }

        h2 {
            font-size: 28px;
            font-weight: 700;
            color: #2c7a7b;
            margin: 0;
            padding: 8px 0;
        }

        h4 {
            font-size: 16px;
            color: #4a5568;
            margin: 0;
            padding: 5px 0;
        }

        .container-fluid {
            max-width: 1200px;
            margin: 0 auto;
        }

        .invoice-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .header,
        .summary-section,
        .discount-section,
        .signature-section {
            border: 1px solid #e2e8f0;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            background-color: #fff;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        th,
        td {
            border: 1px solid #e2e8f0;
            padding: 12px;
            text-align: left;
            vertical-align: middle;
            transition: background-color 0.3s ease;
        }

        th {
            background-color: #edf2f7;
            font-weight: 600;
            color: #2d3748;
            text-transform: uppercase;
            font-size: 13px;
        }

        td:hover {
            background-color: #f1f5f9;
        }

        .text-right {
            text-align: right;
        }

        .invoice-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
        }

        .logo-section {
            flex: 0.2;
            text-align: left;
        }

        .logo-section svg {
            width: 90px;
            height: 90px;
            transition: transform 0.3s ease;
        }

        .logo-section svg:hover {
            transform: scale(1.1);
        }

        .company-details {
            flex: 1;
            text-align: center;
        }

        .qr-section {
            flex: 0.3;
            text-align: center;
        }

        .qr-section img {
            width: 150px;
            height: 150px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .qr-section img:hover {
            transform: scale(1.1);
        }

        .highlight {
            background-color: #e6fffa;
            font-weight: 600;
        }

        .flex-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
        }

        .one-third {
            flex: 1;
            min-width: 250px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .narrow {
            flex: 0.8;
            min-width: 200px;
        }

        .discount-section table {
            border: none;
        }

        .discount-section td,
        .discount-section th {
            border: none;
            padding: 8px;
        }

        .declaration {
            font-style: italic;
            margin-top: 20px;
            color: #718096;
            font-size: 13px;
        }

        .bank-details,
        .payment-terms {
            margin-top: 20px;
        }

        .bank-details td,
        .payment-terms li {
            font-size: 13px;
            color: #4a5568;
        }

        small {
            font-size: 12px;
            color: #718096;
        }

        .item-name {
            font-weight: 600;
            font-size: 14px;
            color: #2d3748;
        }

        strong {
            font-weight: 600;
            color: #2d3748;
        }

        .payment-terms ul {
            padding-left: 25px;
            list-style-type: disc;
        }

        .discount-section .discount-column {
            flex: 7;
            min-width: 300px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .signature-section {
            flex: 3;
            min-width: 200px;
            text-align: center;
            background-color: #f9fafb;
            border: 2px solid #2c7a7b;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .signature-section img {
            width: 180px;
            height: auto;
            margin: 20px 0;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            transition: transform 0.3s ease;
        }

        .signature-section img:hover {
            transform: scale(1.05);
        }

        .signature-section p {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
        }

        @media screen and (max-width: 768px) {
            .invoice-title {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .logo-section,
            .qr-section {
                margin-bottom: 20px;
            }

            .flex-row {
                flex-direction: column;
            }

            .one-third,
            .narrow,
            .discount-column,
            .signature-section {
                flex: 1;
                min-width: 100%;
            }
        }

        @media print {
            body {
                margin: 0;
                background-color: #fff;
                font-size: 12pt;
            }

            .invoice-container {
                box-shadow: none;
                border: none;
            }

            .header,
            .summary-section,
            .discount-section,
            .one-third,
            .discount-column,
            .signature-section {
                box-shadow: none;
                border: 1px solid #ccc;
            }

            .signature-section {
                border: 2px solid #2c7a7b;
            }

            .qr-section img:hover,
            .logo-section svg:hover,
            .signature-section img:hover,
            td:hover {
                transform: none;
                background-color: transparent;
            }

            .invoice-title {
                border: 1px solid #ccc;
            }
        }
    </style>

    <div class="container-fluid invoice-container py-4">
        <div class="invoice-title">
            <div class="logo-section">
                <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="12" />
                    <text x="50" y="50" font-family="Roboto, sans-serif" font-size="40" 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 class="company-details">
                <h2>Composite</h2>
                <h1>S.Mamta Automobiles</h1>
                <p>No.60/40, Vembuli Subadar St., Alandur, Chennai - 600016, Tamil Nadu</p>
            </div>
            <div class="qr-section">
                <strong>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=150x150"
                    alt="QR Code">
            </div>
        </div>

        <!-- Header Table -->
        <div class="header">
            <table>
                <tr>
                    <td><strong>GSTIN:</strong> 33ABZFS8717J1ZD</td>
                    <td><strong>PAN:</strong> ABZFS8717J</td>
                    <td><strong>Invoice No:</strong> 1143/24-25</td>
                    <td><strong>Date:</strong> 24-06-2025</td>
                </tr>
                <tr>
                    <td><strong>Buyer:</strong> S. SARAVANAN</td>
                    <td><strong>Place of Supply:</strong> Tamil Nadu</td>
                    <td><strong>Invoice Type:</strong> Regular</td>
                    <td><strong>State Code:</strong> 33</td>
                </tr>
            </table>
        </div>

        <div class="flex-row">
            <div class="one-third">
                <strong>Bill To:</strong><br>
                S.Mamta Automobiles<br>
                No:60/40, Vembuli Subadar St., Alandur, Chennai-16,<br>
                Behind Le Royal Meridien Hotel<br>
                GSTIN: 33AMPPT7332D1ZC
            </div>
            <div class="one-third">
                <strong>Ship To:</strong><br>
                M/s MAMTA AUTOMOBILES<br>
                No:60/40, Vembuli Subadar St., Alandur, Chennai-16,<br>
                Near Le Royal Meridien Hotel<br>
                GSTIN: 33AMPPT7332D1ZC
            </div>
        </div>

        <!-- Item Table -->
        <div class="header">
            <table>
                <thead>
                    <tr>
                        <th>Sl.</th>
                        <th>Material Description</th>
                        <th>HSN</th>
                        <th>Qty</th>
                        <th>Unit</th>
                        <th>MRP</th>
                        <th>Rate</th>
                        <th>Taxable Amt</th>
                        <th>Disc</th>
                        <th>Disc Amt</th>
                        <th>BOI</th>
                        <th>BOI Amt</th>
                        <th>Gross</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>
                            <span class="item-name">Tyre A</span><br>
                            <small>Free Item: Tube A</small><br>
                            <small>Serial No: SN001</small>
                        </td>
                        <td>4011.10.10</td>
                        <td>2<br><small>(Free: 1)</small></td>
                        <td>EA</td>
                        <td>1200.00</td>
                        <td>1050.00</td>
                        <td>2100.00</td>
                        <td>2%</td>
                        <td>21.00</td>
                        <td>2%</td>
                        <td>21.00</td>
                        <td>2058.00</td>
                        <td>2205.00</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>
                            <span class="item-name">Tyre B</span><br>
                            <small>Free Item: Tube B</small><br>
                            <small>Serial No: SN002</small>
                        </td>
                        <td>4011.20.20</td>
                        <td>2</td>
                        <td>EA</td>
                        <td>1400.00</td>
                        <td>1250.00</td>
                        <td>2300.00</td>
                        <td>2%</td>
                        <td>25.00</td>
                        <td>2%</td>
                        <td>25.00</td>
                        <td>2250.00</td>
                        <td>2800.00</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>
                            <span class="item-name">Tyre C</span><br>
                            <small>Free Item: Tube C</small><br>
                            <small>Serial No: SN003</small>
                        </td>
                        <td>4011.30.30</td>
                        <td>1</td>
                        <td>EA</td>
                        <td>2000.00</td>
                        <td>1800.00</td>
                        <td>1800.00</td>
                        <td>2%</td>
                        <td>36.00</td>
                        <td>2%</td>
                        <td>36.00</td>
                        <td>1728.00</td>
                        <td>2124.00</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Bank Details and Total Payable -->
        <div class="flex-row">
            <div class="one-third">
                <strong>Bank Details:</strong>
                <table class="bank-details">
                    <tr>
                        <td>Bank Name:</td>
                        <td>Bank of India</td>
                    </tr>
                    <tr>
                        <td>Branch:</td>
                        <td>Guindy</td>
                    </tr>
                    <tr>
                        <td>A/C No.:</td>
                        <td>123456789012</td>
                    </tr>
                    <tr>
                        <td>IFSC:</td>
                        <td>BKID0001234</td>
                    </tr>
                    <tr>
                        <td>UPI ID:</td>
                        <td>mamta@upi</td>
                    </tr>
                </table>
            </div>
            <div class="one-third narrow">
                <strong>Total Payable:</strong>
                <table>
                    <tr>
                        <td>Gross Amount</td>
                        <td class="text-right">6400.00</td>
                    </tr>
                    <tr>
                        <td>Discount</td>
                        <td class="text-right">82.00</td>
                    </tr>
                    <tr>
                        <td>Net Amount</td>
                        <td class="text-right">6318.00</td>
                    </tr>
                    <tr>
                        <th>Total</th>
                        <th class="text-right">₹ 6318.00</th>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Discount Scheme and Signature -->
        <div class="discount-section">
            <div class="flex-row">
                <div class="discount-column">
                    <strong>Discount Schemes Applied:</strong>
                    <table>
                        <tr>
                            <td>Flat BOI Scheme on all items</td>
                            <td class="text-right">₹82.00</td>
                        </tr>
                    </table>
                    <div class="payment-terms">
                        <strong>Payment Terms & Conditions:</strong>
                        <ul>
                            <li>Payment should be made within 7 days from the date of invoice.</li>
                            <li>Late payments may attract 1.5% interest per month.</li>
                            <li>UPI / NEFT / IMPS transfers are accepted.</li>
                            <li>Cheque payments are subject to clearance.</li>
                        </ul>
                    </div>
                    <p class="declaration">All disputes are subject to Chennai jurisdiction.</p>
                </div>
                <div class="signature-section">
                    <p>For S.Mamta Automobiles</p>
                    <img src="https://www.sign.plus/assets/images/electronic-signatures/sample-signature.png" alt="Digital Signature">
                    <p>Authorised Signatory</p>
                </div>
            </div>
        </div>
    </div>
@endsection