<?php
    session_start();
    include_once('../../db/saucerer.php');

  // Define variables and initialize with empty values
$id = $name = $token = $access = "";
$id_err = $name_err = $token_err = $access = "";
 
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] != true){

  $loggedin = "";

  header("location: ../../secure");
    exit;
  
    
} elseif(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] == true){

  $loggedin = $_SESSION['loggedin'];
  $id = $_SESSION['id'];
  $token = $_SESSION['token'];


// of college_data table 

$sql = "SELECT * FROM secure WHERE token='$token'"; 

$result = $conn->query($sql); 

  
// Display data on web page 

while($row = mysqli_fetch_array($result)) { 

  $id = $row['id'];
  $name = $row['name'];
  $token = $row['token'];

}
    
}


// Generating a random number
date_default_timezone_set('Africa/Kampala');
$today = date("His-dmY",time());

$code1 = rand(1,9); 
$code2 = rand(1,9);
$code3 = $code1 * $code2; 
$tokens = "$code3-$today";
?>

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" href="../../../image/favicon/1.png" type="image/png">
        <title>Admin | FitBora &copy;</title>

    <meta name="description" content="The fitness & wellness network">


 <!-- Social Share Data -->

    <meta content="text/html; charset=utf-8" name="Content-Type">

     <meta property="og:type" content="article">

    <meta property="og:image" content="https://fitbora.net/image/card/1.png">

    <!--  Less than 65 characters -->
    <meta property="og:title" content="Admin | FitBora &copy;">

    <meta property="og:url" content="https://fitbora.net/admin/blogs">

 <!--  Less than 300 characters -->
    <meta property="og:description" content="The fitness & wellness network">

    <meta property="og:site_name" content="Admin | FitBora &copy;">
    
    <!-- Twitter Cards -->

    <meta name="twitter:card" content="summary_large_image">

    <meta name="twitter:url" content="https://fitbora.net/admin/blogs">

    <meta name="twitter:title" content="Admin | FitBora &copy;">

    <meta name="twitter:description" content="The fitness & wellness network">

    <meta name="twitter:image" content="https://fitbora.net/image/card/1.png">

    <meta name="twitter:site" content="@fitbora">

    <meta name="twitter:creator" content="@iann_thecreator">


        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="../../../css/bootstrap.css">
        <link rel="stylesheet" href="../../../vendors/linericon/style.css">
        <link rel="stylesheet" href="../../../css/font-awesome.min.css">
        <link rel="stylesheet" href="../../../vendors/owl-carousel/owl.carousel.min.css">
        <link rel="stylesheet" href="../../../vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.css">
        <link rel="stylesheet" href="../../../vendors/nice-select/css/nice-select.css">
        <link rel="stylesheet" href="../../../vendors/owl-carousel/owl.carousel.min.css">
        <!-- main css -->
        <link rel="stylesheet" href="../../../css/style.css">
        <link rel="stylesheet" href="../../../css/responsive.css">

    <!--Animations-->
    <link rel="stylesheet" type="text/css" href="../../../css/animations/style.css"> 

    <!--Fontawesome 6-->
    <link href="../../../css/fontawesome/css/all.css" rel="stylesheet">  

    <link href="../../../css/datatable/dataTable.bootstrap.min.css" rel="stylesheet">  

<style type="text/css">
    

/*Upload Wrapper*/
    
.upload-wrapper {
    width: 100%;
    border-radius: 10px;
}

.upload-btn-wrapper input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
  font-size: 100px;
  width: 100%;
  height: 90%;
  opacity: 0;
  z-index: 9;
}

.upload-btn-wrapper .btn {
    color: #fff;
    font-size: 12px;
    width: 100%;
    height: 65px;
    background: #77df40;
    border-radius: 6px;
}

.upload-btn-wrapper .btn i.fa-image {
    display: block;
    color: #fff;
    font-size: 12px;
}

.output_image1 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    border: none;
}

img.output_image1{
  width: 100%;
    height: 90%;
  object-fit: cover;
}




/*Custom File Input*/
.file {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
}

.file-input label {
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(40deg,#174899,#164798,#92A9CF);
   background-size: 400% 400%;
    -webkit-animation: gradient 8s ease infinite;
            animation: gradient 8s ease infinite;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  transition: transform .2s ease-out;
}

.file-input p {
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 12px;
  color: #555;
  font-weight: normal;
}

.file-input input:hover + label,
.file-input input:focus + label {
  transform: scale(1.02);
}

</style>


    </head>
    <body>
        <!--================Header Area =================-->
        <header class="header_area">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <a class="navbar-brand logo_h" href="../../../"><img src="../../../image/logo.png" alt=""></a>

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                        <ul class="nav navbar-nav menu_nav ml-auto">
                            <li class="nav-item"><a class="nav-link" href="../../">Admin</a></li> 
                            <li class="nav-item"><a class="nav-link" href="../../listings" >Listings</a></li> 
                            <li class="nav-item active"><a class="nav-link" href="../../blogs">Blogs</a></li>
                            <li class="nav-item"><a class="nav-link" href="../../events">Events</a></li>
                            <li class="nav-item"><a class="nav-link" href="../../bloggers">Bloggers</a></li>
                            <li class="nav-item"><a class="nav-link" href="../../inquiries">Inquiries</a></li>
                        </ul>
                    </div> 
                </nav>
            </div>
        </header>
        <!--================Header Area =================--> 
 
        
        <!--================ Blog Area Start =================-->
        <section class="latest_blog_area one section_gap">


<!--================ Session Handler Start =================-->
<div class="session_handler">
<?php
        if(isset($_SESSION['error'])){
          echo "<div class='alert alert-danger text-center'>
            <button class='close'>&times;</button>
            ".$_SESSION['error']."
          </div>";
          unset($_SESSION['error']);
        }
        if(isset($_SESSION['success'])){
          echo "<div class='alert alert-success text-center'>
            <button class='close'>&times;</button>
            ".$_SESSION['success']."
          </div>";
          unset($_SESSION['success']);
        }
      ?>
</div>
<!--================ Session Handler End =================-->

            <div class="container">

        <!--================ Add New =================--> 
        <div><a href="#addnew" data-toggle="modal" class="button_hover theme_btn_two text-white"><i class="fa fa-video"></i>&nbsp; Add Video Blog</a></div>

                <div class="section_title text-center">
                    <h2 class="title_color">VIDEO BLOGS</h2>
                    <p class="text-uppercase" style="font-size: 18px;">

<?php

    $sql = "SELECT COUNT(*) FROM blogs WHERE blog_type='Video' AND deleted=''";

    //use for MySQLi-OOP
    $query = $conn->query($sql);
    while($row = $query->fetch_assoc()){
        if ($row['COUNT(*)']==0) {
            echo "No video blogs found";
        } elseif ($row['COUNT(*)']==1) {
            echo "".number_format($row['COUNT(*)'])." Video Blog";
        } else {
            echo "".number_format($row['COUNT(*)'])." Video Blogs";
        }
    }

?>
                    </p>
                    <hr>
                </div>
                <div class="row mb_30">

                    
<?php

    $sql = "SELECT * FROM blogs WHERE blog_type='Video' AND deleted='' ORDER BY id DESC";

    //use for MySQLi-OOP
    $query = $conn->query($sql);
    while($row = $query->fetch_assoc()){

        echo '<div class="col-lg-4 col-md-6">';

        echo '<span id="nav_'.$row["id"].'"></span>';

                        echo '<div class="single-recent-blog-post">';
                            echo '<div class="thumb">';
                              echo '<video class="img-fluid one" controls><source src="videos/'.$row["vid1"].'"></video>';
                            echo '</div>';
                            echo '<div class="details" align="center">';
                                echo '<p>'.$row["cat"].'</p>';
                                echo '<a href="#!"><h4 class="sec_h4">'.$row["title"].'</h4></a>';
                                echo '<p>'.$row["paragraph1"].'</p>';
                                echo '<a href="#edit_'.$row["id"].'" data-toggle="modal" class="button_hover theme_btn_two text-white mr-1"><i class="fa fa-edit"></i>&nbsp; Edit</a>';
                                echo '<a href="#delete_'.$row["id"].'" data-toggle="modal" class="button_hover theme_btn_two text-white ml-1"><i class="fa fa-trash"></i>&nbsp; Delete</a>';
                                echo '<hr>';
                            echo '</div>';  
                        echo '</div>';
                    echo '</div>';


//Edit Image Upload

echo "<script>

function preview_image_one_".$row['id']."(event) 
{
var reader = new FileReader();
reader.onload = function()
{
  var output = document.getElementById('output_image_one_".$row['id']."');
  output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

function myFunction() { 
  document.getElementById('myFile".$row['id']."').required = false; 
}


function preview_image_two_".$row['id']."(event) 
{
var reader = new FileReader();
reader.onload = function()
{
  var output = document.getElementById('output_image_two_".$row['id']."');
  output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

function myFunction() { 
  document.getElementById('myFile".$row['id']."').required = false; 
}


function preview_image_three_".$row['id']."(event) 
{
var reader = new FileReader();
reader.onload = function()
{
  var output = document.getElementById('output_image_three_".$row['id']."');
  output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

function myFunction() { 
  document.getElementById('myFile".$row['id']."').required = false; 
}

</script>";

     include('modals/edit.php');

                }
?>

                </div>
            </div>
        </section>
        <!--================ Blog Area  End =================-->

        
        <!--================ start footer Area  =================-->    
        <footer class="footer-area section_gap">
            <div class="container">
                <div class="row">

                    <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                        <div class="single-footer-widget">
                            <h6 class="footer_title">Overview</h6>
                            <p>FitBora is a premier online listing designed to connect fitness and wellness enthusiasts with the best gyms and fitness facilities in their area.
                            Our comprehensive listing platform offers an extensive range of options, from high-end luxury fitness clubs to budget-friendly community gyms, spas and health clubs - ensuring there’s something for everyone.</p>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                        <div class="single-footer-widget">
                            <h6 class="footer_title">Locations</h6>
                                    <ul class="list_style">
<?php

    $sql = "SELECT COUNT(*), district, image FROM listings WHERE deleted='' GROUP BY district ORDER BY id DESC LIMIT 5";

    //use for MySQLi-OOP
    $query = $conn->query($sql);
    while($row = $query->fetch_assoc()){

        echo '<li><a href="../../../districts/ug/?district='.$row["district"].'"><i class="fa fa-angle-right"></i> '.$row["district"].'</a></li>';
    }

?>
                                    </ul>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                        <div class="single-footer-widget">
                            <a href="../../../categories"><h6 class="footer_title">Categories</h6></a>
                                    <ul class="list_style">
                                        <li><a href="../../../categories/Fitness"><i class="fa fa-angle-right"></i> Fitness</a></li>
                                        <li><a href="../../../categories/Wellness"><i class="fa fa-angle-right"></i> Wellness</a></li>
                                        <li><a href="../../../categories/Massage"><i class="fa fa-angle-right"></i> Massage</a></li>
                                        <li><a href="../../../categories/Steam Bath"><i class="fa fa-angle-right"></i> Steam Bath</a></li>
                                        <li><a href="../../../categories/Experts"><i class="fa fa-angle-right"></i> Experts</a></li>
                                    </ul>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                        <div class="single-footer-widget">
                            <h6 class="footer_title">Interact With</h6>
                                    <ul class="list_style">
                                        <li><a href="../../../listings/Trainers"><i class="fa fa-angle-right"></i> Trainers</a></li>
                                        <li><a href="../../../listings/Dieticians"><i class="fa fa-angle-right"></i> Dieticians</a></li>
                                        <li><a href="../../../listings/Technicians"><i class="fa fa-angle-right"></i> Technicians</a></li>
                                        <li><a href="../../../listings/Consultants"><i class="fa fa-angle-right"></i> Consultants</a></li>
                                        <li><a href="../../../listings/Physiotherapists"><i class="fa fa-angle-right"></i> Physiotherapists</a></li>
                                    </ul>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                        <div class="single-footer-widget">
                            <h6 class="footer_title">Quick Links</h6>
                                    <ul class="list_style">
                                        <li><a href="../../../blog"><i class="fa fa-angle-right"></i> Blogs</a></li>
                                        <li><a href="../../../events"><i class="fa fa-angle-right"></i> Events</a></li>
                                        <li><a href="../../../about"><i class="fa fa-angle-right"></i> About Us</a></li>
                                        <li><a href="../../../contact"><i class="fa fa-angle-right"></i> Contact Us</a></li>
                                        <li><a href="../../../listings"><i class="fa fa-angle-right"></i> Directories</a></li>
                                    </ul>
                        </div>
                    </div>

                </div>
                <div class="border_line"></div>
                <div class="row footer-bottom d-flex justify-content-between align-items-center">
                    <div class="col-lg-3 col-sm-12 footer-social">
                        <a href="https://facebook.com/fitbora"><i class="fab fa-facebook"></i></a>
                        <a href="https://x.com/fitbora"><i class="fab fa-x-twitter"></i></a>
                        <a href="https://instagram.com/fitbora"><i class="fab fa-instagram"></i></a>
                        <a href="https://wa.me/256746006066"><i class="fab fa-whatsapp"></i></a>
                    </div>

                    <p class="col-lg-6 col-sm-12 footer-text m-0 text-center">
                      <a href="#">Fitbora</a> &copy; <script>document.write(new Date().getFullYear());</script>, All Rights Reserved<span class="flash">.</span></p>

                    <p class="col-lg-3 col-sm-12 footer-text m-0 text-center" style="font-size: 12px;">Powered by <a href="https://camonitor.online" target="_blank" style="color: #82848f;">Custom Assist Inc<span class="flash">.</span></a></p>

                </div>


            </div>

            
        </footer>
        <!--================ End footer Area  =================-->

<?php include('modals/add.php') ?>
        
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="../../../js/jquery-3.2.1.min.js"></script>
        <script src="../../../js/popper.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../vendors/owl-carousel/owl.carousel.min.js"></script>
        <script src="../../../js/jquery.ajaxchimp.min.js"></script>
        <script src="../../../js/mail-script.js"></script>
        <script src="../../../vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.js"></script>
        <script src="../../../vendors/nice-select/js/jquery.nice-select.js"></script>
        <script src="../../../js/mail-script.js"></script>
        <script src="../../../js/stellar.js"></script>
        <script src="../../../vendors/lightbox/simpleLightbox.min.js"></script>
        <script src="../../../js/custom.js"></script>
        <script src="../../../js/video-on-scroll.js"></script>

        <script src="../../../js/datatable/jquery.dataTables.min.js"></script>
        <script src="../../../js/datatable/dataTable.bootstrap.min.js"></script>

        <!-- Upload Image JS -->
        <script src="../../../js/upload_img_script.js"></script>

<script>
$(document).ready(function(){
  //inialize datatable
    $('#myTable').DataTable();

    //hide alert
    $(document).on('click', '.close', function(){
      $('.alert').hide();
    })
});
</script>


<script>
    function displayVID1(input,_this) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#vid-field1').html("<video width='320' height='240' controls class='img-fluid'><source src='"+e.target.result+"'></video>");
                console.log(e.target.result)
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function displayVID2(input,_this) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#vid-field2').html("<source src='"+e.target.result+"'>");
                console.log(e.target.result)
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function displayImg(input,_this) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#vid-field1').attr('poster', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>



<script type="text/javascript">
//Image 1
const vid1 = document.querySelector('#vid1');
vid1.addEventListener('change', (e) => {
  // Get the selected file
  const [vid1] = e.target.files;
  // Get the file name and size
  const { name: fileName, size } = vid1;
  // Convert size in bytes to kilo bytes
  const fileSize = (size / 1000000).toFixed(2);
  // Set the text content
  const fileNameAndSize = `${fileName} - ${fileSize}MB`;
  document.querySelector('.file-name1').textContent = fileNameAndSize;
});
</script>

    </body>
</html>