<?php
session_start();
require '../include/dbconn.php';
$pdo = dbConnforTutle::getConnection();

if(!isset($_SESSION['username']) && !isset($_SESSION['password'])){
    header('Location: login.php');
}
$pagename='screenshots';

$stmt = $pdo->prepare('SELECT * FROM otherimages WHERE categoryname="screenshots"');
$stmt->execute();
$alldata = $stmt->fetchAll();

?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>ADMIN</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    
    <style>
        .control-label{
            text-align: left !important;
        }
        #submitbtn{
            width:100px;
        }
        .deleteBtn{
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%);
            color: #bb0000;
            font-size: 30px;
            padding: 40px 60px;
            display:none;
        }
        .img_div:hover .deleteBtn{
            display:block;
            cursor:pointer;
        }
    </style>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

<?php include('header.php'); ?>

<span id="success_msg" style="position:fixed;top:10%;left:40%;z-index:9999;color:#2f8000;display:none;background:rgba(76,175,80,0.3);padding:4px 50px;">Added Successflully.</span>


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Screenshots
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Screenshots</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-lg-12 col-xs-12">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">Screenshots</h3>
            </div>
            
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <form id="Partners_form" class="form-horizontal">
                        <input type="hidden" name="categoryname" value="screenshots" />
                        <input type="hidden" name="imagewidth" value="300" />
                        <input type="hidden" name="imageheight" value="645" />
                      <div class="box-body">
                        <div class="form-group">
                          <div class="col-sm-4">
                              <input type="file" class="form-control" id="imagename" name="imagename" required />
                          </div>
                          <div class="col-sm-8">
                            <button type="submit" class="btn btn-info" id="submitbtn">ADD NEW</button>
                          </div>
                        </div>
                      </div>
                    </form>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-12" style="padding-bottom:20px;">
                    <?php for($i=0; $i<sizeof($alldata); $i++){ ?>
                    <div class="col-md-3 img_div" style="padding: 8px 8px;position:relative;">
                        <img src="./images/otherimages/<?=$alldata[$i]['imagename']?>" style="width:100%;border:1px solid #6b6b6b;height:300px;" />
                        <span class="deleteBtn glyphicon glyphicon-trash" onclick="deleteImage(<?=$alldata[$i]['id']?>)"></span>
                    </div>
                    <?php } ?>
                </div>
            </div>
            
          </div>
        </div>
        <!-- ./col -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <strong> &copy; Copyright 2019. All Rights Reserved. Designed by <a href="http://bangaloreadsolutions.com">Bangalore AdSolutions</a>.</strong> 
  </footer>

  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>

<script>
                $(document).ready(function () {
                    $("form#Partners_form").submit(function (event) {
                        event.preventDefault();
                        $('#submitbtn').text("ADDING...");
                        $('#submitbtn').attr('disabled',true);

                        $.ajax({
                            url: 'AddOurPartnersProcess.php',
                            type: 'POST',
                            data: new FormData(this),
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if (response == "ok") {
                                    $('#success_msg').show();
                                    $('#submitbtn').text("ADD NEW");
                                    $('#submitbtn').attr('disabled',false);
                                    setTimeout(function ()
                                    {
                                        window.location.reload();
                                    }, 1000);
                                } else {
                                    alert(response);
                                    $('#submitbtn').text("ADD NEW");
                                    $('#submitbtn').attr('disabled',false);
                                }
                            }
                        });
                    });
                });
        </script>
        
        <script>
            function deleteImage(tblid){
                if(confirm('Are you sure? Yo want to Delete')){
                    $.ajax({
                            url: 'DeleteOtheriamges.php',
                            type: 'POST',
                            data: { 'tblid': tblid },
                            success: function (response) {
                                if (response == "ok") {
                                    $('#success_msg').text('Deleted Successfully')
                                    $('#success_msg').show();
                                    setTimeout(function ()
                                    {
                                        window.location.reload();
                                    }, 1000);
                                } else {
                                    alert(response);
                                }
                            }
                        });
                }
            }
        </script>
        
        <script>
            $('#imagename').change(function(){
                var ext = $('#imagename').val().split('.').pop().toLowerCase();
                if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
                    alert('Upload only Image!');
                    $('#imagename').val('');
                }
            });
        </script>

</body>
</html>
