<?php
require_once "include/db_handler.php";
$db = new DbHandler();
?>

<div class="row">
    <div class="col-12">

        <?php
        $query = "SELECT * FROM tbl_about ORDER By id DESC LIMIT 1";
        $response = $db->getAboutMe($query);
        ?>

        <div class="card p-4 border-0">
            <?php foreach ($response as $about) : ?>
            <img src="assets/img/about_pic/<?php echo $about['about_photo']; ?>" class="card-img-top" alt="...">
            <div class="card-body">
                <p class="card-text" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b; font-size:13px!important; line-spacing:39px!important">
                    <?php echo $about['description']; ?>
                <p class="mt-4" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b;font-size:13px!important;">Email: qmbori@gmail.com.
                </p>
                <!--<p class="mt-4"><strong>Follow me on Twitter:</strong> @queeniesaina</p>
               <p class="mt-4"><strong>Instagram:</strong> @queeniembori</p>
               <p class="mt-4"><strong>Facebook:</strong> @queeniembori</p>-->

                <div class="d-inline-flex">
                    <div class="social_icons mt-1">
                        <a href="https://www.facebook.com/WomanKenya/?ref=aymt_homepage_panel&eid=ARAWe2W00TUC-EZiUVuJmSHX5WeEDnlJBuUP0IKki9Hk4o7kkONPPRqb4hNs2VArYkFAQMbwR2YVR76-"
                           target="_blank">
                            <img src="front_assets/images/facebook.png"
                                 style="height: 30px; width: 30px" class="img-fluid ml-2"/>
                        </a>
                        <a href="https://www.instagram.com/queeniembori/" target="_blank">
                            <img src="front_assets/images/instagram.png"
                                 style="height: 30px; width: 30px" class="img-fluid ml-2"/>
                        </a>
                        <a href="https://twitter.com/queeniesaina" target="_blank">
                            <img src="front_assets/images/twitter.png"
                                 style="height: 30px; width: 30px" class="img-fluid ml-2"/>
                        </a>

                        <a href="https://youtu.be/jHs0m6ySMug" target="_blank">
                            <img src="front_assets/images/youtube.png"
                                 style="height: 30px; width: 30px" class="img-fluid ml-2"/>
                        </a>

                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-12">
        <div class="card p-3 border-0">
            <div class="titles py-3" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b; font-size: 16px">OLD POSTS</div>
            <div class="card-body">
                <ul>

                    <?php
                    $listingSize = $db->countAllArticles();
                    $query = "SELECT * , UNIX_TIMESTAMP(created_at) as created_at FROM `tbl_articles` WHERE STATUS = 'published' ORDER By id DESC LIMIT 8";
                    $response = $db->getAllArticles($query);
                    foreach ($response as $article) : ?>

                        <li class="category mt-3" style="font-family: 'Roboto', sans-serif!important; color: #514f4f;">
                            <a href="#" style=font-family: 'Roboto', sans-serif!important; color: #6f6b6b; font-size:13px!important;">
                            <?php
                            $date = date('d-m-Y', $article['created_at']);
                            echo $date; ?> (<?php echo $listingSize; ?>)</a></li>
                    <?php endforeach; ?>

                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        <div class="card p-4 border-0">
            <div class="titles py-3" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b; font-size: 16px">MOST POPULAR</div>
            <style>
                @media (min-width: 1200px) {
                    #image {
                        height: 80px !important;
                        width: 80px !important;
                    }
                }
            </style>

            <?php
            $query = "SELECT * FROM `tbl_articles` WHERE STATUS = 'published' ORDER By id ASC LIMIT 4";
            $response = $db->getAllArticles($query);
            foreach ($response as $article) : ?>

                <div class="media pb-3">
                    <a href="article.php?id=<?php echo $article['id']; ?>">
                        <img src="assets/img/post_pic/<?php echo $article['image']; ?>" class="imagesize"
                             id="image" style="height: 60px!important;"
                             alt="...">
                    </a>
                    <div class="media-body" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b;">

                        <small style="color:#999;"><?php $timeStamp = date("F d, Y", strtotime($article['created_at'])); echo $timeStamp; ?></small>

                        <a href="article.php?id=<?php echo $article['id']; ?>" style="text-decoration: none; font-family: 'Roboto', sans-serif!important; color: #514f4f; font-size:13px!important;">
                            <div class="media-body" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b; font-size:13px!important;">
                                <?php echo $article['title']; ?>
                            </div>
                        </a>

                    </div>
                </div>

            <?php endforeach; ?>
        </div>
    </div>
</div>

<div class="row mt-5 mb-5">
    <div class="col-12">
        <div class="card p-4 border-0">
            <div class="titles py-3" style="font-family: 'Roboto', sans-serif!important; color: #6f6b6b; font-size: 16px">
                SUBSCRIBE
            </div>
            <style>
                .black {
                    background-color: #000000;
                    color: #ffffff;
                    border-radius: 0;
                    border-color: #000000;
                }
            </style>

            <form class="form-inline" action="subscribe.php" method="post">
                <div class="form-group">
                    <input type="email" placeholder="Email address" style="border-radius: 0;" class="form-control"
                           name="email">
                </div>
                <button type="submit" name="newsletter" class="btn btn-danger black"
                        style="font-family: 'Roboto', sans-serif!important; color: #fff;">Submit
                </button>
            </form>
        </div>
    </div>
</div>


<div class="row mt-5 mb-5">

    <div class="col-12">
        <div class="card p-4 border-0">
            <img src="front_assets/images/bake_logo.png" class="card-img-top ml-5" alt="..." style="height: 70px; width: 180px" >
        </div>
    </div>
</div>

</div>