@extends('layouts.admin')
@section('content')

<style>
    h2#heading-roof-box {
            padding-right: 30px;
        }

        h2#heading-roof-box a.edit-btn-eye {
            margin-right: 5px;
        }
        h2#heading-roof-box {
padding-right: 30px;
}

h2#heading-roof-box a.edit-btn-eye {
margin-right: 5px;
}

.upper-btns-modal-pair button.btn-primary.comn-modal-btns-blue {
    background-color: var(--maincolor);
    color: white;
    border-color: var(--maincolor);
    width: 100%;
    max-width: 25%;
    min-width: 25%;
}

.quantity-info {
display: flex;
flex-direction: column;
gap: 4px;
}

.rented-count {
font-size: 12px;
color: #e74c3c;
font-weight: 500;
}

.available-count {
font-size: 12px;
color: #27ae60;
font-weight: 500;
}

.low-stock {
color: #f39c12;
font-weight: bold;
}

.out-of-stock {
color: #e74c3c;
font-weight: bold;
}

.dropdowns-inner-list {
    width: 70%;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dropdowns-inner-list > .dropdowns-inner-list {
    width: 228px;
}

.dropdowns-inner-list > .dropdowns-inner-list input#inputPassword5 {
    width: 100%;
}
.notifi-list {
    align-items: flex-start;
}
   </style>
        
            <div class="col-9 main-dash-left">

                <div class="comm_head_top">
                    <div class="name-head">
                        <h2>SPO Product Management</h2>
                        
                    </div>
                    <div class="cards-dashboard">
                        <div class="row row-gap-3">
                            <div class="col-lg-3 col-md-6">
                                <div class="inner-dashboard-card back-green">
                                    <div class="ing-sec-acrd-dash">
                                        <figure class="logo-card"><img src="{{asset('admin/images/total.png')}}" alt=""></figure>
                                        <div class="main-card-analy d-flex">
                                            <div class="text-disc-card">
                                                <p>Net Revenue(excl. tax)</p>
                                                <h4>{{ $analytics['net_revenue'] }}</h4>
                                            </div>
                                            <figure class="img-graph">
                                                <img src="{{asset('admin/images/green-line.png')}}" alt="">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="inner-dashboard-card back-purple">
                                    <div class="ing-sec-acrd-dash">
                                        <figure class="logo-card"><img src="{{asset('admin/images/return.png')}}" alt=""></figure>
                                        <div class="main-card-analy d-flex">
                                            <div class="text-disc-card">
                                                <p>Number of Bookings</p>
                                                <h4>{{ $analytics['total_bookings'] }}</h4>
                                            </div>
                                            <figure class="img-graph">
                                                <img src="{{asset('admin/images/white-line.png')}}" alt="">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="inner-dashboard-card back-yellow">
                                    <div class="ing-sec-acrd-dash">
                                        <figure class="logo-card"><img src="{{asset('admin/images/top.png')}}" alt=""></figure>
                                        <div class="main-card-analy d-flex">
                                            <div class="text-disc-card">
                                                <p>Number Of Cancellations</p>
                                                <h4>{{ $analytics['cancellations'] }}</h4>
                                            </div>
                                            <figure class="img-graph">
                                                <img src="{{asset('admin/images/orange-line.png')}}" alt="">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="inner-dashboard-card back-parrot">
                                    <div class="ing-sec-acrd-dash">
                                        <figure class="logo-card"><img src="{{asset('admin/images/lost.png')}}" alt=""></figure>
                                        <div class="main-card-analy d-flex">
                                            <div class="text-disc-card">
                                                <p>Total Revenue Bookings</p>
                                                <h4>{{ $analytics['total_revenue'] }}</h4>
                                            </div>
                                            <figure class="img-graph">
                                                <img src="{{asset('admin/images/parot-line.png')}}" alt="">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                  



                    <div class="notifi-list d-flex">
                        <h6>{{ 'SPOID' . $vendor->id . ' (' . ucfirst($vendor->title) . ' ' . $vendor->first_name . ' ' . $vendor->last_name . ' -  ' . $vendor->city . ')' }}</h6>
                        <div class="dropdowns-inner-list d-flex">
                            <div class="dropdowns-inner-list">
                                <div class="icon-search-main white_bg">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <input aria-describedby="passwordHelpBlock" placeholder="Search For Products"
                                        type="text" id="inputPassword5" class="form-control" value="">
                                </div>
                            </div>
                            <div class="filter-main-div">
                                <p class="lable-filt">Filter:</p>
                                <div class="dropdown">
                                    <button class="filter-btn dropdown-toggle" type="button" id="categoryFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fa-solid fa-filter"></i> Filter
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="categoryFilterDropdown">
                                        <li><a class="dropdown-item filter-category" href="#" data-category="all">All Categories</a></li>
                                        @foreach($groupedByCategory as $categoryName => $products)
                                            @php $categoryId = \Illuminate\Support\Str::slug($categoryName); @endphp
                                            <li><a class="dropdown-item filter-category" href="#" data-category="{{ $categoryId }}">{{ $categoryName }}</a></li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="sownload-cv-pdf">
                                    
                                    <button class="download-pdf" id="download-pdf" data-vendor-id="{{ $vendor->id }}">Download PDF</button>
                                    <button id="download-csv" class="download-pdf" data-vendor-id="{{ $vendor->id }}">Download CSV</button>
                                </div>
                                
                            </div>
                            
                            <a class="add-notification-btn" id="enableMoreProducts" href="" data-vendor-id="{{ $vendor->id }}">Enable Product Categories</a>
                            <button class=" add-notification-btn" data-bs-toggle="modal" data-bs-target="#downloadTemplateModal">Download Quantity Template</button>
                            <button class=" add-notification-btn" data-bs-toggle="modal" data-bs-target="#uploadCsvModal">Upload Quantity Template</button>
                        </div>
                        
                    </div>



                    <div class="accordion product_accordion" id="accordionExample">
                  
                       
                        @foreach($groupedByCategory as $categoryName => $products)
                            @php $categoryId = \Illuminate\Support\Str::slug($categoryName); @endphp
                            @php
                                        $product = $products->first(); 
                                    @endphp
                            <div class="accordion-item">
                                <h2 class="accordion-header aco-head-flex flex-edit-btn" id="heading-{{ $categoryId }}">

                                    <button class="accordion-button comm_heading_20" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse-{{ $categoryId }}" aria-expanded="true"
                                            aria-controls="collapse-{{ $categoryId }}">
                                        {{ $categoryName }}
                                       
                                    </button>
                                    
                                  
                                  
                                    
                                </h2>
                                <div id="collapse-{{ $categoryId }}" class="accordion-collapse collapse show"
                                    aria-labelledby="heading-{{ $categoryId }}" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div class="notification-table pt-0">
                                            <table class="table">
                                                <thead>
                                                    <tr class="head-class-td">
                                                        <th>Nr.</th>
                                                        <th>SKU</th>
                                                        <th>Product Name</th>
                                                        <th>Size/Variation</th>
                                                        <th>Color</th>
                                                        <th>Total Quantity</th>
                                                        <th>Remaining Quantity</th>
                                                        <th>Dimensions</th>
                                                        <th>Weight</th>
                                                        <th>Volume</th>
                                                        <th>Action</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($products as $product)
                                                                                                        @php $i = 1; @endphp

                                                        @if($product->variations->isEmpty())
                                                            <tr>
                                                                <td>{{ $i++ }}</td>
                                                                <td>{{ $product->sku ?? '-' }}</td>
                                                                <td>{{ $product->name }}</td>
                                                                <td>-</td>
                                                                <td>{{ $product->color->name ?? '-' }}</td>
                                                                <td>N/A</td>
                                                                <td>N/A</td>
                                                                <td>{{ $product->length }} x {{ $product->width }} x {{ $product->height }}</td>
                                                                <td>{{ $product->weight ?? '—' }}</td>
                                                                <td>{{ $product->volume ?? '—' }}</td>
                                                                <td>
                                                                    <div class="upper-delete-btns d-flex">
                                                                        <a class="view-btn-eye" href="{{ route('admin.products.show', $product->id) }}">
                                                                            <i class="fa-solid fa-eye"></i>
                                                                        </a>
                                                                        
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <label class="switch custm_toggle_switch">
                                                                        <input type="checkbox" class="variant-status-toggle"
                                                                            data-type="product"
                                                                            data-variant-id="{{ $product->id }}"
                                                                            {{ $product->status === 'in_stock' ? 'checked' : '' }}>
                                                                        <span class="slider round"></span>
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                        @else
                                                            @foreach($product->variations as $variation)
                                                                @php $firstRow = true; @endphp
                                                                @if(!$variation->options->isEmpty())
                                                                @foreach($variation->options as $option)
                                                                    <tr>
                                                                        <td>{{ $i++ }}</td>
                                                                        <td>{{ $option->sku }}</td>
                                                                        <td>{{ $product->name }}</td>
                                                                        <td>{{ $variation->size->name ?? $variation->variation->name ?? '-' }}</td>
                                                                        <td>{{ $option->color->name ?? '-' }}</td>
                                                                        {{-- <td>{{ $option->quantity }}</td> --}}
                                                                        <td>
                                                                            <div class="quantity-info">
                                                                                <span>{{ $option->quantity ?? 0 }}</span>
                                                                                @if(isset($rentedCounts['option'][$option->id]))
                                                                                <span class="rented-count">Rented: {{ $rentedCounts['option'][$option->id] }}</span>
                                                                                @endif
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="quantity-info">
                                                                                <span @class([
                                                                                    'low-stock' => $option->total_quantity > 0 && $option->total_quantity <= 2,
                                                                                    'out-of-stock' => $option->total_quantity <= 0
                                                                                ])>
                                                                                    {{ $option->total_quantity ?? $option->quantity }}
                                                                                </span>
                                                                               
                                                                            </div>
                                                                        </td>
                                                                        <td>{{ $variation->length }} x {{ $variation->width }} x {{ $variation->height }}</td>
                                                                        <td>{{ $variation->weight ?? '—' }}</td>
                                                                        <td>{{ $variation->volume ?? '—' }}</td>
                                                                        <td>
                                                                            <div class="upper-delete-btns d-flex">
                                                                                
                                                                                <a class="view-btn-eye" href="{{ route('admin.spo.products.variant.show', ['vendor'=>$vendor->id,'product' => $product->id, 'variant' => $variation->id, 'option' => $option->id ?? null]) }}">
                                                                                    <i class="fa-solid fa-eye"></i>
                                                                                </a>
                                                                                
                                                                                <a class="edit-btn-eye openEditModal"
                                                                                    href="#"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#editQuantityModal"
                                                                                    data-option-id="{{ $option->id }}"
                                                                                     data-vendor-id = "{{$vendor->id}}"
                                                                                    data-current-quantity="{{ $option->quantity ?? 0 }}">
                                                                                    <i class="fa-solid fa-pen-to-square"></i>
                                                                                </a>
                                                                               
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            @php
                                                                                $isDisabled = $vendor->disabledVariants->contains($variation->id) || $variation->status != 'in_stock';
                                                                            @endphp
                                                                            @if($firstRow)
                                                                                <label class="switch custm_toggle_switch">
                                                                                    <input type="checkbox"
                                                                                        class="variant-status-toggle"
                                                                                        data-type="variant"
                                                                                        data-variant-id="{{ $variation->id }}"
                                                                                        data-variant-option-id = "{{$option->id}}"
                                                                                       disabled
                                                                                        {{ $isDisabled ? '' : 'checked' }}>
                                                                                    <span class="slider round"></span>
                                                                                </label>
                                                                                @php $firstRow = false; @endphp
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                    
                                                                @endforeach
                                                                @else
                                                                <tr>
                                                                    <td>{{ $i++ }}</td>
                                                                    <td>{{ $variation->sku ?? '-' }}</td>
                                                                    <td>{{ $product->name }}</td>
                                                                    <td>{{ $variation->size->name ?? $variation->variation->name ?? '-' }}</td>
                                                                    <td>{{ $variation->color->name ?? '-' }}</td>
                                                                    {{-- <td>{{ $variation->quantity }}</td> --}}

                                                                    <td>
                                                                        <div class="quantity-info">
                                                                            <span>{{ $variation->quantity ?? 0 }}</span>
                                                                            @if(isset($rentedCounts['variation'][$variation->id]))
                                                                            <span class="rented-count">Rented: {{ $rentedCounts['variation'][$variation->id] }}</span>
                                                                            @endif
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <div class="quantity-info">
                                                                            <span @class([
                                                                                'low-stock' => $variation->total_quantity > 0 && $variation->total_quantity <= 2,
                                                                                'out-of-stock' => $variation->total_quantity <= 0
                                                                            ])>
                                                                                {{ $variation->total_quantity ?? $variation->quantity }}
                                                                            </span>
                                                                            @if(isset($rentedCounts['variation'][$variation->id]))
                                                                            <span class="available-count">
                                                                                Available: {{ $variation->quantity - $rentedCounts['variation'][$variation->id] }}
                                                                            </span>
                                                                            @endif
                                                                        </div>
                                                                    </td>

                                                                    
                                                                    <td>{{ $variation->length }} x {{ $variation->width }} x {{ $variation->height }}</td>
                                                                    <td>{{ $variation->weight ?? '—' }}</td>
                                                                    <td>{{ $variation->volume ?? '—' }}</td>
                                                                    <td>
                                                                        <div class="upper-delete-btns d-flex">
                                                                            
                                                                            <a class="view-btn-eye" href="{{ route('vendor.products.variant.show', ['product' => $product->id, 'variant' => $variation->id, 'option' => null]) }}">
                                                                                <i class="fa-solid fa-eye"></i>
                                                                            </a>
                                                                            <a href="javascript:void(0);" class="edit-btn-eye openEditModal" data-option-id="{{ $option->id }}" data-current-quantity = "{{$variation->quantity}}">
                                                                                <i class="fa-solid fa-pen-to-square"></i>
                                                                            </a>
                                                                           
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        @if($firstRow)
                                                                            <label class="switch custm_toggle_switch">
                                                                                <input type="checkbox" class="variant-status-toggle"
                                                                                     data-type="variant"
                                                                                    data-variant-id="{{ $variation->id }}"
                                                                                    {{ $variation->status === 'in_stock' ? 'checked' : '' }}>
                                                                                <span class="slider round"></span>
                                                                            </label>
                                                                            @php $firstRow = false; @endphp
                                                                        @endif
                                                                    </td>


                                                                </tr>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                   

                       
                    </div>


                </div>


            </div>

        </div>

    </div>

    <div class="modal fade" id="downloadTemplateModal" tabindex="-1" aria-labelledby="downloadTemplateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="downloadTemplateModalLabel">Download CSV Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>The CSV template includes all your products with their total quantities. You can update the quantities and upload the modified file.</p>
                    <p>Attention: This form only updates quantity values. Remove any products from the list for which you are not changing the quantity. For every remaining product, enter the new stock level in the new_quantity column — the number you enter will overwrite the current stock in this account when you upload the file. Do not leave the value as "0" unless you intentionally want to set the stock to zero.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="cancel-btn" data-bs-dismiss="modal">Cancel</button>
                    <a href="{{ route('admin.products.quantity.template', ['vendor_id' => $vendor->id]) }}" class="add-user">Download Template</a>

                </div>
            </div>
        </div>
    </div>
    
    <!-- Upload CSV Modal -->
    <div class="modal fade" id="uploadCsvModal" tabindex="-1" aria-labelledby="uploadCsvModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadCsvModalLabel">Upload Quantity CSV</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.products.quantity.import') }}" method="POST" enctype="multipart/form-data" id="quantityUploadForm">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="quantityCsvFile" class="form-label">Select CSV File</label>
                            <input class="form-control" type="file" id="quantityCsvFile" name="csv_file" accept=".csv" required>
                            <div class="form-text">Please upload a CSV file in the correct format.</div>
                        </div>
                        <div class="progress mb-3" style="display: none;" id="uploadProgress">
                            <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>
                    </div>
                    <input type="hidden" name="vendor_id" value = "{{$vendor->id}}" >
                    <div class="modal-footer">
                        <button type="button" class="cancel-btn" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="add-user" id="uploadCsvBtn">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade modal-delete-logout" id="deleteProductModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteProductModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="p-0 modal-body">
                    <div class="inner-body-delete-logout">
                        <h4 id="delete-text" class="mb-3"></h4>
                        <p id="delete-description" class=" mb-0"></p>
                        <div class="upper-btns-modal-pair">
                            <button type="button" id="confirmToggle" class="comn-modal-btns-blue btn btn-primary">Yes</button>
                            <button type="button" id="cancelToggle" data-bs-dismiss="modal" class="comn-modal-btns-transparent btn btn-primary">No</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade vendor-product" id="enableProductsModal" tabindex="-1" aria-labelledby="enableProductsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="enableProductsModalLabel">Enable Products for Your Service Point</h4>
                    <h6>Standardized Productlist</h6>
                    <p>Only enable products that are in your warehouse. Enabled products will be available for rent unless the stock level is 0. Low availability may negatively impact your ratings.We recommend monitoring your stock and replenishing it promptly to maximize sales potential.</p>
                    <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form id="enableProductsForm" method="POST" action="{{ route('admin.spoproducts.saveUpdatedProducts') }}">
                            @csrf
                            <input type="hidden" name="vendor_id" value="{{ $vendor->id }}">
                            <div class="row pro-div" id="productsContainer">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="cancel-btn" data-bs-dismiss="modal">discard changes</button>
                    <button type="button" id="saveProductsBtn" class="add-user ">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    
    <div class="modal fade modal-delete-logout" id="editQuantityModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editQuantityModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.update.quantity') }}">
                    @csrf
                    <input type="hidden" name="option_id" id="editOptionId">
                    <input type="hidden" name="vendor_id" id="editVendorId">
                    <div class="modal-body">
                        <div class="inner-body-delete-logout">
                            <h4 class="mb-3">Update Quantity</h4>
                            <p>
                                <span style="color:#5BC0DE; font-weight:bold;">ATTENTION:</span> 
                                The quantity you add MUST accurately reflect the number of items in your stock. 
                                Only update stock levels if the exact number of products is available in your warehouse.
                              </p>                                <div class="form-group mb-3">
                                <label for="editQuantity">Quantity</label>
                                <input type="number" class="form-control" id="editQuantity" name="quantity" min="0" required>
                            </div>
                            <div class="upper-btns-modal-pair">
                                <button type="submit" class="comn-modal-btns-blue btn btn-primary">Add Quantity</button>
                                <button type="button" class="comn-modal-btns-transparent cancel-btn" data-bs-dismiss="modal">Discard Changes</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
    
        var baseUrl = "{{ rtrim(config('app.url'), '/') }}";

    </script>

<script>
     document.getElementById('enableMoreProducts').addEventListener('click', function(e) {
        const vendorId = this.dataset.vendorId;

        e.preventDefault();
        loadProductsForModal(vendorId);
    });
    function loadProductsForModal(vendorId) {
        fetch(`{{ route("admin.spoproducts.getAvailable") }}?vendor_id=${vendorId}`)

            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('productsContainer');
                container.innerHTML = '';

                data.products.forEach(product => {
                    const productDiv = document.createElement('div');
                    productDiv.className = '';
                    productDiv.innerHTML = `
                        <div class="card pro-item h-100 product-card" style="position: relative;" data-id="${product.id}">
                            <img src="${product.image}" class="card-img-top" alt="${product.name}">
                            <div class="content">
                                <a href="#" class="btn rent-btn">
                                    <input 
                                        type="checkbox" 
                                        name="product_ids[]" 
                                        value="${product.id}" 
                                        id="product_${product.id}"
                                        ${product.selected ? 'checked' : ''} 
                                    />
                                    <p class="p-18">${product.name}</p>
                                </a>
                            </div>
                        </div>
                    `;
                    container.appendChild(productDiv);
                });

                // Make each card clickable to toggle the checkbox
                document.querySelectorAll('.product-card').forEach(card => {
                    card.addEventListener('click', function (e) {
                        const checkbox = this.querySelector('input[type="checkbox"]');
                        if (e.target !== checkbox) {
                            checkbox.checked = !checkbox.checked;
                        }
                    });

                    // Prevent double toggle if clicking directly on the checkbox
                    const checkbox = card.querySelector('input[type="checkbox"]');
                    checkbox.addEventListener('click', e => e.stopPropagation());
                });

                // Show the modal
                const modal = new bootstrap.Modal(document.getElementById('enableProductsModal'));
                modal.show();
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    document.getElementById('saveProductsBtn').addEventListener('click', function() {
            const form = document.getElementById('enableProductsForm');

            const checkboxes = form.querySelectorAll('input[type="checkbox"]');
    
            const selectedProducts = Array.from(checkboxes)
                .filter(cb => cb.checked)
                .map(cb => cb.nextElementSibling.textContent.trim().toLowerCase());



            // Define dependencies
            // const dependencies = {
            //     'dachträger': ['carrier', 'foot', 'footkit' , 'traverse' ,'fuß' ,'fußkit'],
            //     'dachbox' : ['carrier', 'foot', 'footkit','roof rack' , 'traverse' ,'fuß' ,'fußkit' ,'dachträger'],
            //     'Dachfahrradträger' : ['carrier', 'foot', 'footkit','roof rack' , 'traverse' ,'fuß' ,'fußkit' , 'dachträger'],
            // };

                 const dependencies = {
                'dachträger': ['traverse' ,'fuß' ,'fußkit'],
                'dachbox' : [ 'traverse' ,'fuß' ,'fußkit' ,'dachträger'],
                'Dachfahrradträger' : [ 'traverse' ,'fuß' ,'fußkit' , 'dachträger'],
            };
            let errorMessages = [];

            Object.keys(dependencies).forEach(product => {
                if (selectedProducts.includes(product)) {
                    const required = dependencies[product];
                    const missing = required.filter(r => !selectedProducts.includes(r));

                    if (missing.length > 0) {
                        // Capitalize first letter of each missing product
                        const missingCapitalized = missing.map(name => name.charAt(0).toUpperCase() + name.slice(1));
                        const productCapitalized = product.charAt(0).toUpperCase() + product.slice(1);

                        errorMessages.push(`You must also select: ${missingCapitalized.join(', ')} when ${productCapitalized} is selected.`);
                    }
                }
            });

            if (errorMessages.length > 0) {
                Swal.fire({
                    title: 'Selection Error',
                    html: '<div style="font-size:18px; line-height:1.6;">Whenever you select the product categories <b>Roof Box</b> or <b>Roof Bike Carrier</b>, you also have to select the product categories <b>Roof Rack</b>, <b>Carrier</b>, <b>Foot</b>, and <b>FootKit</b>.</div>',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    customClass: {
                        popup: 'swal-wide',
                        title: 'swal-title-big',
                        confirmButton: 'swal-btn-big'
                    }
                });
                return;
            }

            const formData = new FormData(form);



            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: 'Products updated successfully.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('enableProductsModal'));
                        modal.hide();
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: data.message || 'Something went wrong.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            })
            .catch(error => {
                Swal.fire({
                    title: 'Error!',
                    text: 'Failed to update products.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        });



    document.addEventListener('DOMContentLoaded', function () {
        let activeCategory = 'all';
        let activeSearch = '';
    
        const categoryFilterItems = document.querySelectorAll('.filter-category');
        const dropdownButton = document.querySelector('#categoryFilterDropdown');
        const searchInput = document.getElementById('inputPassword5');
    
        categoryFilterItems.forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();
    
                categoryFilterItems.forEach(el => el.classList.remove('active'));
                this.classList.add('active');
    
                activeCategory = this.dataset.category;
    
                dropdownButton.innerHTML = `<i class="fa-solid fa-filter"></i> ${this.textContent.trim()}`;
    
                filterProducts();
            });
        });
    
        searchInput.addEventListener('input', function () {
            activeSearch = this.value.trim().toLowerCase();
            filterProducts();
        });
    
        function filterProducts() {
            document.querySelectorAll('.accordion-item').forEach(accordionItem => {
                const headingBtn = accordionItem.querySelector('.accordion-button');
                if (!headingBtn) return;

                const categoryId = headingBtn.dataset.bsTarget.replace('#collapse-', '');
                const matchCategory = activeCategory === 'all' || activeCategory === categoryId;
                let hasVisibleRow = false;

                accordionItem.querySelectorAll('tbody tr').forEach(row => {
                    const rowText = row.textContent.toLowerCase();
                    const matchSearch = activeSearch === '' || rowText.includes(activeSearch);
                    const showRow = matchCategory && matchSearch;

                    row.style.display = showRow ? '' : 'none';
                    if (showRow) hasVisibleRow = true;
                });

                accordionItem.style.display = hasVisibleRow ? '' : 'none';

                const collapse = accordionItem.querySelector('.accordion-collapse');
                if (collapse) {
                    if (hasVisibleRow) {
                        collapse.classList.add('show');
                    } else {
                        collapse.classList.remove('show');
                    }
                }
            });
            // updateDownloadLinks();
        }



        filterProducts();


        const timePeriodSelect = document.querySelector('.select-main-head');
        if (timePeriodSelect) {
            timePeriodSelect.addEventListener('change', function() {
                // updateDownloadLinks();
                const timePeriod = this.value;
                window.location.href = `${window.location.pathname}?time_period=${timePeriod}`;
            });
        }

        document.querySelectorAll('.download-pdf').forEach(button => {
            button.addEventListener('click', function() {
                const vendorId = this.dataset.vendorId;
                window.location.href = "{{ route('admin.spoProduct.downloadProduct.pdf', ':id') }}"
                    .replace(':id', vendorId);
            });
        });

        document.querySelectorAll('#download-csv').forEach(button => {
            button.addEventListener('click', function() {
                const vendorId = this.dataset.vendorId;
                window.location.href = "{{ route('admin.spoProduct.downloadProduct.csv', ':id') }}"
                    .replace(':id', vendorId);
            });
        });

       


        document.getElementById('download-template')?.addEventListener('click', function() {
            window.location.href = "{{ route('admin.products.export.template') }}";
        });

        document.getElementById('download-csv-new')?.addEventListener('click', function() {
            window.location.href = "{{ route('admin.products.export.full') }}";
        });
        // updateDownloadLinks();
    });
    </script>

    <script>
        $(document).on('click', '.openEditModal', function () {
            const optionId = $(this).data('option-id');
            const currentQty = $(this).data('current-quantity');
            const vendorId = $(this).data('vendor-id');


            const row = $(this).closest('tr');
            const productName = row.find('td:nth-child(3)').text().trim();
            const sizeVariation = row.find('td:nth-child(4)').text().trim();
            const color = row.find('td:nth-child(5)').text().trim();
            
            // Build the descriptive text
            let description = `${productName}`;
            if (sizeVariation && sizeVariation !== '-') {
                description += ` (${sizeVariation}`;
                if (color && color !== '-') {
                    description += ` ${color}`;
                }
                description += ')';
            } else if (color && color !== '-') {
                description += ` (${color})`;
            }
            
            
            // Update the modal heading with descriptive text
            $('#editQuantityModal .inner-body-delete-logout h4').text(`Do you want to edit/update the quantity for ${description}?`);
            
            $('#editVendorId').val(vendorId);
            $('#editOptionId').val(optionId);
            $('#editQuantity').val(currentQty);
        });
    </script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const uploadForm = document.getElementById('quantityUploadForm');
        const uploadProgress = document.getElementById('uploadProgress');
        const progressBar = uploadProgress.querySelector('.progress-bar');
        const uploadBtn = document.getElementById('uploadCsvBtn');
        
        uploadForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            uploadBtn.disabled = true;
            uploadProgress.style.display = 'block';
            
            const formData = new FormData(uploadForm);
            
            // Using AJAX to submit the form with progress tracking
            const xhr = new XMLHttpRequest();
            
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                    progressBar.setAttribute('aria-valuenow', percentComplete);
                    progressBar.textContent = Math.round(percentComplete) + '%';
                }
            });
            
            xhr.addEventListener('load', function() {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message || 'Quantities updated successfully!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message || 'Something went wrong during upload.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Upload failed. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
                
                uploadBtn.disabled = false;
                uploadProgress.style.display = 'none';
            });
            
            xhr.open('POST', uploadForm.action, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send(formData);
        });
    });
    </script>
    

    @endsection