crm_php/.hta_slug/admin/add-forms.php

<?php
    require_once('/var/www/html/.hta_config/crm_config.php');
    require_once('/var/www/html/.htac_header.php');
    require_once('/var/www/html/.htac_nav.php');

    if($_SERVER['REQUEST_METHOD'] == "POST" && $_POST['formname'] && $_POST['bverticals'] && $_POST['save_forms']){
        try {
            $lowercase_bv = str_replace(' ', '_', strtolower($_POST['formname']));
            $conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $stmt = $conn->prepare("INSERT INTO addforms (formname, bverticals) VALUES (:formname, :bverticals)");
            $stmt->bindParam(':formname', $lowercase_bv);
            $stmt->bindParam(':bverticals', $_POST['bverticals']);
            $stmt->execute();
            echo "Record added successfully";
        } catch(PDOException $e) {
            echo "Error: " . $e->getMessage();
        }
    }
?>
    <div>
        <button onclick="toggleDisplay();" style="background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%); text-align: center; padding: 10px 20px 10px 20px; color: #fff; border-radius: 6px; float: right; margin-top: 100px; margin-bottom: 30px;">Add New Forms</button>
    </div>
    <div class="add-bv-form" id="add-bv-form">
        <div class="flex flex-row place-content-between" style="border-bottom: 2px solid #464E5F; border-style: dashed;">
            <h3 style="font-size: 25px; font-weight: bold;">Add New Forms</h3>
            <p onclick="toggleDisplay();" class="rounded-lg px-1.5 text-[#464E5F] text-[25px] cursor-pointer" style="border: 2px solid #464E5F; border-radius: 50%;">&#10008;</p>
        </div>
        <form method="post">
            <div class="flex flex-col mt-4">
                <label for="formname">Form Name:</label>
                <input type="text" name="formname" id="formname" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
            </div>
            <div class="flex flex-col mr-4">
                    <label for="bverticals">Select Business Verticals:</label>
                    <select class="" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" type="text" name="bverticals" id="bverticals" >
                    <option value="">-Select-</option>
                    <?php
                            $conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
                            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                            $stmt = $conn->prepare("SELECT * FROM business_verticals");
                            $stmt->execute();
                            $users_rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
                            $row_count = count($users_rows);
                            if($row_count > 0){
                                foreach($users_rows as $users_data){
                                    echo '<option value="'.$users_data['bv'].'">'.$users_data['bv'].'</option>';
                                }
                            } else{
                                echo '<p>No users Found</p>';
                            }
                        ?>
                    </select>
                </div>
            <div>
                <input type="submit" name="save_forms" id="submit" value="Save" style="color:#fff; border-radius: 6px; background: linear-gradient(90deg, rgba(111, 107, 255, 0.91) 0%, rgba(68, 55, 128, 0.91) 100%); text-align: center; margin-top: 10px; padding: 10px 20px 10px 20px;"  />
            </div>
        </form>
    </div>
    <table class="bg-[#fff] text-[#3F4254] rounded-lg font-bold" style="">
        <thead>
            <tr>
                <th class="text-center border-b-2 p-3">Serial</th>
                <th class="text-center border-b-2 p-3">Form Name</th>
                <th class="text-center border-b-2 p-3">Business Verticals</th>
                <th class="text-center border-b-2 p-3">Time</th>
                <th class="text-center border-b-2 p-3">Action</th>
            </tr>
        </thead>
        <tbody>
            <?php
                try {
                    $bv_counter = 1;
                    $conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
                    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                    $stmt = $conn->prepare("SELECT * FROM addforms ORDER BY created_at DESC");
                    $stmt->execute();
                    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
                    foreach($rows as $row){
            ?>          
            <tr>
                <td class="border-y-2 p-2 text-center"><?php echo $bv_counter; ?></td>
                <td class="border-y-2 p-2 "><?php echo $row['formname']; ?></td>
                <td class="border-y-2 p-2 "><?php echo $row['bverticals']; ?></td>
                <td class="border-y-2 p-2 text-center"><?php echo $row['time']; ?></td>
                <td class="border-y-2 p-2">
                    <div class="flex flex-row justify-center">
                        <a href="/admin/edit-forms/?id=<?php echo $row['id']; ?>">Edit</a> &nbsp; | &nbsp;
                        <a href="/admin/delete-forms/?id=<?php echo $row['id']; ?>">Delete</a>
                    </div>
                </td>
            </tr>
            <?php $bv_counter++; }
                    $num_rows = $stmt->rowCount();        
                    } catch (PDOException $e) {
                        echo "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
                    }
            ?>
        </tbody>
    </table>

<script>
    function toggleDisplay() {
        var element = document.getElementById('add-bv-form');
        if (element.style.display === 'block') {
            element.style.display = 'none';
        } else {
            element.style.display = 'block';
            element.classList.add('slide-in-animation'); // Add class to trigger animation
        }
    }

    // Event listener for the Esc key
    document.addEventListener('keydown', function(event) {
        if (event.keyCode === 27) {
            var modal = document.getElementById('add-bv-form');
            if (modal.style.display === 'block') {
                modal.style.display = 'none';
            }
        }
    });
</script>

<style>
    .add-bv-form {
        background-color: #F8F8F8;
        display: none;
        position: fixed;
        top: 0%;
        right: 0%;
        transform: translateX(100%);
        /* transform: translate(-0%, -50%); */
        width: 100%;
        max-width: 500px;
        box-shadow: 0px 0px 20px 0px #443780;
        border-radius: 2px;
        z-index: 100;
        height: 100%;
        padding: 10px 20px 10px 20px;
        animation: slideInRight 0.5s forwards; /* Animation to slide in */
        /* overflow-x: auto; */
    }
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0%);
        }
    }
</style>