<?php
include '../connection.php';
$sqlretrive = "SELECT * FROM programs_en WHERE ID = 1";
$executeSql = mysqli_query($connection,$sqlretrive);
$rowsJodcom = mysqli_fetch_row($executeSql);
$ourAbout = $rowsJodcom[2];
$ourAboutArr =  explode("@",$ourAbout);
$dataAbout = "";
foreach($ourAboutArr as $arrAbout)
{
    $dataAbout .="<p class='jodcomcontent' style='text-align:justify'>$arrAbout</p>";
}
$Number = $rowsJodcom[4];
$NumberArr =  explode("@",$Number);
$NumberStr = $rowsJodcom[5];
$NumberArrStr =  explode("@",$NumberStr);
$dataNumber = "";
for($i = 0 ; $i < 8 ; $i++)
{
    switch($i)
    {
        case 0 :
        case 4 :
            $bg = "#002539";
        break;
        case 1 :
        case 5 :
            $bg = "#FC5272";
        break;
        case 2 :
        case 6 :
            $bg = "#0080BB";
        break;
        case 3 :
        case 7 :
            $bg = "#e0dc06";
        break;
    }
    $dataNumber .="<div class='col-md-3 text-center mb-2'>
                <div style='background-color:{$bg};color:#fff;padding:30px;border-radius:15px'>
                    <h3 class='counter text-center jodcomnumbers'>$NumberArrStr[$i]</h3>
                    <img src='../assets/img/title-white.png'>
                    <h3 class='text-center jodcomachv'>$NumberArr[$i]</h3>
                </div>
            </div>";
}
$direction = "../assets/img/our-program/";
$image = $direction.$rowsJodcom[10];

$directionStory = "../assets/img/storySuccess/";
$DataStory = "";
$sqlStory = "select * from success_en where status = 1 and type='joodcom'";
$executeSqlStory = mysqli_query($connection,$sqlStory);
while($rowStory = mysqli_fetch_row($executeSqlStory))
{
    $image2 = $directionStory.$rowStory[3];
    $arrStoryContent = explode("@",$rowStory[2]);
    $storeContent = "";
    foreach($arrStoryContent as $singleLine)
        $storeContent .="$singleLine<br>";
    $DataStory .="						<!-- slider item -->
    <div class='feedback-slider-item'>
        <img src='$image2' class='center-block rounded-circle' alt='Customer Feedback'>
        <h3 class='customer-name Storyname'>$rowStory[1]</h3>
        <p class='Storycontent text-justify'>$storeContent</p>

    </div>
    <!-- /slider item -->";
}
?>

<!doctype html>
<html lang="ar">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>JOODCOM</title>
    <!-- assets / css -->
    <?php include '../cssFile.php'; ?>
    <?php include 'style.php'; ?>
    <link rel="icon" href="../assets/img/logo.png" type="image/x-icon">
        <link rel="stylesheet" href="../assets/css/cssStorysuccess.css">


<style>
    body
    {overflow:hidden;}
.hed-row
{
    background-image:url('../assets/img/testimg2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:400px;
    z-index:99;
    overflow:hidden;
}
.col-label 
{
    z-index:-1;
}
.col-label img
{
    width:100%;
    height:100%;
    margin-left:auto !important;
    margin-right:auto !important;   
    z-index:-9;
}
.jodcom 
{
    padding:50px;
}
.jodcom .col-md
{
    color:#000;
    padding:20px;
    border-radius:10px;
    color:#002539;
}
.jodcom .col-md p 
{
    font-size:20px;
    color:#002539;
}
.jodcom .col-md ul
{
    margin: 0 2rem;
    font-size: 19px;
}
p , ul {
   font-weight: normal;
   font-style: normal;
   color:#002539;
}
</style>
  </head>
  <body>
    <!--<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">
    <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 hed-row justify-content-center '>
    <div class='col-xl-5 col-lg-7 col-md-8 col-sm-10 col-12 col-label'>
    <img class='animated fadeIn slower' src="<?php echo $image;?>">
    </div>
</div>

    <div class="row jodcom animated slideInLeft slower" style='margin-top:30px;'>
        <div class="col-md text-center col-info">
            <h2  class='jodcomnamejoodcom'>
                <?php echo $rowsJodcom[1];?>
            </h2>
            <img src="../assets/img/s6.png" style="padding: 10px 0 20px 0">
            <br>
                <?php echo $dataAbout;?>
            <br>
            <h2 class='jodcomnumberjoodcom'>
            <?php echo $rowsJodcom[3];?>    
            </h2>
            <img src="../assets/img/s3.png" style="padding: 10px 0 20px 0">
            <br>
        </div>


    </div>
    <div class="container">
            <div class="row justify-content-center">
                <?php echo $dataNumber;?>
            </div>
        </div>


<div class="container" style='margin-top:50px;'>
    <div class="row animated slideInRight">
        <div class="col-12 text-center">
            <div>
                <h2 class="section-title text-uppercase Storymainlabel" >Success stories</h2>
                    <img src='../assets/img/s5.png'>
            </div>
        </div><!-- /End col -->
    </div><!-- /End row -->
    </div>

<section dir='ltr' style='margin-bottom:6%'>
	<div class="customer-feedback">
		<div class="container text-center">
			<div class="row justify-content-center">
				<div class="col-md-6 col-sm-8">
					<div class="owl-carousel feedback-slider">
                        <?php  echo $DataStory; ?>
					</div><!-- /End feedback-slider -->
				</div><!-- /End col -->
			</div><!-- /End row -->
		</div><!-- /End container -->
	</div><!-- /End customer-feedback -->
</section>


    <div class='row no-gutters' id="row-footer" style='width:100%;margin-top:60px;'>
        <div class='container'>
            <div class="col-md-12 text-center">
                <h4>
                <span>Take a chance to change...</span>
                    <span>Take a chance to dream...</span>
                    <span> Take a chance to be you....</span>
                </h4>

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

    <!-- end footer -->

<!-- assets / js -->
    <?php include '../jsFile.php'; ?>
<script>
       $('.counter').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 10000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
</script>
<script>
jQuery(document).ready(function($) {

var feedbackSlider = jQuery('.feedback-slider');
feedbackSlider.owlCarousel({
    items: 1,
    nav: true,
    dots: true,
    autoplay: false,
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"],
    responsive:{

        // breakpoint from 767 up
        767:{
            nav: true,
            dots: false
        }
    }
});

feedbackSlider.on("translate.owl.carousel", function(){
    $(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
});

feedbackSlider.on("translated.owl.carousel", function(){
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
});




}); //end ready
</script>
  </body>
</html>
<!-- onload="reloader()" -->
