@extends('layouts.backend.app')

@section('content')

 <!-- Start right Content here -->
<div class="main-content">
	<div class="page-content">
		<div class="container-fluid">

	<div class="page-title-box">
		<div class="row align-items-center">
			<div class="col-md-8">
				<h6 class="page-title">Assign Service Engineer</h6>
				<ol class="breadcrumb m-0">
					<li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home</a></li>
					<li class="breadcrumb-item active" aria-current="page">Assign Service Engineer</li>
				</ol>
			</div>
			<div class="col-md-4 text-end">
				<div class="btn-container float-right">
					<a href="{{ route('product-in-service') }}" class="btn btn-primary">
					<span class="pe-1 color-primary"><i class="ti-angle-left"></i></span> Back</a>
				</div>
			</div>
		</div>
	</div>
<!-- end row -->

<div class="row">
  <div class="col-md-12">
	 <div class="col-md-12 mobile-table-column stock-table">
		  <div class="card">
	  <div class="row p-3 justify-content-center">
		 <div class="col-md-6 ">
			<div class="" >
	<div class="">

	<form class="form-horizontal" action="{{ route('assign-eng-save') }}" method="POST" id="dtad" name="dtad" enctype="multipart/form-data">
	@csrf

	<input type="hidden" name="testermd_id" id="testermd_id" value="@if(!empty($lotdata->id)){{ $lotdata->id }}@endif">

	<!-- Page Preloder -->
	<div id="preloder"><div class="loader"></div></div>


		 <div class="mb-3">
		<div class="input-group" id="datepicker1">
        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
        <input type="text" class="form-control datepicker flatpickr-input" placeholder="" data-date-format="d M, Y G:i K" data-enable-time="true" id="assign_date" name="assign_date">
    </div>
</div>

<!-- Include Flatpickr library -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    // Wait for the DOM to be fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        // Initialize Flatpickr
        flatpickr("#assign_date", {
            minDate: "today",
            dateFormat: "d M, Y G:i K",
            enableTime: true
        });
    });
</script>

 <script>
                                                        document.addEventListener("DOMContentLoaded", function() {
                                                            // Get current date and time
                                                            var now = new Date();
                                                            var formattedDateTime = now.toLocaleString('en-US', {
                                                                day: '2-digit',
                                                                month: 'short',
                                                                year: 'numeric',
                                                                hour: '2-digit',
                                                                minute: '2-digit',
                                                                hour12: true
                                                            });

                                                            // Set current date and time as the default value for the datepicker input
                                                            document.getElementById('assign_date').value = formattedDateTime;
                                                        });
                                                    </script>
		<div class="mb-3" >
			<label class="form-label">Select Service Engineer</label>
			<select class="form-control form-select serviceSelect" id="testerid" name="testerid">
					<option value="">Select</option>
				@foreach($usersname as $username)
					<option value="{{ $username->id }}">{{ $username->name }}</option>
				@endforeach
			</select>
		</div>

		 <div class="mb-3 selectdraf">
		 <label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Temporary Code<span class="barcode_count">0</span></label>

		<input type="text" class="form-control w-100 tags w-100" id="temcode" name="temcode" placeholder="">

		<small class="form-text w-100">Enter Temporary Code ( #AM220322057 )</small></div>

		<button class="btn btn-success sumbtn" type="button"> Submit </button>

	</div>
                        </div>
                     </div>                   
                  </div>
               </div>
			</div>
		</div>
	</div>
	<!-- end row -->

		</div>
	</div>
</div>
<!-- end main content-->


@endsection

@section('scripts')

<script>



$(document).ready(function() {
  $(window).keydown(function(event){
	 const key = event.originalEvent.key;
	 console.log(event.keyCode);
    if(event.keyCode == 13) {


		var count=$("#temcode").tagsinput('items').length;
		$('.barcode_count').html(count+1);

    }
  });
});

$(document).on("click",".label-info",function(){
	    var count=$("#temcode").tagsinput('items').length;
		$('.barcode_count').html(count);
})




	//Add 
$(document).on("click", ".sumbtn", function () {

	var err = true;

	var input = $("#assign_date");
	var urlvl = $("#assign_date").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Assign date is required</div>').insertAfter("#datepicker1");
		$("#assign_date").focus();
		err = false;
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#nmb").remove();
	}

	var input = $("#testerid");
	var urlvl = $("#testerid").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#ivn").remove();
		$('<div id="ivn" class="text-danger">Tester name is required</div>').insertAfter("#testerid");
		$("#testerid").focus();
		err = false;
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#ivn").remove();
	}

	var input = $("#temcode");
	var urlvl = $("#temcode").val();
	 
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#ltdt").remove();
		$('<div id="ltdt" class="text-danger">Temporary code is required</div>').insertAfter("#temcode");
		$("#temcode").focus();
		err = false;
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#ltdt").remove();
	}

	if(err == true) {

		$(".sumbtn").attr("disabled", true);
		document.forms["dtad"].submit();
		$("#preloder").fadeIn();
		return true;
	}
});

$("#assign_date").on("change", function(event) {
	var input = $("#assign_date");
	var urlvl = $("#assign_date").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Assign date is required</div>').insertAfter("#assign_date");
		$("#assign_date").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#nmb").remove();
	}
});

$("#testerid").on("change", function(event) {
	var input = $("#testerid");
	var urlvl = $("#testerid").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#ivn").remove();
		$('<div id="ivn" class="text-danger">Tester name is required</div>').insertAfter("#testerid");
		$("#testerid").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#ivn").remove();
	}
});

$("#temcode").on("change", function(event) {
	var input = $("#temcode");
	var urlvl = $("#temcode").val();
	
	 var temcodeValue = $(this).val().trim(); 
	
	
	 if (temcodeValue !== '') {
	     
	     
                // Make an AJAX request to check if the temcode is already assigned
                $.ajax({
                    url: '{{ route('check-Assign-assignment-ser') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}', // Include CSRF token
                        temcode: temcodeValue
                    },
                    success: function(response) { 
                        console.log(response.isAssigned);
                        if (response.isAssigned) {
                            input.removeClass("valid").addClass("invalid");
                            $("#ltdt").remove();
                            if(response.msg != ''){
                                 $('<div id="ltdt" class="text-danger">'+response.msg+'</div>')
                                .insertAfter("#temcode");
                                 $("#temcode").focus();
                            $(".sumbtn").prop("disabled", true);
                                
                            }else{
                                // $('<div id="ltdt" class="text-danger">'+response.msg+'</div>').insertAfter("#temcode");
                                 input.removeClass("invalid").addClass("valid");
                            $("#ltdt").remove();
                            $(".sumbtn").prop("disabled", false);
                                
                            }
                           
                           
                        }
                        
                        else {
                            input.removeClass("invalid").addClass("valid");
                            $("#ltdt").remove();
                            $(".sumbtn").prop("disabled", false);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.error(error);
                    }
                });
            }
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#ltdt").remove();
		$('<div id="ltdt" class="text-danger">Temporary code is required</div>').insertAfter("#temcode");
		$("#temcode").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#ltdt").remove();
	}
});

</script>

@endsection