@extends('layouts.master')

@section('robots_index')

<meta name="robots" content="index, follow">

@endsection

@section('content')

    

    <section class="postad-section pt-4 pb-4">

        <div class="post-ad-container">

            <h1 class="text-center">{{ optionByKey('publish_for_free') }}</h1>

			<ul class="progressbar">

				<li class="personal active icon-user">

					<strong>{{ optionByKey('insert') }}</strong>

				</li>

				<li class="photo active icon-camera">

					<strong>{{ optionByKey('your_photo') }}</strong>

				</li> 

				<li class="promote icon-thumbs-up">

					<strong>{{ optionByKey('verify') }}</strong>

				</li>                           

				<li class="confirm icon-checkmark">

					<strong>{{ optionByKey('finish') }}</strong>

				</li>

			</ul>

            

			

			 <div class="post-ad-center uploadph">

                

				@if(session('success'))

					<p>{{ session('success') }}</p>

					<p>File uploaded to: <a href="{{ asset(session('path')) }}" target="_blank">{{ session('path') }}</a></p>

				@endif

				<form action="{{ url('post-upload-gallery') }}" method="POST" enctype="multipart/form-data">

					@csrf

					<div class="form-group">

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

					</div>

					<button type="submit" class="common-btn-black searchbtn text-uppar">Upload</button>

				</form>

	

	

            </div>



    </div>

</section>



@endsection



@push('css-styles')



<link rel="stylesheet" href="/static/css/postad.css" type="text/css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">       

<link rel="stylesheet" href="https://cdn.icomoon.io/292057/Sduko-project/style.css?iqroym">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.css"/>    

<link rel="stylesheet" href="/static/css/styleuploader.css">



@endpush



@push('scripts')



<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>        

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.js"></script>



<script src="/static/js/custom-cropper.js"></script>





@if(!empty(Session::get('error_code')) && Session::get('error_code') == 5)

<script>

$(function() {

    $('#ImageErrorPop').modal('show');

});

</script>

@endif







<script>

     

    var fileobj;

    var imagesArr = 0;

    

     

    function file_explorer() {
        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            files = document.getElementById('selectfile').files[0];
            var myImgType = files["type"];
            var validImgTypes = ["image/gif", "image/jpeg", "image/png"];
            if ($.inArray(myImgType, validImgTypes) < 0) {
                $('#ImageErrorPop').show();
                document.body.style.overflow = "hidden";
            } else {
                // alert("Is an image")

            }

			

		

			

            // var geekss = files[0].name;

            // var geekss1 = files[0].name;

            // if(geekss==geekss1){

            //     console.log('yep');

            // }



            var imagesArr = imagesArr + files.length;

	        var count = galleryImagesContainer.querySelectorAll("#img-drag-and-drop > .singleImageCanvasContainer").length;

			

            var count2 = count + count;	

             

			 //console.log(count);

			// console.log(count2);

			 

			 

			if(count2 >= 0){				

				$(".gonow").removeAttr("disabled");                                                                         

			}

			

            

			

            if(count > 10){				 

                $('#ImageErrorPop').show();

                $('#singleImageCanvasContainer'+count).remove();                

                document.body.style.overflow = "hidden";                

            }

			

			setTimeout(function() {

                $('.progress').hide();

                $('.singleImageCanvasContainer').show();

                $('#selectfile').val('');

            }, 1000);

            

        };

    }

     

    $(':file').change(function () {

		var count = galleryImagesContainer.querySelectorAll("#img-drag-and-drop > .singleImageCanvasContainer").length;

		

		console.log(count);

		

        var numimgsel = this.files.length;

		var finalimgcount = numimgsel+count;

		console.log(finalimgcount);

		

        if(finalimgcount > 10){

            $('#ImageErrorPop').show();

        }

		

		if(this.files.length > 1 ){

			$('.img-default-col').addClass('csbox');

		 }else{

			 $('.img-default-col').addClass('sbox');

		 }

    });

    

	$('.gonow').click(function() {

		$(this).addClass('loading');	   

	});





    // Close Modal(Show more image)

    $('.blankbtnc').click(function () {  

        $('#ImageErrorPop').hide();

        $('#Imagesameerror').hide();

        document.body.style.overflow = "visible";

    });   

   

	// Drag and Drop Jquery

	$(document).ready(function () {	

		$( "#img-drag-and-drop" ).disableSelection();

       

	});



	// Add Item Preview Active

	$(document).ready(function () {

        sessionStorage.clear();

		$('#img-drag-and-drop .uploaded-img-col').click(function(){

			$(this).addClass('active');

			$(this).siblings().removeClass('active');

		});

	});

       

    function move() {

        var elems = document.getElementsByClassName('progress')[0];

        elems.style.display = 'flex';

        var elem = document.getElementById("myBar");   

        var width = 20;

        var id = setInterval(frame, 10);

        function frame() {

            if (width >= 100) {

            clearInterval(id);

            } else {

            width++; 

            elem.style.width = width + '%'; 

            elem.innerHTML = width * 1  + '%';

            }

        }        

    }

    

    function move2() {        

        var elems = document.getElementsByClassName('progress')[0];

        elems.style.display = 'flex';

        var elem = document.getElementById("myBar");   

        var width = 20;

        var id = setInterval(frame, 10);

        function frame() {

            if (width >= 100) {

            clearInterval(id);

            } else {

            width++; 

            elem.style.width = width + '%'; 

            elem.innerHTML = width * 1  + '%';

            }

        }        

    }

    

</script>



@endpush