crm_php/.hta_slug/admin/business-verticals.php

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

    if($_SERVER['REQUEST_METHOD'] == "POST" && $_POST['bv'] && $_POST['save_lead'] ){
        try {
            $lowercase_bv = str_replace(' ', '_', strtolower($_POST['bv']));
            $conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $stmt = $conn->prepare("INSERT INTO business_verticals (bv) VALUES (:bv)");
            $stmt->bindParam(':bv', $lowercase_bv);
            $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 Business Verticals</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 Business Verticals</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="bv">Business Verticals Name:</label>
                <input type="text" name="bv" id="bv" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
            </div>
            <div>
                <input type="submit" name="save_lead" 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">Business Verticals</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 business_verticals ORDER BY time 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['bv']; ?></td>
                <td class="border-y-2 p-2">
                    <div class="flex flex-row justify-center">
                        <a href="/admin/edit-business-verticals/?id=<?php echo $row['id']; ?>">Edit</a> &nbsp; | &nbsp;
                        <a href="/admin/delete-business-verticals/?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>