@extends('layouts.master')



@section('content')


    <div class="container">

	{!! Html::form('POST', '/c/post-insert-gallery/'.$insert_key)->attributes(['id' => 'msform', 'class' => 'msform','autocomplete'=>'off'])->open() !!}

	<input type="hidden" name="insert_key" value="{{$insert_key}}">

	<input type="hidden" name="insert_id" value="{{$profile_id}}">

	

	

	

	

        <hr class="my-2 bg-transparent border-0">

		<div class="row">
            <div class="col-md-12">
                <div class="progressbar-wrapper position-relative">
                    <ul id="progressbar">
                        <li class="active" id="personal"></li>
                        <li id="photo" class="active"></li>
                        <li id="promote" class=""></li>
                    </ul>
                    <div class="total-progressbar">
                        2/3
                    </div>
                </div>
            </div>

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

                <h1 class="main-title home">{{ optionByKey('post_photo') }}</h1>

            </div>

           
        

	

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

                <a class="small fw-bold" href="{{ url('/c/post-update/'.$profile->insert_key) }}">

                    <span class="icon-edit me-2"></span>

                    {{ optionByKey('edit_profile_show') }}

                </a>

                <div class="card bg-light border ">                                   

                    <div class="card-body rounded-3">

                        <h5 class="small">{{ optionByKey('title') }} : <strong>{{ $profile->title }} </strong></h5>

                        <h5 class="small">{{ optionByKey('text') }} : <strong>{!! substr($profile->description,0,200) !!}</strong></h5>

                        <h5 class="detailtag small text-uppercase">

                                <b><i class="icon-user-svgrepo-com-1 me-1"></i>{!! $profile->age; !!} {!! optionByKey('listing_years') !!} </b> | 

                                {{ $profile->catName->name }} | 

                                <i class="icon-location me-1"></i><b><span translate="no" class="notranslate">{{$profile->cityName->name}}</span></b>

                        </h5>

                    </div>

                </div>

            </div>


            <div class="col-md-12 text-start mt-4">

                <h1 class="main-title home fs-4">{{ optionByKey('your_photo') }}</h1>

            </div>

              
            <div class="col-md-12  mt-3 mb-2">
                <div class="row g-0">
                    <div class="col-md-1 upload-photo-allow position-relative">
                        <label for="uploadallow" class="switch switch-left-right temers">
                            <input id="uploadallow" type="checkbox" name="uploadallow" class="switch-input form-control">
                            <span data-on="{{ optionByKey('yes_btn')}}" data-off="{{ optionByKey('no_btn')}}" class="switch-label"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                    <div class="col-md-11 txt_privacy pe-md-3 d-flex align-items-center">
                        {!! optionByKey('photo_permission') !!}
                    </div>
                </div>
            </div>

            <div class="col-md-12 mb-5 post-ad-center uploadph">               



                <div class="outeruploadbox bg-light border rounded-3">

                    {!! optionByKey('drag_drop_picture') !!}    

                    <div class="up-img-row upload-photo-hidden" id="img-drag-and-drop">	

                        <div class="progress multipleimg img-default-outd" id="pro">

                            <div id="myBar" class="progress-bar" style="width:0%">0%</div>

                        </div>

                        <div class="img-default-col cff removebox boxdisabled" id="removebox">
                            <a class="d-flex w-100 h-100 align-items-center" href="javascript:;" onclick="file_explorer();" style="text-decoration: none;"> 
                                <div class="img-v-center" id="drop_file_zone" ondragover="return false">

                                    <input class="upload-input" type="file" style="display:none;" id="selectfile" name="image[]" multiple="" accept="image/gif, image/jpeg, image/png">                           

                                    {!! optionByKey('images_content') !!}

                                    

                                        <i class="icon-camera"></i>

                                    

                                    <p class="img-drag-drop small">{!! optionByKey('images_placeholder') !!}</p>

                                </div>
                            </a>
                        </div>

                    </div>

                                    

                    <div class="panel-heading text-center">

                        <p class="small mb-3">{!! optionByKey('If_you_dont_choose') !!}</p>

                        <div class="alert alert-info text-sm mb-0 text-start d-flex align-items-center">

                            

                                <span class="icon-info-circle me-2 fs-4"></span>

                                <span>{!! optionByKey('only_one_picture') !!}</span>

                            

                        </div>

                    </div>



                </div>



            </div>

    

            <input type="hidden" name="base_img_data" id="profile_img_data">

        
        

            <div class="modal modalbox" id="modalbox" tabindex="-1" aria-labelledby="modalboxModalLabel" aria-hidden="true">  

                <div class="modal-dialog modal-lg modal-dialog-centered">

                    <div class="modal-content">

                        <div class="modal-header">

                            <h5 class="modal-title">{{ optionByKey('post_crop') }}</h5>

                            <button type="button" data-bs-dismiss="modal" aria-label="Fechar" class="close">×</button>

                        </div>

                        <div class="modal-body">

                            <div id="cropper">

                                <canvas id="cropperImg" width="0" height="0"></canvas>                        

                            </div>

                        </div>

                        <div class="slidrotbx">

                            <div class="sliderwrap">

                                <a href="javascript:void(0);" id="zoom-out" class="incrbtn"><i class="icon-minus"></i></a>

                                <div id="slider" class="ep-slider-bar"></div>

                                <a href="javascript:void(0);" class="decrbtn" id="zoom-in"><i class="icon-plus"></i></a>

                            </div>

                            <div class="rotatebtn">

                                <button type="button" class="" id="rotateLeft">

                                    <span class="docs-tooltip">

                                        {{ optionByKey('post_rotate') }} <i class="icon-rotate-left"></i>

                                    </span>

                                </button>

                            </div>

                        </div>

                        <div class="modal-footer">                        

                        <div class="btngrpcrop">                       

                            <button data-bs-dismiss="modal" aria-label="Fechar" class="btn btn-outline-primary d-block cropImageBtn me-2 mt-0 mb-0"  id="modalClose" type="button"> {{ optionByKey('post_cancel') }}</button>

                            <button data-bs-dismiss="modal" aria-label="Salvar" class="mt-0 mb-0 btn btn-primary btn-block w-100 cropImageBtn" id="cropImageBtn" type="button">{{ optionByKey('post_save') }}</button>

                        </div>

                        </div>

                    </div>

                </div>

            </div>

            

            <div class="col-12 col-md-6  ms-auto gonow-row gall-pg-btn">					

                <input type="submit" class="btn btn-primary btn-block w-100 gonow" name="continue" value="{!!optionByKey('submit_button') !!}">

            </div>
   

	

	    {!! Html::form()->close() !!}

    

        
	</div>

    
    <div class="row">
        <div class="col-md-12 mt-5">

            @include('includes.need_help')   
    
        </div>
    </div>
    
</main>



	

	

<div class="modal errormmcl" id="ImageErrorPop" tabindex="-1" aria-labelledby="ImageErrorPopModalLabel">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            {!! optionByKey('post_image_error') !!}			

        </div>
    </div>
</div>	


<!-- Image Too Small Error Modal -->
<div class="modal" id="ImageSizeErrorPop" tabindex="-1" aria-labelledby="ImageSizeErrorPopLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ImageSizeErrorPopLabel">Image Too Small</h5>       
      </div>
      <div class="modal-body">
        Please upload an image at least <strong>400x400</strong> in size.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>


<!-- Image Too Large Error Modal -->
<div class="modal" id="ImageMaxWidthErrorPop" tabindex="-1" aria-labelledby="ImageMaxWidthErrorPopLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ImageMaxWidthErrorPopLabel">Image Too Large</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Please upload an image with a maximum width of <strong>1400 Width</strong>.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>




 <div class="modal errormmcl" id="Imagesameerror" tabindex="-1" aria-labelledby="ImagesameerrorModalLabel">  
  <div class="modal-dialog modal-dialog-centered">
	<div class="modal-content"> 


		{!! optionByKey('post_image_same_error') !!}

		

	</div>
  </div>
</div>

 

	

@endsection



@push('css-styles')



<link rel="stylesheet" href="/static/css/dashboard.css?v={{time()}}">
<link rel="stylesheet" href="/static/css/upload-photo.css?v={{time()}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.0/cropper.css"/>

@endpush



@push('append-js')

<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/cropperjs/1.4.0/cropper.js"></script>
<script src="/static/js/custom-cropper.js?v={{time()}}"></script>

@endpush



@push('scripts')







@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";
                return;
            } 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  + '%';
            }
        } 
    }

    

    $(".removebox").addClass("boxdisabled");
    $("#uploadallow").on('change', function () {
        if ($(this).prop('checked')) {
            $(".removebox").removeClass("boxdisabled");
        } else {
            $(".removebox").addClass("boxdisabled");
        }
    });
	

</script>



@endpush