<div class="row mb-3">
	<div class="col-sm-6 mb-3">
		<label>Select Page<span style="color:#ff0000;">*</span></label>
		<select class="form-control bg-light border-0" id="page" name="page" required>
		<option value="">Select</option>
		<?php foreach($pages as $pg){ ?>
		<option value="<?php echo $pg->page_name;?>"><?php echo $pg->page_name;?></option>
		<?php } ?>
		</select>
		<input type="hidden" name="id" id="id" value="<?php echo !empty($edit[0]->id) ? $edit[0]->id : "";?>"/>											

	</div>
	<div class="clearfix"></div>
	<div class="col-sm-12 mb-3">
		<label>Header Content<span style="color:#ff0000;">*</span></label>
		<textarea name="header_content" id="header_content" class="form-control" required rows="15"><?php echo !empty($edit[0]->header_content) ? $edit[0]->header_content : "";?></textarea>
	</div>
	<div class="clearfix"></div>
	<div class="col-sm-8 mb-3">
		<label>Upload Favicon<span style="color:#ff0000;"></span></label>
		<input type="file" name="favicon" id="favicon" class="form-control">
	</div>
	<div class="clearfix"></div>
	<div id="form-rows" style="display:block">
	<div id="tooltest0" class="form-row" data-row-id="0">
	<div class="col-sm-8 mb-3">
		<label>Upload CSS Files<span style="color:#ff0000;"></span></label>
		<input type="file" name="css" id="css" class="form-control" >
	</div>
	</div>
	</div>
	<div id="tool-placeholder"></div>
            <div class="row">
                <div class="col-xl-12 col-md-12 mb-4">
                    <div class="d-flex justify-content-start">
                    	
						<!-- Add Button -->
                        <button type="button" class="btn me-2" onclick="addRow()" id="multi-add-btn" style="display:block;">
                            <img src="<?php echo base_url();?>assets/images/add.png" alt="Add Row" style="width: 40px; height: 40px;">
                        </button>
                        <!-- Remove Button (initially hidden) -->
                        <button type="button" class="btn" id="remove-btn" onclick="removeRow()" style="display: none;">
                            <img src="<?php echo base_url();?>assets/images/minus.png" alt="Remove Row" style="width: 40px; height: 40px;">
                        </button>
                    </div>
                </div>
            </div>
</div>
<script>
let rowCount = 0; // Track the number of added rows
function addRowDisplay() {
    document.getElementById('form-rows').style.display = 'block';
    document.getElementById('add-btn').style.display = 'none';
    document.getElementById('multi-add-btn').style.display = 'block';
}

	

function addRow() {
    //document.getElementById('form-rows').style.display = 'block';
	rowCount++; // Increment the row count
	
	const initialRow = document.querySelector('.form-row[data-row-id="0"]');
	const newRow = initialRow.cloneNode(true);
 
    // Update the row ID
    newRow.setAttribute('data-row-id', rowCount);
	// Reset input values in the cloned row
    const inputs = newRow.querySelectorAll('input, select');
    inputs.forEach(input => {
        if (input.type === 'text') {
            input.value = '';
        } else if (input.type === 'checkbox') {
            input.checked = false;
        } else if (input.tagName === 'SELECT') {
            input.selectedIndex = 0; // Reset dropdown to first option
		}
    });

	document.getElementById('form-rows').appendChild(newRow);
	
    // Show the Remove button if there is at least one added row
    document.getElementById('remove-btn').style.display = 'block';
}

	
function removeRow() {
    if (rowCount > 0) {
        // Find the last added row and remove it
        const rows = document.getElementById('form-rows').children;
        if (rows.length > 1) { // Ensure the initial row (data-row-id="0") is not removed
            rows[rows.length - 1].remove(); // Remove the last row
            rowCount--; // Decrement the row count
        }

        // Hide the Remove button if there are no more added rows
        if (rowCount === 0) {
            document.getElementById('remove-btn').style.display = 'none';
        }
    }
}
</script>