<?php
function find_wordpress_root($start_path) {
    while (!file_exists($start_path . '/wp-load.php')) {
        $start_path = dirname($start_path);
        if ($start_path === '/') {
            return false;
        }
    }
    return $start_path;
}
$wordpress_root = find_wordpress_root(__DIR__);
require_once $wordpress_root. '/wp-load.php';
global $wpdb;
$getIntro=$wpdb->get_row('SELECT * FROM ' . $wpdb->prefix . 'hd_webapp_intro where status=1' );
if(!empty($getIntro)){

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="includes/styles/owl.carousel.min.css">
    <link rel="stylesheet" href="includes/styles/owl.theme.default.min.css">
    <style>
        @font-face {
            font-family: 'sahel';
            src: url('includes/styles/fonts/sahel.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        <?php
        if(isset($_GET["mobile"])){
        ?>
        body {
            font-family: 'sahel' !important;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; /* Background color for desktop */
            height: 100vh; /* Ensure the body takes the full height */
        }
        .mobile-view-container {
            width: 414px; /* Typical mobile width */
            height: 896px; /* Typical mobile height */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a slight shadow for a mobile-like effect */
            border-radius: 10px; /* Rounded corners to mimic a device */
            overflow: hidden; /* Ensure content doesn't overflow the container */
            background-color: #ffffff; /* Background color for the "mobile" */
        }
        .hd-webappgenerator-slider {
            height: 100%;
            position: relative;
            direction: ltr;
            text-align: center;
        }
    <?php } else{
            ?>
        .hd-webappgenerator-slider {
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            direction: ltr;
            text-align: center;
        }
        <?php
          }?>

        .hd-webappgenerator-slider .owl-dots {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .owl-theme .owl-dots .owl-dot span {
            width: 10px;
            height: 10px;
            margin: 5px 7px;
            background: #00000054;
            display: block;
            -webkit-backface-visibility: visible;
            transition: opacity .2s ease;
            border-radius: 30px;
            filter: invert(1);
        }

        .owl-theme .owl-dots .owl-dot {
            display: inline-block;
            zoom: 1;
            filter: brightness(0.5);
        }
        <?php
        $intro=json_decode($getIntro->apps_bar);
        $last_key = array_key_last($intro);
        foreach ($intro as $key=>$item) {
            ?>
            .hd-webappgenerator-slider .owl-item:nth-child(<?=$key+1?>) {
            background-color: <?=$item->background_color;?>;
        }
        <?php
        }
        ?>


        .hd-webappgenerator-slider img {
            width: 80% !important;
            margin: 0 auto;
            display: block;
        }

        .hd-webappgenerator-slider .hd-webapp-info {
            padding: 20px;
            font-size: 16px;
            margin: 0;
        }

        .hd-webappgenerator-slider .hd-webapp-title {
            font-size: 20px;
            margin: 0;
            font-weight: bold;
        }

        .hd-webappgenerator-slider .owl-stage-outer {
            height: 100%;
            position: relative;
        }

        .hd-webappgenerator-slider .owl-stage {
            height: 100%;
        }

        .hd-webappgenerator-slider .owl-item {
            width: 100%;
            height: 100%;
        }
        .hd-webappgenerator-slider .hd-webapp-item {
            height: 100%;
            display: flex;
            flex-direction: column;
            /*justify-content: space-evenly;*/
            justify-content: center;
        }
        button.hd-webapp-last-button {
            padding: 10px;
            min-width: 220px;
            border-radius: 10px;
            border: 0;
            background-color: white;
            outline: 0;
        }
        .owl-dots{
            z-index: 80;
            position: absolute;
            opacity: 1;
        }
        /*.board {*/
        /*    backdrop-filter: blur(10px);*/
        /*    opacity: 0.2;*/
        /*    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45), rgb(255, 255, 255));*/
        /*    position: absolute;*/
        /*    bottom: 0;*/
        /*    left: 0;*/
        /*    right: 0;*/
        /*    width: 100%;*/
        /*    height: 50px;*/
        /*    z-index: 100;*/
        /*    filter: invert(1);*/
        /*}*/
        .next_btn{
            position: absolute;
            z-index: 10;
            width: 50px;
            float: left;
                bottom: 5px;
                left: 5px;
                right: 0;
            filter: invert(1);
        }
        .next_btn svg{
            filter: invert(1);
            width: 50px;
            height: 25px;
            padding-top: 10px;
        }
    </style>
    <title></title>
</head>
<body>
<?php
if(isset($_GET["mobile"]))
    echo '<div class="mobile-view-container">';
?>
<div class="hd-webappgenerator-slider owl-carousel owl-theme ">
    <?php
    $intro=json_decode($getIntro->apps_bar);
    $last_key = array_key_last($intro);
    foreach ($intro as $key=>$item) {
        ?>
        <div class="hd-webapp-item">
            <img src="<?=$item->image;?>">
            <div>
                <p class="hd-webapp-title" style=" font-family: 'sahel' !important;color: <?=$item->title_color;?>"><?=$item->title;?></p>
                <p class="hd-webapp-info" style=" font-family: 'sahel' !important;color: <?=$item->description_color;?>"><?=$item->description;?></p>
                <?php
                if ($key == $last_key) {
                    ?>
                    <button class="hd-webapp-last-button" type="button" style=" font-family: 'sahel' !important;color:<?=$getIntro->last_btn_txt_color;?>; background-color: <?=$getIntro->last_btn_color;?>" onclick="showToastFromButton()"><?=$getIntro->last_btn_txt?></button>
                    <?php
                }
                ?>

            </div>
        </div>
        <?php
        }
        ?>

</div>

<div class="board">
    <?php
    if(count($intro)>1){
    ?>
    <div class="next_btn">
        <svg fill="#000000" version="1.1" id="Capa_1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 0 55.753 55.753"
             xml:space="preserve">
        <g>
            <path d="M12.745,23.915c0.283-0.282,0.59-0.52,0.913-0.727L35.266,1.581
          c2.108-2.107,5.528-2.108,7.637,0.001c2.109,2.108,2.109,5.527,0,7.637L24.294,27.828
          l18.705,18.706c2.109,2.108,2.109,5.526,0,7.637c-1.055,1.056-2.438,1.582-3.818,1.582
          s-2.764-0.526-3.818-1.582L13.658,32.464c-0.323-0.207-0.632-0.445-0.913-0.727
          c-1.078-1.078-1.598-2.498-1.572-3.911C11.147,26.413,11.667,24.994,12.745,23.915z"/>
        </g>
      </svg>
    </div>
        <?php } ?>
</div>
<?php

if(isset($_GET["mobile"]))
    echo '</div>';
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="includes/styles/owl.carousel.min.js"></script>
<script>
    $(document).ready(function(){
        var owl = $('.hd-webappgenerator-slider');
        owl.owlCarousel({
            rtl:true,
            loop:false,
            margin:0,
            nav:false,
            dots:true,
            items : 1
        })
        owl.on('changed.owl.carousel', function(event) {
            var currentIndex = event.item.index;
            var totalItems = event.item.count;
            if (currentIndex === totalItems - 1) {
                $('.next_btn').hide();
            } else {
                $('.next_btn').show();
            }
        });
        $(document).on('click', '.next_btn', function() {
            $('.owl-carousel').trigger('next.owl.carousel');
        });
    })

</script>
<script>
    function showToastFromButton() {
        // Call the showToast method on Android interface
        if (typeof Android !== 'undefined' && Android.showToast) {
            Android.showToast("Message from HTML button");
        } else {
            alert("Android interface not available");
        }
    }
</script>
</body>
</html>
<?php
}
?>