@extends('layouts.app')

@section('content')
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
  <h1 class="h3 mb-0 text-gray-800">Search List</h1>
  <!--<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>-->
</div>
<div>
  @if ($errors->any())
      <div class="alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div><br />
  @endif
  <form id="searchform" method="post" action="{{url('search')}}" >
    {{csrf_field()}}
    <div class="row form-group">
      <div class="col-6">
        <label for="areacode">I/C No or Passport No: <span class="text-danger">(* For Malaysian IC no need to include "-". Eg:901010101010)</span></label>
        <input type="text" seq="1" class="form-control enterseq" id="ic_passport" maxlength="30" name="ic_passport"/>
        <span class="text-danger">{{ $errors->first('areacode') }}</span>
      </div>
    </div>
    <div class="row form-group">
      <div class="col-6">
        <label for="title">Name:</label>
        <input type="text" seq="2" class="form-control enterseq" name="name" id="name" />
        <span class="text-danger">{{ $errors->first('description') }}</span>
      </div>
    </div>
    <div class="row form-group">
      <div class="col-3">
        <label for="title">Nationality:</label>
          <select class="form-control enterseq nationality" seq="3" name="nationality" id="nationality">
            <option value=""></option>
            @if(isset($data['nationality']))
            @foreach($data['nationality'] as $key => $natrow)
              <option value="{{$natrow['desc']}}">{{$natrow['desc']}}</option>
            @endforeach
            @endif
          </select>
      </div>
    </div>
    <div class="row form-group">
      <div class="col-6">
        <label for="title">Birth date:</label>
        <input type="text" seq="4" class="form-control enterseq" name="birthdate" id="birthdate"  />
        <span class="text-danger">{{ $errors->first('description') }}</span>
      </div>
    </div>
    <button type="button" id="search_func" seq="5" class="btn btn-primary enterseq">Search</button>
    <input type="hidden" seq="6" class="enterseq" />
    </br>
    <div class="col-12 container" id="result_field">
    </br>
      <div id="moha" style="display:none;">
					<b style='color:red;'>Moha Information</b>
					<table>
					</table>
				</div>
				<div id="unsc" style="display:none;">
					<b style='color:red;'>UNSCR Information</b>
					<table>
					</table>
				</div>
				<div id="peps" style="display:none;">
					<b style='color:red;'>PEPS Information</b>
					<table>
					</table>
				</div>
				<div id="highrisk" style="display:none; font-weight:bold; color:red;">
					<table>
					</table>
				</div>
				<div id="notmatch" style="display:none; ">
					<table>
					</table>
				</div>
    </div>
  </form>
</div>
@endsection

@section('footerjs')

<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.nationality').select2();

});
if ($("#searchform").length > 0) {
    $("#searchform").validate({
      rules: {
        areacode: {
          required: true,
          maxlength: 2
        },

        description: {
            required: true,
            maxlength:200,
        }
      },
      messages: {
        areacode: {
          required: "Please enter area code",
          maxlength: "Your area code maxlength should be 2 characters long.",
          normalizer: function(value) {
            return $.trim(value);
          }
        },
        description: {
          required: "Please enter description",
          maxlength: "The description should be 200 characters long",
        },
      },
    })
    $("#searchform").submit(function(evt){
      $("input[type='text']").each(function(i){
        $(this).val($(this).val().toUpperCase());
      })
    })
  }
  $("#search_func").on('click',function(){

    search_list();
  })
  function search_list(){
    var ic_pass = $("#ic_passport").val();
    var name = $("#name").val();
    var nationality = $("#nationality").val();
    var birthdate = $("#birthdate").val();
    var ic_no = ic_pass;
    var nam = name;
    var nat = nationality;
    var bir_dat = birthdate;
    $.ajax({
      type: 'get',
      url: '{{URL::to('searchfunc')}}',
      data: {
        ic_no:ic_pass,
        nam:name,
        national:nationality,
        bir_dat:birthdate
      },
      dataType : "json",
      success: function(json) {
        $("#moha").hide();
					$("#unsc").hide();
					$("#peps").hide();
					$("#highrisk").hide();
					$("#notmatch").hide();
					var str_arr="";
					var usr_status="";
          if(!json.status && !json.hr_status) {
						$("#notmatch table").append("<tr><td class=\"tag\"></td><td></td></tr>");
						$("#notmatch table tr").eq(0).find("td").eq(0).attr("style","font-weight:bold;");
						$("#notmatch table tr").eq(0).find("td").eq(0).html(json.msg);

						$("#notmatch table").append("<tr><td class=\"tag\"><input style=\"display:none;\" type=\"button\" id='btnGeneratePDF' name=\"btnGeneratePDF\" value=\"Generate PDF List\"></td><td></td></tr>");
						usr_status = json.msg;
						$("#notmatch").show();
					} else {
						if(json.moha!=undefined){
							var io=0;
							$.each(json.moha,function(k,v){
								$("#moha table").append("<tr><td class=\"tag\"></td><td></td></tr>");
								$("#moha table tr").eq(io).find("td").eq(0).html(k);
								$("#moha table tr").eq(io).find("td").eq(1).attr("style","font-weight:bold;");
								$("#moha table tr").eq(io).find("td").eq(1).html(v);
								<!-- str_arr += "&"+k+"="+v; -->
								io++;
							})
							str_arr = JSON.stringify(json.moha);
							usr_status = 'Moha Information';
							$("#moha table").append("<tr><td class=\"tag\"><input style=\"display:none;\" type=\"button\" id='btnGeneratePDF' name=\"btnGeneratePDF\" value=\"Generate PDF List\"></td><td></td></tr>");
							$("#moha").show();
						}
						if(json.unsc!=undefined){
							var io=0;
							$.each(json.unsc,function(k,v){
								if(k!=""){
									$("#unsc table").append("<tr><td class=\"tag\"></td><td></td></tr>");
									$("#unsc table tr").eq(io).find("td").eq(0).html(k);
									$("#unsc table tr").eq(io).find("td").eq(1).attr("style","font-weight:bold;");
									$("#unsc table tr").eq(io).find("td").eq(1).html(v);
									io++;
								}
							})
							str_arr = JSON.stringify(json.unsc);
							usr_status = 'UNSCR Information';
							$("#unsc table").append("<tr><td class=\"tag\"><input style=\"display:none;\" type=\"button\" id='btnGeneratePDF' name=\"btnGeneratePDF\" value=\"Generate PDF List\"></td><td></td></tr>");
							$("#unsc").show();
						}
						if(json.peps!=undefined){
							var io=0;
							$.each(json.peps,function(k,v){
								if(k!=""){
									$("#peps table").append("<tr><td class=\"tag\"></td><td></td></tr>");
									$("#peps table tr").eq(io).find("td").eq(0).html(k);
									$("#peps table tr").eq(io).find("td").eq(1).attr("style","font-weight:bold;");
									$("#peps table tr").eq(io).find("td").eq(1).html(v);
									io++;
								}
							})
							str_arr = JSON.stringify(json.peps);
							usr_status = 'PEPS Information';
							$("#peps table").append("<tr><td class=\"tag\"><input type=\"button\" style=\"display:none;\" id='btnGeneratePDF' name=\"btnGeneratePDF\" value=\"Generate PDF List\"></td><td></td></tr>");
							$("#peps").show();
						}

						if(json.hr_status){
							$("#highrisk").show();
							$("#highrisk table").append("<tr><td class=\"tag\"></td></tr>");
							$("#highrisk table tr").eq(0).find("td").eq(0).attr("style","font-weight:bold;");
							$("#highrisk table tr").eq(0).find("td").eq(0).html(nat+" is in HIGH RISK COUNTRY List!!");
							//str_arr = JSON.stringify(json.hr_status);
							if(json.mandatory){
								usr_status = 'HIGH RISK MANDATORY';
							}else{
								usr_status = 'HIGH RISK NOT MANDATORY';
							}
							$("#highrisk table").append("<tr><td class=\"tag\"><input type=\"button\" style=\"display:none;\" id='btnGeneratePDF' name=\"btnGeneratePDF\" value=\"Generate PDF List\"></td><td></td></tr>");
						}
					}

          $("#btnGeneratePDF").bind("click",function(evt){
							var data = $("form#searchform").serialize();
							data += "&hidAction=gen_rsl_pdf&data_rtn="+str_arr+"&status="+usr_status;
							$.ajax({
								type:'post',
								data:data,
								dataType:'json',
								success: function(json) {
									if (!json.pdffile) {
										alert("Empty Data , No PDF Generated !")
									}else{
										window.open(json.pdffile);
									}
								}
							});
							return false;
						});
      }
    })
  }
  function isValidDate(d) {
      return d instanceof Date && !isNaN(d);
    }
  function js_dateformat(input){
    	if($(input).val().length==8){
    		let date = new Date($(input).val().substr(4,4), ($(input).val().substr(2,2)-1), $(input).val().substr(0,2));
    		if(isValidDate(date)){
    			var dd = date.getDate();
    			var mm = date.getMonth()+1;
    			var yyyy = date.getFullYear();
    			if(dd<10) {
    				dd='0'+dd;
    			}
    			if(mm<10) {
    				mm='0'+mm;
    			}
    			$(input).val(dd+"/"+mm+"/"+yyyy);
    		} else {
    			$(input).val("");
    			$(input).select();
    		}
    	} else if($(input).val().length==10){
    		let date = new Date($(input).val().substr(6,4), ($(input).val().substr(3,2)-1), $(input).val().substr(0,2));
    		if(!isValidDate(date)){
    			$(input).val("");
    			$(input).select();
    		}
    	} else {
    		$(input).val("");
    		$(input).focus();
    	}
    }

  $(document).ready(function(evt){
    $(".enterseq").each(function(i){
      $(this).keydown(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        switch(keycode) {
          case 13:
            if($(this).is("input")) {
              $(this).val($(this).val().toUpperCase());
              if($(this).is("input[id='birthdate']")) {
                    js_dateformat(this);
              }
            }  else if($(this).is("button[id='search_func']")) {
              $(this).click();
              return false;
            }
            var dd = parseInt($(this).attr("seq"),10)+1;
            if( $(".enterseq").filter("[seq='"+dd+"']").length>0){
              if($(".enterseq").filter("[seq='"+dd+"']").is("input")) {
                $("input[type='text']").filter("[seq='"+dd+"']").select();
              } else if($(".enterseq").filter("[seq='"+dd+"']").is("select")){
                $("select").filter("[seq='"+dd+"']").focus();
              } else if($(".enterseq").filter("[seq='"+dd+"']").is("checkbox")){
                $("checkbox").filter("[seq='"+dd+"']").select();
              } else if($(".enterseq").filter("[seq='"+dd+"']").is("button")){
                $("button").filter("[seq='"+dd+"']").focus();
              }
            }
            break;
          case 38:
            var dd = (parseInt($(this).attr("seq"),10)>0)?(parseInt($(this).attr("seq"),10)-1):parseInt($(this).attr("seq"),10);
            if($("input[type='text']").filter("[seq='"+dd+"']").length>0){
              $("input[type='text']").filter("[seq='"+dd+"']").select();;
            } else if($("select").filter("[seq='"+dd+"']").length>0){
              $("select").filter("[seq='"+dd+"']").focus();;
            }
        }
        if(keycode==13)
          return false;
      })
    })
    if($(".enterseq").filter("[seq='1']").is("input")) {
      $("input[type='text']").filter("[seq='1']").select();
    } else if($(".enterseq").filter("[seq='1']").is("select")){
      $("select").filter("[seq='1']").focus();
    } else if($(".enterseq").filter("[seq='1']").is("checkbox")){
      $("checkbox").filter("[seq='1']").select();
    } else if($(".enterseq").filter("[seq='1']").is("button")){
      $("button").filter("[seq='1']").focus();
    }
  })
</script>
@endsection