<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
    <title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>


    <style>
        .table-container-others{
            display: flex;
            justify-content: space-between;
        }
        .table-others{
            font-size: 13px;
            border: 1px solid ;
            
        }

        .th-others{
            color: #15c1cb;
            padding: 0;
            border: 1px solid;
            border-color: #333333;
        }
        .td-others{
            padding: 0;
            border: 1px solid;
            border-color: #333333;
        }

        @media screen and (min-width:768px) {
            .table-others{
                font-size: 20px;

            }
            .th-others{
                padding: 0 10px;
            }
            .td-others{
                padding: 0 10px;
            }

        }

        @media screen and (min-width:992px) {
            .table-others{
                font-size: 25px;

            }
            .th-others{
                padding: 0 25px;
            }
            .td-others{
                padding: 0 25px;
            }
        }
    </style>
</head>


<?php
require 'php/connect.inc.php';

$query = "SELECT `id`,`name`, `surname`, `email`, `birth_day`, `birth_month`, `birth_year` FROM `globaly_accounts`";
$query_run = mysqli_query($con, $query);

$data = array();

$query_num_rows = mysqli_num_rows($query_run);
if ($query_num_rows > 0) {
    while ($query_row = mysqli_fetch_assoc($query_run)) {
        $id = $query_row['id'];
        // Store the data in an associative array with $id as key
        $data[$id] = array(
            'name' => $query_row['name'],
            'surname' => $query_row['surname'],
            'email' => $query_row['email'],
            'birth_day' => $query_row['birth_day'],
            'birth_month' => $query_row['birth_month'],
            'birth_year' => $query_row['birth_year']
        );
    }
}

?>

<body>
    <!-- nav bar -->

    <nav class="navbar clearfix d-flex justify-content-center d-md-flex justify-content-md-end">
        <ul class="socials-ul clearfix d-none d-md-flex align-items-md-center pb-0 mt-0 mb-0">
            <li id="socials">
                <a href="https://www.facebook.com">
                    <i class="fa-brands fa-facebook-f"></i>
                </a>
            </li>
            <li id="socials">
                <a href="https://x.com">
                    <i class="fa-brands fa-twitter"></i>
                </a>
            </li>
            <li id="socials">
                <a href="https://www.google.com">
                    <i class="fa-brands fa-google-plus-g"></i>
                </a>
            </li>
            <li id="socials">
                <a href="https://www.pinterest.com">
                    <i class="fa-brands fa-pinterest"></i>
                </a>
            </li>
            <li id="socials">
                <a href="https://rs.linkedin.com">
                    <i class="fa-brands fa-linkedin-in"></i>
                </a>
            </li>
        </ul>
        <div class="form-container">
            <form class="form-search d-flex align-items-center d-sm-flex justify-content-sm-between" role="search">
                <input id="src-input" class="form-control rounded-0 border-0" type="search" placeholder="Search ...">
                <button class="btn" type="submit" style="padding-bottom: 0px;padding-top: 0px;">
                    <span class="material-icons">
                        search
                    </span>
                </button>
            </form>
        </div>
    </nav>

    <!-- header -->
    <header class="d-flex flex-column d-md-flex flex-md-row-reverse justify-content-md-between align-items-center justify-content-sm-center mx-lg-0 my-lg-0 mt-4 mx-0 mt-md-4 mb-md-3 mx-md-3">
        <div class="contact d-flex  flex-column">
            <div class="number d-inline">
                <span id="phone-img" class="material-icons">
                    phone
                </span>
                <a class="phone" href="#">800-2345-6789</a>
            </div>
            <a id="mail" href="#" class="mt-1">globaly@demolink.org</a>
        </div>
        <div class="horizontal-menu  d-none d-md-none d-lg-flex ">
            <ul class="nav-ul-hor d-md-flex d-md-row s mb-0">
                <a href="index.html" style="text-decoration: none;">
                    <li class="navs"> Home</li>
                </a>
                <li id="li-home" class="navs">People</li>
                <a href="about.html" style="text-decoration: none;">
                    <li class="navs">About us</li>
                </a>
                <a href="services.html" style="text-decoration: none;">
                    <li class="navs">Services</li>
                </a>
                <a href="cases.html" style="text-decoration: none;">
                    <li class="navs">Cases</li>
                </a>
                <a href="news.html" style="text-decoration: none;">
                    <li class="navs">News</li>
                </a>
                <a href="contacts.html" style="text-decoration: none;">
                    <li class="navs">Contacts</li>
                </a>
            </ul>
        </div>
        <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
        <div class="register">
            <a class="register-link" href="login.html">Log in</a>
            <a class="register-link" href="signup.php">Sign up</a>
        </div>

        <!-- site navigation-->

        <nav class="menu d-flex d-md-none justify-content-center align-items-center w-100 " style="background-color: white; height: 68px; box-shadow: 2px 8px 24px rgba(0,0,0,.1);">
            <div class="container-fluid ">
                <button class="navbar-toggler d-flex justify-content-center align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="material-icons">menu
                    </span><span>Menu</span>
                </button>
            </div>
        </nav>
        <div class="collapse" id="navbarToggleExternalContent">
            <div id="myDropdown" class="dropdown-content">
                <ul class="nav-ul mb-0">
                    <a href="index.html" style="text-decoration: none;">
                        <li class="navs"> Home</li>
                    </a>
                    <li id="li-home" class="navs">People</li>
                    <a href="about.html" style="text-decoration: none;">
                        <li class="navs">About us</li>
                    </a>
                    <a href="services.html" style="text-decoration: none;">
                        <li class="navs">Services</li>
                    </a>
                    <a href="cases.html" style="text-decoration: none;">
                        <li class="navs">Cases</li>
                    </a>
                    <a href="news.html" style="text-decoration: none;">
                        <li class="navs">News</li>
                    </a>
                    <a href="contacts.html" style="text-decoration: none;">
                        <li class="navs">Contacts</li>
                    </a>
                </ul>
                <div class="links d-inline-block w-100">
                    <ul class="socials-ul d-flex align-items-center justify-content-left mb-0">
                        <li id="socials">
                            <a href="https://www.facebook.com">
                                <i class="fa-brands fa-facebook-f"></i>
                            </a>
                        </li>
                        <li id="socials">
                            <a href="https://x.com">
                                <i class="fa-brands fa-twitter"></i>
                            </a>
                        </li>
                        <li id="socials">
                            <a href="https://www.google.com">
                                <i class="fa-brands fa-google-plus-g"></i>
                            </a>
                        </li>
                        <li id="socials">
                            <a href="https://www.pinterest.com">
                                <i class="fa-brands fa-pinterest"></i>
                            </a>
                        </li>
                        <li id="socials">
                            <a href="https://rs.linkedin.com">
                                <i class="fa-brands fa-linkedin-in"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
    </header>

    <div class="horizontal-menu d-none d-lg-none d-md-flex d-md-row justify-content-md-start align-items-md-center">
        <ul class="nav-ul-hor d-md-flex d-md-row s mb-0" style="box-shadow: 2px 8px 24px rgba(0,0,0,.1);">
            <a href="index.html" style="text-decoration: none;">
                <li class="navs"> Home</li>
            </a>
            <li id="li-home" class="navs">People</li>
            <a href="about.html" style="text-decoration: none;">
                <li class="navs">About us</li>
            </a>
            <a href="services.html" style="text-decoration: none;">
                <li class="navs">Services</li>
            </a>
            <a href="cases.html" style="text-decoration: none;">
                <li class="navs">Cases</li>
            </a>
            <a href="news.html" style="text-decoration: none;">
                <li class="navs">News</li>
            </a>
            <a href="contacts.html" style="text-decoration: none;">
                <li class="navs">Contacts</li>
            </a>
        </ul>
    </div>
    <div class="breadcrumb">
        <div class="breadcrumb-item"><a href="index.html">Home</a></div>
        <div class="breadcrumb-item-sep">/</div>
        <div class="breadcrumb-item-about" aria-current="page">People</div>
    </div>

    </div>


    <!-- Fourth part -->
    <div class="fourth-part-au d-flex align-items-center justify-content-center flex-column my-5 pb-4 mx-md-5">
        <div class="headline d-flex align-items-center justify-content-center flex-column">
            <h3 class="headline-h3">Meet</h3>
            <h2 class="headline-h2">the Main Team</h2>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-3">
                <div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
                    <img class="img-fourth-au" src="assets/images/team1.jpg" alt="">
                    <div class="card-text4  d-flex align-items-center justify-content-start flex-column">
                        <h4 class="h4-fourth"><?php echo $data[1]['name'] . ' ' . $data[1]['surname']; ?></h4>
                        <p class="p-fourth"><?php echo $data[1]['email'] . '<br>' . $data[1]['birth_day'] . '.' . $data[1]['birth_month'] . '.' . $data[1]['birth_year'] . '.'; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
                    <img class="img-fourth-au" src="assets/images/team2.jpg" alt="">
                    <div class="card-text4  d-flex align-items-center justify-content-start flex-column">
                        <h4 class="h4-fourth"><?php echo $data[2]['name'] . ' ' . $data[2]['surname']; ?></h4>
                        <p class="p-fourth"><?php echo $data[2]['email'] . '<br>' . $data[2]['birth_day'] . '.' . $data[2]['birth_month'] . '.' . $data[2]['birth_year'] . '.'; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
                    <img class="img-fourth-au" src="assets/images/team3.jpg" alt="">
                    <div class="card-text4  d-flex align-items-center justify-content-start flex-column">
                        <h4 class="h4-fourth"><?php echo $data[3]['name'] . ' ' . $data[3]['surname']; ?></h4>
                        <p class="p-fourth"><?php echo $data[3]['email'] . '<br>' . $data[3]['birth_day'] . '.' . $data[3]['birth_month'] . '.' . $data[3]['birth_year'] . '.'; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
                    <img class="img-fourth-au" src="assets/images/team4.jpg" alt="">
                    <div class="card-text4  d-flex align-items-center justify-content-start flex-column">
                        <h4 class="h4-fourth"><?php echo $data[4]['name'] . ' ' . $data[4]['surname']; ?></h4>
                        <p class="p-fourth"><?php echo $data[4]['email'] . '<br>' . $data[4]['birth_day'] . '.' . $data[4]['birth_month'] . '.' . $data[4]['birth_year'] . '.'; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
                    <img class="img-fourth-au" src="assets/images/team7.jpg" alt="">
                    <div class="card-text4  d-flex align-items-center justify-content-start flex-column">
                        <h4 class="h4-fourth"><?php echo $data[5]['name'] . ' ' . $data[5]['surname']; ?></h4>
                        <p class="p-fourth"><?php echo $data[5]['email'] . '<br>' . $data[5]['birth_day'] . '.' . $data[5]['birth_month'] . '.' . $data[5]['birth_year'] . '.'; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
                    <img class="img-fourth-au" src="assets/images/team6.jpg" alt="">
                    <div class="card-text4  d-flex align-items-center justify-content-start flex-column">
                        <h4 class="h4-fourth"><?php echo $data[6]['name'] . ' ' . $data[6]['surname']; ?></h4>
                        <p class="p-fourth"><?php echo $data[6]['email'] . '<br>' . $data[6]['birth_day'] . '.' . $data[6]['birth_month'] . '.' . $data[6]['birth_year'] . '.'; ?></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="headline d-flex align-items-center justify-content-center flex-column">
            <h3 class="headline-h3">Meet</h3>
            <h2 class="headline-h2">Others</h2>
        </div>
        <div class="table-container-others">
            <table class="table-others">
                <thead>
                    <tr>
                        <th class="th-others">Name</th>
                        <th class="th-others">Surname</th>
                        <th class="th-others">Email</th>
                        <th class="th-others">Birth Date</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    for ($id = 7; $id <= max(array_keys($data)); $id++) {
                        if (isset($data[$id])) {
                            echo "<tr>";
                            // Combine key and value for birth date into a formatted string
                            $birthDate = "{$data[$id]['birth_day']}.{$data[$id]['birth_month']}.{$data[$id]['birth_year']}.";

                            echo "<td class='td-others'>{$data[$id]['name']}</td>";
                            echo "<td class='td-others'>{$data[$id]['surname']}</td>";
                            echo "<td class='td-others'>{$data[$id]['email']}</td>";
                            echo "<td class='td-others'>$birthDate</td>";
                            echo "</tr>";
                        } else {
                            echo "<tr><td colspan='4'>No data found for ID $id</td></tr>";
                        }
                    }
                    ?>
                </tbody>
            </table>
        </div>

    </div>

    </section>
    <!-- footer -->
    <footer class="d-flex flex-column justify-content-center align-items-center pb-4 py-lg-5 py-md-5">
        <img src="assets/images/footer-logo.webp" class="mt-3 mt-md-0" alt="">
        <div class="footer-copyright">
            (c)2024 Globaly. All rights reserved. |
            <a href="#">Privacy Policy</a>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>