@extends('admin.layouts.dashboard')
@php
    $title = "Bookings > New Rental booking";
    $button_text = "Book Now";
@endphp
@section('title', $title)
@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> -->
<style>
    .show-item {
        display: flex !important;
    }
    .hide-item {
        display: none !important;
    }
    .user-email, .user-phone {
        font-style: italic;
        color: gray;
        font-size:12px;
    }
    .text-white {
        color: #fff; /* Text color for placeholder initials */
    }
    .btn-danger {
    padding: 0.5rem;
    margin: 0; /* Ensure no unnecessary space around the button */
    }
    #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: 100% !important;
    }
    .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="">
    <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
                <div class="card-body rounded-4">
                    <!-- 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
                    <!-- Customer Dropdown -->
                    <div class="row mb-3">
                    <!-- Select Customer -->
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="customer_id">Select Customer</label>
                            <div class="d-lg-flex d-md-flex align-items-center">
                                <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" style="padding: 14px;
                                    border-radius: 1px;">
                                    <i class="fas fa-user-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- Select Start Date -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="commanstartDateRent">Select Start Date</label>
                            <input type="date" class="form-control" name="commanstartDateRent" id="commanstartDateRent" />
                        </div>
                    </div>
                    <!-- Select Rent For -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="commanrentFor">Select Rent For</label>
                            <select name="commanrentFor" id="commanrentFor" class="form-control" required>
                                <option value="rental_weekend">WEEKEND</option>
                                <option value="rental_7_days">7 DAYS</option>
                                <option value="rental_14_days">14 DAYS</option>
                                <option value="rental_21_days">21 DAYS</option>
                                <option value="rental_1_month">1 Month</option>
                                <option value="custom-date">Custom Dates</option>
                            </select>
                        </div>
                    </div>
                    <!-- Select End Date (Initially Hidden) -->
                    <div class="col-lg-2" id="endDateSection" style="display:none;">
                        <div class="form-group">
                            <label for="commanendDateRent">Select End Date</label>
                            <input type="date" class="form-control" name="commanendDateRent" id="commanendDateRent" />
                        </div>
                    </div>
                        <!-- Product Search and Add -->
                        <div class="col-lg-12">
                            <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>
                    <!-- Selected Products Table -->
                    <div id="selected_products" class="mt-4">
                        <h5>Selected Products</h5>
                        <table class="table table-bordered table-responsive">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Product Name</th>
                                    <th>Price </th>
                                    <th>Quantity</th>
                        
                                    <th>Item 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>Item 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>Order 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" >
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" id="pincode" name="pincode" class="form-control" placeholder="Pincode" required max="7">
                                        </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>
                                            <option value="Manitoba">Manitoba</option>
                                            <option value="New Brunswick">New Brunswick</option>
                                            <option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
                                            <option value="Nova Scotia">Nova Scotia</option>
                                            <option value="Ontario">Ontario</option>
                                            <option value="Prince Edward Island">Prince Edward Island</option>
                                            <option value="Quebec">Quebec</option>
                                            <option value="Saskatchewan">Saskatchewan</option>
                                            </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> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> -->
    <!-- /.content -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script>

    function updateOrderSummary(){
        let subtotal = 0;
        let gst = 0;
        let total = 0;
        const productTableBody = document.getElementById('productTableBody');
        const productRows = productTableBody.getElementsByTagName('tr');

        for (let i = 0; i < productRows.length; i++) {
            const productRow = productRows[i];
            console.log(productRow);
            const productPrice = productRow.querySelector('input.price').value;
            const productQty = productRow.querySelector('input.quantity-input').value;

            const productSubtotal = parseFloat(productPrice) * parseFloat(productQty);

            subtotal += productSubtotal;

            const gstPercentage = 5;
            const gstAmount = productSubtotal * (gstPercentage / 100);
            gst += gstAmount;

            total += productSubtotal + gstAmount;
        }

        document.getElementById('subtotal').innerText = subtotal.toFixed(2);
        document.getElementById('gst').innerText = gst.toFixed(2);
        document.getElementById('total').innerText = total.toFixed(2);
    }

    $('#customer_id').select2({
        templateResult: formatUserOption,
        templateSelection: formatUserOption
    });
    // Function to format dropdown options
    function formatUserOption(option) {
        if (!option.id) {
            return option.text; // Default placeholder
        }

        // Fetch data attributes
        var email = $(option.element).data('email');
        var phone = $(option.element).data('phone');

        // HTML structure for single-line option
        return $(
            '<div>' +
                '<strong>' + option.text + '</strong>' +
                ' <span class="email-t">(' + email + ', ' + phone + ')</span>' +
            '</div>'
        );
    }    
    $(document).ready(function ()
    {  
        // console.log(window.$.fn.select2); 
    const today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
    const startDateInput = document.getElementById('commanstartDateRent');
    const endDateInput = document.getElementById('commanendDateRent');
    startDateInput.setAttribute('min', today);
    startDateInput.addEventListener('change', function () {
        const startDate = startDateInput.value;
        endDateInput.setAttribute('min', startDate); 
        if (endDateInput.value < startDate) {
            endDateInput.value = ''; 
        }
    });
    // Handle startDate, endDate, and rentFor change
    $('#commanrentFor, #commanstartDateRent,#commanendDateRent').on('change', function () {
    // $('#commanendDateRent, #commanstartDateRent').on('change', function () {
            // alert('rentfor');
            $('#productTableBody').html('');
            const startDate = $('#commanstartDateRent').val();
            const rentFor = $('#commanrentFor').val();
            //alert(rentFor);
            if (rentFor === 'custom-date') {
                // Show the end date field
                $('#endDateSection').show();
                // Change Select Customer column to col-lg-3
                $('#commanrentFor').closest('.col-lg-3').removeClass('col-lg-3').addClass('col-lg-2');
                $('#commanstartDateRent').closest('.col-lg-3').removeClass('col-lg-3').addClass('col-lg-2');
                // $('#customer_id').next('.select2-container').attr('style', 'width: 300px !important');
                // // $('#customer_id').next('.select2-container').next('.selection').attr('style', 'width: 170 !important');
                // $('#customer_id').next('.select2-container').find('.select2-selection').css('width', '170px');
            } else {
                // Hide the end date field
                $('#endDateSection').hide();

                // Clear the value of the end date input
                $('#commanendDateRent').val('');

                // Revert Select Customer column to col-lg-6
                $('#commanrentFor').closest('.col-lg-2').removeClass('col-lg-2').addClass('col-lg-3');
                $('#commanstartDateRent').closest('.col-lg-2').removeClass('col-lg-2').addClass('col-lg-3');
                // $('#customer_id').next('.select2-container').attr('style', 'width: 400px !important');
                // $('#customer_id').next('.select2-container').find('.select2-selection').css('width', '400px');
            }
            const endDate =  $('#commanendDateRent').val() ? $('#commanendDateRent').val() : null;
            // Ensure startDate and rentFor are selected
            if (rentFor == 'custom-date') 
            {
                if (!startDate || !endDate || !rentFor) {
                    // Clear the dropdown_product_list
                    $('#dropdown_product_list').html('');
                    return; // Exit the function
                }
            }
            if (!startDate || !rentFor) return;
            // Make AJAX call to fetch products available for the selected date range
            $.ajax({
                url: '/admin/fetch-available-products', // Backend route to fetch data
                method: 'POST',
                data: {
                    startDate: startDate,
                    rentFor: rentFor,
                    endDate: endDate,
                _token: $('meta[name="csrf-token"]').attr('content') // Include CSRF token
                },
                success: function (response) {
                    //alert('suessce');
                    // Clear existing product list
                    $('#dropdown_product_list').html('');
                    // Populate dropdown with available products
                    response.products.forEach(product => {
                        const productItem = `
                        <div class="dropdown-item product-item d-flex align-items-center justify-content-between" 
                                data-id="${product.id}" 
                                data-name="${product.name}"
                                data-image="${product.image}"
                                data-price="${product.price}"
                                ${product.available_qty_after_range <= 0 ? 'style="pointer-events: none; opacity: 0.5;"' : ''}>
                                <div class="d-flex align-items-center">
                                    <img src="/storage/${product.image}" class="product-image" style="width: 40px; height: 40px; object-fit: cover; margin-right: 10px;">
                                    <span>${product.name}</span>
                                </div>
                                <div class="d-flex align-items-center">
                                ${typeof product.next_available_date === 'string' && product.next_available_date.trim() !== '' && product.available_qty_after_range <= 0
                                    ? `<span>Available From : ${product.next_available_date}</span> &nbsp;&nbsp;&nbsp;&nbsp;` 
                                    : ''}
                                <span>
                                    ${product.available_qty_after_range > 0 
                                        ? `Available Qty : ${product.available_qty_after_range}` 
                                        : '<span style="color:red;">Out of Stock</span>'}
                                </span>&nbsp; &nbsp; &nbsp; &nbsp;
                                ${product.available_qty_after_range > 0 
                                    ? `<button class="btn btn-primary btn-sm add-product"
                                            data-id="${product.id}"
                                            data-name="${product.name}"
                                            data-image="${product.image}"
                                            data-price="${product.price}"
                                            data-max-purchase-qty="${product.available_qty_after_range}">
                                            + Add Product
                                        </button>`
                                    : ''} <!-- Show button only if stock is available -->
                                </div>
                            </div>
                            `;
                        $('#dropdown_product_list').append(productItem);
                        
                    });
                    // Show the dropdown
                // $('#dropdown_product_list').show();
                },
                error: function (error) {
                    console.error('Error fetching available products:', error);
                }
            });
        });

        updateOrderSummary();
    });
// Event listener for search functionality
$('#search_product').on('input', function () {
    const searchValue = $(this).val().toLowerCase().trim(); // Get input value in lowercase and trimmed
    // If search box is empty, show all products
    if (searchValue === '') {
        $('.dropdown-item.product-item').removeClass('hide-item').addClass('show-item');
        return;
    }
    // Filter products based on the search input
    $('.dropdown-item.product-item').each(function () {
        const productName = $(this).data('name'); // Retrieve data-name attribute
        // Ensure productName is a string before comparing
        if (typeof productName === 'string') {
            const lowerCaseProductName = productName.toLowerCase().trim(); // Convert to lowercase
            if (lowerCaseProductName.includes(searchValue)) {
                $(this).removeClass('hide-item').addClass('show-item'); // Show matching product
            } else {
                $(this).removeClass('show-item').addClass('hide-item'); // Hide non-matching product
            }
        } else {
            $(this).removeClass('show-item').addClass('hide-item'); // Hide item if data-name is not valid
        }
    });
});
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')) {
            e.preventDefault();
            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'));
            // alert(productPrice);
            // const productRental1Month = button.getAttribute('data-rental-1-month');
            const productMaxPurchaseQty = button.getAttribute('data-max-purchase-qty');
            const rentFor = $('#commanrentFor').val();
            // 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">${productPrice ? `Price : $${productPrice}` : ''}</small>
                </td>
                <td>
                <input type="number" name="price[${productId}]" value="${productPrice ? productPrice : ''}" min="1" class="form-control price" ${rentFor !== 'custom-date' ? 'readonly' : ''} required>
                </td>
                <td>
                    <input type="number" name="quantity[${productId}]" value="1" class="form-control quantity-input" required min="1" max="${productMaxPurchaseQty}">
                </td>
                <td>
                    <div id="subtotal_${productId}" class="fw-bold subtotal">$${productPrice.toFixed(2)}</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);
            // Change button text to "Added"
            button.innerHTML = '<i class="fas fa-check"></i> Added';
            button.classList.add('disabled'); // Optional: Disable the button to prevent multiple clicks
            button.setAttribute('disabled', 'true');
            // Hide dropdown
            // dropdownProductList.style.display = 'none';
            attachDynamicListeners(); // Attach listeners for newly added rows
            updateOrderSummary();
        }
    });
    productTableBody.addEventListener('click', (e) => {
        const button = e.target.closest('.remove-product'); // Ensure we get the closest button with 'remove-product'
        if (button) {
            const row = button.closest('tr'); // Get the table row containing the button
            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();
            const buttondropdowan = dropdownProductList.querySelector(`.add-product[data-id="${productId}"]`);
            // Change button text to "Added"
            buttondropdowan.innerHTML = '+ Add Product';
            buttondropdowan.classList.remove('disabled'); // Remove the disabled class (if any)
            buttondropdowan.removeAttribute('disabled');
        }
    });
    // Update subtotal on input change and also update the order summary
    productTableBody.addEventListener('input', (e) => {
    // alert('ji');
    // Get the row where the input change happened
    const row = e.target.closest('tr');
    const productId =row.getAttribute('data-id');
    const quantity = parseInt(row.querySelector('.quantity-input').value) || 0;
    // const rentPriceElement = row.querySelector('.rent-price');
    // const rentPriceHTML = rentPriceElement.innerHTML;
    //const rentPrice = rentPriceHTML.replace('Price : $', '').trim();
    const rentPrice = row.querySelector('.price').value; 
    const rentPriceElement = row.querySelector('.rent-price'); 
    rentPriceElement.innerHTML = `Price : $ ${rentPrice}`;
    const subtotal = (quantity * rentPrice).toFixed(2);
    // Update the row's subtotal
    //console.log(row.querySelector());
    const subtotalElement = row.querySelector(`#subtotal_${productId}`);
    if (subtotalElement) {
        // Element exists, now update it
        subtotalElement.innerHTML = `$${subtotal}`;
    } else {
        console.log(`Element with id #subtotal_${productId} not found`);
    }
    //row.querySelector(`#subtotal_${productId}`).textContent = `$${subtotal}`;
    //row.querySelector(`#subtotal_${productId}`).innerText = `$${subtotal.toFixed(2)}`;
    //    const currentContent = row.querySelector(`#subtotal_${productId}`).innerHTML;
    // // Extract the numeric part of the content (assuming it starts with '$')
    //     const currentPrice = parseFloat(currentContent.replace('$',"").trim());
    //     row.querySelector(`#subtotal_${productId}`).innerText = `$${subtotal.toFixed(2)}`;
    // Update the hidden input field with the rentfordays value
    // row.querySelector('.rentfordays').value = rentfordays;
    // Recalculate the total order summary
    updateOrderSummary();
});
});

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

   // Function to fetch customers via AJAX
    function fetchCustomers() {
    $.ajax({
        url: '/admin/getCustomers', // Adjust to your API route
        method: 'GET',
        success: function(response) 
        { 
            $('#customer_id').empty();
            // Add placeholder option
            $('#customer_id').append('<option value="">Select Customer</option>');
            // Append each customer as an option
            $.each(response.customers, function(index, customer) {
                $('#customer_id').append(
                    '<option value="' + customer.id + '" data-email="' + (customer.email || 'N/A') + '" data-phone="' + (customer.phone || 'N/A') + '">' +
                    customer.name +
                    '</option>'
                );
            });
        },
        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');
//         }
//     });
// });
$(document).ready(function() {

    $('#search_product').on('input', function () {
        const query = $(this).val().trim();
        if (query.length > 0) {
            $('#dropdown_product_list').show();
        } else {
            $('#dropdown_product_list').hide();
        }
    });
    // Show the dropdown on hover
    $('#dropdown_product_list, #search_product').on('mouseenter', function () {
        //alert('show');
        if ($('#dropdown_product_list').html().trim() === '') {
           // alert('Please select the start date first'); // Show alert
        }else{
                $('#dropdown_product_list').show();
        }
    });
    // Hide the dropdown when the mouse leaves the input field or dropdown
    $('#dropdown_product_list').on('mouseleave', function () {
        
        setTimeout(function () {
            if (!$('#search_product').is(':hover') && !$('#dropdown_product_list').is(':hover')) {
                $('#dropdown_product_list').hide();
            }
        }, 200); 
    }); 
    // $(document).on('mousedown', function (e) {
    // // Check if the click is outside the search and dropdown elements
    // if (!$(e.target).closest('#search_product, #dropdown_product_list').length) {
    //     $('#dropdown_product_list').hide();
    // }
function allowAlphaNumericKey(event) {
        var charCode = event.which || event.keyCode;
    var charStr = String.fromCharCode(charCode);
    // Allow only alphanumeric characters (A-Z, 0-9)
    if (!/[a-zA-Z0-9]/.test(charStr)) {
        event.preventDefault(); // Prevent input of non-alphanumeric characters
    }
    }
    // Format the postal code as the user types
    $('#pincode').on('input', function() {
        let value = $(this).val().toUpperCase().replace(/[^A-Z0-9]/g, ''); // Remove any non-alphanumeric characters
    
        // Ensure format is 3 letters, 3 digits, and 3 letters
        if (value.length > 3 && value.length <= 7) {
            value = value.substring(0, 3) + ' ' + value.substring(3, 7);
        }
        $(this).val(value);
    });

    // Attach the keypress handler
    $('#pincode').keypress(allowAlphaNumericKey);
});
$('#addCustomerForm').submit(function(e) {
    e.preventDefault();

    let formData = $(this).serialize();
    
    // Validate phone number (exactly 10 digits)
    let phone = $('input[name="phone"]').val();
    let phonePattern = /^[0-9]{10}$/;
    // if (!phonePattern.test(phone)) {
    //     alert('Phone number must be exactly 10 digits.');
    //     return;
    // }

    // Validate pincode (exactly 6 alphanumeric characters)
    let pincode = $('input[name="pincode"]').val();
    let pincodePattern = /^(?=.*[A-Z])[A-Z0-9 ]{7}$/;
    if (!pincodePattern.test(pincode)) {
        alert('Pincode must be exactly 6 characters, containing only uppercase letters and digits, with at least one letter.');
        return;
    }

    // Validate email (check if already exists)
    let email = $('input[name="email"]').val();
    $.ajax({
        url: '/admin/checkEmail', // Add route to check if email exists
        method: 'POST',
        data: { email: email, _token: $('input[name="_token"]').val() },
        success: function(response) {
            if (response.exists) {
                alert('Email already exists.');
                return;
            }
            // Proceed with form submission if no validation errors
            $.ajax({
                url: "/admin/addCustomer", // Replace with your customer store route
                method: 'POST',
                data: formData,
                success: function(response)
                 {
                    // Check if customer was added successfully
                    if (response.customer) 
                    {
                        // Close the modal
                        $('#addCustomerModal').modal('hide');
                        // Add the new customer to the dropdown
                        let newOption = '<option value="' + response.user.id + '" ' + 'data-email="' + (response.customer.email || 'N/A') + '" ' + 'data-phone="' + (response.customer.phone || 'N/A') + '">' + response.customer.firstname + ' ' + response.customer.lastname + '</option>';
                        // let newOption = new Option(response.customer.firstname + ' ' + response.customer.lastname, response.customer.id, false, false);
                        // Append the new option to the dropdown
                        $('#customer_id').append(newOption);

                        // Force the dropdown to select the newly added customer
                        $('#customer_id').val(response.user.id); // Set the value
                        $('#customer_id').find('option[value="' + response.user.id + '"]').prop('selected', true); // Ensure it is marked as selected

                        // Trigger change event explicitly
                        $('#customer_id').trigger('change.select2'); // For Select2 or similar libraries
                        $('#customer_id').trigger('change'); // General change event
                        $('#addCustomerForm')[0].reset();
                        //location.reload();
                    }
                },
                //     success: function(response) {
                //     // Check if customer was added successfully
                //     if (response.customer) {
                //         // Close the modal
                //         $('#addCustomerModal').modal('hide');

                //         // Create new customer option with custom display
                //         let customer = response.customer;

                //         // Generate profile picture or placeholder
                //         let profilePicHtml = customer.profile_pic
                //             ? `<img src="${customer.profile_pic}" alt="Profile Picture" class="rounded-circle" style="width: 30px; height: 30px; margin-right: 5px;">`
                //             : `<div class="rounded-circle bg-secondary text-white text-center" style="width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; margin-right: 5px;">
                //                 ${customer.firstname.charAt(0).toUpperCase()}
                //               </div>`;

                //         // Format the option display
                //         let customerHtml = `
                //             <div style="display: flex; align-items: center;">
                //                 ${profilePicHtml}
                //                 <div>
                //                     <strong>${customer.firstname} ${customer.lastname}</strong><br>
                //                     <small style="font-style: italic;font-size : 12px;">${customer.phone || 'N/A'}</small>
                //                 </div>
                //             </div>
                //         `;

                //         // Add the new customer to the dropdown with custom HTML
                //         let newOption = new Option('', customer.id, false, false);
                //         $(newOption).html(customerHtml);
                //         $('#customer_id').append(newOption).trigger('change');
                //     }
                // },
                error: function() {
                    alert('Error adding customer');
                }
            });
        },
        error: function() {
            alert('Error checking email');
        }
    });
});

//   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)}`;
}
function updateSubtotal(element) {
    const productRow = element.closest('tr');
    const productId = productRow.id.split('-')[2];
    const quantity = parseFloat(productRow.querySelector('.quantity-input').value) || 0;
    // const rentPriceElement = productRow.querySelector('.rent-price');
    // const rentPriceHTML = rentPriceElement.innerHTML;
    // const rentPrice = rentPriceHTML.replace('Price : $', '').trim();    
    const rentPrice = productRow.querySelector('.price').value;
    const subtotal = (quantity * rentPrice).toFixed(2);
    // Update the row's subtotal
    const subtotalElement = productRow.querySelector(`#subtotal_${productId}`);
    if (subtotalElement) {
        // Element exists, now update it
        subtotalElement.innerHTML = `$${subtotal}`;
    } else {
        console.log(`Element with id #subtotal_${productId} not found`);
    }
    //productRow.querySelector(`#subtotal_${productId}`).innerHTML = `$${subtotal}`;
  
}

// 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('.quantity-input').forEach(input => {
//         input.addEventListener('input', () => {
//             updateSubtotal(input); // Update the row subtotal
//             updateSummary(); // Update the summary
//         });
//     });

// Update subtotal for individual rows


// 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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>