@extends('template.layouts.template-base')
@section('title', 'Order - Invoice Details')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header product-main invoice-detail">
        <div class="container-fluid">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-6">
                    <h4 class="page-title">
                        <a href="{{ route('backend.order-management.invoice') }}"> Invoice / <span
                                class="breadcrumb-link">Invoice View</span></a>
                    </h4>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class="lang-wrapper">
                        <button class="lang-trigger" id="langBtn">
                            <span id="langSelected">English</span>
                            <i class="ri-arrow-down-s-fill"></i>
                        </button>
                        <ul class="lang-list" id="langMenu">
                            <li class="current">English</li>
                            <li>Tamil</li>
                        </ul>
                    </div>
                    <button class="btn print-btn">
                        <img src="{{ asset('assets/template/images/printer-1.png') }}" alt="Cattle Feed"
                            class="printer-img" /> Print Invoice
                    </button>
                    <button class="btn download-button">
                        <img src="{{ asset('assets/template/images/file-pdf-2.png') }}" alt="Cattle Feed"
                            class="file-pdf-img" /> Download Invoice
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="invoice-detail-page">
        <div class="details-section">
            <div class="invoice-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h1 class="invoice-title">Annapurna Cattle Feeds</h1>
                    </div>
                    <div class="col-md-6 text-end">
                        <p class="invoice-number">#INV2540 / Jan 26, 2026</p>
                    </div>
                </div>
            </div>
            <div class="row g-4 mt-2">
                <div class="col-md-3">
                    <img src="{{ asset('assets/template/images/logo.jpg') }}" alt="Cattle Feed" class="invoice-logo" />
                </div>
                <div class="col-md-4">
                    <h2 class="section-title">Customer Details</h2>
                    <div class="customer-detail-card">
                        <div class="customer-detail-item">
                            Cloudi5 Technologies,
                        </div>
                        <div class="customer-detail-item">
                            12/34, ABC Street, Ganapathy Post,
                        </div>
                        <div class="customer-detail-item">
                            Coimbatore, India 123 456.
                        </div>
                        <div class="customer-detail-item ">
                            <span class="detail-label">Ph:</span> +91 1234567890
                        </div>
                        <div class="customer-detail-item">
                            <span class="detail-label">Email:</span> customerx@gmail.com
                        </div>
                        <div class="customer-detail-item">
                            <span class="detail-label">GSITIN:</span> A8716227365111O
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <h2 class="section-title">Order Details</h2>
                    <div class="detail-card">
                        <div class="detail-item">
                            <span class="detail-label">Ordered ID</span>
                            <span class="detail-value float-end">#1234567</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Ordered Date</span>
                            <span class="detail-value float-end">Jan 26, 2026</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Delivered Date</span>
                            <span class="detail-value float-end">Jan 26, 2026</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Payment Method</span>
                            <span class="detail-value float-end">UPI</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-section">
            <div class="invoice-header">
                <h2 class="invoice-title">Product Details</h2>
            </div>
            <div class="table-container mt-3">
                <table class="table product-table table-borderless">
                    <thead>
                        <tr>
                            <th>Sl. No</th>
                            <th>Product Name</th>
                            <th>HSN</th>
                            <th>Kgs</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Taxable Value</th>
                            <th>GST</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Cattle Feed</td>
                            <td>ABC123</td>
                            <td>50</td>
                            <td>₹800</td>
                            <td>3</td>
                            <td>₹0000</td>
                            <td>2%</td>
                            <td>₹2,400</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Cattle Feed</td>
                            <td>ABC123</td>
                            <td>50</td>
                            <td>₹800</td>
                            <td>3</td>
                            <td>₹0000</td>
                            <td>2%</td>
                            <td>₹2,400</td>
                        </tr>
                        <tr class="totals-row">
                            <td colspan="5"></td>
                            <td class="text-end-custom"><strong>Sub Total :</strong></td>
                            <td><strong>3</strong></td>
                            <td><strong>₹0000</strong></td>
                            <td><strong>₹0000</strong></td>
                        </tr>
                        <tr class="totals-row">
                            <td colspan="5"></td>
                            <td class="text-end-custom"><strong>X Charges :</strong></td>
                            <td colspan="2"></td>
                            <td><strong>₹0000</strong></td>
                        </tr>
                        <tr class="total-row">
                            <td colspan="5"></td>
                            <td class="text-end-custom"><strong>Total :</strong></td>
                            <td colspan="2"></td>
                            <td><strong>₹0000</strong></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        const wrapper = document.querySelector('.lang-wrapper');
        const btn = document.getElementById('langBtn');
        const menu = document.getElementById('langMenu');
        const selected = document.getElementById('langSelected');

        btn.addEventListener('click', () => {
            wrapper.classList.toggle('open');
        });

        menu.querySelectorAll('li').forEach(item => {
            item.addEventListener('click', () => {
                selected.textContent = item.textContent;

                menu.querySelectorAll('li').forEach(li => li.classList.remove('current'));
                item.classList.add('current');

                wrapper.classList.remove('open');
            });
        });
        document.addEventListener('click', e => {
            if (!wrapper.contains(e.target)) {
                wrapper.classList.remove('open');
            }
        });
    </script>

@endsection