@extends('admin.layouts.dashboard')
@php
    $title = "Bookings > New Rental booking";
    $button_text = "Book Now";
@endphp

@section('title', $title)
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<style>
#dropdown_product_list {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    position: absolute;
    z-index: 1000;
}
.product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.2s;
}
.product-item:hover {
    background-color: #f8f9fa;
}
.product-image {
    border-radius: 5px;
}
.custom-select {
    width: 400px;
} 
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    width: 400px;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    height: 47px;
  
    
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 45px;
}

/* 
   

#customer_id .select2-container--default .select2-selection--single {
    width: 411.5px;
} */
    </style>

  <!-- Main content -->
<section class="py-4">
    <div class="">
        <!-- Main Heading -->
        <div class="pt-3">
            <h3 class="main-heading mb-4">{{ $title }}</h3>
        </div>

        <div class="card mb-4 border-0 rounded-4">
            <!-- Form -->
            <form method="POST" action="{{ route('adminorder.place') }}" enctype="multipart/form-data">
                @csrf

                <!-- Flash Messages for Success/Error -->
                @if(session()->has('error'))
                    <div class="alert alert-danger">
                        {{ session()->get('error') }}
                    </div>
                @endif
                @if(session()->has('success'))
                    <div class="alert alert-success">
                        {{ session()->get('success') }}
                    </div>
                @endif

                <div class="card-body rounded-4">
                    <!-- Customer Dropdown -->
                    <div class="row mb-3">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="customer_id">Select Customer</label>
                                <div class="input-group">
                                    <select name="customer_id" id="customer_id" class="form-control custom-select" required>
                                        <option value="">Select Customer</option>
                                        <!-- Customer options will be populated via AJAX -->
                                    </select>
                                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                                        <i class="fas fa-user-plus"></i> 
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Product Search and Add -->
                        <div class="col-lg-6">
                            <div class="form-group position-relative">
                                <label for="search_product">Search and Add Product</label>
                                <input type="hidden" name="product_id[]" id="product_ids">
                                <input type="text" id="search_product" class="form-control" placeholder="Search for products...">
                                <div id="dropdown_product_list" class="dropdown-menu w-100" style="max-height: 300px; overflow-y: auto; display: none;">
                                    @foreach($items as $item)
                                        <div class="dropdown-item product-item d-flex align-items-center justify-content-between" data-id="{{ $item->id }}" data-name="{{ $item->name }}">
                                            <div class="d-flex align-items-center">
                                                <img src="{{ asset('storage/'.$item->image) }}" alt="{{ $item->name }}" class="product-image" style="width: 40px; height: 40px; object-fit: cover; margin-right: 10px;">
                                                <span>{{ $item->name }}</span>
                                            </div>
                                            <button class="btn btn-primary btn-sm add-product"
                                                data-id="{{ $item->id }}"
                                                data-name="{{ $item->name }}"
                                                data-image="{{ $item->image }}"
                                                data-price="{{ $item->price }}"
                                                data-rental-weekend="{{ $item->rental_weekend }}"
                                                data-rental-7-days="{{ $item->rental_7_days }}"
                                                data-rental-14-days="{{ $item->rental_14_days }}"
                                                data-rental-21-days="{{ $item->rental_21_days }}"
                                                data-rental-1-month="{{ $item->rental_1_month }}"
                                                data-max-purchase-qty="{{ $item->max_purchase_qty }}">
                                                + Add Product
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-6">
                        <div class="form-group position-relative">
                                <label for="comman_start_date">Start Date</label>
                                <input type="date" id="comman_start_date"  onfocus="this.showPicker()" class="form-control" >
                              
                            </div>
                        </div>

                        <!-- Product Search and Add -->
                        <div class="col-lg-6">
                            <div class="form-group position-relative">
                                <label for="Rent_For">Rent For</label>
                                <select name="Rent_For" id="Rent_For" class="form-control" required>
                                    <option value="">WEEKAND</option>
                                    <option value="">7 DAYS</option>
                                    <option value="">14 DAYS</option>
                                    <option value="">21 DAYS</option>
                                    <option value="">1 MONTH</option>
                                    <!-- Customer options will be populated via AJAX -->
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Selected Products Table -->
                    <div id="selected_products" class="mt-4">
                        <h5>Selected Products</h5>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Product Name</th>
                                    <th>Start Date</th>
                                    <th>Rent Duration</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</th>
                                    <th>Remove</th>
                                </tr>
                            </thead>
                            <tbody id="productTableBody">
                                <!-- Dynamic rows will be appended here -->
                            </tbody>
                        </table>
                    </div>

                    <hr>

                    <!-- Remarks and Order Summary Section -->
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="remarks">Remark</label>
                                <textarea name="remarks" id="remarks" class="form-control" rows="5" placeholder="Add your remarks here..."></textarea>
                            </div>
                        </div>
                        <!-- Order Summary -->
                        <div class="col-lg-6">
                            <label for="remarks">Order Summary</label>
                            <table class="table table-bordered p-3">
                                <tr>
                                    <td><strong>Subtotal:</strong></td>
                                    <td id="subtotal" class="text-end">$0.00</td>
                                </tr>
                                <tr>
                                    <td><strong>GST (5%):</strong></td>
                                    <td id="gst" class="text-end">$0.00</td>
                                </tr>
                                <tr>
                                    <td><strong>Total:</strong></td>
                                    <td id="total" class="text-end">$0.00</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <hr>
                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary mt-2 mb-3 " style="float: right;">{{ $button_text }}</button>
                </div>
            </form>
           <!-- Modal for adding customer -->
           <div class="modal fade" id="addCustomerModal" tabindex="-1" aria-labelledby="addCustomerModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="addCustomerModalLabel">Add Customer</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form id="addCustomerForm">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="firstname" class="form-control" placeholder="First Name" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="lastname" class="form-control" placeholder="Last Name" required>
                                            </div>
                                        </div>
                                    </div>
                    
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="email" name="email" class="form-control" placeholder="Email Address" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="phone" class="form-control" placeholder="Phone Number" required>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="address" class="form-control" placeholder="Address" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="locality" class="form-control" placeholder="Locality" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="pincode" class="form-control" placeholder="Pincode" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="city" class="form-control" placeholder="City" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <select name="state" class="form-control" required>
                                                    <option value="Alberta">Alberta</option>
                                                    <option value="British Columbia">British Columbia</option>
                                                    <!-- Add other states here -->
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <input type="text" name="country" class="form-control" value="Canada" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="hidden_inputs_container"></div>

                                    <button type="submit" class="btn btn-primary">Add Customer</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
      </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <!-- /.content -->

<script>
document.addEventListener('DOMContentLoaded', () => {
    const dropdownProductList = document.getElementById('dropdown_product_list');
    const productTableBody = document.getElementById('productTableBody');
    const searchProductInput = document.getElementById('search_product');
    // Show dropdown when input is focused
    searchProductInput.addEventListener('focus', () => {
        dropdownProductList.style.display = 'block';
    });
    // Hide dropdown when input loses focus, unless the dropdown is clicked
    searchProductInput.addEventListener('blur', () => {
        setTimeout(() => {
            dropdownProductList.style.display = 'none';
        }, 200); // Small delay to allow click event on dropdown items
    });
    // Filter dropdown items based on input value
    searchProductInput.addEventListener('input', () => {
        const value = searchProductInput.value.trim().toLowerCase();
        const items = dropdownProductList.querySelectorAll('.product-item');
        let hasVisibleItems = false;
        items.forEach(item => {
            const productName = item.querySelector('span').textContent.toLowerCase();
            if (productName.includes(value)) {
                item.style.display = 'flex'; // Show matching items
                hasVisibleItems = true;
            } else {
                item.style.display = 'none'; // Hide non-matching items
            }
        });
        // Hide dropdown if no items match the input
        dropdownProductList.style.display = hasVisibleItems ? 'block' : 'none';
    });
    // Prevent dropdown from hiding when clicking on it
    dropdownProductList.addEventListener('mousedown', (e) => {
        e.preventDefault();
    });

   // Event listener for clicking on "Add Product"
dropdownProductList.addEventListener('click', (e) => {
    if (e.target.classList.contains('add-product')) {
        const button = e.target;
        const productId = button.getAttribute('data-id');
        const productName = button.getAttribute('data-name');
        const productImage = button.getAttribute('data-image');
        const productPrice = parseFloat(button.getAttribute('data-price'));
        const productRentalWeekend = button.getAttribute('data-rental-weekend');
        const productRental7Days = button.getAttribute('data-rental-7-days');
        const productRental14Days = button.getAttribute('data-rental-14-days');
        const productRental21Days = button.getAttribute('data-rental-21-days');
        const productRental1Month = button.getAttribute('data-rental-1-month');
        const productMaxPurchaseQty = button.getAttribute('data-max-purchase-qty');

        // Prevent duplicate products
        if (document.querySelector(`tr[data-id="${productId}"]`)) {
            alert('Product already added.');
            return;
        }
        // Add product row to table
        const row = document.createElement('tr');
        row.setAttribute('data-id', productId);
        row.innerHTML = `
            <td>
                <img src="{{ asset('storage/') }}/${productImage}" alt="${productName}" style="width: 80px; height: 80px; object-fit: cover;">
            </td>
            <td>
                <h6 class="mb-0">${productName}</h6>
                <small class="rent-price-details"></small>
            </td>
            <td>
                <input type="date" name="start_date[${productId}]" class="form-control" required>
            </td>
            <td>
                <input type="hidden" class="rentfordays" name="rentfordays_[${productId}]" id="rentfordays_${productId}">
                <select name="rent_for[${productId}]" class="form-control rent_for" required>
                    <option value="">Select Rent Days</option>
                    <option value="${productRentalWeekend}" data-price="rental_weekend | ${productRentalWeekend}">Weekend | $${productRentalWeekend}</option>
                    <option value="${productRental7Days}" data-price="rental_7_days | ${productRental7Days}">7 Days | $${productRental7Days}</option>
                    <option value="${productRental14Days}" data-price="rental_14_days | ${productRental14Days}">14 Days | $${productRental14Days}</option>
                    <option value="${productRental21Days}" data-price="rental_21_days | ${productRental21Days}">21 Days | $${productRental21Days}</option>
                    <option value="${productRental1Month}" data-price="rental_1_month | ${productRental1Month}">1 Month | $${productRental1Month}</option>
                </select>
            </td>
            <td>
                <input type="number" name="quantity[${productId}]" value="1" class="form-control quantity-input" required min="1" max="${productMaxPurchaseQty}">
            </td>
            <td>
                <div class="subtotal"></div>
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm remove-product"><i class="fas fa-trash"></i></button>
            </td>
        `;
        productTableBody.appendChild(row);
        // Update hidden input with product ID
        const productIdsInput = document.getElementById('product_ids');
        let productIds = JSON.parse(productIdsInput.value || "[]");
        productIds.push(productId);
        productIdsInput.value = JSON.stringify(productIds);

        // Hide dropdown
        dropdownProductList.style.display = 'none';
        attachDynamicListeners(); // Attach listeners for newly added rows
        updateOrderSummary();
    }
});

// Remove Product Row
productTableBody.addEventListener('click', (e) => {
    if (e.target.classList.contains('remove-product')) {
        const row = e.target.closest('tr');
        const productId = row.getAttribute('data-id');

        // Remove product ID from the hidden input field
        const productIdsInput = document.getElementById('product_ids');
        let productIds = JSON.parse(productIdsInput.value || "[]");
        productIds = productIds.filter(id => id !== productId); // Remove the product ID from array
        productIdsInput.value = JSON.stringify(productIds);

        // Remove the row
        row.remove();

        updateOrderSummary();
    }
});


   // Update subtotal on input change and also update the order summary
   productTableBody.addEventListener('input', (e) => {
    // Get the row where the input change happened
    const row = e.target.closest('tr');
    const productId = row.id.split('-')[2];

    // Get the quantity and rent duration from the row
    const quantity = parseInt(row.querySelector('.quantity-input').value) || 0;
    const rentForSelect = row.querySelector('.rent_for');
    const rentPrice = parseInt(rentForSelect.value) || 0;

    // Capture the data-price from the selected option
    const rentfordays = rentForSelect.options[rentForSelect.selectedIndex].dataset.price || 0;

    //alert(rentfordays); // This will display the price data in the alert

    // Calculate the subtotal for this row
    const subtotal = quantity * rentPrice;

    // Update the row's subtotal
    row.querySelector('.subtotal').innerText = `$${subtotal.toFixed(2)}`;

    // Update the hidden input field with the rentfordays value
    row.querySelector('.rentfordays').value = rentfordays;

    // Recalculate the total order summary
    updateOrderSummary();
});


// Function to update the order summary
function updateOrderSummary() {
    let total = 0;
    // Iterate through each row to get the subtotal and add to total
    const rows = document.querySelectorAll('tr[data-id]');
    rows.forEach(row => {
        const rowSubtotal = parseFloat(row.querySelector('.subtotal').innerText.replace('$', '')) || 0;
        total += rowSubtotal;
    });

    // Calculate GST (5%)
    const gst = total * 0.05;

    // Update the order summary values
    const subtotalElem = document.getElementById('subtotal');
    const gstElem = document.getElementById('gst');
    const totalElem = document.getElementById('total');

    subtotalElem.innerText = `$${total.toFixed(2)}`;
    gstElem.innerText = `$${gst.toFixed(2)}`;
    totalElem.innerText = `$${(total + gst).toFixed(2)}`;
}
});



$(document).ready(function() {
    // Fetch customers when the page loads
    fetchCustomers();

    // Function to fetch customers via AJAX
    function fetchCustomers() {
       
        $.ajax({
            url: '/admin/getCustomers', // Adjust the URL according to your API route
            method: 'GET',
            success: function(response) {
                
                // Clear current options
                $('#customer_id').empty().append('<option value="">Select Customer</option>');
                // Loop through the customers and append them to the dropdown
                $.each(response.customers, function(index, customer) {
                    $('#customer_id').append(new Option(customer.firstname, customer.id));
                });
            },
            error: function(xhr, status, error) {
                console.log("Error fetching customers: ", error);
            }
        });
    }
});

$('#addCustomerForm').submit(function(e) {
    e.preventDefault();
    let formData = $(this).serialize();

    $.ajax({
        url: "/admin/addCustomer", // Replace with your customer store route
        method: 'POST',
        data: formData,
        success: function(response) {
            // Check if customer was added successfully
           // alert(response.customer.firstname);
           if(response.customer){
                // Close the modal
                $('#addCustomerModal').modal('hide');
                
                // Add the new customer to the dropdown
                let newOption = new Option(response.customer.firstname + ' ' + response.customer.lastname, response.customer.id, false, false);
                $('#customer_id').append(newOption).trigger('change');
           }
           
        },
        error: function() {
            alert('Error adding customer');
        }
    });
});
//   function get_subcategory() {
         // loader(true);
        
//         var category = document.getElementById('category').value;

//         $.ajax({
//             type: 'GET',
//             url: '{{route('admin.get_subcategory')}}',
//             datatype: 'json',
//             data: {
//                 'id': category,
//             },
//             success: function(data) {
//                 // loader(false);
//                // alert('hello');
//                 const obj = JSON.parse(data);
//                 var subcategories = obj.new.subcategories;
//                 if (obj.new.code == 1) {
//                     var select = $('select[name=subcategory]');
//                     select.empty();
//                     select.append(
//                         '<option value="" selected disabled hidden>Select Sub Category</option>');
//                     $.each(subcategories, function(key, value) {
//                         select.append('<option value=' + value.id + '>' + value.name + '</option>');
//                     });
//                 }
//             },
//             complete: function() {},
//             error: function() {},
//         });

//     }

    // Function to fetch products based on selected category and subcategory
// function get_products() {
//    // handleSubcategoryChange();
//     var categoryId = document.getElementById('category').value;
//     var subcategoryId = document.getElementById('subcategory').value;

//     if (categoryId && subcategoryId) {
//         $.ajax({
//             type: 'GET',
//             url: '{{ route('admin.get_products_by_category_and_subcategory') }}',
//             datatype: 'json',
//             data: {
//                 'category_id': categoryId,
//                 'subcategory_id': subcategoryId
//             },
//             success: function (data) {
//                // const obj = JSON.parse(data);
//                 var products = data.new.products;
//                 var productSelect = $('#product_id');
//                 productSelect.empty();
//                 productSelect.append('<option value="" selected disabled hidden>Select Product</option>');

//                 $.each(products, function (key, product) {
//                     productSelect.append('<option value="' + product.id + '" ' + 
//                             'data-image="' + product.image + '" ' +
//                             'data-name="' + product.name + '" ' +
//                             'data-price="' + product.price + '" ' +
//                             'data-rental-weekend="' + product.rental_weekend + '" ' +
//                             'data-rental-7-days="' + product.rental_7_days + '" ' +
//                             'data-rental-14-days="' + product.rental_14_days + '" ' +
//                             'data-rental-21-days="' + product.rental_21_days + '" ' +
//                             'data-rental-1-month="' + product.rental_1_month + '" ' +
//                             'data-max-purchase-qty="' + product.max_purchase_qty + '">' +
//                             product.name + '</option>');
//                 });
//                 // Automatically select the first product after appending options
//              //   alert(products.length > 0);
//                 if (products.length > 0) {
//                     productSelect.val(products[0].id).trigger('change');
//                     // Trigger product fields rendering if a product is selected
//                 document.getElementById('product_id').dispatchEvent(new Event('change'));
//                 }

                
//             },
//             error: function () {
//                 alert("Error loading products.");
//             }
//         });
//     }
// }
$('#product_id').select2({
    placeholder: "Select products",
    allowClear: true
});
$('#category').select2({
    placeholder: "Select Category",
    allowClear: true
});
$('#subcategory').select2({
    placeholder: "Select subcategory",
    allowClear: true
});
$('#customer_id').select2({
    width: '400px',
    placeholder: "Select Customer",
    allowClear: true
});


// Update summary dynamically
function updateSummary() {
    let subtotal = 0;

    // Calculate subtotal by iterating through all rows
    document.querySelectorAll('tr[id^="product-entry-"]').forEach(row => {
        const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
        const rentPrice = parseFloat(row.querySelector('select[name^="rent_for"]').selectedOptions[0]?.value || 0);
        subtotal += quantity * rentPrice;
    });

    // Calculate GST and Total
    const gst = subtotal * 0.05; // 5% GST
    const total = subtotal + gst;

    // Update HTML dynamically
    document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('gst').textContent = `$${gst.toFixed(2)}`;
    document.getElementById('total').textContent = `$${total.toFixed(2)}`;
}

// Add event listeners for changes in quantity and rent selection
function attachDynamicListeners() {
    document.querySelectorAll('.quantity-input').forEach(input => {
        input.addEventListener('input', () => {
            updateSubtotal(input); // Update the row subtotal
            updateSummary(); // Update the summary
        });
    });

    document.querySelectorAll('select[name^="rent_for"]').forEach(select => {
        select.addEventListener('change', () => {
            updateSubtotal(select); // Update the row subtotal
            updateSummary(); // Update the summary
        });
    });
}

// Update subtotal for individual rows
function updateSubtotal(element) {
    const productRow = element.closest('tr');
    const productId = productRow.id.split('-')[2];
    const quantity = parseFloat(productRow.querySelector('.quantity-input').value) || 0;
    const rentPrice = parseFloat(productRow.querySelector('select[name^="rent_for"]').selectedOptions[0]?.value || 0);
    const rentfordays = productRow.querySelector('select[name^="rent_for"]').selectedOptions[0]?.dataset.price || '0';
    
    const subtotal = (quantity * rentPrice).toFixed(2);

    // Update the row's subtotal
    productRow.querySelector(`#subtotal_${productId}`).innerHTML = `$${subtotal}`;
    productRow.querySelector(`#productPrice_${productId}`).innerHTML = `Price : $${rentPrice}`;
    productRow.querySelector(`#rentfordays_${productId}`).value = `${rentfordays}`;
}

// Product selection change event handler
//document.getElementById('product_id').addEventListener('change', function () {
   // Function to handle changes to the product selection (this runs when #product_id is changed)
var productIds =[];

$('#product_id').on('change', function() 
{

    const selectedIds = Array.from(this.selectedOptions).map(option => option.value);

    // Add the selected product IDs to the existing productIds array without duplicates
    selectedIds.forEach(function(id) {
        if (!productIds.includes(id)) {
           
            productIds.push(id);
        }
    });
    updateHiddenInputs();
   
    $('#product_ids').val(productIds.join(',')); 
    // Add rows for newly selected products
    productIds.forEach(function (productId) {
        const productRowId = `product-entry-${productId}`;
        if (!document.getElementById(productRowId)) {
            // Add row logic (same as before)
            const productOption = document.querySelector(`#product_id option[value="${productId}"]`);
            const productName = productOption.getAttribute('data-name');
            const productPrice = parseFloat(productOption.getAttribute('data-price'));
            const productImage = '{{ asset("storage/") }}/' + productOption.getAttribute('data-image');
            const productMaxPurchaseQty = productOption.getAttribute('data-max-purchase-qty');
            const productRentalWeekend = productOption.getAttribute('data-rental-weekend');
            const productRental7Days = productOption.getAttribute('data-rental-7-days');
            const productRental14Days = productOption.getAttribute('data-rental-14-days');
            const productRental21Days = productOption.getAttribute('data-rental-21-days');
            const productRental1Month = productOption.getAttribute('data-rental-1-month');
            const productRow = `
                <tr id="${productRowId}">
                    <td>
                        <img src="${productImage}" alt="${productName}" style="width: 80px; height: 80px; object-fit: cover;">
                    </td>
                    <td>
                        <h6 class="mb-0">${productName}</h6>
                        <small id="productPrice_${productId}">Price: $${productPrice.toFixed(2)}</small>
                    </td>
                    <td>
                        <input type="date" name="start_date[${productId}]" id="start_date_${productId}" class="form-control" required min="{{ date('Y-m-d') }}">
                    </td>
                    <td>
                        <input type="hidden" id="rentfordays_${productId}" class="rentfordays" name="rentfordays_[${productId}]" value="">
                        <select name="rent_for[${productId}]" id="rent_for_${productId}" class="form-control" required>
                            <option value="">Select Rent Days</option>
                            <option value="${productRentalWeekend}" data-price="rental_weekend | ${productRentalWeekend}">Weekend | $${productRentalWeekend}</option>
                            <option value="${productRental7Days}" data-price="rental_7_days | ${productRental7Days}">7 Days | $${productRental7Days}</option>
                            <option value="${productRental14Days}" data-price="rental_14_days | ${productRental14Days}">14 Days | $${productRental14Days}</option>
                            <option value="${productRental21Days}" data-price="rental_21_days | ${productRental21Days}">21 Days | $${productRental21Days}</option>
                            <option value="${productRental1Month}" data-price="rental_1_month | ${productRental1Month}">1 Month | $${productRental1Month}</option>
                        </select>
                    </td>
                    <td>
                        <input type="number" name="quantity[${productId}]" id="quantity_${productId}" value="1" class="form-control quantity-input" required min="1" max="${productMaxPurchaseQty}" data-price="${productPrice}">
                    </td>
                    <td>
                        <div id="subtotal_${productId}" class="fw-bold">$${productPrice.toFixed(2)}</div>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" onclick="removeProductRow('${productId}')"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>
            `;

            document.getElementById('productTableBody').insertAdjacentHTML('beforeend', productRow);
        }
    });

    attachDynamicListeners(); // Attach listeners for newly added rows
    updateSummary(); // Update the summary
});
function updateHiddenInputs() {
        // Clear the container
        $('#hidden_inputs_container').empty();

        // Add a hidden input for each product ID
        productIds.forEach(function (id) {
            $('#hidden_inputs_container').append(`<input type="hidden" name="product_id[]" value="${id}">`);
        });
    }
// Function to remove the product row when the "Remove" button is clicked
function removeProductRow(productId) {
    // Remove the product from the productIds array
    productIds = productIds.filter(id => id !== productId);

    // Remove the row from the table
    const row = document.getElementById(`product-entry-${productId}`);
    if (row) {
        row.remove();
    }
    // Optionally log the updated productIds array
    console.log(productIds);

    // Update the summary after removal
    updateSummary();
}

// Function to clear product rows only when the product selection changes, not when the subcategory changes
function handleSubcategoryChange() {
    const productSelect = $('#product_id');
    // Remove the rows for unselected products (only happens when product selection changes)
    const selectedProducts = Array.from(productSelect[0].selectedOptions).map(option => option.value);

    // Loop through all rows and keep only the selected product rows
    document.querySelectorAll('tr[id^="product-entry-"]').forEach(row => {
        const rowProductId = row.id.split('-')[2];
        if (!selectedProducts.includes(rowProductId)) {
            row.remove();
        }
    });
}

</script>
@endsection