@extends('admin_template')
@section('content')
<section>
	<div class="container">
		<div class="row mt-4">
			<div class="col-md-12">
				{{ status_error(); }}
			</div>
		</div>
		<div class="row">
			<div class="col-md-7">
				<div class="row mb-3">
						  <div class="col">
						  	<a href="" data-bs-toggle="modal" data-bs-target="#event-badge" class="w-100 btn btn-primary" title="Add Badge">{{ isset($mode) && $mode == 'insert' ? 'Add New' : 'Update' }}  Badge Image</a>
						  </div>
						  <div class="col">
						  	<a class="btn btn-success w-100" title="Add Badge" onclick="preview()">Preview Badge</a>
						  </div>
				</div>
				<form action="{{isset($badgetempmode) && $badgetempmode == 'update' ? 'badge_template_update' : 'badge_template_save'}}" method="post" class="form">
						@csrf
						<input type="hidden" value="{{ @$_GET['event_id'] }}" name="event_id">
						<input type="hidden" value="{{ @$_GET['event_key'] }}" name="event_key">
						<div class="row mb-2">
						  <div class="col">
						    <label for="width">Badge Width (in mm)</label>
                <input type="text" class="form-control" id="width" name="data[width]" value="{{ isset($badge['width']) ? $badge['width'] : '' }}" required>
						  </div>
						  <div class="col">
						  	<label for="height">Badge Height (in mm)</label>
                <input type="text" class="form-control" id="height" name="data[height]" value="{{ isset($badge['height']) ? $badge['height'] : '' }}" required>
						  </div>
						</div>
						<div class="row mb-2">
						  <div class="col">
						  	<label class="label">Orientation:</label> &emsp;
								<select id="orientation" name="data[orientation]" class="form-select" style="margin-right: 10px;">
									<option value="">select</option>						           
									<option value="landscape" >Landscape</option>
									<option value="portrait" >Portrait</option>
							  </select>
						  </div>
						  <div class="col">
						    <label class="label">Paper Type:</label> &emsp;
								<select id="paper_type" name="data[paper_type]" class="form-select" style="margin-right: 10px;">
									<option value="">select</option>						           
									<option value="1" >Paper</option>
									<option value="2" >PVC</option>
							   </select>
						  </div>
						</div>
						<div class="row mb-2">
						  <div class="col">
						    <label class="label">Font:</label> &emsp;
								<input type="text" id="font" name="data[font]" value="{{ isset($badge['font']) ? $badge['font'] : '' }}" class="form-control" />
						  </div>
						  <div class="col">
						    <label class="label">Top:</label> &emsp;
								<input type="number" id="badgeTop" name="data[margintop]" value="{{ isset($badge['margintop']) ? $badge['margintop'] : 0 }}" class="form-control" />
						  </div>
						</div>
						<div class="row mb-2 mt-2 row-cols-2">
						  <div class="col d-flex">
						    <select name="select" id="htmlArea2" class="form-select" style="margin-right: 10px;">
									<option value="">select</option>
									<option value="name">Name</option>
									<option value="company">Company</option>
									<option value="designation">Designation</option>
									<option value="unique_key">Unique Key</option>
									<option value="qrcodes">QR Code</option>
									<option value="color_name">Color Name</option>
							  </select>
							  <a onclick="InsertHTML()" class="btn btn-info w-25"> Insert </a>
						  </div>
						  <div class="col">
						    <a onclick="print()" class="btn btn-warning p-2 w-100">Test Print</a>
						  </div>
						</div>
						<div class="row">
							<div class="col">
								<textarea name="data[badgelayout]" id="layout" class="form-control">{{ isset($badge['badgelayout']) ? $badge['badgelayout'] : '' }}</textarea>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<input type="submit" value="Save Template" class="btn btn-success text-end float-end">
							</div>
						</div>
				</form>
			</div>
			<div class="col-md-5">
								<div id="wrapper" style="border:1px solid;position: absolute;">
					<div id="dummybadge">
					</div>
				</div>
							</div>
		</div>
	</div>
</section>

<div class="modal fade" id="event-badge" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bgcolor1">
        <h5 class="modal-title" id="exampleModalLabel">Add Badge for Event : {{$event['name']}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form class="row form" id="badgeform" action="{{isset($mode) && $mode == 'update' ? 'badge_upload-update' : 'badge_upload-insert'}}" method="post" enctype= "multipart/form-data">
            @csrf
            <input type="hidden" name="event_id" value="{{ @$_GET['event_id'];  }}">
            <input type="hidden" name="event_key" value="{{ @$_GET['event_key'];  }}">

            <input type="hidden" name="data[event_id]" value="{{ $event['id'] }}">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="checkpoint_name">Image</label>
                        <input type="file" class="form-control" id="file" name="file" required>
                    </div>
                </div>
            </div>
            <div class="row pb-2 mx-2">
                <div class="col-sm-12 text-end">
                    <button type="submit" class="btn btn-primary px-4">{{isset($mode) && $mode == 'update' ? 'Update' : 'Save'}}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script src="https://neonichesolutions.co.in/onsite/assets/js/jquery.validate.min.js"></script>
<script src="{{ asset('assets/ckeditor/ckeditor.js') }}"></script>
<script>
    CKEDITOR.replace( 'layout' );

    function InsertHTML() {
		  var editor = CKEDITOR.instances.layout;
		  var value = document.getElementById( 'htmlArea2' ).value;
		  if(value === 'qrcodes')
		  {
		  	var qr = '{{ DUMMYQR }}';
		  	var ins = '<img id="badgeqrcode" src="'+qr+'">';
		  }
		  else
		  {
		  	var ins = '['+value+']';
		  }

		  if ( editor.mode == 'wysiwyg' ){
		      editor.insertHtml( ins );
		  }
		  else{
		      alert( 'You must be in WYSIWYG mode!' );
		  }
		}

		function preview()
		{
			var layout = CKEDITOR.instances.layout.getData();
			$('#dummybadge').html(layout);
		}

		function print(){
			var divToPrint=document.getElementById('wrapper');

			  var newWin=window.open('','Print-Window');

			  newWin.document.open();

			  newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

			  newWin.document.close();

			  setTimeout(function(){newWin.close();},10);
		}

		$(document).ready(function(){
	    $('#badgeTop').change(function(){
				$('#dummybadge').css('margin-top', $(this).val()+'px');
			});
		});
</script>
@endsection