{%include 'public_header.html'%}

    <style>




        /* Base container styles */
        .container {
            display: block;
            max-width: 1400px;
            margin: 0 auto;
            padding: 15px;
        }
        
        /* GST calculation box styles */
        .gst-calculation-box {
            width: 100%;
            max-width: 300px;
            margin-left: auto;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .gst-calculation-box table {
            width: 100%;
            font-size: 14px;
        }
        
        .gst-calculation-box td {
            padding: 5px;
        }
        
        .gst-calculation-box .amount {
            text-align: right;
            font-weight: 500;
        }
        
        .gst-calculation-box .total-row {
            border-top: 2px solid #dee2e6;
            font-weight: bold;
        }
        
        /* Invoice styles */
        .invoice-container {
            background: white;
            padding: 20px;
            font-family: Arial, sans-serif;
            z-index: 4000;
            position: relative;
            overflow: auto;
            max-height: 90vh;
        }
        
        .invoice-header {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }
        
        .company-info {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .logo {
            max-width: 150px;
            height: auto;
            margin-bottom: 10px;
        }
        
        .address p {
            margin: 5px 0;
            font-size: 14px;
        }
        
        .invoice-details {
            width: 100%;
        }
        
        .details-table {
            width: 100%;
            margin-top: 10px;
        }
        
        .details-table td {
            padding: 3px;
            font-size: 14px;
        }
        
        /* Items table styles */
        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .items-table th,
        .items-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        
        .items-table th {
            background-color: #f8f9fa;
        }
        
        /* Services and Cart sections */
        .services-section {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .cart-section {
            width: 100%;
            background-color: #fff;
            padding: 15px;
            border-radius: 15px 15px 0 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        /* Service items */
        .service-item {
            background-color: #fff;
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .service-item h3 {
            font-size: 16px;
            margin: 0 0 10px 0;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .price {
            color: #e74c3c;
            font-weight: bold;
            white-space: nowrap;
        }
        
        /* Form controls */
        #search-input {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        /* Cart section base styles */
.cart-section {
    width: 100%;
    background-color: #fff;
    padding: 15px;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Cart items list with fixed height */
#cart-items-list {
    max-height: 150px; /* Reduced from 200px */
    min-height: 50px;  /* Added minimum height */
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 5px; /* Added for scrollbar spacing */
}

/* Cart item styling */
.cart-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cart-item-details {
    flex: 1;
    min-width: 0; /* Prevents text from expanding container */
}

.cart-item-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-price {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

/* Compact total amount display */
#total-amount {
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0;
    padding: 5px 0;
    border-top: 1px solid #eee;
}

/* Compact add to cart button */
#add-to-cart {
    width: 100%;
    padding: 10px; /* Reduced padding */
    background-color: #2ecc71;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 5px;
}

/* Remove button styling */
.remove-item {
    color: #ff4d4d;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
}

/* Custom scrollbar for cart items */
#cart-items-list::-webkit-scrollbar {
    width: 6px;
}

#cart-items-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#cart-items-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
        
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            overflow-y: auto;
        }
        
        .modal-content {
            background-color: #fff;
            margin: 20px auto;
            padding: 20px;
            width: 95%;
            max-width: 800px;
            border-radius: 8px;
            position: relative;
        }
        
        .close-modal {
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 28px;
            cursor: pointer;
        }
        
        /* Footer styles */
        .invoice-footer {
            margin-top: 30px;
            border-top: 2px solid #eee;
            padding-top: 20px;
        }
        
        .terms {
            font-size: 12px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .bank-info td {
            padding: 3px 10px;
            font-size: 14px;
        }
        
        .continue-btn {
            background-color: #2ecc71;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }
        
        /* Utility classes */
        .text-right {
            text-align: right;
        }
        
        .amount {
            text-align: right;
        }
        
        /* Add padding to bottom of page to account for fixed cart on mobile */
        body {
            padding-bottom: 200px;
        }
        
        /* Media Queries */
        @media (min-width: 768px) {
            .container {
                display: flex;
                gap: 20px;
            }
        
            .services-section {
                flex: 3;
            }
        
            .cart-section {
                position: sticky;
                top: 20px;
                width: 300px;
                max-width: 300px;
                border-radius: 8px;
                margin-left: auto;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }
        
            #cart-items-list {
                max-height: 250px; /* Slightly larger on desktop */
            }
            
            body {
                padding-bottom: 0;
            }
        
            .invoice-header {
                flex-direction: row;
                justify-content: space-between;
            }
        
            .company-info {
                flex: 2;
                margin-bottom: 0;
            }
        
            .invoice-details {
                flex: 1;
                text-align: right;
            }
        
            .modal-content {
                width: 80%;
                margin: 5% auto;
            }
        
            body {
                padding-bottom: 0;
            }
        
            .gst-calculation-box {
                margin-left: auto;
            }
        }
        
        /* Print styles */
        @media print {
            .modal {
                position: absolute;
                background: none;
            }
        
            .modal-content {
                box-shadow: none;
                margin: 0;
                width: 100%;
            }
        
            .close-modal,
            .continue-btn {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="services-section">
            <h1>Available Cleaning Services</h1>
            <input type="text" id="search-input" placeholder="Search for services...">
            <form id="cleaning-service-form">
                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="5220">
                        <label for="service-1">Normal Cleaning Furnished</label>
                        <span class="price">(₹5,220)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk" data-price="0">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk" data-price="500">2 BHK Flat/Apartment up to 1300 SQFT (+₹500)</option>
                        <option value="3bhk" data-price="1000">3 BHK Flat/Apartment up to 1500 SQFT (+₹1000)</option>
                        <option value="4bhk" data-price="1500">4 BHK Flat/Apartment up to 2000 SQFT (+₹1500)</option>
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="5100">
                        <label for="service-1">Deep Cleaning Furnished</label>
                        <span class="price">(₹5,100)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>


            
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="8500">
                        <label for="service-1">Luxe Deep Cleaning</label>
                        <span class="price">(₹8,500)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>


            
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="1492">
                        <label for="service-1">Sofa Shampooing</label>
                        <span class="price">(₹8,500)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>


            
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="1492">
                        <label for="service-1">Mattress Shampooing</label>
                        <span class="price">(₹8,500)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>


            
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="1492">
                        <label for="service-1">Fridge Cleaning</label>
                        <span class="price">(₹8,500)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>


            
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="1492">
                        <label for="service-1">Carpet Shampooing</label>
                        <span class="price">(₹8,500)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>


            
                    </select>
                </div>

                <div class="service-item">
                    <h3>
                        <input type="checkbox" id="service-1" name="selected_services" value="1" data-price="1492">
                        <label for="service-1">Interlock cleaning Services</label>
                        <span class="price">(₹8,500)</span>
                    </h3>
                    <p>2-6 Service men, 8-12 Hours</p>
                    <p>Options:</p>
                    <select id="size-1" name="size-1">
                        <option value="1bhk">1 BHK Flat/Apartment (up to 800 SQFT)</option>
                        <option value="2bhk">2 BHK Flat/Apartment up to 1300 SQFT</option>
                        <option value="2bhk">3 BHK Flat/Apartment up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Flat/Apartment up to 2000 SQFT</option>
                        <option value="2bhk">3 BHK Independent  House up to 1500 SQFT</option>
                        <option value="2bhk">4 BHK Independent  House up to 2000 SQFT</option>

                    </select>
                </div>
            </form>
        </div>
        <div class="cart-section">
            <h2>Your Cart</h2>
            <div id="cart-items-list">
                <!-- Selected items will be displayed here -->
            </div>
            <div id="total-amount">Total: ₹0.00</div>
            <button type="button" id="add-to-cart">Add to Cart</button>
        </div>
    </div>


    <div id="taxBillModal" class="modal">

        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div class="invoice-container">
    <h1 style="margin-left: 220px;">PROFORMA INVOICE</h1>

                <div class="invoice-header">

                    <div class="company-info">
                        <img src="/static/images/CSQUAD_LOGO.png" alt="Digitalroomz" class="logo" height="70px" width="70px">
                        <div class="address">
                            <p>M/s Digital Roomz</p>
                            <p>D.No 577/140, South Kalamassery, Kochi, Kerala, India, Pin:683503</p>
                            <p>info@digitalroomz.com | GST: 32AAAWP9205P1Z1</p>
                        </div>
                    </div>
                    <div class="invoice-details">
                        <table class="details-table">
                            <tr>

                            </tr>
                            <tr>
                                <td>INVOICE NO.</td>
                                <td>: DRZ/{{ invoice_number }}</td>
                            </tr>
                            <tr>
                                <td>INVOICE DATE</td>
                                <td>: <span id="invoiceDate"></span></td>
                            </tr>
                            <tr>
                                <td>TYPE OF BUSINESS</td>
                                <td>: Cleaning Services</td>
                            </tr>
                        </table>
                    </div>
                </div>
    
                <div class="billing-section">
                    <div class="bill-to">
                        <h3>Bill To:</h3>
                        <div class="customer-details">
                            <p>M/s COMPANY NAME</p>
                            <p>COMPANY ADDRESS</p>
                        </div>
                    </div>
                    <div class="billing-duration">
                        <p>Billing Duration: <span id="billingPeriod"></span></p>
                    </div>
                </div>
    
                <!-- Update the invoice body section -->
<div class="invoice-body">
    <table class="items-table">
        <thead>
            <tr>
                <th>SL NO</th>
                <th>Particulars</th>
                <th>Product Code</th>
                <th>Customer Id</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody id="invoiceItems">
            <!-- Items will be populated dynamically -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4" class="text-right">Sub Total</td>
                <td class="amount">₹<span id="mainSubTotal">0.00</span></td>
            </tr>
        </tfoot>
    </table>

    <div class="gst-calculation-box">
        <table>
            <tr>
                <td>Sub Total</td>
                <td class="amount">₹<span id="subTotal">0.00</span></td>
            </tr>
            <tr>
                <td>CGST (9%)</td>
                <td class="amount">₹<span id="cgstTotal">0.00</span></td>
            </tr>
            <tr>
                <td>SGST (9%)</td>
                <td class="amount">₹<span id="sgstTotal">0.00</span></td>
            </tr>
            <tr class="total-row">
                <td>Total Amount</td>
                <td class="amount">₹<span id="grandTotal">0.00</span></td>
            </tr>
        </table>
    </div>
</div>
    
                <div class="invoice-footer">
                    <div class="terms">
                        <h4>Terms & conditions</h4>
                        <ol>
                            <li>Please ensure that full payment is made before the invoice is overdue to avoid any inconvenience.</li>
                            <li>Payments made are not refundable.</li>
                        </ol>
                    </div>
                    <div class="bank-details">
                        <h4>Bank Details:</h4>
                        <table class="bank-info">
                            <tr>
                                <td>Beneficiary Name</td>
                                <td>: M/s Digitalroomz</td>
                            </tr>
                            <tr>
                                <td>Bank Name</td>
                                <td>: South Indian Bank</td>
                            </tr>
                            <tr>
                                <td>Account Number</td>
                                <td>: XXXXXXXXXX</td>
                            </tr>
                            <tr>
                                <td>IFSC Code</td>
                                <td>: SIBL0000224</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="continueButton" class="continue-btn">Continue to Checkout</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Search functionality
        document.getElementById('search-input').addEventListener('input', function () {
            var searchTerm = this.value.toLowerCase();
            document.querySelectorAll('.service-item').forEach(function(item) {
                var serviceName = (item.querySelector('label') || {}).textContent || '';
                var serviceDescription = (item.querySelector('p') || {}).textContent || '';
                if (serviceName.toLowerCase().includes(searchTerm) || serviceDescription.toLowerCase().includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });

        // Cart management functions
    // Update total function
// Update total function
function updateTotal() {
    var total = 0;
    var selectedServices = document.querySelectorAll('input[name="selected_services"]:checked');
    const cartItemsList = document.getElementById('cart-items-list');
    cartItemsList.innerHTML = '';

    selectedServices.forEach(function(service) {
        const basePrice = parseFloat(service.getAttribute('data-price'));
        const serviceName = service.nextElementSibling.textContent;
        const serviceId = service.id;
        
        // Get selected option price
        const serviceItem = service.closest('.service-item');
        const selectElement = serviceItem.querySelector('select');
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const optionPrice = parseFloat(selectedOption.getAttribute('data-price')) || 0;
        
        // Calculate total for this service
        const totalPrice = basePrice + optionPrice;
        total += totalPrice;

        // Create cart item element with proper remove button functionality
        const itemElement = document.createElement('div');
        itemElement.className = 'cart-item';
        itemElement.innerHTML = `
            <div class="cart-item-details">
                <div class="cart-item-name">${serviceName} - ${selectedOption.text}</div>
                <div class="cart-item-price">₹${totalPrice.toFixed(2)}</div>
                ${optionPrice > 0 ? `<small class="text-muted">(Includes option: ₹${optionPrice.toFixed(2)})</small>` : ''}
            </div>
            <button class="remove-item" data-service-id="${serviceId}" title="Remove item">
                <span class="remove-icon">×</span>
            </button>
        `;
        
        cartItemsList.appendChild(itemElement);
    });

    // Update total amount display
    document.getElementById('total-amount').textContent = `Total: ₹${total.toFixed(2)}`;
}

// Remove item function
function removeItem(serviceId) {
    const checkbox = document.getElementById(serviceId);
    if (checkbox) {
        checkbox.checked = false;
        updateTotal();
    }
}

// Event delegation for remove buttons
document.getElementById('cart-items-list').addEventListener('click', function(e) {
    const removeButton = e.target.closest('.remove-item');
    if (removeButton) {
        const serviceId = removeButton.getAttribute('data-service-id');
        removeItem(serviceId);
    }
});

// Add event listeners for checkboxes and select elements
document.querySelectorAll('input[name="selected_services"]').forEach(function(checkbox) {
    checkbox.addEventListener('change', updateTotal);
});

document.querySelectorAll('select').forEach(select => {
    select.addEventListener('change', updateTotal);
});

document.getElementById('add-to-cart').addEventListener('click', function() {
    // Check if any services are selected
    var selectedServices = document.querySelectorAll('input[name="selected_services"]:checked');
    
    if (selectedServices.length === 0) {
        alert('Please select at least one service.');
        return;
    }

    // Make sure modal exists
    var modal = document.getElementById('taxBillModal');
    if (!modal) {
        console.error('Modal element not found');
        return;
    }

    // Clear previous items
    document.getElementById('invoiceItems').innerHTML = '';
    
    var subTotal = 0;
    const invoiceItems = document.getElementById('invoiceItems');

    // Set current date
    const currentDate = new Date();
    document.getElementById('invoiceDate').textContent = currentDate.toLocaleDateString('en-IN');
    
    // Set billing period
    const endDate = new Date(currentDate);
    endDate.setDate(endDate.getDate() + 30);
    document.getElementById('billingPeriod').textContent = 
        `${currentDate.toLocaleDateString('en-IN')} - ${endDate.toLocaleDateString('en-IN')}`;

    // Process each selected service
    selectedServices.forEach((service, index) => {
        const basePrice = parseFloat(service.getAttribute('data-price'));
        const serviceName = service.nextElementSibling.textContent;
        const serviceItem = service.closest('.service-item');
        const selectElement = serviceItem.querySelector('select');
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const optionPrice = parseFloat(selectedOption.getAttribute('data-price')) || 0;
        const totalPrice = basePrice + optionPrice;

        // Create row for this service
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${index + 1}</td>
            <td>${serviceName} - ${selectedOption.text}</td>
            <td>DRZ${String(index + 1).padStart(3, '0')}</td>
            <td>N/A</td>
            <td class="amount">₹${totalPrice.toFixed(2)}</td>
        `;
        invoiceItems.appendChild(row);
        subTotal += totalPrice;
    });

    // Calculate taxes
    const cgst = subTotal * 0.09;
    const sgst = subTotal * 0.09;
    const grandTotal = subTotal + cgst + sgst;

    // Update all totals
    document.getElementById('mainSubTotal').textContent = subTotal.toFixed(2);
    document.getElementById('subTotal').textContent = subTotal.toFixed(2);
    document.getElementById('cgstTotal').textContent = cgst.toFixed(2);
    document.getElementById('sgstTotal').textContent = sgst.toFixed(2);
    document.getElementById('grandTotal').textContent = grandTotal.toFixed(2);

    // Store cart data in session storage
    sessionStorage.setItem('cartItems', JSON.stringify({
        items: Array.from(selectedServices).map(service => ({
            name: service.nextElementSibling.textContent,
            price: parseFloat(service.getAttribute('data-price')),
            option: service.closest('.service-item').querySelector('select').options[
                service.closest('.service-item').querySelector('select').selectedIndex
            ].text
        })),
        totals: {
            subTotal: subTotal,
            cgst: cgst,
            sgst: sgst,
            grandTotal: grandTotal
        }
    }));

    // Show the modal
    modal.style.display = 'block';
});

// Close modal when clicking the close button
document.querySelector('.close-modal').addEventListener('click', function() {
    document.getElementById('taxBillModal').style.display = 'none';
});

// Close modal when clicking outside
window.addEventListener('click', function(event) {
    const modal = document.getElementById('taxBillModal');
    if (event.target === modal) {
        modal.style.display = 'none';
    }
});
// Add event listeners for options to update prices in real-time
document.querySelectorAll('select').forEach(select => {
    select.addEventListener('change', function() {
        updateTotal();
    });
});

// Update the updateTotal function to handle option prices
function updateTotal() {
    var total = 0;
    var selectedServices = document.querySelectorAll('input[name="selected_services"]:checked');
    const cartItemsList = document.getElementById('cart-items-list');
    cartItemsList.innerHTML = '';

    selectedServices.forEach(function(service) {
        const basePrice = parseFloat(service.getAttribute('data-price'));
        const serviceName = service.nextElementSibling.textContent;
        const serviceId = service.id; // Get the service ID
        
        // Get selected option price
        const serviceItem = service.closest('.service-item');
        const selectElement = serviceItem.querySelector('select');
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        const optionPrice = parseFloat(selectedOption.getAttribute('data-price')) || 0;
        
        // Calculate total for this service
        const totalPrice = basePrice + optionPrice;
        total += totalPrice;

        // Create cart item element
        const itemElement = document.createElement('div');
        itemElement.className = 'cart-item';
        itemElement.innerHTML = `
            <div class="cart-item-details">
                <div class="cart-item-name">${serviceName} - ${selectedOption.text}</div>
                <div class="cart-item-price">₹${totalPrice.toFixed(2)}</div>
                ${optionPrice > 0 ? `<small class="text-muted">(Includes option: ₹${optionPrice.toFixed(2)})</small>` : ''}
            </div>
            <button class="remove-item" data-service-id="${serviceId}" title="Remove item">×</button>
        `;
        
        cartItemsList.appendChild(itemElement);
    });

    // Update total amount display
    document.getElementById('total-amount').textContent = `Total: ₹${total.toFixed(2)}`;
}

// Fix the service IDs in the HTML
document.querySelectorAll('.service-item').forEach((item, index) => {
    const checkbox = item.querySelector('input[type="checkbox"]');
    if (checkbox) {
        checkbox.id = `service-${index + 1}`;
    }
});
// Close modal when clicking the close button or outside
document.querySelector('.close-modal').addEventListener('click', function() {
    document.getElementById('taxBillModal').style.display = 'none';
});

window.addEventListener('click', function(event) {
    const modal = document.getElementById('taxBillModal');
    if (event.target == modal) {
        modal.style.display = 'none';
    }
});

// Continue button handler
document.getElementById('continueButton').addEventListener('click', function() {
    const cartData = JSON.parse(sessionStorage.getItem('cartItems'));
    
    // Here you would typically send the data to your backend
    fetch('/save-cart/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify(cartData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = '/checkout/';
        }
    })
    .catch(error => console.error('Error:', error));
});
    

// Helper function to get CSRF token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
    </script>

    <!-- <div class="container-fluid text-light py-4" style="background: #051225;">
        <div class="container">
            <div class="row g-0">
                <div class="col-md-6 text-center text-md-start">
                    <p class="mb-md-0">&copy; <a class="text-white border-bottom" href="#">Digitalroomz</a>. All Rights Reserved.</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <p class="mb-0">Designed by <a class="text-white border-bottom" href="https://digitalroomz.com/">Digitalroomz</a><br>
                    </p>
                </div>
            </div>
        </div>
    </div> -->
    <!-- Footer End -->

    <!-- Back to Top -->
    <!-- <a href="#" class="btn btn-lg btn-primary btn-lg-square rounded back-to-top"><i class="bi bi-arrow-up"></i></a> -->

    <!-- JavaScript Libraries -->
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/lib/wow/wow.min.js"></script>
    <script src="/static/lib/easing/easing.min.js"></script>
    <script src="/static/lib/waypoints/waypoints.min.js"></script>
    <script src="/static/lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="/static/lib/tempusdominus/js/moment.min.js"></script>
    <script src="/static/lib/tempusdominus/js/moment-timezone.min.js"></script>
    <script src="/static/lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
    <script src="/static/lib/twentytwenty/jquery.event.move.js"></script>
    <script src="/static/lib/twentytwenty/jquery.twentytwenty.js"></script> -->

    <!-- Template Javascript -->
    <!-- <script src="/static/js/main.js"></script>
</body>
</html> -->


{%include 'public_footer.html'%}