<?php
include '../connection.php'; 
$sqlretrive = "SELECT ID, aboutus, ourvision, ourmessage, ourgoals, ourvalue,label,image FROM aboutus_ar WHERE status = 1";
$executeSql = mysqli_query($connection,$sqlretrive);
$rowsAbout = mysqli_fetch_row($executeSql);
$ourgoals = $rowsAbout[4];
$ourgoalsArr =  explode("@",$ourgoals);
$dataGoals = "";
foreach($ourgoalsArr as $arrGoals)
{
    $dataGoals .="<li>$arrGoals</li>";
}
$ourvalues = $rowsAbout[5];
$ourvaluesArr =  explode("@",$ourvalues);
$dataValues = "";
if(count($ourvaluesArr) == 1)
{
    $dataValues = "<li>$ourvalues</li>";
}
else
{
    foreach($ourvaluesArr as $arrValue)
    {
        $dataValues .="<li>$arrValue</li>";
    }
}
$directionFamily = "../assets/img/family/";
$DataFamily = "";
$sqlRetriveFamily = "SELECT id, name, description, image FROM family_ar where status=1";
$executeSqlFamily = mysqli_query($connection,$sqlRetriveFamily);
while($rowFamily = mysqli_fetch_row($executeSqlFamily))
{
    $textFamilyContent = str_replace("@", "<br>", $rowFamily[2]);
    $image = $directionFamily.$rowFamily[3];
    $DataFamily .="
    <figure class='snip1361 text-center'>
    <img src='$image' alt='sample45' style='height:236px' />
    <figcaption class='text-right'>
      <h3 class='familyname'>$rowFamily[1]</h3>
      <p class='familycontent'>$textFamilyContent</p>
    </figcaption>
    <a href='#'></a>
  </figure>";
}


?>
<!doctype html>
<html lang="ar">
  <head>
    <title> عن خذ فرصة</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- assets / css -->
    <?php include '../cssFile.php'; ?>
    <link rel="icon" href="../assets/img/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="../assets/css/cssStorysuccess.css">
    <?php include 'style.php'; ?>


  </head>
  <body dir="rtl">
    <!--<div class='text-center' id="loading">-->
    <!--<h2 id='loadingText'><h2>-->
    <!--</div>-->
     <!--onload="reloader()"-->
    <!-- navbar -->
    <?php include 'navbar.php'; ?>
<!-- start fixed social icon -->
<div class="share animated flash slower">
    <div class="toggle icon">
        <i class='fas fa-share-alt' id="icon-share"></i>
    </div>
        <ul>
            <li><a href="https://www.facebook.com/take.achance.359"><i class='fab fa-facebook-f icon-facebook' aria-hidden="true"></i></a></li> 
            <li><a href="https://twitter.com/takeach13143934"><i class='fab fa-twitter icon-twitter' aria-hidden="true"></i></a></li> 
            <li><a href="https://www.youtube.com/channel/UCWcJwXluKFRnSEFkiZBvPhg"><i class='fab fa-youtube icon-youtube' aria-hidden="true"></i></a></li> 
            <li><a href="https://www.instagram.com/takeachancenpo"><i class='fab fa-instagram icon-instagram' aria-hidden="true"></i></a></li> 
            <li><a href="https://wa.me/00962796069492"><i class='fab fa-whatsapp icon-whatsapp' aria-hidden="true"></i></a></li> 
        </ul>
</div>
<!-- end fixed social icon -->
<div class="goshan animated flash slower">
        <a href='goshan.php'>
        <div class="toggle icon">
            <img src='../assets/img/donateIcon.png' style='width:70px'>
        </div>
        </a>
</div>
<!-- End fixed social icon -->
<div class='row aboutus-row justify-content-center animated fadeIn slower'>
        <div class="col text-center">
            <h1 class='label-about aboutusmainlabel'>
                <?php echo $rowsAbout[6];?><br>
        </h1>
            <img src='../assets/img/s.png'>
        </div>
</div>

<div class="container" style='margin-top:30px;'>
    <div class="row animated slideInLeft" id="row-about">
        <div class="col text-right">
            <h2 class='text-center aboutusaboutus' >من نحن</h2>
            <hr>
        <h5 class='aboutuscontent' style='text-align:justify'>
            <?php echo $rowsAbout[1];?>
        </h5>
        </div>
    </div>
    <!-- End row -->
    <br>
    <div class="row animated slideInRight" id="row-Ourvision">
        <div class="col text-right">
            <h2 class='text-center aboutusourvision'>رؤيتنا</h2>
            <hr>
        <h5 class='aboutuscontent' style='text-align:justify'>
        <?php echo $rowsAbout[2];?>
        </h5>
        </div>
    </div>
    <!-- End row -->
    <br>
    <div class="row animated slideInLeft" id="row-ourmessage">
        <div class="col text-right">
            <h2 class='text-center aboutusourmessage'>رسالتنا</h2>
            <hr>
        <h5 class='aboutuscontent' style='text-align:justify'>
        <?php echo $rowsAbout[3];?>
        </h5>
        </div>
    </div>
    <!-- End row -->
    <br>
    <div class="row animated slideInRight" id="row-goals">
        <div class="col text-right">
            <h2 class='text-center aboutusourgoals'>أهدافنا</h2>
            <hr>
        <h5 style='text-align:justify'>
            <ul class='aboutuscontent'>
                    <?php echo $dataGoals;?>
            </ul> 
        </h5>
        </div>
    </div>
    <!-- End row -->
    <br>
    <div class="row animated slideInLeft" id="row-value">
        <div class="col text-right">
            <h2 class='text-center aboutusourvalus'>قيمنا</h2>
            <hr>
        <h5 style='text-align:justify'>
            <ul class='aboutuscontent'>
            <?php echo $dataValues;?>
            </ul> 
        </h5>
        </div>
    </div>
    <!-- End row -->
</div>
<!-- End container -->
<div class="container" style='margin-top:50px;'>
    <div class="row animated slideInRight">
        <div class="col-12 text-center">
            <div>
                <h2 class="section-title familymainlabel" style='color:#060c21'>عائلة خذ فرصة</h2>
                    <img src='../assets/img/s3.png'>
            </div>
        </div><!-- /End col -->
    </div><!-- /End row -->

    <div class="row justify-content-center" style='margin-top:30px;'>
        <div class="col-md-12 text-center">
            <?php
                echo $DataFamily;
            ?>
        </div>
    </div>

</div>





    <div class='row no-gutters' id="row-footer" style='width:100%;margin-top:30px;'>
        <div class='container'>
            <div class="col-md-12 text-center">
                <h4>
                    <span>خذ فرصة لتتغير...</span>
                    <span>خذ فرصة لتحلم...</span>
                    <span> خذ فرصة لتكون أنت....</span>
                </h4>

            </div>
        </div>
        <!-- End container -->
    </div>
    <!-- End row -->

    <!-- end footer -->

<!-- assets / js -->
    <?php include '../jsFile.php'; ?>
    <script>
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);

</script>

  </body>
</html>
<!-- onload="reloader()" -->
