@extends('layouts.admin')

@section('content')
<div class="row">
  <div class="col-md-12">
     <div class="card shadow-lg">
      <div class="card-body pt-5">
        <div class="text-center">
          <h1 class="h4 text-gray-900 mb-4">Add Job</h1>
        </div>
        <form id="orderForm" action="{{ route('job.add') }}">
          <input type="hidden" id="orderFormInput"  name="order">
        </form>
        <form class="user" action="{{ route('job.save') }}" method="post">
          @csrf
          <!-- <input type="hidden" name="modify" value="0"> -->
          <div class="row justify-content-md-center">
            @if ($errors->any())
              <div class="col-md-8 mt-3">
                <div class="alert alert-danger bg-gradient-danger">
                  <ul style="list-style: none;margin-bottom: 0;color: #fff;">
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
                </div>
              </div>
            @endif
            
            @if( session('order_id') || isset($_GET['order']) )

              @if(isset($_GET['order']))
                @php
                  $order = \App\Models\Orders::find($_GET['order']);
                @endphp
                <div class="col-md-8 mt-3 text-center">
                  <div class="form-group bmd-form-group">
                    <h3>Order: #{{ $order->id }}</h3>
                    <input type="hidden" name="order_name" class="form-control form-control-user" value="{{ $order->name }}">
                    <input type="hidden" name="orderFK" class="form-control form-control-user" value="{{ $order->id }}">
                  </div>
                </div>
              @else
                @php
                  $order = \App\Models\Orders::find(session('order_id'));
                @endphp
                <div class="col-md-8 mt-3  text-center">
                  <div class="form-group bmd-form-group">
                    <h3>Order: #{{session('order_id') }}</h3>
                    <input type="hidden" name="order_name" class="form-control form-control-user" value="{{ session('order_name') }}">
                    <input type="hidden" name="orderFK" class="form-control form-control-user" value="{{ session('order_id') }}">
                  </div>
                </div>
              @endif
            @else
              <div class="col-md-8 mt-3">
                <div class="form-group bmd-form-group">
                  <select class="form-control form-control-user" name="order" required onchange="reloadOrderID(value)">
                      <option value="" disabled selected hidden> - OrderID - </option>
                      @foreach($orders as $key=>$order)
                        <option value="{{$order->id}}">OrderID #{{$order->id}}</option>
                      @endforeach
                  </select>
                  {!! $errors->first('orderFK', '<p class="help-block text-danger mb-0">:message</p>') !!}
                </div>
              </div>
            @endif
          </div>

          <div class="row justify-content-md-center mb-5 mt-3">
            <div class="col-md-12">
              <div class="form-group bmd-form-group text-center" style="display: flex;justify-content: center;margin-bottom: 0;">
                 <ul class="job_modify" style="list-style: none;margin-bottom: 0;padding-left: 0;">
                  <li class="pull-left ml-3">
                    <label for="new_job">
                      <input type="radio" checked name="modify" id="new_job" value="0"> New
                    </label>
                  </li>
                  <li class="pull-left ml-3">
                    <label for="modify_job">
                      <input type="radio" name="modify" id="modify_job" value="1"> Modify
                    </label>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-md-4 text-center mt-2">
              <ul class="job_type" style="list-style: none;">
                <li class="pull-left ml-3">
                  <label for="pl_type">
                    <input type="radio" name="job_type" id="pl_type" value="pl" checked> PL
                  </label>
                </li>
                <li class="pull-left ml-3">
                  <label for="plm_type">
                    <input type="radio" name="job_type" id="plm_type" value="plm"> PLM
                  </label>
                </li>
                <li class="pull-left ml-3">
                  <label for="ps_type">
                    <input type="radio" name="job_type" id="ps_type" value="ps"> PS
                  </label>
                </li>
                <li class="pull-left ml-3">
                  <label for="psm_type">
                    <input type="radio" name="job_type" id="psm_type" value="psm"> PSM
                  </label>
                </li>
              </ul>
            </div>
          </div>

          <div class="row justify-content-md-center job_form mt-3">
            <div class="col-md-11 border mb-3 shadow-sm pt-2" style="position: relative;">
              <div class="p-3 shadow-sm" id="ids_0" style="background-color: #c7c7c785;position: absolute;left: -43px;border-bottom-left-radius: 5px;border-top-left-radius: 5px;">1</div>
              <ul class="list-style-none" style="padding-inline-start: 0;">
                  <li class="pull-left" style="width: 20%;">
                    <div class="form-group bmd-form-group">
                      <label>Job no.</label>
                      <input type="text" name="job_no[]" class="form-control form-control-user" id="job_no_0">
                      {!! $errors->first('job_no', '<p class="help-block text-danger mb-0">:message</p>') !!}
                    </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 20%;">
                      <div class="form-group bmd-form-group">
                        <label>Mold name</label>
                        <input type="text" name="mod_name[]" class="form-control form-control-user" id="mod_name_0" >
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 19.5%;">
                      <div class="form-group bmd-form-group">
                        <label>Mold no</label>
                        <input type="text" name="mod_no[]" class="form-control form-control-user" id="mod_no_0" >
                      </div>
                  </li>
                   <li class="pull-left ml-1" style="width: 20%;">
                      <div class="form-group bmd-form-group">
                        <label>Part name *</label>
                        <input type="text" name="part_name[]" class="form-control form-control-user" id="part_name_0">
                        <input type="hidden" name="part_id[]" id="part_id_0">
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 19%;">
                     <div class="form-group bmd-form-group">
                        <label>Part no</label>
                        <input type="text" name="part_no[]" class="form-control form-control-user" id="part_no_0" >
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 20%;">
                      <div class="form-group bmd-form-group">
                        <label>Model</label>
                        <input type="text" name="job_model[]" class="form-control form-control-user">
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 15%;">
                      <div class="form-group bmd-form-group">
                        <label>Action devilery</label>
                        <input type="text" name="devilery[]" class="form-control form-control-user datepicker_0">
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 15%;">
                      <div class="form-group bmd-form-group">
                        <label>Dead line</label>
                        <input type="text" name="dead_line[]" class="form-control form-control-user datepicker_0" value="">
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 10%;">
                      <div class="form-group bmd-form-group">
                        <label>Qty</label>
                        <input type="number" name="qty[]" class="form-control form-control-user">
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 15%;">
                      <div class="form-group bmd-form-group">
                        <label>Price</label>
                        <input type="text" name="price[]" class="form-control form-control-user">
                      </div>
                  </li>
                  <li class="pull-left ml-1" style="width: 23%;">
                      <div class="form-group bmd-form-group">
                        <label>Remarks </label>
                        <input type="text" name="remarks[]" class="form-control form-control-user">
                      </div>
                  </li>
              </ul>
            </div>
          </div>

          <div class="row justify-content-md-center job_more"></div>

          <div class="row justify-content-md-center">
            <div class="col-md-5 mt-5">
                <button type="button" class="btn btn-secondary btn-block btn-user" onclick="addMore()">Add more</button>
            </div>
            <div class="col-md-8 mt-5">
              <button type="submit" class="btn btn-primary btn-block btn-user">Save</button>
            </div>
          </div>
            
          <div class="clearfix"></div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('style')
<!--<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
<link rel="stylesheet" href="{{ asset('plugins/jquery-ui/themes/base/jquery-ui.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">

<style type="text/css">
  select:invalid { color: gray; }
  select.form-control-user{
    font-size: .8rem;
    border-radius: 10rem;
    padding: 0rem 1rem !important;
  }
  .job_type li label input,.job_modify li label input{
    display: none;
  }
  .job_type li label{
    background: #eee;
    padding: 5px 25px;
    cursor: pointer;
  }
  .job_modify li label{
    background: #eee;
    padding: 0 10px;
    cursor: pointer;
  }
  form.user .form-control-user {
    border-radius: 5px;
  }

</style>
@endsection

@section('script')
<!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script src="{{ asset('plugins/jquery-ui/jquery-ui.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>

<script type="text/javascript">
    var orderFK;
    var id_p = 1;
    $(function() {
        addNow(4);
        $('#pl_type').closest('label').css('background','#4e73df');
        $('#pl_type').closest('label').css('color','#fff');
        $('#new_job').closest('label').css('background','#4e73df');
        $('#new_job').closest('label').css('color','#fff');

        @if(!empty($order->id))
          orderFK = '{{$order->id}}';
        @endif
        genarateJobno(5,0)
        $('.datepicker_0').datepicker({
            format: 'dd-mm-yyyy'
        });
    });
    function reloadOrderID(id){
      // orderFK = id;
      // console.log(orderFK);
      $('#orderFormInput').val(id);
      $('#orderForm').submit();
    }
    $('.job_type input[type="radio"]').change(function(){
      $('.job_type input[type="radio"]').closest('label').css('background','#eee');
      $('.job_type input[type="radio"]').closest('label').css('color','#858796');
      $(this).closest('label').css('background','#4e73df');
      $(this).closest('label').css('color','#fff');
      genarateJobno(id_p,0)
    });
    $('.job_modify input[type="radio"]').change(function(){
      $('.job_modify input[type="radio"]').closest('label').css('background','#eee');
      $('.job_modify input[type="radio"]').closest('label').css('color','#858796');
      $(this).closest('label').css('background','#4e73df');
      $(this).closest('label').css('color','#fff');
    });

    function addNow(num){
      for (var i = 0; i < num; i++) {
        let html = $('.job_form').html();
        let ids_ = 'ids_'+id_p;
        let id_jobno = 'job_no_'+id_p;
        let id_pno = 'part_no_'+id_p;
        let id_pn = 'part_name_'+id_p;
        let id_pid = 'part_id_'+id_p;
        let id_mno = 'mod_no_'+id_p;
        let id_mn = 'mod_name_'+id_p;
        let id_date = 'datepicker_'+id_p;
        html = html.replace('ids_0',ids_);
        html = html.replace('job_no_0',id_jobno);
        html = html.replace('part_no_0',id_pno);
        html = html.replace('part_name_0',id_pn);
        html = html.replace('part_id_0',id_pid);
        html = html.replace('mod_no_0',id_mno);
        html = html.replace('mod_name_0',id_mn);
        html = html.replace('datepicker_0',id_date);
        $('.job_more').append(html);
        let id_datepicker = '.datepicker_'+id_p;
        $(id_datepicker).datepicker({
            format: 'dd-mm-yyyy'
        });

        addAutocomplate('#'+id_pn,'#'+id_pid,'#'+id_pno,'#'+id_mno,'#'+id_mn);
        id_p++;
        let upID = '#'+ids_;
        $(upID).text(id_p);
      }
    }

    function addMore(){
      let html = $('.job_form').html();
      let ids_ = 'ids_'+id_p;
      let id_jobno = 'job_no_'+id_p;
      let id_pno = 'part_no_'+id_p;
      let id_pn = 'part_name_'+id_p;
      let id_pid = 'part_id_'+id_p;
      let id_mno = 'mod_no_'+id_p;
      let id_mn = 'mod_name_'+id_p;
      let id_date = 'datepicker_'+id_p;
      html = html.replace('ids_0',ids_);
      html = html.replace('job_no_0',id_jobno);
      html = html.replace('part_no_0',id_pno);
      html = html.replace('part_name_0',id_pn);
      html = html.replace('part_id_0',id_pid);
      html = html.replace('mod_no_0',id_mno);
      html = html.replace('mod_name_0',id_mn);
      html = html.replace('datepicker_0',id_date);
      $('.job_more').append(html);
      let id_datepicker = '.datepicker_'+id_p;
      $(id_datepicker).datepicker({
          format: 'dd-mm-yyyy'
      });

      addAutocomplate('#'+id_pn,'#'+id_pid,'#'+id_pno,'#'+id_mno,'#'+id_mn);
      genarateJobno(0,id_p)
      id_p++;
      let upID = '#'+ids_;
      $(upID).text(id_p);
    }

    $( "#part_name_0" ).autocomplete({
        minLength: 0, 
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $("#part_no_0").val('');
            // $("#part_id_0").val('');
            // $("#mod_no_0").val('');
            // $("#mod_name_0").val('');
            inputRemoveRequired("#part_name_0");
            // inputRemoveRequired("#part_no_0");
            // inputRemoveRequired("#mod_no_0");
            // inputRemoveRequired("#mod_name_0");
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                }); 
            }
        },
        select: function( event, ui ) {
            $(this).val(ui.item.value);
            $("#part_id_0").val(ui.item.id);
            $("#part_no_0").val(ui.item.no);
            $("#mod_no_0").val(ui.item.mod_no);
            $("#mod_name_0").val(ui.item.mod_name);
            inputAddRequired("#part_name_0");
            // inputAddRequired("#part_no_0");
            // inputAddRequired("#mod_no_0");
            // inputAddRequired("#mod_name_0");
            return false;
        }
      });

    $( "#part_no_0" ).autocomplete({
        minLength: 0, 
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $("#part_name_0").val('');
            // $("#part_id_0").val('');
            // $("#mod_no_0").val('');
            // $("#mod_name_0").val('');
            inputRemoveRequired("#part_name_0");
            // inputRemoveRequired("#part_no_0");
            // inputRemoveRequired("#mod_no_0");
            // inputRemoveRequired("#mod_name_0");
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                }); 
            }
        },
        select: function( event, ui ) {
          
            $("#part_no_0").val(ui.item.no);
            $("#part_id_0").val(ui.item.id);
            $("#part_name_0").val(ui.item.value);
            $("#mod_no_0").val(ui.item.mod_no);
            $("#mod_name_0").val(ui.item.mod_name);
            inputAddRequired("#part_name_0");
            // inputAddRequired("#part_no_0");
            // inputAddRequired("#mod_no_0");
            // inputAddRequired("#mod_name_0");
            return false;
        }
      });
    $( "#mod_no_0" ).autocomplete({
        minLength: 0, 
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $("#part_no_0").val('');
            // $("#part_id_0").val('');
            // $("#part_name_0").val('');
            // $("#mod_name_0").val('');
            inputRemoveRequired("#part_name_0");
            // inputRemoveRequired("#part_no_0");
            // inputRemoveRequired("#mod_no_0");
            // inputRemoveRequired("#mod_name_0");
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                }); 
            }
        },
        select: function( event, ui ) {
            $('#part_no_0').val(ui.item.no);
            $("#part_id_0").val(ui.item.id);
            $("#part_name_0").val(ui.item.value);
            $("#mod_no_0").val(ui.item.mod_no);
            $("#mod_name_0").val(ui.item.mod_name);
            inputAddRequired("#part_name_0");
            // inputAddRequired("#part_no_0");
            // inputAddRequired("#mod_no_0");
            // inputAddRequired("#mod_name_0");
            return false;
        }
      });

    $( "#mod_name_0" ).autocomplete({
        minLength: 0, 
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $("#part_no_0").val('');
            // $("#part_id_0").val('');
            // $("#part_name_0").val('');
            // $("#mod_no_0").val('');
            inputRemoveRequired("#part_name_0");
            // inputRemoveRequired("#part_no_0");
            // inputRemoveRequired("#mod_no_0");
            // inputRemoveRequired("#mod_name_0");
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                }); 
            }
        },
        select: function( event, ui ) {
            $('#part_no_0').val(ui.item.no);
            $("#part_id_0").val(ui.item.id);
            $("#part_name_0").val(ui.item.value);
            $("#mod_no_0").val(ui.item.mod_no);
            $("#mod_name_0").val(ui.item.mod_name);
            inputAddRequired("#part_name_0");
            // inputAddRequired("#part_no_0");
            // inputAddRequired("#mod_no_0");
            // inputAddRequired("#mod_name_0");
            return false;
        }
      });

    function addAutocomplate(name,id,part_no,mod_no,mod_name){
      $( name ).autocomplete({
        minLength: 0,
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $(id).val('');
            // $(part_no).val('');
            // $(mod_no).val('');
            // $(mod_name).val('');
            inputRemoveRequired(name);
            // inputRemoveRequired(part_no);
            // inputRemoveRequired(mod_no);
            // inputRemoveRequired(mod_name);
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                });
            }
        },
        select: function( event, ui ) {
            $(this).val(ui.item.value);
            $(id).val(ui.item.id);
            $(part_no).val(ui.item.no);
            $(mod_no).val(ui.item.mod_no);
            $(mod_name).val(ui.item.mod_name);
            inputAddRequired(name);
            // inputAddRequired(part_no);
            // inputAddRequired(mod_no);
            // inputAddRequired(mod_name);
            return false;
        }
      });
      $( part_no ).autocomplete({
        minLength: 0,
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $(id).val('');
            // $(part_no).val('');
            // $(mod_no).val('');
            // $(mod_name).val('');
            inputRemoveRequired(name);
            // inputRemoveRequired(part_no);
            // inputRemoveRequired(mod_no);
            // inputRemoveRequired(mod_name);
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                });
            }
        },
        select: function( event, ui ) {
            $(name).val(ui.item.value);
            $(id).val(ui.item.id);
            $(this).val(ui.item.no);
            $(mod_no).val(ui.item.mod_no);
            $(mod_name).val(ui.item.mod_name);
            inputAddRequired(name);
            // inputAddRequired(part_no);
            // inputAddRequired(mod_no);
            // inputAddRequired(mod_name);
            return false;
        }
      });
      $( mod_name ).autocomplete({
        minLength: 0,
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $(id).val('');
            // $(part_no).val('');
            // $(mod_no).val('');
            // $(mod_name).val('');
            inputRemoveRequired(name);
            // inputRemoveRequired(part_no);
            // inputRemoveRequired(mod_no);
            // inputRemoveRequired(mod_name);
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                });
            }
        },
        select: function( event, ui ) {
            $(name).val(ui.item.value);
            $(id).val(ui.item.id);
            $(part_no).val(ui.item.no);
            $(mod_no).val(ui.item.mod_no);
            $(mod_name).val(ui.item.mod_name);
            inputAddRequired(name);
            // inputAddRequired(part_no);
            // inputAddRequired(mod_no);
            // inputAddRequired(mod_name);
            return false;
        }
      });
      $( mod_no ).autocomplete({
        minLength: 0,
        source: "{{ route('part.search',['orderFK'=>$order->id]) }}",
        open:function(){
            var valInput=$(this).val();
            // $(id).val('');
            // $(part_no).val('');
            // $(mod_no).val('');
            // $(mod_name).val('');
            inputRemoveRequired(name);
            // inputRemoveRequired(part_no);
            // inputRemoveRequired(mod_no);
            // inputRemoveRequired(mod_name);
            if(valInput!=""){
                $(".ui-menu-item a").each(function(){
                    var matcher = new RegExp("("+valInput+")", "ig" );
                    var s=$(this).text();
                    var newText=s.replace(matcher, "<b>$1</b>");
                    $(this).html(newText);
                    $(valInput).css('border-bottom-left-radius','0');
                    $(valInput).css('border-bottom-right-radius','0');
                });
            }
        },
        select: function( event, ui ) {
            $(name).val(ui.item.value);
            $(id).val(ui.item.id);
            $(part_no).val(ui.item.no);
            $(mod_no).val(ui.item.mod_no);
            $(mod_name).val(ui.item.mod_name);
            inputAddRequired(name);
            // inputAddRequired(part_no);
            // inputAddRequired(mod_no);
            // inputAddRequired(mod_name);
            return false;
        }
      });
    }

    function inputAddRequired(id){
      $(id).prop('required',true);
    }
    function inputRemoveRequired(id){
      $(id).prop('required',false);
    }
    $('.job_form').on('change','input[type="text"]',function(){
      let input_ID = $(this).attr('id');
      input_ID = input_ID.split('_');
      let id_pid = '#part_id_'+input_ID[2];
      let id_pno = '#part_no_'+input_ID[2];
      let id_pn = '#part_name_'+input_ID[2];
      let id_mno = '#mod_no_'+input_ID[2];
      let id_mn = '#mod_name_'+input_ID[2];
      if($(id_pno).val() == '' && $(id_pn).val() == '' && $(id_mno).val() == '' && $(id_mn).val() == ''){
        $(id_pid).val('');
      }
    });
    $('.job_more').on('change','input[type="text"]',function(){
      let input_ID = $(this).attr('id');
      input_ID = input_ID.split('_');
      let id_pid = '#part_id_'+input_ID[2];
      let id_pno = '#part_no_'+input_ID[2];
      let id_pn = '#part_name_'+input_ID[2];
      let id_mno = '#mod_no_'+input_ID[2];
      let id_mn = '#mod_name_'+input_ID[2];

      if($(id_pno).val() == '' && $(id_pn).val() == '' && $(id_mno).val() == '' && $(id_mn).val() == ''){
        $(id_pid).val('');
      }
      // console.log(input_ID[2]);
    });

    function genarateJobno(multi,number){
      
      let job_type = $('input[name="job_type"]').val();
      $('input[name="job_type"]').each(function(){
        if($(this).prop('checked')){
            job_type = $(this).val();
        }
      });

      $.ajax({
        url: '{{ route('job.genarate.jobno') }}',
        type:'post',
        dataType:'json',
        data:{
          _token: "{{ csrf_token() }}",
          type: job_type,
          orderFK: orderFK,
          multi: multi,
          number: number
        },
        success: function(res){
          if(multi > 0){
            for (var i = 0; i < multi; i++) {
               let id_job_no = '#job_no_'+i;
               $(id_job_no).val(res.data[i])
            }
          }else if(number > 0) {
            let id_job_no = '#job_no_'+number;
            $(id_job_no).val(res.data[number])
          }
         
        }
      })
    }
</script>

@endsection