@extends('layouts.app')
@section('title')Update Job Status @endsection
@section('content')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

<div class="box box-default color-palette-box">
        <div class="box-body">
        <div class="row-fluid text-center">
        <select class="selectpicker" onchange="ChooseContact(this)" data-show-subtext="false" data-live-search="true">
        @foreach($jobs as $job)
        <option name="search" id="search" value="{{$job->id}}">{{$job->title}}</option>
        @endforeach
        </select>
        </div>
        </div>
</div>


<div class="box box-default color-palette-box" id="content">
        <div class="box-header with-border">
        <div class="row">
         <div class="col-md-12">
          <div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Update Job Status</h3>
              <div class="row text-right">
              <form method="get" action="{{route('update_job_status')}}" id="form">
              <select class="selectpicker" id="job_status" name="job_status" >
                <option id="added" value="added" >Added</option>
                <option id="booked" value="booked" >Booked</option>
                <option id="insulated" value="insulated" >Insulated</option>
                <option id="deleted" value="deleted" >Deleted</option>
                </select>
              <input type="hidden" name="id" id="id">
            <a class="btn btn-primary fa fa-edit" onclick="$('#form').submit()"></a>
            </form>
            </div>
            </div>
            <!-- /.box-header -->
                    <div class="box-body demo">
                 </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
      </div>
      <!-- /.row -->
    </div>
</div>

<script type="text/javascript">
var selected_id=null;

if(selected_id==null)
$('#content').hide();


function ChooseContact(data) {
    var selected_jobs = ;
    selected_id=data.value;
    selected_jobs.forEach(myfunction);

}

function myfunction(item,index)
{
    if(item.id == selected_id)
        {
          $('#id').val(item.id);
          $forname="<p>Fore Name :<b>".concat(item.fore_name,"</b></p>");
          $lastname="<p>Last Name :<b>".concat(item.last_name,"</b></p>");
          $address="<p>Address :<b>".concat(item.address,"</b></p>");
          $contact="<p>Contact Number :<b>".concat(item.contact_no,"</b></p>");
          $isrented="<h3>Rental Details</h3><p>Is Rented :<b>".concat(item.is_rented,"</b></p>");
          $heatingtype="<h3>Property Details </h3><p>Heating Type :<b>".concat(item.heating_type,"</b></p>");
          $no_of_beds="<p>No of Beds :<b>".concat(item.no_of_beds,"</b></p>");
          $propertytype="<p>Property Type :<b>".concat(item.property_type,"</b></p>");
            
            
          $("#job_status").val(item.job_status);
          $a="<h2>Job ".concat( item.job_status , "</h2><h3>Customer Details</h3><p>Title :<b>",item.title,"</b></p>",$forname,$lastname,$address,$contact,$isrented,$heatingtype,$no_of_beds,$propertytype);
          $("div.demo").html( $a );
            $('#content').show();
       
        }
}
</script>




@endsection