@extends('layouts.admin')

@section('content')
<div class="row">
  <div class="col-md-6">
     <div class="card shadow-lg">
      <div class="card-body pt-5">
        <div class="text-center">
          <h1 class="h4 text-gray-900 mb-4">Edit Job</h1>
        </div>
        <form class="user" action="{{ route('job.update') }}" method="post">
          @csrf
          <input type="hidden" name="id" value="{{ $job->id }}">
          <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
            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <select class="form-control form-control-user" name="orderFK" required>
                    <option value="" disabled selected hidden> - Order - </option>
                    @foreach($orders as $key=>$value)
                      <option @if($job->orderFK == $value->id) selected @endif value="{{$value->id}}">{{$value->name}}</option>
                    @endforeach
                </select>
                {!! $errors->first('orderFK', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>

            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <input type="text" name="partFK" id="partFK" class="form-control form-control-user" placeholder="Part *" value="{{ $job->part_name }}" required>
                <input name="part_id" type="hidden" id="part_id" value="{{$job->partFK}}" />
                {!! $errors->first('partFK', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>

            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <input type="text" name="name" class="form-control form-control-user" placeholder="Name *" value="{{$job->name}}" required>
                {!! $errors->first('name', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </div>

            <div class="col-md-8 mt-3">
              <div class="form-group bmd-form-group">
                <input type="number" name="qty" class="form-control form-control-user" placeholder="Qty" value="{{$job->qty}}">
                {!! $errors->first('qty', '<p class="help-block text-danger mb-0">:message</p>') !!}
              </div>
            </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') }}">

<style type="text/css">
  select:invalid { color: gray; }
  select.form-control-user{
    font-size: .8rem;
    border-radius: 10rem;
    padding: 0rem 1rem !important;
  }
</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 type="text/javascript">
    $(function() {

        $( "#partFK" ).autocomplete({
            minLength: 0, 
            source: "{{ route('part.search') }}",
            open:function(){
                var valInput=$(this).val();
                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_id").val(ui.item.id);
            }
        });

    });
</script>

@endsection