<?php include('include/headscriptnologin.php');
?>
<?php include('include/generalsettings.php'); ?>
<?php
// Connessione al database
$conn = new mysqli($servername, $username, $password, $database);

// Verifica la connessione
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Query per ottenere le categorie
$querycat = "SELECT idclasscategory, namecategory FROM classcategory ORDER BY namecategory";
$resultcat = $conn->query($querycat);

$categoriescat = array();
if ($resultcat->num_rows > 0) {
    while ($row = $resultcat->fetch_assoc()) {
        $categoriescat[] = $row; // Storing the entire row
    }
}

//print_r($categoriescat); // Uncomment this for debugging
$conn->close();
?>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="assets/images/favicon.png">
    <?php include('include/seo.php'); ?>
    <?php include('stylesheet.php'); ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>

<body>


    <!-- start navbar -->
    <?php include('include/navbar.php'); ?>
    <!-- end /. navbar -->
    <!-- start hero header (map) -->
    <div class="align-items-end d-flex hero-header-map position-relative">
        <!-- start map -->
        <div class="h-100 position-absolute start-0 top-0 w-100">
            <div id="mapCanvasTwo" class="h-100 w-100"></div>
        </div>
        <!-- end /. map -->
        <div class="container position-relative z-1">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!-- start search content -->
                    <div class="border-0 card d-flex flex-md-row position-relative search-wrapper mb-5 shadow">
                        <div class="align-items-center d-flex search-field w-100">
                            <div class="svg-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                </svg>
                            </div>
                            <select class="form-select search-select-field" id="category-select">
                                <option value="ALL">Tutte le categorie</option>
                                <?php foreach ($categoriescat as $categorycat): ?>
                                    <option value="<?= htmlspecialchars($categorycat['idclasscategory']); ?>"><?= htmlspecialchars($categorycat['namecategory']); ?></option>
                                <?php endforeach; ?>
                            </select>

                        </div>

                        <div class="vertical-divider"></div>
                        <div class="align-items-center d-flex search-field w-100">
                            <div class="svg-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
                                    <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
                                    <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                                </svg>
                            </div>
                            <input type="text" class="form-control search-select-field" id="location-input" placeholder="<?php echo $enterlocation; ?>">
                        </div>
                        <button type="button" class="btn btn-primary rounded-5 mt-3 mt-md-0" onclick="searchLocation()">Search</button>
                    </div>

                    <!-- end /. search content -->
                </div>
            </div>
        </div>
    </div>
    <!-- end /. hero header (map) -->
    <!-- start categories section -->
    <div class="py-5 bg-light rounded-4 mx-3 mt-3">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary"><?php echo $categories; ?></div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize"><?php echo $globalcategories; ?></h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16"><?php echo $discovercategories; ?> <span class="text-primary fw-semibold"><?php echo $whatlookingfor; ?></span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <?php
            $conn = new mysqli($servername, $username, $password, $database);
            // Connessione al database (supponendo che $conn sia la connessione attiva)
            $sql = "SELECT namecategory, picturecategory FROM classcategory";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo '<div class="row g-3 g-lg-4">';

                // Loop sui risultati della query per generare le card dinamicamente
                while ($row = $result->fetch_assoc()) {
                    echo '
                    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex">
                        <div class="border-0 card card-hover company-card flex-fill rounded-3 w-100">
                            <!-- start card link -->
                            <a href="listings-map-grid-1.html" class="stretched-link"></a>
                            <!-- end /. card link -->
                            <div class="card-body d-flex flex-column">
                                <div class="text-end mb-4 text-primary">
                                    <!-- Start Image -->
                                    <i class="fa-solid fa-folder-open fs-2"></i>
                                    <!-- /. End Image -->
                                </div>
                                <div class="mt-auto">
                                    <!-- Start Title -->
                                    <h5 class="mb-2">' . $row["namecategory"] . '</h5>
                                    <!-- End Title -->
                                    <!-- start link -->
                                    <div class="small mt-2 d-flex align-items-center gap-2 fw-medium text-primary">
                                        <span>' . $explorenow . '</span>
                                        <i class="fa-solid fa-arrow-up-right-from-square fs-12"></i>
                                    </div>
                                    <!-- end /. link -->
                                </div>
                            </div>
                        </div>
                    </div>';
                }

                echo '</div>';
            } else {
                echo "Nessuna categoria trovata.";
            }

            // Chiudi la connessione
            $conn->close();
            ?>
        </div>
    </div>
    <!-- end /. categories section -->
    <!-- start listings carousel -->
    <div class="py-5 position-relative overflow-hidden border-top">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary"><?php echo $activitieslocation; ?></div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize"><?php echo $neighbourschool; ?></h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16"><?php echo $discoveractivities; ?> <span class="text-primary fw-semibold"><?php echo $findbestactivities; ?></span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="listings-carousel owl-carousel owl-theme owl-nav-bottom">
                <!-- start listing card -->
                <div class="card rounded-3 w-100 flex-fill overflow-hidden">
                    <!-- start card link -->
                    <a href="listings-map.html" class="stretched-link"></a>
                    <!-- end /. card link -->
                    <!-- start card image wrap -->
                    <div class="card-img-wrap card-image-hover overflow-hidden">
                        <img src="assets/images/place/01.jpg" alt="" class="img-fluid">
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">10% OFF</div>
                        <div class="bg-success card-badge d-inline-block text-white position-absolute">Principiante</div>
                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
                                </svg>
                            </a>
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Quick View">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <!-- end /. card image wrap -->
                    <div class="d-flex flex-column h-100 position-relative p-4">
                        <div class="align-items-center bg-primary cat-icon d-flex justify-content-center position-absolute rounded-circle text-white"><i class="fa-solid fa-shop"></i></div>
                        <div class="align-items-center d-flex flex-wrap gap-1 text-primary  card-start">
                            <!-- start ratings -->
                            <i class="fa-solid fa-star"></i>
                            <!-- end /. ratings -->
                            <!-- start ratings counter text -->
                            <span class="fw-medium text-primary"><span class="fs-5 fw-semibold me-1">(4.5)</span>2,391 reviews</span>
                            <!-- end /. ratings counter text -->
                        </div>
                        <!-- start card title -->
                        <h4 class="fs-5 fw-semibold mb-0">Green Mart Apartment</h4>
                        <!-- end /. card title -->
                    </div>
                </div>
                <!-- end /. listing card -->
                <!-- start listing card -->
                <div class="card rounded-3 w-100 flex-fill overflow-hidden">
                    <!-- start card link -->
                    <a href="listings-map.html" class="stretched-link"></a>
                    <!-- end /. card link -->
                    <!-- start card image wrap -->
                    <div class="card-img-wrap card-image-hover overflow-hidden">
                        <img src="assets/images/place/02.jpg" alt="" class="img-fluid">
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">10% OFF</div>
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">$100 off $399: eblwc</div>
                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
                                </svg>
                            </a>
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Quick View">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <!-- end /. card image wrap -->
                    <div class="d-flex flex-column h-100 position-relative p-4">
                        <div class="align-items-center bg-primary cat-icon d-flex justify-content-center position-absolute rounded-circle text-white"><i class="fa-solid fa-utensils"></i></div>
                        <div class="align-items-center d-flex flex-wrap gap-1 text-primary  card-start">
                            <!-- start ratings -->
                            <i class="fa-solid fa-star"></i>
                            <!-- end /. ratings -->
                            <!-- start ratings counter text -->
                            <span class="fw-medium text-primary"><span class="fs-5 fw-semibold me-1">(4.5)</span>2,391 reviews</span>
                            <!-- end /. ratings counter text -->
                        </div>
                        <!-- start card title -->
                        <h4 class="fs-5 fw-semibold mb-0">Chuijhal Hotel And Restaurant</h4>
                        <!-- end /. card title -->
                    </div>
                </div>
                <!-- end /. listing card -->
                <!-- start listing card -->
                <div class="card rounded-3 w-100 flex-fill overflow-hidden">
                    <!-- start card link -->
                    <a href="listings-map.html" class="stretched-link"></a>
                    <!-- end /. card link -->
                    <!-- start card image wrap -->
                    <div class="card-img-wrap card-image-hover overflow-hidden">
                        <img src="assets/images/place/03.jpg" alt="" class="img-fluid">
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">10% OFF</div>
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">$100 off $399: eblwc</div>
                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
                                </svg>
                            </a>
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Quick View">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <!-- end /. card image wrap -->
                    <div class="d-flex flex-column h-100 position-relative p-4">
                        <div class="align-items-center bg-primary cat-icon d-flex justify-content-center position-absolute rounded-circle text-white"><i class="fa-solid fa-ethernet"></i></div>
                        <div class="align-items-center d-flex flex-wrap gap-1 text-primary card-start">
                            <!-- start ratings -->
                            <i class="fa-solid fa-star"></i>
                            <!-- end /. ratings -->
                            <!-- start ratings counter text -->
                            <span class="fw-medium text-primary"><span class="fs-5 fw-semibold me-1">(4.5)</span>2,391 reviews</span>
                            <!-- end /. ratings counter text -->
                        </div>
                        <!-- start card title -->
                        <h4 class="fs-5 fw-semibold mb-0">The Barber's Lounge</h4>
                        <!-- end /. card title -->
                    </div>
                </div>
                <!-- end /. listing card -->
                <!-- start listing card -->
                <div class="card rounded-3 w-100 flex-fill overflow-hidden">
                    <!-- start card link -->
                    <a href="listings-map.html" class="stretched-link"></a>
                    <!-- end /. card link -->
                    <!-- start card image wrap -->
                    <div class="card-img-wrap card-image-hover overflow-hidden">
                        <img src="assets/images/place/04.jpg" alt="" class="img-fluid">
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">10% OFF</div>
                        <div class="bg-primary card-badge d-inline-block text-white position-absolute">$100 off $399: eblwc</div>
                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
                                </svg>
                            </a>
                            <a href="" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Quick View">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <!-- end /. card image wrap -->
                    <div class="d-flex flex-column h-100 position-relative p-4">
                        <div class="align-items-center bg-primary cat-icon d-flex justify-content-center position-absolute rounded-circle text-white"><i class="fa-solid fa-gamepad"></i></div>
                        <div class="align-items-center d-flex flex-wrap gap-1 text-primary  card-start">
                            <!-- start ratings -->
                            <i class="fa-solid fa-star"></i>
                            <!-- end /. ratings -->
                            <!-- start ratings counter text -->
                            <span class="fw-medium text-primary"><span class="fs-5 fw-semibold me-1">(4.5)</span>2,391 reviews</span>
                            <!-- end /. ratings counter text -->
                        </div>
                        <!-- start card title -->
                        <h4 class="fs-5 fw-semibold mb-0">Gaming Expo Spectacle</h4>
                        <!-- end /. card title -->
                    </div>
                </div>
                <!-- end /. listing card -->
            </div>
        </div>
    </div>
    <!-- end /. listings carousel -->
    <!-- start about section -->
    <div class="bg-primary bg-size-contain home-about js-bg-image js-bg-image-lines bg-light mx-3 rounded-4 position-relative pt-5" data-image-src="assets/images/lines.svg">
        <div class="container pt-4">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">About us</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Explore over 2.5 million people travel around the world.</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="column-text-box left">
                        <p><span class="float-start important-text mb-2 me-2 position-relative text-primary fs-50"><strong>M</strong></span>any desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over.</p>
                        <p> It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                        <blockquote class="about-blockquote display-6 font-caveat fst-italic my-3"> It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</blockquote>
                        <p>We hope you enjoy it using it as much as we did building it. Cheers!</p>
                        <img src="assets/images/png-img/signature.png" alt="" class="signature mt-4">
                    </div>
                </div>
                <div class="col-md-6 ps-xxl-5">
                    <!-- start about image masonry -->
                    <div class="ps-xl-4 position-relative">
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="about-image-wrap mb-3 rounded-4">
                                    <img src="assets/images/about/01.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-one rounded-3">
                                </div>
                                <div class="about-image-wrap rounded-4">
                                    <img src="assets/images/about/02.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-two rounded-3">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="about-image-wrap mb-3 rounded-4">
                                    <img src="assets/images/about/03.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-three rounded-3">
                                </div>
                                <div class="about-image-wrap rounded-4">
                                    <img src="assets/images/about/04.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-four rounded-3">
                                </div>
                            </div>
                        </div>
                        <img src="assets/images/png-img/about-shape-1.png" alt="About Shape" class="banner-shape-one position-absolute">
                        <img src="assets/images/png-img/about-shape-2.png" alt="About Shape" class="banner-shape-two position-absolute">
                    </div>
                    <!-- end /. about image masonry -->
                </div>
            </div>
        </div>
    </div>
    <!-- end /. about section -->
    <!-- start faq section -->
    <div class="pb-5">
        <div class="container pb-4">
            <div class="home-video mx-3 mx-sm-0">
                <!-- Start About Video Section -->
                <div class="about-video position-relative rounded-4 overflow-hidden">
                    <!-- Image Parallax -->
                    <img src="assets/images/about.jpg" alt="" class="about-img js-image-parallax">
                    <a class="align-items-center bg-blur d-flex justify-content-center popup-youtube position-absolute rounded-circle start-50 text-white top-50 translate-middle video-icon z-1" href="https://www.youtube.com/watch?v=0O2aH4XLbto">
                        <i class="fa-solid fa-play fs-20"></i>
                    </a>
                </div>
                <!-- /. End About Video Section -->
            </div>
            <div class="row mt-5">
                <div class="col-md-4 sidebar">
                    <!-- start section header -->
                    <div class="section-header mb-5 mb-md-0 text-center text-md-start" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Events</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Events Near You</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
                <div class="col-md-8 ps-xxl-5 content">
                    <!-- start event card -->
                    <div class="card card-hover mb-4">
                        <div class="card-body">
                            <div class="g-4 row">
                                <div class="col-lg-auto d-flex">
                                    <div class="d-none d-lg-flex">
                                        <div class="bg-primary rounded-circle shape-rounded"></div>
                                        <div class="shape-polygon bg-primary"></div>
                                    </div>
                                    <div class="event-date-wrap">
                                        <div class="font-caveat border d-flex date-icon flex-column justify-content-center mb-3 position-relative rounded-2 text-center text-primary">
                                            <span class="event-calendar-date fs-1 text-primary fw-semibold">27</span>
                                            <div class="event-month">Oct</div>
                                        </div>
                                        <div class="event-time fw-semibold mb-1 fs-15">9.30 - 10.30 AM</div>
                                        <div class="text-uppercase fs-12">Best Portfolio</div>
                                    </div>
                                </div>
                                <div class="col-lg pe-xxl-5">
                                    <h3 class="event-title"><a href="#" class="stretched-link">Digital Awards</a></h3>
                                    <div class="underline position-relative">
                                        <span class="d-block position-absolute start-0 top-50 translate-middle-y w-50"></span>
                                    </div>
                                    <p class="mb-0">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined</p>
                                </div>
                                <div class="col-lg-auto align-self-center">
                                    <div class="btn-icon-md bg-primary d-flex align-items-center justify-content-center text-white rounded-circle">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end /. event card -->
                    <!-- start event card -->
                    <div class="card card-hover mb-4">
                        <div class="card-body">
                            <div class="g-4 row">
                                <div class="col-lg-auto d-flex">
                                    <div class="d-none d-lg-flex">
                                        <div class="bg-primary rounded-circle shape-rounded"></div>
                                        <div class="shape-polygon bg-primary"></div>
                                    </div>
                                    <div class="event-date-wrap">
                                        <div class="font-caveat border d-flex date-icon flex-column justify-content-center mb-3 position-relative rounded-2 text-center text-primary">
                                            <span class="event-calendar-date fs-1 text-primary fw-semibold">19</span>
                                            <div class="event-month">Nov</div>
                                        </div>
                                        <div class="event-time fw-semibold mb-1 fs-15">9.30 - 10.30 AM</div>
                                        <div class="text-uppercase fs-12">Best Portfolio</div>
                                    </div>
                                </div>
                                <div class="col-lg pe-xxl-5">
                                    <h3 class="event-title"><a href="#" class="stretched-link">Aid Fourm Awards</a></h3>
                                    <div class="underline position-relative">
                                        <span class="d-block position-absolute start-0 top-50 translate-middle-y w-50"></span>
                                    </div>
                                    <p class="mb-0">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined</p>
                                </div>
                                <div class="col-lg-auto align-self-center">
                                    <div class="btn-icon-md bg-primary d-flex align-items-center justify-content-center text-white rounded-circle">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end /. event card -->
                    <!-- start event card -->
                    <div class="card card-hover mb-4">
                        <div class="card-body">
                            <div class="g-4 row">
                                <div class="col-lg-auto d-flex">
                                    <div class="d-none d-lg-flex">
                                        <div class="bg-primary rounded-circle shape-rounded"></div>
                                        <div class="shape-polygon bg-primary"></div>
                                    </div>
                                    <div class="event-date-wrap">
                                        <div class="font-caveat border d-flex date-icon flex-column justify-content-center mb-3 position-relative rounded-2 text-center text-primary">
                                            <span class="event-calendar-date fs-1 text-primary fw-semibold">13</span>
                                            <div class="event-month">Dec</div>
                                        </div>
                                        <div class="event-time fw-semibold mb-1 fs-15">9.30 - 10.30 AM</div>
                                        <div class="text-uppercase fs-12">Best Portfolio</div>
                                    </div>
                                </div>
                                <div class="col-lg pe-xxl-5">
                                    <h3 class="event-title"><a href="#" class="stretched-link">Uia Gold Medal</a></h3>
                                    <div class="underline position-relative">
                                        <span class="d-block position-absolute start-0 top-50 translate-middle-y w-50"></span>
                                    </div>
                                    <p class="mb-0">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined</p>
                                </div>
                                <div class="col-lg-auto align-self-center">
                                    <div class="btn-icon-md bg-primary d-flex align-items-center justify-content-center text-white rounded-circle">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end /. event card -->
                    <!-- start event card -->
                    <div class="card card-hover">
                        <div class="card-body">
                            <div class="g-4 row">
                                <div class="col-lg-auto d-flex">
                                    <div class="d-none d-lg-flex">
                                        <div class="bg-primary rounded-circle shape-rounded"></div>
                                        <div class="shape-polygon bg-primary"></div>
                                    </div>
                                    <div class="event-date-wrap">
                                        <div class="font-caveat border d-flex date-icon flex-column justify-content-center mb-3 position-relative rounded-2 text-center text-primary">
                                            <span class="event-calendar-date fs-1 text-primary fw-semibold">12</span>
                                            <div class="event-month">Jan</div>
                                        </div>
                                        <div class="event-time fw-semibold mb-1 fs-15">9.30 - 10.30 AM</div>
                                        <div class="text-uppercase fs-12">Digital Awards</div>
                                    </div>
                                </div>
                                <div class="col-lg pe-xxl-5">
                                    <h3 class="event-title"><a href="#" class="stretched-link">Uia Gold Medal</a></h3>
                                    <div class="underline position-relative">
                                        <span class="d-block position-absolute start-0 top-50 translate-middle-y w-50"></span>
                                    </div>
                                    <p class="mb-0">All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined</p>
                                </div>
                                <div class="col-lg-auto align-self-center">
                                    <div class="btn-icon-md bg-primary d-flex align-items-center justify-content-center text-white rounded-circle">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end /. event card -->
                </div>
            </div>
        </div>
    </div>
    <!-- end /. faq section -->
    <!-- start blog section -->
    <div class="py-5 position-relative overflow-hidden">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Our Latest Articles</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Discover Our Latest News And Articles</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="blog-carousel owl-carousel owl-theme owl-nav-bottom">
                <!-- start article -->
                <article class="card h-100 overflow-hidden">
                    <div class="position-relative overflow-hidden">
                        <a href="blog-details.html" class="h-100 position-absolute start-0 top-0 w-100 z-1" aria-label="Read more"></a>
                        <a href="#" class="align-items-center bg-white btn-icon d-flex end-0 justify-content-center me-3 mt-3 position-absolute rounded-circle text-primary top-0 z-3" data-bs-toggle="tooltip" data-bs-placement="left" aria-label="Read later" data-bs-original-title="Read later">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
                                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
                            </svg>
                        </a>
                        <img src="assets/images/blog/01-lg.jpg" class="card-img-top image-zoom-hover" alt="Image">
                    </div>
                    <div class="card-body">
                        <div class="hstack gap-3 mb-3">
                            <span class="fs-sm small text-muted">9 hours ago</span>
                            <span class="opacity-25">|</span>
                            <a class="badge border fw-semibold text-primary bg-white" href="#">Events</a>
                        </div>
                        <h3 class="h5 fw-semibold mb-0 post-title overflow-hidden">
                            <a href="blog-details.html">Etiam Dapibus Metus Aliquam Orci Venenatis, Suscipit Efficitur.</a>
                        </h3>
                    </div>
                    <div class="card-footer py-3">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/avatar/01.jpg" class="rounded-circle" width="48" height="48" alt="Avatar">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <a href="#" class="d-block"><span class="fst-italic text-muted">By</span> <span class="fw-medium">Ethan Blackwood</span></a>
                                <small class="text-muted">Engineer</small>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- end /. article -->
                <!-- start article -->
                <article class="card h-100 overflow-hidden">
                    <div class="position-relative overflow-hidden">
                        <a href="blog-details.html" class="h-100 position-absolute start-0 top-0 w-100 z-1" aria-label="Read more"></a>
                        <a href="#" class="align-items-center bg-white btn-icon d-flex end-0 justify-content-center me-3 mt-3 position-absolute rounded-circle text-primary top-0 z-3" data-bs-toggle="tooltip" data-bs-placement="left" aria-label="Read later" data-bs-original-title="Read later">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
                                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
                            </svg>
                        </a>
                        <img src="assets/images/blog/02-lg.jpg" class="image-zoom-hover" alt="Image">
                    </div>
                    <div class="card-body">
                        <div class="hstack gap-3 mb-3">
                            <span class="fs-sm small text-muted">August 30, 2023</span>
                            <span class="opacity-25">|</span>
                            <a class="badge border fw-semibold text-primary bg-white" href="#">Events</a>
                        </div>
                        <h3 class="h5 fw-semibold mb-0 post-title overflow-hidden">
                            <a href="blog-details.html">Praesent sit amet augue tincidunt, venenatis risus ut.</a>
                        </h3>
                    </div>
                    <div class="card-footer py-3">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/avatar/02.jpg" class="rounded-circle" width="48" height="48" alt="Avatar">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <a href="#" class="d-block"><span class="fst-italic text-muted">By</span> <span class="fw-medium">Alexander Kaminski</span></a>
                                <small class="text-muted">Data analysis</small>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- end /. article -->
                <!-- start article -->
                <article class="card h-100 overflow-hidden">
                    <div class="position-relative overflow-hidden">
                        <a href="blog-details.html" class="h-100 position-absolute start-0 top-0 w-100 z-1" aria-label="Read more"></a>
                        <a href="#" class="align-items-center bg-white btn-icon d-flex end-0 justify-content-center me-3 mt-3 position-absolute rounded-circle text-primary top-0 z-3" data-bs-toggle="tooltip" data-bs-placement="left" aria-label="Read later" data-bs-original-title="Read later">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
                                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
                            </svg>
                        </a>
                        <img src="assets/images/blog/03-lg.jpg" class="image-zoom-hover" alt="Image">
                    </div>
                    <div class="card-body">
                        <div class="hstack gap-3 mb-3">
                            <span class="fs-sm small text-muted">Jun 28, 2023</span>
                            <span class="opacity-25">|</span>
                            <a class="badge border fw-semibold text-primary bg-white" href="#">Events</a>
                        </div>
                        <h3 class="h5 fw-semibold mb-0 post-title overflow-hidden">
                            <a href="blog-details.html">Duis volutpat ipsum eget pretium posuere.</a>
                        </h3>
                    </div>
                    <div class="card-footer py-3">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/avatar/03.jpg" class="rounded-circle" width="48" height="48" alt="Avatar">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <a href="#" class="d-block"><span class="fst-italic text-muted">By</span> <span class="fw-medium">Edwin Martins</span></a>
                                <small class="text-muted">Security Engineer</small>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- end /. article -->
                <!-- start article -->
                <article class="card h-100 overflow-hidden">
                    <div class="position-relative overflow-hidden">
                        <a href="blog-details.html" class="h-100 position-absolute start-0 top-0 w-100 z-1" aria-label="Read more"></a>
                        <a href="#" class="align-items-center bg-white btn-icon d-flex end-0 justify-content-center me-3 mt-3 position-absolute rounded-circle text-primary top-0 z-3" data-bs-toggle="tooltip" data-bs-placement="left" aria-label="Read later" data-bs-original-title="Read later">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
                                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
                            </svg>
                        </a>
                        <img src="assets/images/blog/04-lg.jpg" class="image-zoom-hover" alt="Image">
                    </div>
                    <div class="card-body">
                        <div class="hstack gap-3 mb-3">
                            <span class="fs-sm small text-muted">Jul 28, 2023</span>
                            <span class="opacity-25">|</span>
                            <a class="badge border fw-semibold text-primary bg-white" href="#">Events</a>
                        </div>
                        <h3 class="h5 fw-semibold mb-0 post-title overflow-hidden">
                            <a href="blog-details.html">In ut tellus id nisl convallis bibendum eu nec diam.</a>
                        </h3>
                    </div>
                    <div class="card-footer py-3">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/avatar/04.jpg" class="rounded-circle" width="48" height="48" alt="Avatar">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <a href="#" class="d-block"><span class="fst-italic text-muted">By</span> <span class="fw-medium">Pranoti Deshpande</span></a>
                                <small class="text-muted">Product Manager</small>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- end /. article -->
                <!-- start article -->
                <article class="card h-100 overflow-hidden">
                    <div class="position-relative overflow-hidden">
                        <a href="blog-details.html" class="h-100 position-absolute start-0 top-0 w-100 z-1" aria-label="Read more"></a>
                        <a href="#" class="align-items-center bg-white btn-icon d-flex end-0 justify-content-center me-3 mt-3 position-absolute rounded-circle text-primary top-0 z-3" data-bs-toggle="tooltip" data-bs-placement="left" aria-label="Read later" data-bs-original-title="Read later">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
                                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
                            </svg>
                        </a>
                        <img src="assets/images/blog/05-lg.jpg" class="image-zoom-hover" alt="Image">
                    </div>
                    <div class="card-body">
                        <div class="hstack gap-3 mb-3">
                            <span class="fs-sm small text-muted">Oct 24, 2023</span>
                            <span class="opacity-25">|</span>
                            <a class="badge border fw-semibold text-primary bg-white" href="#">Events</a>
                        </div>
                        <h3 class="h5 fw-semibold mb-0 post-title overflow-hidden">
                            <a href="blog-details.html">Vestibulum scelerisque urna ut velit auctor varius.</a>
                        </h3>
                    </div>
                    <div class="card-footer py-3">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/avatar/05.jpg" class="rounded-circle" width="48" height="48" alt="Avatar">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <a href="#" class="d-block"><span class="fst-italic text-muted">By</span> <span class="fw-medium">Gabriel North</span></a>
                                <small class="text-muted">DevOps</small>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- end /. article -->
            </div>
        </div>
    </div>
    <!-- end /. blog section -->
    <!-- start footer -->
    <?php include('include/footer.php'); ?>
    <!-- end /. footer -->
    <!-- Optional JavaScript -->
    <script src="assets/plugins/jQuery/jquery.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/plugins/aos/aos.min.js"></script>
    <script src="assets/plugins/macy/macy.js"></script>
    <script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
    <script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
    <script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
    <script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
    <script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
    <script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
    <script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
    <script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/plugins/select2/select2.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADtQRKgCpJNnQCP8QvBeKDcm0TrTPpsGY&callback=initMap"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        var map; // Dichiarazione globale di map

        function initMap() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var userLocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    console.log("User Location: ", userLocation); // Controlla se `userLocation` è valido.

                    var mapOptions = {
                        center: userLocation,
                        zoom: 12
                    };

                    map = new google.maps.Map(document.getElementById('mapCanvasTwo'), mapOptions);

                    // Carica i marker delle scuole
                    loadMarkers(map, userLocation);
                }, function() {
                    handleLocationError(true, map.getCenter());
                });
            } else {
                handleLocationError(false, map.getCenter());
            }
        }


        function searchLocation() {
            var location = document.getElementById('location-input').value;
            var category = document.getElementById('category-select').value;

            // Redirigi a listing-map.php con query string
            window.location.href = 'listing-map.php?location=' + encodeURIComponent(location) + '&category=' + encodeURIComponent(category);
        }


        function handleLocationError(browserHasGeolocation, pos) {
            alert(browserHasGeolocation ?
                "Errore: Il servizio di geolocalizzazione non è riuscito." :
                "Errore: Il tuo browser non supporta la geolocalizzazione.");
        }

        // Funzione per caricare marker entro 20 km
        function loadMarkers(map, userLocation) {
            $.ajax({
                url: 'get_markers.php', // Endpoint PHP per recuperare le scuole
                type: 'POST',
                data: {
                    lat: userLocation.lat,
                    lng: userLocation.lng
                },
                success: function(response) {
                    var result = JSON.parse(response);

                    // Verifica se ci sono scuole
                    if (result.status === 'success' && Array.isArray(result.data) && result.data.length > 0) {
                        var schools = result.data;
                        var infowindow = new google.maps.InfoWindow();

                        // Ciclo per creare marker delle scuole
                        schools.forEach(function(school) {
                            var marker = new google.maps.Marker({
                                position: new google.maps.LatLng(school.latitude, school.longitude),
                                map: map,
                                title: school.name,
                                icon: {
                                    url: 'assets/images/markers/yoga2.fw.png', // Percorso dell'icona personalizzata
                                    scaledSize: new google.maps.Size(50, 50) // Dimensione personalizzata (larghezza, altezza)
                                }

                            });

                            var contentString = `
                <div style="min-width: 250px; padding: 10px; border-radius: 8px; text-align: center;">
                    <a href="listing-details.php?idschool=${school.idyogaschool}" style="text-decoration: none; color: inherit;">
                        <img src="uploadschool/${school.photofilename}" alt="${school.name}" style="width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: 8px;">
                    </a>
                    <h4 style="font-size: 18px; margin: 10px 0;">
                        <a href="listing-details.php?idschool=${school.idyogaschool}" style="text-decoration: none; color: #333;">${school.name}</a>
                    </h4>
                    <p style="margin: 5px 0;"><strong>Indirizzo:</strong> ${school.address}, ${school.city}, ${school.zip}, ${school.country}</p>
                    <p style="margin: 5px 0; font-size: 14px;"><strong>Descrizione:</strong> ${school.description}</p>
                </div>
            `;

                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.setContent(contentString);
                                infowindow.open(map, marker);
                            });
                        });
                    } else {
                        // Mostra SweetAlert se non ci sono scuole
                        Swal.fire({
                            title: 'Nessuna scuola trovata',
                            text: "Nessuna scuola di yoga è stata trovata entro 20 km. Prova a cambiare l'area della mappa o cerca in un'altra zona.",
                            icon: 'info',
                            confirmButtonText: 'OK'
                        });
                    }
                }


            });
        }
    </script>



    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>
    <script src="assets/js/listing-map.js"></script>

</body>

</html>