<?php 
    include "header.php";
   include "databaseConnect.php";  
   $cczCount ='';  
   $totalCount='';
   $ccaCount='';
?>
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 23px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
    }
    input:checked + .slider {
        background-color: #0d6efd;
    }
    input:focus + .slider {
        box-shadow: 0 0 1px #0d6efd;
    }
    input:checked + .slider:before {
        transform: translateX(26px);
    }
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0"><i class="nav-icon fas fa-tachometer-alt"></i> Dashboard</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">Home</li>
                        <li class="breadcrumb-item">Add FAQs</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content" style="min-height: 454px;">
        <div class="container-fluid">
            <form method="post" id="addFaqsContentForm" action="manage-hotels-process.php" enctype="multipart/form-data">
                <input type="hidden" name="type" value="addFaqs" />
                <div class="row mb-3">
                    <div class="col-md-12">
                        <label>Page Slug</label>
                        <select class="form-control" name="addBySlug" id="addBySlug">
                            <option value=""> Slug</option>
                            <?php 
                                $sql = "select distinct slug from tblhoteldetails where slug != ''";
                                $query = mysqli_query($conn, $sql);
                                if(mysqli_num_rows($query)>0){
                            ?>
                                    <?php while($slugs = mysqli_fetch_assoc($query)){?>
                                        <option value="<?=$slugs['slug']?>" <?=$searchBySlug== $slugs['slug'] ? 'selected' : ''?>><?=$slugs['slug']?></option>
                            <?php }}?>
                        </select>
                    </div>
                </div>
                <div id="qa-container">
                    <div class="row mb-3 qa-pair">
                        <div class="col-md-5">
                            <input type="text" placeholder="Enter Question" class="form-control question" name="question[]" />
                        </div>
                        <div class="col-md-6">
                            <input type="text" placeholder="Enter Answer" class="form-control answer" name="answer[]" />
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-success add-btn" onclick="addPair()">+</button>
                        </div>
                    </div>
                </div>
                <div class="row text-right mb-3" style="justify-content:right;">
                    <button type="submit" class="btn btn-primary btn-lg" id="addFaqs">Submit</button>
                </div>
            </form>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<?php include "footer.php"?>
<script>
    function addPair() {
        const container = document.getElementById('qa-container');
        const newPair = document.createElement('div');
        newPair.classList.add('row', 'mb-3', 'qa-pair');
        newPair.innerHTML = `
            <div class="col-md-5">
                <input type="text" placeholder="Enter Question" class="form-control question" name="question[]" />
            </div>
            <div class="col-md-6">
                <input type="text" placeholder="Enter Answer" class="form-control answer" name="answer[]" />
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger remove-btn" onclick="removePair(this)">-</button>
            </div>
        `;
        container.appendChild(newPair);
    }
    function removePair(button) {
        const pair = button.closest('.qa-pair'); 
        pair.remove(); 
    }
</script>
