@extends('layouts.master2')

@section('title',  $pageTitle)

@section('page_styles')
<link href="{{ asset('css/web-templates.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('page_scripts')
<script src="{{ asset('themes/default/js/select2.full.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('themes/default/js/select2.js') }}" type="text/javascript"></script>
<script>

	

	$(document).ready(function() {
        $("a#help-article").css("display", "block");
        $("a#help-article").attr("href", "https://docs.mumara.com/campaigns/setup/web-forms#form-templates");

        var tid = localStorage.getItem("template_id");

		$(".choose-template").click(function() {
			var id =$(this).attr("data-id");
			//window.localStorage.setItem('template_id', id);
			window.location = "{{ url('/form/add') }}/"+id;
		});
		$("#open_blank").click(function() {
			var id =$(this).attr("data-id");
			///window.localStorage.setItem('template_id', id);
			//window.location = "{{route('form.create')}}";
                        window.location = "{{ url('/form/add') }}/"+id;
		});
		$("#close-popup").click(function() {
			$(".popupImgBlk").removeClass("show").addClass("hide");
		});
		$(".viewImage").click(function() {
			var image =$(this).attr("data-image");
			$("#tempImg").attr("src", image)
			$(".blockUI").show();
			setTimeout(() => {
				$(".popupImgBlk").removeClass("hide").addClass("show");
				$(".blockUI").hide();
			}, 500);
			
		});

		$(".m-select2").select2();

		$("#search").on("keyup", function() {
			var q =$('#search').val().toLowerCase();
			if(!q){
				$('.custom-templates').css("display","flex");
			}else if( q){
				$('.custom-templates').each(function() {
		      	var name=$(this).data('name').toLowerCase();
                        
		        if(name.indexOf(q) > -1){
		        	$(this).css("display","flex");
		        }else{
		        	$(this).css("display","none");
		        }

		      });
			}
		});
	});
	
	
</script>
@endsection


@section('content')

<div class="popupImgBlk hide">
	<div class="flaticon2-cross text-link" id="close-popup"></div>
	<div class="pic">
		<img id="tempImg" src="{{ asset('img/url.jpg') }}" >
	</div>
</div>

<div id="no-template">
	<div class="row">
		<div class="col-md-12">
			<div class="no-template-block">
				<div class="no-template">
					<i class="flaticon2-browser-2"></i>
					<span class="no-temp-content">{{trans('webform.form.alert_message.no_template_added')}} </span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="kt-portlet kt-portlet--height-fluid">
			<div class="kt-portlet__body overflow-x-hidden">
				<div class="row align-items-center">
					<div class="col-md-10 offset-md-1">

						<div class="filter-section row">
							<div class="form-group col-md-3">
								<label class="control-label">{{trans('webform.template.form.label.search_template')}}</label>
								<input type="text" name="search" id="search" placeholder="{{ trans('webform.template.form.label.search_template') }}" class="form-control" />
							</div>
						</div>

						<div class="row align-items-center" id="all-templates">

                            <div class="col-md-6" key="templates-0" id="blank-template">
                                <div class="cbBlk blank">
                                    <div class="blankImage"><i class="flaticon2-browser-2"></i></div>
                                    <div class="cbMenuBlk"><button id="open_blank" class="btn btn-primary" data-id="0" data-name="Blank" >{{trans('webform.template.add.button.blank_template')}} </button></div>
                                    <div class="template-data">
                                        <div class="tmp-name badge badge-success">{{trans('webform.template.add.button.blank_template')}} </div>
                                    </div>
                                </div>
                            </div>
                            @foreach($templatesData as $templatesRow)