<?php
include '../connection.php'; 

// Start retrive main-image
$mainImages = array();
$sqlMainImage = "select ID, nameImage, orderBy from main_image where orderBy = 1";
$executeSql = mysqli_query($connection,$sqlMainImage);
$rowsImage = mysqli_fetch_row($executeSql);
$mainImages[0] = $rowsImage[1];
$sqlMainImage = "select ID, nameImage, orderBy from main_image where orderBy = 2";
$executeSql = mysqli_query($connection,$sqlMainImage);
$rowsImage = mysqli_fetch_row($executeSql);
$mainImages[1] = $rowsImage[1];
$sqlMainImage = "select ID ,nameImage, orderBy from main_image where orderBy = 3";
$executeSql = mysqli_query($connection,$sqlMainImage);
$rowsImage = mysqli_fetch_row($executeSql);
$mainImages[2] = $rowsImage[1];
$ImageDirection = "../assets/img/main-image/";
// End retrive main-image


// Start retrive info takeachance
$sqlInfoOur = "SELECT ID , label , paragraph , image FROM info_takeachance_en WHERE status = 1";
$executeSql = mysqli_query($connection,$sqlInfoOur);
$rowsInfo = mysqli_fetch_row($executeSql);
$infoDirection = "../assets/img/infoTakeachance/";
// End retrive info takeachance


// Start retrive our program
$sqlProgram = "SELECT ID , name , paragraph , image FROM our_program_en WHERE ID = 1";
$executeSql = mysqli_query($connection,$sqlProgram);
$rowsProgram = mysqli_fetch_row($executeSql);
$sqlProgram = "SELECT ID , name , paragraph , image FROM our_program_en WHERE ID = 2";
$executeSql = mysqli_query($connection,$sqlProgram);
$rowsProgram2 = mysqli_fetch_row($executeSql);
$programDirection = "../assets/img/our-program/";
// End retrive our program

// Start retrive news
$sqlNews = "SELECT ID ,newsName_en ,summary_en ,image FROM news WHERE status =1 ORDER BY ID DESC limit 5";
$executeSql = mysqli_query($connection,$sqlNews);
$newsDiv = "";
$newsdirection = "../assets/img/news/";
while($rowsNews = mysqli_fetch_row($executeSql))
{
    $newsDiv .= "
    <div class='item'>
        <div class='shadow-effect'>
            <img class='img-circle' src='{$newsdirection}{$rowsNews[3]}' alt='' style='max-width: 300px;height: 110px;'>
            <h5 class='newsnamenews' style='border-bottom:1px solid #c5c5c5;padding-bottom:5px;'>{$rowsNews[1]}</h5>
            <p class='newscontent text-left' style='text-align:justify'>{$rowsNews[2]}</p>
        </div>
        <a href='show-news.php?ID={$rowsNews[0]}' class='testimonial-name'>READ MORE</a>
    </div>";
}
// End retrive news

// Start retrive app
$sqlApp = "SELECT ID, about_app,about_image,image_app,image_image,download_app_ios,download_app_android,download_image FROM app_en";
$executeSql = mysqli_query($connection,$sqlApp);
$rowApp = mysqli_fetch_row($executeSql);
// End retrive app

// Start retrive donate
$sqlDonate = "select ID,Financialcollection,company,denark,bank from donate_en";
$executeSql = mysqli_query($connection,$sqlDonate);
$rowDonate = mysqli_fetch_row($executeSql);
// End retrive donate


// Start retrive team
$DataTeam = "";
$teamDirection = "../assets/img/team/";
$sqlTeam = "select ID,name,jobTitle,content,summary,image from team_en";
$excuteSql = mysqli_query($connection,$sqlTeam);
while($rowTeam = mysqli_fetch_row($excuteSql))
{
    $imageTeam = $teamDirection.$rowTeam[5];
    $DataTeam.="
    <div dir='ltr'>
                <div class='row justify-content-center'>
                    <div class='col-md-5 col-10' id='text-team'>
                    <h4 class='teamlabel' class='text-left'>{$rowTeam[1]}</h4>
                        <h4 class='teamlabel' class='text-left'>{$rowTeam[2]}</h4>
                        <p class='teamcontent' style='text-align:justify;direction:ltr'>{$rowTeam[4]}</p>
                        <button class='btn btn-outline-info view-team' id='{$rowTeam[0]}' data-toggle='modal' data-target='#showInfo'>READ MORE</button>
                    </div>
                    <div class='col-md-5 col-10' id='img-team'>
                        <div class='animated-team swing'>
                        <img src='{$imageTeam}'>
                        </div>
                    </div>
                </div>
                <!-- End row slider -->
            </div>
            <!-- End slider -->";
}
// End retrive team
?>
<!doctype html>
<html lang="ar">
  <head>
    <title>TAKE A CHANCE</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'; ?>
    <?php include 'style.php'; ?>
<link rel="icon" href="../assets/img/logo.png" type="image/x-icon">
<link rel="stylesheet" href="../assets/css/mainEN.css">
<style type="text/css">
.btn-more-news
{
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 99999;
}
@media (max-width: 500px){
	
	.testimonials{
        padding-bottom:120px;
    }
    .btn-more-news{
        bottom:-30px;
    }
}
</style>
  </head>
  <body>
    <!-- Start Loading -->
    <!--<div class='text-center' id="loading">-->
    <!--    <h2 id='loadingText'><h2>-->
     <!--onload="reloader()"-->
    <!--</div>-->
    <!-- End Loading -->
    <div class='block' style='position:absolute;top:0' id='home'></div>
    <!-- Start navbar -->
    <div class='nav-header nav-header-index bg-light sticky-top animated slideInDown' dir='rtl'>
        <div class='row'>
            <div class='logo-brand ml-auto animated zoomIn slow'>
                <a class="navbar-brand" href="index.php"><img class='hvr-grow-shadow' src="../assets/img/logo.png"></a>
            </div>
            <div class="lines mr-auto">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <ul class="nav-links mr-auto">
            <li><a href="#" data-scroll='home' >HOME</a></li>
                <li><a href="#" data-scroll='info-takeachance' >ABOUT US</a></li>
                <li><a href="#" data-scroll='our-programs' >PROGRAMS</a></li>
                <li><a href="#" data-scroll='news' >NEWS</a></li>
                <li><a href="#" data-scroll='app' >APP</a></li>
                <li><a href="#" data-scroll='donate' >DONATE</a></li>
                <li><a href="gallery.php" onclick="location.href='gallery.php'">GALLERY</a></li>
                <li><a href="contact-us.php" onclick="location.href='contact-us.php'">CONTACT US</a></li>
                <li><a href="https://takeachancenpo.com/ar/" onclick="location.href='../ar'"> AR</a></li>

            </ul>
            <ul class="navlinks mr-auto">
                <a href="contact-us.php" class="num animated jackInTheBox slow"  onclick="location.href='contact-us.php'"  style='background-color:#FC5272'>CONTACT US</a>
                <a href="gallery.php" class="num animated jackInTheBox slow" onclick="location.href='gallery.php'"  style='background-color:#0080BB'>GALLERY</a>
                <a href="#" class="num animated rollIn slow" data-scroll='donate' style='background-color:#ECE813'>DONATE</a>
                <a href="#" class="num animated rollIn slow" data-scroll='app' style='background-color:#FC5272'>APP</a>
                <a href="#" class="num animated jackInTheBox slow" data-scroll='news' style='background-color:#0080BB'>NEWS</a>
                <a href="#" class="num animated rollIn slow" data-scroll='our-programs' style='background-color:#ECE813'>PROGRAMS</a>
                <a href="#" class="num animated rollIn slow" data-scroll='info-takeachance' style='background-color:#FC5272'>ABOUT US</a>
                <a href="#" class="num animated jackInTheBox slow" data-scroll='home' style='background-color:#0080BB'>HOME</a>
            </ul>
        </div>
        <!-- end row -->
        <div class='lang'>
<a href='../ar'>AR</a>
</div>
</div>
<!-- End header -->
    <!-- End navbar -->
    
    <!-- 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 -->
    <!-- Start 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 -->

    <!-- Start carousel slider -->
    <div class="bd-example animated fadeInUp slow" >
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
            <ol class="carousel-indicators">
            <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleFade" data-slide-to="1"></li>
            <li data-target="#carouselExampleFade" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../assets/img/background-carousel2.png" class="d-block w-100 img-fluid animated slideInLeft slow" style='position:absolute;' alt="...">
                <img src="<?php echo $ImageDirection.$mainImages[0];?>" class="d-block w-100 img-fluid" alt="...">
                <div class="carousel-caption d-none d-md-block">
                <!-- <h5>First slide label</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> -->
                </div>
            </div>
            <div class="carousel-item">
            <img src="../assets/img/background-carousel.png" class="d-block w-100 img-fluid animated slideInDown slow" style='position:absolute;' alt="...">
                <img src="<?php echo $ImageDirection.$mainImages[1];?>" class="d-block w-100 img-fluid" alt="...">
                <div class="carousel-caption d-none d-md-block">
                </div>
            </div>
            <div class="carousel-item">
            <img src="../assets/img/background-carousel2.png" class="d-block w-100 img-fluid animated slideInLeft slow" style='position:absolute;' alt="...">
                <img src="<?php echo $ImageDirection.$mainImages[2];?>" class="d-block w-100 img-fluid" alt="...">
                <div class="carousel-caption d-none d-md-block">
                </div>
            </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- End carousel slider -->

    <!-- Start info takeachance -->
    
    <div class='row info-takeachance' data-aos="fade-right" data-aos-easing="linear" data-aos-duration="1500" >
    <div class='block' style='position:absolute;top:-10%'id="info-takeachance"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h2 class="hvr-bounce-in infotakeachancelabel">
                    <?php echo $rowsInfo[1];?>
                    </h2>
                    <p><img src="../assets/img/s.png" alt=""></p>
                </div>
            </div>
            <div class="row justify-content-center body-info">
                <div class="col-lg-6 col-img text-center">
                    <!-- <video class="video-fluid z-depth-1" controls >
                        <source src="https://mdbootstrap.com/img/video/Sail-Away.mp4" type="video/mp4" />
                    </video> -->
                    <img src='<?php echo $infoDirection.$rowsInfo[3];?>' class='img-fluid'>
                </div>
                <div class="col-lg-6 text-right col-info">
                <p class='info-text infotakeachancepharagraph' style='text-align:justify'>
                    <?php echo $rowsInfo[2];?>
                </p>
                    <div class="button-showMore text-left">
                        <a href="about-us.php"><span></span>READ MORE</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End info takeachance -->


    <!-- Start our program -->
    
    <div class="our-programs">
    <div class='block' style='position:absolute;top:-15%;' id="our-programs"></div>
    <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h2 class="hvr-bounce-in ourprogrammainlabel" style='color:#ECE813'>
                    OUR PROGRAMS
                    </h2>
                <p><img src='../assets/img/s4.png'></p>
                </div>
            </div>
            <div class='row' style='margin-top:-40px;'>
                <div class='col-md-6 col-sm-12 text-center program1' style="transform: translate(0,23%);" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="3000">
                    <figure class="imghvr-zoom-out-down" style="max-width:400px;">
                        <img src="<?php echo $programDirection.$rowsProgram[3];?>" alt="example-image" style="width:378px;height:378px">
                        <figcaption>
                            <br>
                            <h3 class="ih-fade-down ih-delay-sm ourprogramlabel"> <?php echo $rowsProgram[1];?></h3><br>
                            <p class='ourprogramparapgraph'  style='text-align:justify'><?php echo $rowsProgram[2];?></p>
                            
                            <button class="btn btn-outline-light" style='border-radius:5px;'>READ MORE</button>
                        </figcaption>
                        <a href="jodcom.php"></a>
                    </figure>
                </div>
                <!-- End col-md-6 -->
                <div class='col-md-6 col-sm-12 text-center program2' style="transform: translate(0,23%)" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="3000">
                    <figure class="imghvr-zoom-out-down" style="max-width:400px;">
                        <img src="<?php echo $programDirection.$rowsProgram2[3];?>" alt="example-image" style="width:378px;height:378px">
                        <figcaption>
                            <br>
                            <h3 class="ih-fade-down ih-delay-sm ourprogramlabel"> <?php echo $rowsProgram2[1];?></h3><br>
                            <p class='ourprogramparapgraph' style='text-align:justify'><?php echo $rowsProgram2[2];?></p>
                            
                            <button class="btn btn-outline-light" style='border-radius:5px;'>READ MORE</button>
                        </figcaption>
                        <a href="makingStars.php"></a>
                    </figure>
                </div>
                <!-- End col-md-6 -->
            </div>
            <!-- End row -->
        </div>
        <!-- End container -->
    </div>
    <!-- End div our-programs -->

    <!-- End our program -->


    <!-- Start news -->
    
    <section class="testimonials"  data-aos="zoom-out-up" data-aos-easing="linear" data-aos-duration="1500" style="direction:ltr;position:relative">
    <div class='block' style='position:absolute;top:-20%;' id="news"></div>
        <div class="container  position-relative">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h2 class="hvr-bounce-in newsmainlabel" >
                    MOST NEWS
                    </h2>
                <p><img src='../assets/img/s.png'></p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div id="customers-testimonials"  class="owl-carousel">

                        <?php echo $newsDiv;?>
                        
                    </div>
                    <!-- End customers testimonials -->
                </div>
                <!-- End col-sm-12 -->
            </div>
            <!-- End row -->
<a href='news.php' class="btn btn-danger btn-more-news">Read More News</a>
        </div>
        <!-- End container -->
    </section>
    <!-- END OF TESTIMONIALS -->

    <!-- End news -->
    

    <!-- Start about app -->

    <div class="row no-gutters justify-content-center row-body" >
    <div class='block' id="app"></div>

        <div class="container" style='margin-top:40px'>
            <div class="row no-gutters justify-content-center">
                <div class="col-md-12 text-center">
                    <h2 class="hvr-bounce-in appmainlabel">
                    APPLICATION
                    </h2>
                    <p><img src='../assets/img/s3.png'></p>
                </div>
            </div>
        </div>
        <!-- End container -->
            <div class='col-lg-5 col-md-6'  style='color:#fff;' data-aos="flip-down" data-aos-duration="1500" data-aos-easing="ease-in-sine">
                <div class="main-timeline">

                    <div class="timeline">
                        <a class="timeline-content" onclick="document.getElementById('myImage').src='../assets/img/pic.jpg'" style='cursor: pointer;'>
                            <span class="label-timeline applabel">ABOUT APP</span>
                            <p class="description appcontent" style='text-align:justify'>    
                                <?php echo $rowApp[1];?>
                            </p>
                        </a>
                    </div>
                    <!-- End timeline -->
                    <div class="timeline">
                        <a  class="timeline-content" onclick="document.getElementById('myImage').src='../assets/img/img.jpg'" style='cursor: pointer;'>
                            <span class="label-timeline applabel">IMAGE APP</span>
                            <p class="description appcontent" style='text-align:justify'>
                                <?php echo $rowApp[3];?>
                            </p>
                        </a>
                    </div>
                    <!-- End timeline -->
                    <div class="timeline">
                        <a class="timeline-content" onclick="document.getElementById('myImage').src='../assets/img/pic3.jpg'" style='cursor: pointer;'>
                            <span class="label-timeline applabel">DOWNLOAD APP</span>
                            <p class="description" style='text-align:justify'>
                                <button class='download d-none' onclick="location.href='<?php echo $rowApp[5];?>'"><img src='../assets/img/appstore.png'></button>
                                <button class='download toggle-mobile'><img src='../assets/img/appstore.png'></button>
                                <button class='download' onclick="location.href='<?php echo $rowApp[6];?>'"><img src='../assets/img/google.png'></button>
                            </p>
                        </a>
                    </div>
                    <!-- End timeline -->
                    <p class='waitApp text-center'>
                            App Under Proccessing
                            </p>
                </div>
                <!-- End main-timeline -->
            </div>
            <!-- End col-md-5 -->
            <div class='col-md-4' data-aos="fade-right" data-aos-easing="linear" data-aos-duration="1500">
                <div class="dm-width">
                    <div class="dm-device">
                        <div class="device">
                            <div class="screen">
                                <div class="slider__item slider__item--1">
                                    <img src='../assets/img/app/app.jpg' id='myImage' style='width:100%;'>
                                </div>
                            </div>
                            <!-- End screen -->
                        </div>
                        <!-- End device -->
                    </div>
                    <!-- End dm-device -->
                </div> 
                <!-- End dm-width -->
            </div>
            <!-- End col-md-4 -->
    </div>
    <!-- End row -->
    
    <!-- End about app -->


    <!-- Start donate -->
    <div class="label" style='background-color:#fff; position:relative' >
    <div class='block' style='position:absolute;top:-70%' id="donate"></div>
            <div class="row no-gutters justify-content-center"style="padding-top:40px;">
                <div class="col-md-12 text-center">
                    <h2 class="hvr-bounce-in donatemainlabel">
                    DONATE NOW
                    </h2>
                   <p> <img src='../assets/img/s2.png' style='padding: 10px 0 0; 0'></p>
                </div>
            </div>
        </div>
        <!-- End container -->
    <div class="row-donate" >
    <div class="donate">
        
        
        <div class="donate-card">
            <div class="face face1">
                <div class="content-donate">
                    <img src="../assets/img/donate/call.png" alt="">
                    <h3 class='text-uppercase donatelabel'>Financial collection</h3>
                </div>
                <!-- End content-donate -->
            </div>
            <!-- End face1 -->
            <div class="face face2">
                <div class="content-donate text-right">
                    <p class='donatecontent'  style='text-align:justify'>
                    <?php echo $rowDonate[1];?>
                    </p>
                </div>
            </div>
            <!-- End face2 -->
        </div>
        <!-- End donate-card -->
        
        
        <div class="donate-card">
            <div class="face face1">
                <div class="content-donate">
                    <img src="../assets/img/donate/company.png" alt="">
                    <h3 class='text-uppercase donatelabel'>LOCATION</h3>
                </div>
                <!-- End content-donate -->
            </div>
            <!-- End face1 -->
            <div class="face face2">
                <div class="content-donate text-right">
                    <p class='donatecontent' style='text-align:justify'>
                    <?php echo $rowDonate[2];?>
                    </p>
                </div>
            </div>
            <!-- End face2 -->
        </div>
        <!-- End donate-card -->


        <div class="donate-card">
            <div class="face face1">
                <div class="content-donate">
                    <img src="../assets/img/donate/denark.png" alt="">
                    <h3 class='text-uppercase donatelabel'>DENARK</h3>
                </div>
                <!-- End content-donate -->
            </div>
            <!-- End face1 -->
            <div class="face face2">
                <div class="content-donate text-right">
                    <p class='donatecontent' style='text-align:justify'>
                    <?php echo $rowDonate[3];?>
                    </p>
                </div>
            </div>
            <!-- End face2 -->
        </div>
        <!-- End donate-card -->

        <div class="donate-card">
            <div class="face face1">
                <div class="content-donate">
                    <img src="../assets/img/donate/bank.png" alt="">
                    <h3 class='text-uppercase donatelabel'>BANK</h3>
                </div>
                <!-- End content-donate -->
            </div>
            <!-- End face1 -->
            <div class="face face2">
                <div class="content-donate text-right">
                    <p class='donatecontent' style='text-align:justify'>
                <?php echo $rowDonate[4];?>
                    </p>
                </div>
            </div>
            <!-- End face2 -->
        </div>
        <!-- End donate-card -->

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

    <!-- End donate -->


<!-- Start our team -->
<div class='row our-team' >
    <div class="container" style='margin-top:100px;'>
        <div class="row no-gutters justify-content-center">
            <div class="col-md-12 text-center">
                <h2 class="hvr-bounce-in teammainlabel">
                TEAM TAKE A CHANCE
                </h2>
                <p>            <img src='../assets/img/s.png' style='padding: 10px 0 20px; 0'></p>
            </div>
            <!-- End col-md-12 -->

        </div>
        <!-- End row for label -->
        <div class="team" >

            <?php
            echo $DataTeam;
            ?>

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

<!-- End out team -->
</div>
    <!-- start footer -->
<br>
    <div class='row no-gutters' id="row-footer" style='width:100%'>
        <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 -->
    
    <!-- For coursor animation -->
    <div class="cursor"></div>
    
    <!-- For scroll to top -->
    <a class='scrollToTop' href='#'><i class="fas fa-arrow-up"></i></a>
    
    
    <!-- assets / js -->
    <?php include '../jsFile.php'; ?>
<script>
        const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
    cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})

document.addEventListener('click', () => {
    cursor.classList.add("expand");

    setTimeout(() => {
        cursor.classList.remove("expand");
    }, 500)
})
</script>
    <script>

$(document).ready(function(){
  $('.team').slick({
    dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 3000,
  fade: true,
  cssEase: 'ease'
  });
});
</script>
      <script>
    $(document).ready(function(){
    $('.view-team').click(function(){
        var infoID = $(this).attr("id");
        $.ajax({
            url: "showsingleteam.php",
            method:"post",
            data:{infoID,infoID},
            success:function(data)
            {
                $('#show-team').html(data);
                $('#showInfo').model("show");
            }
        });
    });
    $(".waitApp").slideUp();
    $(".toggle-mobile").click(function(){
        $(".waitApp").slideToggle();
    });
});

    </script>

  </body>
</html>
<!-- Modal -->
<div class="modal fade " id="showInfo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">SHOW INFORMATION</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id='show-team'>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" style='margin-right: .25rem;'>Close</button>
      </div>
    </div>
  </div>
</div>