<?php
include 'config/MainFunction.php';
if (empty($_GET['url']) || !$_GET['url']) {
    header('Location:index.php');
}
$article = $use->getArticleByUrl(urldecode($_GET['url']));
$angels = $use->angels();
$articles = $use->randomArticleSeven();
$angels = $use->mergeArray($angels, $articles);
$randomArticle = $use->randomArticleOne();
$use->updateView($article['id'], $article['views'] + 1)
?>
<!doctype html>
<html lang="en">

<head>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4801985982356333"
     crossorigin="anonymous"></script>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!--  Font Awesome  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,700;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/new-style.css">
    <link rel="icon" type="image/png" href="images/arch-logo.png" />
    <title>Daily Prayer Message | <?= $article['title'] ?></title>
</head>

<body>

<section class="header">
        <a href="./" class="text-decoration-none">
            <img class="logo" src="images/logo.png" alt="Logi">
        </a>
    </section>

    <div class="article py-5 mt-4">
        <div class="container">
          <div class="article_heading text-center">
          <h2 class="headline margin-block mb-4">Your  Message For Today</h2>
          <div class="row">
          <div class="col-xl-8  col-md-9 m-auto">
             <p class="mb-5">
              <span class="left_img"><img src="images/comma_1.png"></span><span class="right_img"><img src="images/comma.png"></span>
              <?= $article['title'] ?> 
              </p>
            </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-9 m-auto">
                <div class="row">
                        <div class="col-lg-6"> 
                            <div class="article_img">
                            <img src="images/thumb/<?= $article['image'] ?>" alt="<?= $article['title'] ?>" class="card_img">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="description">
                               <?= $article['content'] ?>
                            </div>
                            <div class="reavel_btn mt-5 text-lg-left text-center">
                            <a href="#anglecards" class="btn text-white">
                            SELECT ANOTHER ENVELOPE
                            </a>
                        </div>
                        </div>
                </div>
            </div>
          </div>
            
                   <div class="py-5 my-md-5" id="anglecards">
                   <div class="row">
               
                <div class="col-lg-9 m-auto">
                    <div class="side">
                        <div class="text-center py-2">
                            <h4>Want To Hear  Another Prayer Message?</h4>
                            <div class="row d-flex justify-content-center py-4">
                                <?php foreach ($angels as $angel) : ?>
                                    <div class="col-4  justify-content-center d-flex mb-4">
                                        <a href="article.php?url=<?= $angel['url'] ?>">
                                            <img src="images/card/<?= $angel['angel'] ?>.png" alt="<?= $angel['angel'] ?>" class="angel-side">
                                        </a>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
            </div>
            
        </div>
    </div>

    <section class="footer  py-4 bg-dark">
            <div class="container">
                <div class="row">
                <div class="col-lg-10 m-auto">
                <div class="row footer_border">
                    <div class="col-8">
                        <div class="footer_logo ">
                            <img src="images/logo.png">
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="follow_us">
                            <h6>Follow Us</h6>
                            <div class="footer-links">
                                <a  href="javascript:void(0);"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                <a  href="javascript:void(0);"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                <a  href="javascript:void(0);"><i class="fa fa-twitter" aria-hidden="true"></i>
</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row pt-2">
                    <div class="col-md-8">
                        <p class="footer-text">© 2021 Karmic Tarot Message. All rights reserved.</p>
                    </div>
               
                <div class="col-md-4">
                    <div class="footer-links ">
                        <a class="footer-link" href="javascript:void(0);">Terms &amp; Conditions</a>
                        <a class="footer-link" href="javascript:void(0);">Privacy Policy</a>
                    </div>
                </div>
            </div>
                </div>
                </div>
               
            </div>
                
           
            
        </section>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>


</body>

</html>