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

@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-header-sec">
        <div class="container-fluid">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-6">
                    <h4 class="page-title">
                        Orders / <span style="color: #0d47a1">Invoices</span>
                    </h4>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class=" action-buttons d-none" id="bulkActions">
                        <button class="btn download-btn">
                            <i class="ri-file-pdf-fill"></i> Download Invoice
                        </button>
                        <button class="btn print-btn">
                            <i class="ri-printer-line"></i> Print Invoice
                        </button>
                    </div>
                    <a class="btn-add-category" href="javascript:void(0);">
                        Export
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec invoice-page">
        <div class="content-wrapper">
            <div class="container-fluid invoice-header">
                <div class="row align-items-center">
                    <div class="col-md-4 col-12 mb-2 mb-md-0">
                        <span class="invoice-count">Total Invoices - 08</span>
                    </div>
                    <div class="col-md-8 col-12">
                        <div class="row g-2 justify-content-md-end">
                            <div class="col-md-3 col-6">
                                <div class="input-group custom-input position-relative">
                                    <i class="bx bx-calendar-event"></i>
                                    <input type="text" class="date-picker-input" id="fromDate1" placeholder="From date" />
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="input-group custom-input position-relative">
                                    <i class="bx bx-calendar-event"></i>
                                    <input type="text" class="date-picker-input" id="toDate2" placeholder="To Date" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="search-box-category">
                                    <input type="text" placeholder="Search" id="searchInput">
                                    <i class="bx bx-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table align-middle mb-0 orders-table-container">
                        <thead class="custom-table-header">
                            <tr>
                                <th scope="col"><input type="checkbox" id="selectAll"></th>
                                <th scope="col">Invoice ID</th>
                                <th scope="col">Billing Name</th>
                                <th scope="col">Order ID</th>
                                <th scope="col">Ordered Date</th>
                                <th scope="col">Delivered Date</th>
                                <th scope="col">Total</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody id="categoryList">
                            <tr>
                                <td>
                                    <input type="checkbox" class="category-checkbox">
                                </td>
                                <td>
                                    #INV2540
                                </td>
                                <td>
                                    <div>Parthiban</div>
                                    <small class="text-muted">+91 09876 54321</small>
                                </td>
                                <td>
                                    #1234567
                                </td>
                                <td>
                                    Jan 26,2026
                                </td>
                                <td>
                                    Jan 02,2026
                                </td>
                                <td>
                                    ₹1000
                                </td>
                                <td>
                                    <div class="action-icons">
                                        <a href="{{ route('backend.order-management.invoice-details') }}"
                                            class="action-dropdown-item"> <i class="ri-eye-fill fs-5"></i></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"><img
                                                src="{{ asset('assets/template/images/printer.png') }}" alt="Cattle Feed"
                                                class="printer-img" /></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"> <img
                                                src="{{ asset('assets/template/images/file-pdf.png') }}" alt="Cattle Feed"
                                                class="file-pdf-img" /></a>
                                        <a href="javascript:void(0);"><img
                                                src="{{ asset('assets/template/images/whatsapp.png') }}" alt="Images"
                                                class="watsapp-image"></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" class="category-checkbox">
                                </td>
                                <td>
                                    #INV2540
                                </td>
                                <td>
                                    <div>Parthiban</div>
                                    <small class="text-muted">+91 09876 54321</small>
                                </td>
                                <td>
                                    #1234567
                                </td>
                                <td>
                                    Jan 26,2026
                                </td>
                                <td>
                                    Jan 02,2026
                                </td>
                                <td>
                                    ₹1000
                                </td>
                                <td>
                                    <div class="action-icons">
                                        <a href="{{ route('backend.order-management.invoice-details') }}"
                                            class="action-dropdown-item"> <i class="ri-eye-fill fs-5"></i></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"><img
                                                src="{{ asset('assets/template/images/printer.png') }}" alt="Cattle Feed"
                                                class="printer-img" /></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"> <img
                                                src="{{ asset('assets/template/images/file-pdf.png') }}" alt="Cattle Feed"
                                                class="file-pdf-img" /></a>
                                        <a href="javascript:void(0);"><img
                                                src="{{ asset('assets/template/images/whatsapp.png') }}" alt="Images"
                                                class="watsapp-image"></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" class="category-checkbox">
                                </td>
                                <td>
                                    #INV2540
                                </td>
                                <td>
                                    <div>Parthiban</div>
                                    <small class="text-muted">+91 09876 54321</small>
                                </td>
                                <td>
                                    #1234567
                                </td>
                                <td>
                                    Jan 26,2026
                                </td>
                                <td>
                                    Jan 02,2026
                                </td>
                                <td>
                                    ₹1000
                                </td>
                                <td>
                                    <div class="action-icons">
                                        <a href="{{ route('backend.order-management.invoice-details') }}"
                                            class="action-dropdown-item"> <i class="ri-eye-fill fs-5"></i></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"><img
                                                src="{{ asset('assets/template/images/printer.png') }}" alt="Cattle Feed"
                                                class="printer-img" /></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"> <img
                                                src="{{ asset('assets/template/images/file-pdf.png') }}" alt="Cattle Feed"
                                                class="file-pdf-img" /></a>
                                        <a href="javascript:void(0);"><img
                                                src="{{ asset('assets/template/images/whatsapp.png') }}" alt="Images"
                                                class="watsapp-image"></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" class="category-checkbox">
                                </td>
                                <td>
                                    #INV2540
                                </td>
                                <td>
                                    <div>Parthiban</div>
                                    <small class="text-muted">+91 09876 54321</small>
                                </td>
                                <td>
                                    #1234567
                                </td>
                                <td>
                                    Jan 26,2026
                                </td>
                                <td>
                                    Jan 02,2026
                                </td>
                                <td>
                                    ₹1000
                                </td>
                                <td>
                                    <div class="action-icons">
                                        <a href="{{ route('backend.order-management.invoice-details') }}"
                                            class="action-dropdown-item"> <i class="ri-eye-fill fs-5"></i></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"><img
                                                src="{{ asset('assets/template/images/printer.png') }}" alt="Cattle Feed"
                                                class="printer-img" /></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"> <img
                                                src="{{ asset('assets/template/images/file-pdf.png') }}" alt="Cattle Feed"
                                                class="file-pdf-img" /></a>
                                        <a href="javascript:void(0);"><img
                                                src="{{ asset('assets/template/images/whatsapp.png') }}" alt="Images"
                                                class="watsapp-image"></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox" class="category-checkbox">
                                </td>
                                <td>
                                    #INV2540
                                </td>
                                <td>
                                    <div>Parthiban</div>
                                    <small class="text-muted">+91 09876 54321</small>
                                </td>
                                <td>
                                    #1234567
                                </td>
                                <td>
                                    Jan 26,2026
                                </td>
                                <td>
                                    Jan 02,2026
                                </td>
                                <td>
                                    ₹1000
                                </td>
                                <td>
                                    <div class="action-icons">
                                        <a href="{{ route('backend.order-management.invoice-details') }}"
                                            class="action-dropdown-item"> <i class="ri-eye-fill fs-5"></i></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"><img
                                                src="{{ asset('assets/template/images/printer.png') }}" alt="Cattle Feed"
                                                class="printer-img" /></a>
                                        <a href="javascript:void(0);" class="action-dropdown-item"> <img
                                                src="{{ asset('assets/template/images/file-pdf.png') }}" alt="Cattle Feed"
                                                class="file-pdf-img" /></a>
                                        <a href="javascript:void(0);"><img
                                                src="{{ asset('assets/template/images/whatsapp.png') }}" alt="Images"
                                                class="watsapp-image"></a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="categoryAddedActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Category Added Successfully</h6>
                    <p>The Category has been added successfully and is now available in the category list.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="categoryAddedInActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Category Added Successfully</h6>
                    <p>The Category has been added successfully and is currently inactive. You can activate it anytime from
                        the category list.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="editCategoryActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Category Updated Successfully</h6>
                    <p>The category details have been updated successfully.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="editCategoryInActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Category Added Successfully</h6>
                    <p>The category details have been updated successfully. and is currently inactive. You can activate it
                        anytime from the category list.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade remove-product-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Product?</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="row form-row edit-category">
                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete this product? This product will be permanently removed from
                                the product list. This action cannot be undone.</p>
                        </div>
                    </div>
                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#deleteToast">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade add-stock-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <h5>Add Stock</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="stock-wrapper">
                        <p class="stock-note">
                            Enter the quantity you want to add to the existing stock.
                        </p>
                        <div class="stock-row">
                            <div class="stock-field">
                                <label>Stock Level</label>
                                <input type="text" placeholder="Enter Category Name">
                            </div>
                            <div class="stock-field">
                                <label>Stock Alert</label>
                                <input type="text" placeholder="Enter Category Name">
                            </div>
                        </div>
                    </div>
                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">

                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#addStockToast">
                            Add Stock
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Delete Successful</h6>
                    <p>The Product has been deleted successfully.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="addStockToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">
                        ✓
                    </div>
                </div>
                <div class="toast-right">
                    <h6>Added Successful</h6>
                    <p>The Product stock has been added successfully.</p>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        flatpickr("#fromDate1", { dateFormat: "M d, Y" });
        flatpickr("#toDate1", { dateFormat: "M d, Y" });
        flatpickr("#fromDate2", { dateFormat: "M d, Y" });
        flatpickr("#toDate2", { dateFormat: "M d, Y" });
        flatpickr("#fromDate3", { dateFormat: "M d, Y" });
        flatpickr("#toDate3", { dateFormat: "M d, Y" });
        flatpickr("#fromDate4", { dateFormat: "M d, Y" });
        flatpickr("#toDate4", { dateFormat: "M d, Y" });

    </script>

    <script>
        document.addEventListener('click', function (e) {

            document.querySelectorAll('.description-full.show').forEach(el => {
                el.classList.remove('show');
            });

            const desc = e.target.closest('.description-text');
            if (desc) {
                const fullText = desc.querySelector('.description-full');
                fullText.classList.add('show');
            }
        });
    </script>

    <script>
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        // Toggle buttons visibility
        function toggleBulkActions() {
            const anyChecked = [...checkboxes].some(cb => cb.checked);
            bulkActions.classList.toggle('d-none', !anyChecked);
        }

        // Select All checkbox
        selectAll?.addEventListener('change', function () {
            checkboxes.forEach(cb => cb.checked = this.checked);
            toggleBulkActions();
        });

        // Individual checkbox change
        checkboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                selectAll.checked = [...checkboxes].every(c => c.checked);
                toggleBulkActions();
            });
        });
    </script>
    <script>
        function switchTab(tabName) {
            const tabs = document.querySelectorAll('.tab');
            const contents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => tab.classList.remove('active'));
            contents.forEach(content => content.classList.remove('active'));

            event.target.classList.add('active');
            document.getElementById(tabName).classList.add('active');
        }
    </script>

@endsection