@extends('admin_template')
@section('content')
<section style="margin-top:85px;">
<div class="container">
	<div class="row mt-4">
		<div class="col-md-12">
			{{ status_error(); }}
		</div>
		<div class="col-md-6">
			<div class="row">
				<div class="col-md-12 text-end mb-3">
					<div class="row justify-content-end">	
						<a class="btn btn-success col-6" title="Add Badge" onclick="preview()">Preview Badge</a>
					</div>
					
					
					<form action="{{isset($badgetempmode) && $badgetempmode == 'update' ? 'badge_template_update' : 'badge_template_save'}}" method="post" class="form row mt-2">
						@csrf
						<input type="hidden" value="{{ @$_GET['event_id'] }}" name="event_id">
						<input type="hidden" value="{{ @$_GET['event_key'] }}" name="event_key">
						<div class="col-md-6 mb-3">
							<div class="d-flex">
								<select name="select" id="htmlArea2" class="form-select" style="margin-right: 10px;">
									<option value="">select</option>
																		<option value="qrcodes">qrcodes</option>
									<option value="color_name">Color Name</option>
							  </select>
							  <a onclick="InsertHTML()" class="btn btn-info"> Insert </a>
						  </div>
						</div>
						<div class="col-md-6 mb-3">
							<div class="d-flex align-items-center">
								<label class="label">Top:</label> &emsp;
								<input type="number" id="badgeTop" name="top" value="{{ isset($badgetemp_data['margintop']) ? $badgetemp_data['margintop'] : 0 }}" class="form-control" />
							</div>
						</div>
						<div class="col-md-12 mb-3">
							<div class="d-flex align-items-center">
								<label class="label">Font:</label> &emsp;
								<input type="text" id="font" name="font" value="{{ isset($badgetemp_data['font']) ? $badgetemp_data['font'] : '' }}" class="form-control" />
							</div>
						</div>
						<div class="col-md-6 mb-3">
							<div class="d-flex align-items-center">
								<label class="label">Paper Type:</label> &emsp;
								<select id="paper_type" name="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="col-md-6 mb-3">
							<div class="d-flex">
								<label class="label">Orientation:</label> &emsp;
								<select id="orientation" name="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>						
						<div class="col-md-12 mb-3">
							<textarea name="badgelayout" id="layout" class="form-control">{{ isset($badgetemp_data['badgelayout']) ? $badgetemp_data['badgelayout'] : '' }}</textarea>
							<div class="mt-3">
							<a onclick="print()" class="btn btn-warning">Test Print</a>
							&nbsp;&nbsp;
							<input type="submit" value="Save Template" class="btn btn-success text-end float-end">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<a href="" data-bs-toggle="modal" data-bs-target="#event-badge" class="btn btn-primary col-6 mb-4" title="Add Badge">{{ isset($mode) && $mode == 'insert' ? 'Add New' : 'Update' }}  Badge Image</a>&nbsp;&nbsp;
						<div id="wrapper" style="border:1px solid;position: absolute;">
				<div id="dummybadge">
				</div>
			</div>
					</div>
	</div>
</div>
<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="width">Badge Width (in mm)</label>
                          <input type="text" class="form-control" id="width" name="width" required>
                      </div>
                      <div class="mb-3">
                          <label for="height">Badge Height (in mm)</label>
                          <input type="text" class="form-control" id="height" name="height" required>
                      </div>
                      <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>
</section>
<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' );
</script>
<script>
$(document).ready(function(){
    // $("#badgeform").validate({
    //    rules:
    //    {
    //         'file':{
    //           required: true,
    //           extension: "jpg|jpeg",
    //         }
    //    }, 
    //    errorElement: 'p',
    //    errorPlacement: function (error, element) {
    //    error.insertAfter(element);
    //    }
    // });

    $('#badgeTop').change(function(){
			$('#dummybadge').css('margin-top', $(this).val()+'px');
		});
});

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);
}

</script>
@endsection