@extends('layout')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>Data User</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">



				<div class="card-body">
					<div class="row">
						@if (!in_array(\Auth::user()->role,[8,9,15, 41, 42, 43]))
							<div class="col-lg-2">
								<a href="{{ route('users.create')}}"><button type="button" class="btn btn-primary rounded-round"><i class="icon-help mr-2"></i> Tambah</button></a>
							</div>
							@if (\Auth::user()->role == 1)
							<div class="col text-right">
								<a data-toggle="modal" data-target="#modal_user_download">
									<button type="button" class="btn btn-success rounded-round" data-popup="tooltip" data-placement="bottom" data-original-title="Download User">
										<i class="icon-file-excel mr-1" title="Download User"></i> Download User
									</button>
								</a>
							</div>
							@endif
						@endif
					</div>
					
					{{-- @if (\Auth::user()->role == 1) --}}
					{{-- @if (\Auth::user()->id == 46) --}}
					{{-- <hr> --}}

					{{-- <form action="{{url('downloaduser')}}" method="POST">
						<div class="row">
								
							@csrf
							<div class="col-lg-2 ml-md-auto">
								<div class="form-control-plaintext">List Member Baru</div>
							</div>
	
							<div class="col-lg-2">
								<select name="sales" class="form-control form-control-select2">
									<option value="semua" selected>Semua</option>
									@foreach($sales as $sale)
										<option value="{{$sale->id}}" {{ app('request')->input('s') == $sale->id ? 'selected' : null }}>{{ $sale->nama }}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="month" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									@foreach(config('custom.bulan') as $key => $value)
										<option value="{{$key}}" {{date('m')==$key? 'selected':''}}>{{$value}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="year" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									@foreach(range(date('Y')-5, date('Y')+5) as $y)
										<option value="{{$y}}" {{date('Y')==$y?'selected':''}}>{{$y}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="self_register" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									<option value="selfregister">Self Register</option>
									
								</select>
							</div>
							
								<div class="col-lg-2" style="text-align: center">
									<button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls">Download Xls <i class="icon-file-spreadsheet"></i></button>
								</div>
							</div>
						</form> --}}
					{{-- @endif --}}

					<hr>
					<div class="row">
						<div class="col">
							<div class="form-check form-check-inline">
								<label class="form-check-label">
									<input id="filteruserresi" type="checkbox" class="form-check-input-styled" {{$filterresi == 1?'checked':''}}>
									Filter User yang sudah punya Resi
								</label>
							</div>
						</div>
					</div>

				</div>


			<input type="hidden" id="hidden_baseurl" value="{{url('')}}">
			<input type="hidden" id="authuser" value="{{\Auth::user()->role}}">
			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th style="display: none">Id</th>
						<th>No</th>
						<th>Foto</th>
						<th>Nama</th>
						<th>Nama Marketing</th>
						{{--<th>Sumber</th>--}}
						<th>Harga Deals</th>
						<th>Shipping Mark</th>
						{{-- @if(!in_array(\Auth::user()->role,[8])) --}}
						@if(in_array(\Auth::user()->id,[19, 46]))
						<th>No HP</th>
						@endif
						<th>Email</th>
						<th>Username</th>
						<th>Role</th>
						<th class="text-center">Status Notifikasi</th>
						<th class="text-center">Agreement</th>
						{{-- @if (in_array(\Auth::user()->role,[8,9])) --}}
						{{-- selain superadmin cina, cs global, invoicing, sales coload --}}
						@if(!in_array(\Auth::user()->role,[2,8,9,15, 41, 42, 43]))
							<th class="text-center">Actions</th>
						@endif
					</tr>
				</thead>
				<tbody>
				
				</tbody>
			</table>
		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

    <!-- Download User modal -->
	<div id="modal_user_download" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h4>Download User</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">

					<h6>Download Member Baru</h6>
					<form action="{{url('downloaduser')}}" method="POST">
					@csrf
						<div class="row">
							<div class="col-lg-2">
								<select name="sales" class="form-control form-control-select2">
									<option value="semua" selected>Semua</option>
									@foreach($sales as $sale)
										<option value="{{$sale->id}}" {{ app('request')->input('s') == $sale->id ? 'selected' : null }}>{{ $sale->nama }}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="month" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									@foreach(config('custom.bulan') as $key => $value)
										<option value="{{$key}}" {{date('m')==$key? 'selected':''}}>{{$value}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="year" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									@foreach(range(date('Y')-5, date('Y')+5) as $y)
										<option value="{{$y}}" {{date('Y')==$y?'selected':''}}>{{$y}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="self_register" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									<option value="selfregister">Self Register</option>
									
								</select>
							</div>
							<div class="col-lg-4 text-right">
								<button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls"> <i class="icon-download"></i></button>
							</div>
						</div>
					</form>
					<hr>
					
					<h6>Download User Jasa Titip Beliin</h6>
					<form action="{{url('downloaduserjastip')}}" method="GET">
						@csrf
						<div class="row">
							<label class="col-form-label col-lg-1">Periode</label>
							<div class="col">
								<input type="text" id="periode_filter" name="periode_filter" class="daterange-picker form-control">
							</div>
							<label class="col-form-label col-lg-1">Coload</label>
							<div class="col">
								<select name="coload_id" id="coload_id" class="form-control">
									<option value="" selected disabled>-- Pilih Coload --</option>
									@foreach ($coloads as $coload)
										<option value="{{$coload->id}}">{{$coload->nama}}</option>
									@endforeach
								</select>
							</div>
							<div class="col text-right">
								 <button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls"> <i class="icon-download"></i></button>
							</div>
						</div>
					</form>

					<hr>
					
					<h6>Download User Jasa Transfer</h6>
					<form action="{{url('downloaduserjasatransfer')}}" method="GET">
						@csrf
						<div class="row">
							<label class="col-form-label col-lg-1">Periode</label>
							<div class="col">
								<input type="text" id="periode_filter" name="periode_filter" class="daterange-picker form-control">
							</div>
							<label class="col-form-label col-lg-1">Coload</label>
							<div class="col">
								<select name="coload_id" id="coload_id" class="form-control">
									<option value="" selected disabled>-- Pilih Coload --</option>
									@foreach ($coloads as $coload)
										<option value="{{$coload->id}}">{{$coload->nama}}</option>
									@endforeach
								</select>
							</div>
							<div class="col text-right">
								 <button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls"> <i class="icon-download"></i></button>
							</div>
						</div>
					</form>

				</div>
			</div>
		</div>
	</div>
	<!-- /default modal -->


    <!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
				    @csrf
				    @method('DELETE')
					<div class="modal-body" align="center">
						<h2> Hapus Data? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-danger">Hapus</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<div id="modal_theme_agreement" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
				    @csrf
				    @method('DELETE')
					<div class="modal-body" align="center">
						<h2> Detail Agreement </h2>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Ip Address</label>
							<div class="col-lg-10" id="det-ip">

							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">User Agent</label>
							<div class="col-lg-10" id="det-ua">

							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Time</label>
							<div class="col-lg-10" id="det-time">

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

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>

@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

	<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
    
	<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/switch.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
	<script>

		$(document).on('change','#filteruserresi', function() {
			var filterresi = $('#filteruserresi').is(':checked')?1:0
			// console.log(filterresi)
			window.location = "{{url('users?filterresi=')}}"+filterresi;
		})

		let role = {!! json_encode(config('custom.role')) !!};
		let status_notifikasi = {!! json_encode(config('custom.status_notifikasi')) !!};
		let status_notifikasi_color = {!! json_encode(config('custom.status_notifikasi_color')) !!};

		// $(".kelaslightbox").fancybox();
		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		$(document).on("click", ".detbutton", function () {
		     var ip = $(this).data('ip');
		     var ua = $(this).data('ua');
		     var time = $(this).data('time');
		     $("#det-ip").html(ip);
		     $("#det-ua").html(ua);
		     $("#det-time").html(time);
		});

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{
		                orderable: false,
		                width: 200,
		                // targets: [ 1,9,10 ]
		            }],
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable({
                    processing: true,
					serverSide: true,
					order: [[0, 'desc']],
					aoColumnDefs: [
						{
						"bSearchable": false,
						"bVisible": false,
						"aTargets": [0]
						}
					],
                    // ajax: "{{route('user-datatable')}}",
                    ajax: {
						"url":"{{route('user-datatable')}}",
						"data": {
							"filterresi" : $('#filteruserresi').is(':checked')?1:0
						}
					},
                    columns:[
						{data:'id', name:'id'},
						{data:'DT_RowIndex', name:'no'},
                        {data: null, name:'gambar', render: function( data, type, row ){
							let html = ''
							let alamatbase = $('#hidden_baseurl').val()
							if(data.gambar){
								html += '<a href="'+data.gambar+'" id="datalightbox" class="kelaslightbox" data-popup="lightbox">'
								html += '<img src="'+data.gambar+'" class="img-preview rounded-round mr-2" width="100" height="100" style="object-fit: cover">'
								html += '</a>'

								return html;
							} else {
								html += '<a href="'+alamatbase+'/global_assets/images/user-default.png" class="kelaslightbox" data-popup="lightbox">'
								html += '<img src="'+alamatbase+'/global_assets/images/user-default.png" class="img-preview rounded-round mr-2" width="100" height="100" style="object-fit: cover">'
								html += '</a>'
								return html;
							}
						}},
						{data:'nama', name:'nama'},
						{data:null, name:'sales.nama', render: function (data, type, row ){
							if (data.sales) {
								return data.sales.nama
							} else {
								return '-'
							}
						}},
						{data:null, name:'harga_deals', render: function (data, type, row ){
							if (data.harga_deals) {
								// let html = ""
								// html += ""+data.harga_deals+""
								var text = data.harga_deals
								var decoded = $('<div/>').html(text).text();
								
								return decoded;
							} else {
								return '-'
							}
						}},
						{data:null, name:'shipping_mark', render: function (data, type, row ){
							if (data.shipping_mark) {
								return data.shipping_mark
							} else {
								return '-'
							}
						}},
						@if(in_array(\Auth::user()->id,[19, 46]))
						{data:null, name:'telp', render: function (data, type, row ){
							if (data.telp) {
								// console.log(data.telp[0])
								if (data.telp[0] == 0) {
									let telp = data.telp
									let convert_telp = telp.substring(1)
									// console.log(convert_telp)
									var tambah62 = '62'+convert_telp
									sub = tambah62.substring(0, tambah62.length - 3);
									// hello == "Hello, Wo"
									sub = sub + "xxx";
									// hello == "Hello, Wo****"
									@if(\Auth::user()->role == 1)
									return tambah62
									@else
									return sub
									@endif
								} else {
									var telp = data.telp
									sub = telp.substring(0, telp.length - 3);
									// hello == "Hello, Wo"
									sub = sub + "xxx";
									// hello == "Hello, Wo****"
									@if(\Auth::user()->role == 1)
									return data.telp
									@else
									return sub
									@endif
								}
								
							} else {
								return '-'
							}
						}},
						@endif
						
						{data:null, name:'email', render: function (data, type, row ){
							if (data.email) {
								return data.email
							} else {
								return '-'
							}
						}},
						{data:null, name:'username', render: function (data, type, row ){
							if (data.username) {
								return data.username
							} else {
								return '-'
							}
						}},
						{data:null, name:'role', render: function (data, type, row ){
							console.log(data.role)
							html = ''
							if (data.role !== undefined) {
								html += role[data.role]
							} else {
								html += '-'
							}

							return html
						}},
						{data:null, name:'status_notifikasi', render: function (data, type, row ){
							let html = ''
							if(data.status_notifikasi) {
								let statcolor = status_notifikasi_color[data.status_notifikasi]
								let statnotifikasi = status_notifikasi[data.status_notifikasi]
								html += '<b class="'+statcolor+'">'+statnotifikasi+'</b>'
							} else {
								html += '-'
							}

							if(data.role == 99) {
								html += '<form action="{{url("resendnotifuser")}}" method="post">'
								html += '@csrf'
								html += '<input type="hidden" name="id_user" value="'+data.id+'">'
								html += '<button type="submit" class="btn btn-success btn-sm py-0">Kirim Ulang</button>'
								html += '</form>'
							}

							return html
						}},
						{data: null, render: function ( data, type, row ) {
							let statcolor = status_notifikasi_color[data.status_notifikasi]
							let statnotifikasiagreement = status_notifikasi[data.status_notifikasi_agreement]

							var html = ''
				            if(data.role == 99) {
								if (data.agreement) {
									if(data.agreement.token) {

										if(data.status_notifikasi_agreement == null) {
											html += '-'
										} else {
											html += '<b class="'+statcolor+'">'+statnotifikasiagreement+'</b>'
										}

										if(data.agreement.status == 0) {
											let baseurl = ''
											if (data.coload.id == 2) {
												baseurl = 'https://mte.co.id'
											}
											//  else {
											// jika coload antara / coload gudang cina
											if (data.coload.id == 1 || data.coload.id == 4) {
												baseurl = 'https://antaralogistic.com'
											}

											let link_copy = baseurl+'/useragreement?t='+ data.agreement.token
											html += '<button id="copyclip" class="btn btn-block btn-sm btn-info text-white mb-2" data-popup="tooltip" data-original-title="Copy to Clipboard" data-copytext="'+link_copy+'" onclick="copyclip(this)">Copy Url Agreement <i class="icon-copy3"></i></button>'
											html += "<form action='{{url('resend-url-agreement')}}' method='post'>"
											html += '@csrf'
											html += '<input type="hidden" name="id_user" value="'+data.id+'">'
											html += '<input type="hidden" name="url_agreement" value="'+link_copy+'">'
											html += '<button type="submit" class="btn btn-block btn-sm btn-success text-white">Resend URL Agreement <i class="icon-copy3"></i></button>'
											html += '</form>'
										} else {

											// let datetime = {{date('d/m/Y H:i:s', strtotime(@$user->agreement->agree_time))}}
											let datetime = data.agreement.agree_time
											console.log(datetime)
											html += '<button data-toggle="modal" data-target="#modal_theme_agreement" data-ip="'+data.agreement.ip_address+'" data-ua="'+data.agreement.user_agent+'" data-time="'+datetime+'" data-popup="tooltip" class="detbutton btn btn-sm btn-success text-white">'	
											
											html += 'Detail Agreement <i class="icon-checkmark-circle"></i>'
											html += '</button>'
										}
									} else {
										html += "<form action='{{url('createagreementurl')}}'' method='post'>"
										html += '@csrf'
										html +=	'<input type="hidden" name="user_id" value="'+data.id+'">'
										html +=	'<button type="submit" class="btn btn-warning btn-sm py-0">Buat Url Agreement</button>'
										html += '</form>'
									}
										
								} else {
										html += "<form action='{{url('createagreementurl')}}'' method='post'>"
										html += '@csrf'
										html +=	'<input type="hidden" name="user_id" value="'+data.id+'">'
										html +=	'<button type="submit" class="btn btn-warning btn-sm py-0">Buat Url Agreement</button>'
										html += '</form>'
									}
							} else {
								html += '-'
							}
							
							return html;
				        }}
						// selain superadmin cina, cs global, invoicing, sales coload
						@if(!in_array(\Auth::user()->role,[2,8,9,15, 41, 42, 43]))
						,
						{data: null, render: function ( data, type, row ) {
							var html = ''
				            var roleauthuser = $('#authuser').val()
							let id_user = data.id
							
							if ((data.role == 20 || data.role == 21) && data.status == 1) {
							html += `<a href="{{ url('users')}}/${id_user}"><button type="button" class="btn btn-warning btn-icon" data-popup="tooltip" data-placement="bottom" data-original-title="Deactivate"><i class="icon-user-cancel" title="Deactivate"></i></button></a>`
							}
							
							html += `<a href="{{ url('users')}}/${id_user}/edit"><button type="button" class="btn btn-primary btn-icon" data-popup="tooltip" data-placement="bottom" data-original-title="Edit User"><i class="icon-pencil7" title="Ubah"></i></button></a>`
							
							if (roleauthuser == 1) {
							html +=	`<a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ url('users')}}/${id_user}"><button type="button" class="btn btn-danger btn-icon" data-popup="tooltip" data-placement="bottom" data-original-title="Delete"><i class="icon-x" title="Hapus"></i></button></a>`
							}
							
							return html;
				        }}
						@endif
					],

					"fnDrawCallback": function () {
						$(".kelaslightbox").fancybox();
					}
                });

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">

		$('.daterange-picker').daterangepicker({
			applyClass: 'btn-primary',
			cancelClass: 'btn-light',

			locale: {
			format: 'YYYY/MM/DD'
			}
		});

		$( document ).ready(function() {
			
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

		});

		function copyclip(e) {
				var copied = $(e).data('copytext')

				var textArea = document.createElement( "textarea" );
				textArea.value = copied;
				document.body.appendChild( textArea );
				textArea.select();

				try {
					var successful = document.execCommand( 'copy' );
					var msg = successful ? 'successful' : 'unsuccessful';
				} catch (err) {
					console.log('Oops, unable to copy',err);
				}
				document.body.removeChild( textArea );

				new PNotify({
					title: msg,
					text: 'Copying text command was ' + msg,
					icon: 'icon-checkmark3',
					type: 'success'
				});
		}
	</script>
@endsection