<!-- Main Content -->

<div class="page-wrapper">

    <div class="container-fluid pt-25">

    	<div class="row">

    		<div class="col-md-12">

    			<div class="alert alert-success alert-dismissible" role="alert" <?php if($this->session->flashdata('message')==''){ ?> style="display:none" <?php } ?> >

          			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

          			<?php echo $this->session->flashdata('message'); ?>

        		</div>

    		</div>

    	</div>

		<!-- Row -->

		<div class="row">

			<div class="col-sm-12">

				<div class="panel panel-default card-view">

					<div class="panel-heading">

						<div class="pull-left">

							<h6 class="panel-title txt-dark">Slider List ( Slider Image Size Must be 1000x 625 px )</h6>

						</div>
						<span class="pull-right">
							<button class="btn btn-info btn-anim pull-right" data-toggle="modal" data-target="#exampleModal" style="background:#E34A27; border-color:#E34A27;"><i class="icon-rocket"></i><span class="btn-text">Add Slider</span></button>
                        </span>

						<div class="clearfix"></div>

					</div>

					<div class="panel-wrapper collapse in">

						<div class="panel-body">

							<div class="table-wrap">

								<div class="table-responsive">

									<table id="datable_1" class="table table-hover table-bordered display  pb-30" >

										<thead>

							                <tr>

							                  <th>SR.No.</th>

							                  <th>Image</th>

							                  <th>Title</th>
							                  <th>Link</th>
                                              <!-- <th>Type</th> -->

							                  <th>Action</th>

							                </tr>

							            </thead>



							            <tbody class="tbody">

							                <?php if(!empty($slider)){ foreach ($slider as $key => $value): ?>

							                <tr id="<?php echo "slider_".$value['id']; ?>" class="orderby" data-order="<?php echo $value['id']; ?>">

							                  <td><?php echo $key+1; ?></td>

							                  <td><img src="<?php echo base_url($value['image']); ?>" style="width:100px;"> </td>

							                  <td><?php echo $value['title']; ?></td>
							                  <td><?php echo $value['url']; ?></td>
                                              <!-- <td><?php //echo $value['type']; ?></td> -->
							                  <td>
							                    <a href="<?php echo base_url(A.'/edit-slider/'.$value['id']); ?>" class="btn btn-primary btn-sm btn-square"><i class="fa fa-edit fa-lg"></i></a>
							                    <a href="javascript:void(0)" class="btn btn-danger btn-sm btn-square slider_delete" data-table="slider" data-id="<?php echo $value['id']; ?>" data-image="<?php echo $value['image']; ?>"><i class="fa fa-trash-o fa-lg"></i></a>

							                  </td>

							                </tr>

							                <?php endforeach; } ?>

							            </tbody>

									</table>

								</div>

							</div>

						</div>

					</div>

				</div>	

			</div>

		</div>

		<!-- /Row -->

	</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <form method="post" action="<?php echo base_url(A."/uploadSliderImage"); ?>" id="uploadBannerForm" enctype="multipart/form-data">
                <input type="hidden" name="rurl" value="<?php echo uri_string(); ?>" />
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                    </button>

                    <h4 class="modal-title" id="exampleModalLabel">Upload Slider Image</h4>

                </div>

                <div class="modal-body">
                    <h6 class="panel-title txt-dark"></h6>

                    <div class="form-group">

                        <label for="recipient-name" class="form-control-label">Image:</label>

                        <input type="file" class="form-control" name="image" id="upload1">

                        <div id="error"></div>

                    </div>

                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" placeholder="Enter Title" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label>Sub Title</label>
                        <textarea name="subtitle" placeholder="Enter Sub Title" class="form-control tinymce"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Link</label>
                        <input type="text" name="url" placeholder="Enter Link" class="form-control" />
                    </div>

                    <!-- <div class="form-group">
                        <label>Type</label>
                        <select class="form-control" name="type">
                            <option value="slider">Slider</option>
                            <option value="middle_slider">Middle Slider</option>
                            <option value="bottom_slider">Bottom Slider</option>
                        </select>
                    </div> -->

                </div>

                <div class="modal-footer">

                    <button type="submit" id="upload_button" name="addbanner" class="btn btn-primary">Save Image</button>

                </div>

            </form>

        </div>

    </div>

</div>

<script type="text/javascript">

	var site_url = "<?php echo base_url(); ?>";

	var urlLink = "<?php echo A; ?>";

	$("#upload").on("change",function(){

        var fileUpload = $("#upload")[0];

        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");

        if (regex.test(fileUpload.value.toLowerCase())) {

            if (typeof (fileUpload.files) != "undefined") {

                var reader = new FileReader();

                reader.readAsDataURL(fileUpload.files[0]);

                reader.onload = function (e) {

                    var image = new Image();

                    image.src = e.target.result;

                    image.onload = function () {

                        var height = this.height;

                        var width = this.width;

                        //alert(height+" "+width);

                        if (height < 550 || width < 1600) {

                            //alert("File size must be (1600*499).");

                            $("#error").html('<p style="color:red;">File size must be (1600*550).</p>');

                            $("#upload_button").prop("disabled",true);

                            status = "0";

                            $("#status").attr("value","0");

                            return false;

                        }else{

                            //alert("Uploaded image has valid Height and Width.");

                            $("#error").html('<p style="color:green;">Uploaded image has valid Height and Width.</p>');

                            $("#upload_button").prop("disabled",false);

                            status = "1";

                            $("#status").attr("value","1");

                            return true;

                        }

                    };

                }

            }
             else {

                //alert("This browser does not support HTML5.");

                $("#error").html('<p style="color:red;">This browser does not support HTML5.</p>');

                $("#upload_button").prop("disabled",true);

                status = "0";

                $("#status").attr("value","0");

                return false;

            }

        } else {

            //alert("Please select a valid Image file.");

            $("#error").html('<p style="color:red;">Please select a valid Image file.</p>');

            $("#upload_button").prop("disabled",true);

            status = "0";

            $("#status").attr("value","0");

            return false;

        }

    });


    $(".slider_delete").on("click",function(){

	    var id = $(this).attr('data-id');

	    var image = $(this).attr('data-image');
	    var table = $(this).attr('data-table');

	    var ok = confirm("Are you sure to Delete this Slider Image?");

	    if (ok) {

	        $.ajax({

	            url: site_url+urlLink+'/deleteSlider',

	            type:'POST',

	            data:'id='+id+'&image='+image+'&table='+table,

	            success: function(data){

	                if(data==1)

	                {

	                    location.reload();

	                }

	            },

	        });

	    }

	});
</script>
<script>
    $(function() {
      $('.tbody').sortable({
        delay: 150,
        stop: function() {
          var div = [];
          $('.orderby').each(function() {
            var id = $(this).attr('data-order');
            if(id!='undefined'){
              div.push(id);
            }
          });
            var site_url = '<?php echo base_url(); ?>';
            $.ajax({
              url: site_url+urlLink+"/updateListItemOrder",
              type: "POST",
              dataType:"json",
              data: "div="+div+'&table=slider',
              success: function(result){
                
              }
            });
        }
      });
    });
</script>