<?php include('config.php');
include('checksession.php');
include('include/header.php');

?>

         <!-- Content Wrapper. Contains page content -->
         <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
               <div class="container-fluid">
                  <div class="row mb-2">
                     <div class="col-sm-6">
                        <h1>Add Banner</h1>
                     </div>
                     <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                           <li class="breadcrumb-item"><a href="#">Home</a></li>
                           <li class="breadcrumb-item active">Add Banner</li>
                        </ol>
                     </div>
                  </div>
               </div>
               <!-- /.container-fluid -->
            </section>
            <!-- Main content -->
            <section class="content">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-12">
                       
                         <form id="add_banner_form" enctype="multipart/form-data">
                         <!--<form action="" method="post" enctype="multipart/form-data">-->
                        <div class="card card-primary">
                           <div class="card-header">
                              <h4 class="card-title">Banner</h4>
                           </div>
                           
                           <div class="card-body">
                                  <div class="form-group">
                                 <label> Title</label>
                                 <div class="col-md-12">
                                    <div class="card card-outline card-info">
                                 
                                       <!-- /.card-header -->
                                       <div class="card-body">
                                         <input class="form-control" type="text" id="title" name="title" placeholder="Title" >
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              
                                
                                  <div class="form-group">
                                 <label> Title1</label>
                                 <div class="col-md-12">
                                    <div class="card card-outline card-info">
                                 
                                       <!-- /.card-header -->
                                       <div class="card-body">
                                         <input class="form-control" type="text" id="title1" name="title1" placeholder="Title1" >
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              
                              <!--   <div class="form-group">-->
                              <!--   <label>Left Arrow Text</label>-->
                              <!--   <div class="col-md-12">-->
                              <!--      <div class="card card-outline card-info">-->
                                 
                                       <!-- /.card-header -->
                              <!--         <div class="card-body">-->
                              <!--           <input class="form-control" type="text" id="title2" name="title2" placeholder="Left Arrow Text" >-->
                              <!--         </div>-->
                              <!--      </div>-->
                              <!--   </div>-->
                              <!--</div>-->

                              <!--    <div class="form-group">-->
                              <!--   <label>Right Arrow Text</label>-->
                              <!--   <div class="col-md-12">-->
                              <!--      <div class="card card-outline card-info">-->
                                 
                                       <!-- /.card-header -->
                              <!--         <div class="card-body">-->
                              <!--           <input class="form-control" type="text" id="title3" name="title3" placeholder="Right Arrow Text" >-->
                              <!--         </div>-->
                              <!--      </div>-->
                              <!--   </div>-->
                              <!--</div>-->

                               <div class="col-6 lefts">
                              <div class="form-group">
                                 <label for="exampleInputFile">Desktop Banner<br><span style="color:red;">(For better view please upload 1920px x 1080px size images.)</span></label>
                                 <div class="input-group">
                                    <div class="custom-file">
                                       <input type="file" class="custom-file-input" name="pro_img"  id="exampleInputFile">
                                       <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                    </div>
                                    <div class="input-group-append">
                                       <span class="input-group-text">Upload</span>
                                    </div>
                                 </div>
                              </div>
                             
                              </div>
                               <div class="col-6" style="float:left">
                                   <div style="width: 151px;  height: 121px;  position: relative;  z-index: 100;  opacity: 1;  margin: 0 0 -120px 0px;  border: 3px solid #fff;"></div>
                                  <img id="image" / width="150px;" height="120px;" border="0">
                                  </div>
                                



                                  <div class="col-6 lefts">
                              <div class="form-group">
                                 <label for="exampleInputFile">Mobile Banner<br><span style="color:red;">(For better view please upload 810px x 1080px size images.)</span></label>
                                 <div class="input-group">
                                    <div class="custom-file">
                                       <input type="file" class="custom-file-input" name="pro_img1"  id="exampleInputFile1">
                                       <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                    </div>
                                    <div class="input-group-append">
                                       <span class="input-group-text">Upload</span>
                                    </div>
                                 </div>
                              </div>
                             
                              </div>
                               <div class="col-6" style="float:left">
                                   <div style="width: 151px;  height: 121px;  position: relative;  z-index: 100;  opacity: 1;  margin: 0 0 -120px 0px;  border: 3px solid #fff;"></div>
                                  <img id="image1" / width="150px;" height="120px;" border="0">
                                  </div>
                                   
                                
                          
                             
                              <!--<div class="col-6 lefts">-->
                             
                              <!--</div>-->
                      
                              <!--<div class="col-6 lefts" >-->
                              <!--<span class="add_images" onclick="add_more_images();">+ </span>-->
                           
                              <!--</div>-->
           
                              <div class="col-6 rights">
                                  <p id="err_msg" style="text-align:right"></p>
                              <div class="form-group">
                                  <input type="hidden" name="id" value="<?=$row['id'];?>">
                                  <button class="btn btn-warning addpro" type="submit"  class="">Add <span class="spinner-border text-secondary" role="status" style="display:none;"></span></button>
                                  </div>
                                  </div>
                                  
                                  <div id="dvPreview">
</div>
                           </div>
                        </div>
        

                        </form>
                       
                     </div>
                  </div>
               
               <!-- /.container-fluid -->
            </section>
         </div>
         <!-- /.content-wrapper -->
         <footer class="main-footer">
            <div class="float-right d-none d-sm-block">
              
            </div>
            <strong>Copyright &copy; 2014-2021 <a href="https://salientdesignstudio.com/">Salient Design Studio</a>.</strong> All rights reserved.
         </footer>
         <!-- Control Sidebar -->
         <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
         </aside>
         <!-- /.control-sidebar -->
      </div>
      <!-- ./wrapper -->
      <!-- jQuery -->
       <script src="plugins/jquery/jquery.min.js"></script>
      <!-- Bootstrap -->
      <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
      <!-- Ekko Lightbox -->
      <script src="plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
      <!-- AdminLTE App -->
      <script src="dist/js/adminlte.min.js"></script>
      <!-- Filterizr-->
      <script src="plugins/filterizr/jquery.filterizr.min.js"></script>
      <!-- AdminLTE for demo purposes -->
      <script src="dist/js/demo.js"></script>
      <!-- Page specific script -->
    
     
      <script src="plugins/summernote/summernote-bs4.min.js"></script>
      <!-- CodeMirror -->
      <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
      <!-- AdminLTE for demo purposes -->
      <script src="dist/js/demo.js"></script>
      <!-- Page specific script -->
      <!-- jQuery -->
      <script src="last/jquery.min.js"></script>
      <!-- Bootstrap 4 -->
      <script src="last/bootstrap.bundle.min.js"></script>
      <!-- AdminLTE App -->
      <!-- Summernote -->
      <script src="last/summernote-bs4.min.js"></script>
      <!-- CodeMirror -->
      <!-- AdminLTE for demo purposes -->
      <script src="last/demo.js"></script>
      <!-- Page specific script -->
      <script>
      
      document.getElementById('exampleInputFile').onchange = function () {
  var src = URL.createObjectURL(this.files[0])
  document.getElementById('image').src = src
}

 document.getElementById('exampleInputFile1').onchange = function () {
  var src = URL.createObjectURL(this.files[0])
  document.getElementById('image1').src = src
}

///////////////// Multiple Image Preview //////////////



///////////////////////// End ////////////////////////////



         
         $(document).ready(function(){
          $("#add_banner_form").submit(function(e){

         e.preventDefault();
         
    //
         var form_data = new FormData(document.querySelector("form"));
         
         //var firstcontent=$("#summernote2").val();
         



         //alert(firstcontent);
         var newdata = new FormData(this);
    
         newdata.append( "action", 'addbanner');
         //newdata.append( "firstcontent", firstcontent);

        if($("#title").val()=='')
    {
      $("#err_msg").show().html('<span style="color:red;"> Please enter title.</span>').delay(4000)
    .fadeOut(100);;
  return false;  
    }
    
        else if($("#title1").val()=='')
    {
      $("#err_msg").show().html('<span style="color:red;"> Please enter title 1.</span>').delay(4000)
    .fadeOut(100);;
  return false;  
    }


//         else if($("#title3").val()=='')
//     {
//       $("#err_msg").show().html('<span style="color:red;"> Please enter right arrow text.</span>').delay(4000)
//     .fadeOut(100);;
//   return false;  
//     }
    
             
           else if($("#exampleInputFile").val()=='')
    {
      $("#err_msg").show().html('<span style="color:red;"> Please upload desktop banner.</span>').delay(4000)
    .fadeOut(100);;
  return false;  
    }

             else if($("#exampleInputFile1").val()=='')
    {
      $("#err_msg").show().html('<span style="color:red;"> Please upload mobile banner.</span>').delay(4000)
    .fadeOut(100);;
  return false;  
    }
    
    
//         else if($("#summernote2").val()=='')
//     {
//       $("#err_msg").show().html('<span style="color:red;"> Please enter content.</span>').delay(4000)
//     .fadeOut(100);;
//   return false;  
//     }
    
  else{
      $(".spinner-border").show();
     $.ajax({

                            url: 'allajax.php',
                            type:'POST',
                            data: newdata,
                            contentType: false,
                            cache: false,
                            processData:false,
                          success:function(result2){
                            console.log(result2);
                            if(result2==1){
                           $(".spinner-border").hide();   
                           $("#err_msg").show().html('<span style="color:green;">Banner added successfully.</span>');
                          
                           $("#add_banner_form")[0].reset();
                            }else{
                             $("#err_msg").show().html('<span style="color:red;">Something wrong. Try after sometimes.</span>');   
                            }
                               }
                             });  
    }
         
  
          });    
         });
         
       
         
      </script>
   </body>
</html>