Elep

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Techloyce :: <?php echo $request->app.' - '.$request->source;?></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="{{asset('assets/js/bootstrap.min.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="<?php echo asset('assets/pdfjs/build/pdf.js');?>"></script>
<script src="<?php echo asset('assets/pdfjs/build/pdf.worker.js');?>"></script>
</head>
<body>
<?php
//$data_obj = $response->getData();
$data_obj=$response["data"];
Session::put("app",$request->app);
?>
<div class="container">
  <div id="overlay">
    <div class="loader"></div>
  </div>
  <div class="applications"><img src="<?php echo asset('images/'.$request->source.'.png');?>" width="40%"> <img src="<?php echo asset('images/'.$request->app.'.png');?>" width="45%"> </div>
  <div class="container">
    <div class="col-sm-12 col-xs-12 col-md-12">
      <div id="edtor"></div>
    </div>
  </div>
  <div class="modal fade" id="TemplatesModal" tabindex="-1" role="dialog" aria-labelledby="TemplatesModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title" id="TemplatesModalLabel">Templates</h2>
           
        </div>
        <div class="modal-body col-md-12 col-lg-12 col-xs-12">
          <div class="col-md-12 col-xs-12 col-lg-12  row list-group">
            <div class="col-md-6 col-lg-6 col-xs-6 pull-left"><strong>Name</strong></div>
            <div class="col-md-4 col-lg-4 col-xs-4 pull-left"><strong>Action</strong></div>
          </div>
          
          <div class="col-md-12 col-lg-12 col-xs-12 row list-group">
            <?php
			if($response["status"]==1){
			  $template_list = $data_obj["records"];
			  foreach ($template_list as $template) {
			  //echo '<pre>';  print_r($template);die;
			  ?>
            <div class="col-md-12 col-lg-12 col-xs-12 row">
              <div class="col-md-6 col-lg-6 col-xs-6 pull-left"><?php echo $template->title;?></div>
              <div class="col-md-4 col-lg-4 col-xs-4 pull-left"> <a class="btn template_list" title="{{$template->title}}" template_id="{{$template->template_id}}" href="javascript:void(0);">Select</a>  </div>
            </div>
            <?php }
		  	}else{
				echo '<p>Template not found. Please create Template in your Account!</p>';
			}?>
          </div>
           
        </div>
        <div class="modal-footer"> 
           
        </div>
      </div>
    </div>
  </div>
</div>
<input type="hidden" value="{{route('templateById')}}" id="route_val">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<style type="text/css">
.content-3sfIf {
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
	line-height: 1.2
}
.title-BXzGn {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden
}
.my_row {
	margin: 10px 0px
}
.my_row .content-3sfIf .form-control {
	width: 100% !important
}
#overlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 99999; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
}
.loader {
	position:fixed;
	top: 50%;
	left: 50%;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#row_position div {
	padding-left: 0px !important;
}
#row_position div.my_row .form-control {
	margin-right: 15px !important;
}
#row_position span {
	padding-left: 15px;
}
.signer_roles_h, .signer_roles_item {
	padding-left:0px !important;
}

.applications{display:inline-table;}

</style>
<script>
  $('#TemplatesModal').modal({
    backdrop: 'static',
    keyboard: false
  });
$(".template_list").click(function() {

if($(this).attr('template_id')!=''){
		var template_id = $(this).attr('template_id');
		var doc_name = $(this).attr('doc_name');
		var title = $(this).attr('title');
		let route=$("#route_val").val();

var dataString = 'template_id='+ $(this).attr('template_id')+'&identifier={{$request->identifier}}&id={{\Illuminate\Support\Facades\Session::get('id')}}&module={{\Illuminate\Support\Facades\Session::get('module')}}&zoho_domain={{$request->zoho_domain}}';
		$('#overlay').show();

$.ajax({
		type: "POST",
		url: route,
		data: dataString,
		dataType:"html",
		cache: false,
		success: function(response)
		{

$('#overlay').hide();
			$('#TemplatesModal').modal('hide');
			$('#edtor').html(response);
			$('select').selectpicker();
			$( "#row_position" ).sortable({
				delay: 150,
				stop: function() {
					var selectedData = new Array();
					$('#row_position .my_row').each(function() {
						selectedData.push($(this).attr("id"));
					});
					console.log(selectedData);

$('.order_html').remove();
					selectedData.forEach(function(item,index) {
						$('#sndme').append('<input class="order_html" type="hidden" value="'+ item +'" name="signers['+ index +'][order]" />');
					});
				}
			});
		}, error:function (error) {
		    console.log(error);

}
	});
  }
});

$(document).ready(function(){
	$('#TemplatesModal').modal('show');
	//$('select').selectpicker();
});
</script>
</body>
</html>