@extends('layouts.dashboard')

@section('page_title', 'INVOICE PREVIEW')

@section('content')
<div class="container-fluid px-0">
    <!-- Theme Selector Toolbar -->
    <div class="ff-toolbar d-flex justify-content-between align-items-center mb-4 p-3 rounded-3 shadow-sm" style="background: var(--bg-card); border: 1px solid var(--border-color);">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('accounting.index') }}" class="btn btn-outline-secondary btn-sm px-3 fw-bold"><i class="fa fa-arrow-left me-2"></i>Back</a>
            <div class="vr mx-2"></div>
            <label class="fw-bold text-muted small mb-0 d-none d-md-block"><i class="fa fa-paint-brush me-2"></i>SELECT UNIQUE DESIGN:</label>
            <div class="btn-group shadow-sm" role="group">
                <input type="radio" class="btn-check" name="invoice_theme" id="theme_premium" checked onchange="switchInvoiceTheme('premium')">
                <label class="btn btn-outline-primary btn-sm px-3 fw-bold" for="theme_premium">Trucking Premium</label>

                <input type="radio" class="btn-check" name="invoice_theme" id="theme_elite" onchange="switchInvoiceTheme('elite')">
                <label class="btn btn-outline-primary btn-sm px-3 fw-bold" for="theme_elite">Elite Logistics</label>

                <input type="radio" class="btn-check" name="invoice_theme" id="theme_cargo" onchange="switchInvoiceTheme('cargo')">
                <label class="btn btn-outline-primary btn-sm px-3 fw-bold" for="theme_cargo">Cargo Modern</label>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-dark btn-sm px-4 fw-bold shadow-sm" onclick="window.print()">
                <i class="fa fa-print me-2"></i>Print / Save
            </button>
        </div>
    </div>

    <!-- Invoice Area -->
    <div class="row">
        <div class="col-lg-9 mx-auto">
            <div class="ff-table-card shadow-lg bg-white text-dark mb-5 rounded-1 p-0" id="printableInvoice" style="min-height: 1120px; color: #1e293b !important; position: relative; overflow: hidden;">
                
                <!-- DESIGN 1: TRUCKING PREMIUM (Based on Image 2) -->
                <div id="premium_theme" class="invoice-content p-5">
                    <div class="d-flex justify-content-between align-items-start mb-5">
                        <div style="max-width: 60%;">
                            <h1 class="display-4 fw-900 mb-0" style="color: #0f172a; letter-spacing: -2px;">TRUCKING INVOICE</h1>
                            <div class="mt-4">
                                <p class="mb-0 fw-bold">Company:</p>
                                <p class="mb-0 text-muted">Flink Freight Solutions Inc.</p>
                                <p class="mb-0 text-muted">123 Logistics Way, Toronto, ON</p>
                                <p class="mb-0 text-muted">Tel: (416) 555-0199 | billing@flinkfreight.com</p>
                            </div>
                        </div>
                        <div class="text-end">
                            <!-- QR Code Placeholder -->
                            <div class="mb-3 d-inline-block p-2 border border-secondary border-2 rounded">
                                <i class="fa-solid fa-qrcode fa-5x opacity-75"></i>
                            </div>
                            <div class="small">
                                <p class="mb-0"><strong>Shipping Date:</strong> {{ date('m/d/Y') }}</p>
                                <p class="mb-0"><strong>Shipping Number:</strong> SHP-8829</p>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-5 py-4 border-top border-bottom border-2 border-dark">
                        <div class="col-6">
                            <p class="small text-uppercase fw-bold mb-2">Send To:</p>
                            <h5 class="fw-bold mb-1">Racer Printing & Box Mfg.</h5>
                            <p class="mb-0 text-muted">7890 Factory Road, Richmond, BC</p>
                            <p class="mb-0 text-muted">Contact: John Doe | (604) 555-0122</p>
                        </div>
                        <div class="col-6 text-end">
                            <div class="d-flex justify-content-end gap-4">
                                <div>
                                    <p class="small text-uppercase fw-bold mb-1">Invoice #</p>
                                    <p class="fw-bold h5">2021321</p>
                                </div>
                                <div>
                                    <p class="small text-uppercase fw-bold mb-1">Due Date</p>
                                    <p class="fw-bold h5">12/28/2026</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table class="table table-bordered border-secondary mb-4">
                        <thead class="bg-light">
                            <tr class="text-uppercase small fw-bold">
                                <th class="py-3">Description</th>
                                <th class="text-center py-3">Quantity</th>
                                <th class="text-end py-3">Unit Price</th>
                                <th class="text-end py-3">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="py-3 fw-bold">Freight Service: Load #245</td>
                                <td class="text-center">6</td>
                                <td class="text-end">100.00</td>
                                <td class="text-end">600.00</td>
                            </tr>
                            <tr>
                                <td class="py-3 fw-bold">Fuel Surcharge</td>
                                <td class="text-center">3</td>
                                <td class="text-end">20.00</td>
                                <td class="text-end">60.00</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="row justify-content-end">
                        <div class="col-5">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Subtotal:</span>
                                <span>585.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold text-muted small">Discount (10%):</span>
                                <span class="text-muted small">58.50</span>
                            </div>
                            <div class="d-flex justify-content-between h4 fw-bold border-top border-2 border-dark pt-3">
                                <span>TOTAL:</span>
                                <span>579.15</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- DESIGN 2: ELITE LOGISTICS (Based on Image 3) -->
                <div id="elite_theme" class="invoice-content d-none">
                    <div class="p-5">
                        <div class="row mb-5">
                            <div class="col-6">
                                <h3 class="fw-bold">Your Company Inc.</h3>
                                <p class="text-muted small">1234 Company St.<br>Company Town, ST 12345</p>
                            </div>
                            <div class="col-6 text-end">
                                <div class="border d-inline-block px-5 py-3 rounded text-muted">
                                    <i class="fa fa-cloud-upload me-2"></i> Logo Placeholder
                                </div>
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-6">
                                <p class="fw-bold small text-muted text-uppercase">Bill To</p>
                                <h4 class="fw-bold">Customer Name</h4>
                                <p class="text-muted">1234 Customer St.<br>Customer Town, ST 12345</p>
                            </div>
                            <div class="col-6 text-end">
                                <h1 class="fw-bold display-5 mb-4" style="color: #334155;">TRUCKING<br>INVOICE</h1>
                                <div class="row g-2 justify-content-end">
                                    <div class="col-auto text-end">
                                        <p class="mb-0 small fw-bold">Invoice #</p>
                                        <p class="mb-0 small fw-bold">Invoice date</p>
                                        <p class="mb-0 small fw-bold">Due date</p>
                                    </div>
                                    <div class="col-auto text-end">
                                        <p class="mb-0 small">0000007</p>
                                        <p class="mb-0 small">10-02-2026</p>
                                        <p class="mb-0 small">10-16-2026</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <table class="table table-sm mb-4">
                            <thead class="bg-dark text-white">
                                <tr class="text-uppercase small">
                                    <th class="py-2 px-3">QTY</th>
                                    <th class="py-2">Description</th>
                                    <th class="py-2 text-end">Unit Price</th>
                                    <th class="py-2 text-end px-3">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-bottom border-dark">
                                    <td class="py-3 px-3 fw-bold">1</td>
                                    <td class="py-3">Shipment from City A to City B (Full Load)</td>
                                    <td class="py-3 text-end">800.00</td>
                                    <td class="py-3 text-end px-3 fw-bold">$800.00</td>
                                </tr>
                                <tr class="border-bottom border-dark">
                                    <td class="py-3 px-3 fw-bold">3</td>
                                    <td class="py-3">Additional Fuel Surcharge</td>
                                    <td class="py-3 text-end">50.00</td>
                                    <td class="py-3 text-end px-3 fw-bold">$150.00</td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="row justify-content-end">
                            <div class="col-4">
                                <div class="d-flex justify-content-between border-bottom py-1">
                                    <span class="small fw-bold">Subtotal</span>
                                    <span class="small">$1780.00</span>
                                </div>
                                <div class="d-flex justify-content-between border-bottom py-1">
                                    <span class="small fw-bold">Sales Tax (5%)</span>
                                    <span class="small">$89.00</span>
                                </div>
                                <div class="d-flex justify-content-between bg-dark text-white p-2 mt-2">
                                    <span class="fw-bold">Total (USD)</span>
                                    <span class="fw-bold">$1869.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- DESIGN 3: CARGO MODERN (Based on Image 4) -->
                <div id="cargo_theme" class="invoice-content d-none p-5">
                    <div class="d-flex justify-content-between align-items-center mb-5 pb-5 border-bottom border-light">
                        <div class="d-flex align-items-center gap-3">
                            <div class="p-3 bg-danger-subtle rounded-3">
                                <i class="fa-solid fa-truck-moving fa-3x text-danger"></i>
                            </div>
                            <div>
                                <h2 class="fw-bold mb-0 text-danger" style="letter-spacing: 2px;">CARGO</h2>
                                <h3 class="fw-light mb-0 text-secondary" style="letter-spacing: 4px;">SOLUTIONS</h3>
                            </div>
                        </div>
                        <div class="text-end text-muted small">
                            <h4 class="text-dark fw-bold mb-3">INVOICE</h4>
                            <p class="mb-0">Cargo Solutions Inc.</p>
                            <p class="mb-0">123 Logistics Parkway</p>
                            <p class="mb-0">cargosolutions@mail.com</p>
                        </div>
                    </div>

                    <div class="row mb-5 g-5">
                        <div class="col-6">
                            <p class="small text-danger fw-bold text-uppercase mb-2">Your client</p>
                            <h5 class="fw-bold">Global Importers Ltd.</h5>
                            <p class="text-muted small">Route 66 Industrial Park<br>Los Angeles, CA 90001</p>
                        </div>
                        <div class="col-6 text-end pt-4">
                            <div class="d-flex justify-content-end gap-5">
                                <div>
                                    <p class="small text-muted mb-1">Invoice No:</p>
                                    <p class="small text-muted mb-1">Issue date:</p>
                                    <p class="small text-muted mb-1">Due date:</p>
                                </div>
                                <div>
                                    <p class="small fw-bold mb-1">202235</p>
                                    <p class="small fw-bold mb-1">11/05/2026</p>
                                    <p class="small fw-bold mb-1">12/05/2026</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead style="background: #fecaca; color: #dc2626;">
                                <tr class="text-uppercase small fw-bold">
                                    <th class="py-3 px-4">Description</th>
                                    <th class="text-center">Quantity</th>
                                    <th class="text-end">Unit Price</th>
                                    <th class="text-end px-4">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-bottom border-light">
                                    <td class="py-4 px-4 fw-bold">Cross-border Transportation</td>
                                    <td class="text-center py-4">1</td>
                                    <td class="text-end py-4">2,100.00</td>
                                    <td class="text-end py-4 px-4">2,100.00</td>
                                </tr>
                                <tr class="border-bottom border-light">
                                    <td class="py-4 px-4 fw-bold">Fuel surcharge</td>
                                    <td class="text-center py-4">1</td>
                                    <td class="text-end py-4">480.00</td>
                                    <td class="text-end py-4 px-4">480.00</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="row justify-content-end mt-4">
                        <div class="col-5">
                            <div class="d-flex justify-content-between mb-2 small text-muted">
                                <span>TOTAL (USD):</span>
                                <span>$2,580.00</span>
                            </div>
                            <div class="d-flex justify-content-between h3 fw-bold border-top border-danger border-3 pt-3">
                                <span class="text-danger">TOTAL DUE:</span>
                                <span>$2,580.00</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    function switchInvoiceTheme(theme) {
        // Hide all designs
        document.getElementById('premium_theme').classList.add('d-none');
        document.getElementById('elite_theme').classList.add('d-none');
        document.getElementById('cargo_theme').classList.add('d-none');
        
        // Show selected design
        document.getElementById(theme + '_theme').classList.remove('d-none');
    }
</script>

<style>
    .fw-900 { font-weight: 900; }
    .letter-spacing-1 { letter-spacing: 1px; }
    .letter-spacing-2 { letter-spacing: 2px; }
    
    @media print {
        .ff-sidebar, .ff-toolbar, .ff-header, .no-print, .offcanvas { display: none !important; }
        #printableInvoice { 
            position: absolute; left: 0; top: 0; width: 100%; 
            box-shadow: none !important; border: none !important; padding: 0 !important; 
        }
        body { background: white !important; color: black !important; }
    }
</style>
@endsection