@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">Add Task</h1>
        </div>
        <form class="user" action="{{ route('task.save') }}" method="post">
          @csrf
          <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-4 mt-3">
              <div class="form-group bmd-form-group">
                <label>Job</label>
                <select name="job_id" id="job_id" class="form-control form-control-user">
                  <option> - Select Job - </option>
                  @foreach($job as $key=>$value)
                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>

            <div class="col-md-4 mt-3">
              <div class="form-group bmd-form-group department_name">
                <label>Department</label>
                <select name="departmentFK" class="form-control form-control-user">
                  <option>- Select -</option>
                  @foreach($deps as $key=>$dep)
                    <option value="{{$dep->id}}">{{$dep->name}}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
          <div class="part_dep" id="part_dep">
            <div class="row justify-content-md-center">
              <div class="col-md-8 mt-3">
                  <label>Type: Part</label>
              </div>
              <div class="col-6">
                <div class="form-group bmd-form-group">
                  <input type="number" name="time_part" class="form-control form-control-user" placeholder="Estimate time" required>
                  {!! $errors->first('time_part', '<p class="help-block text-danger mb-0">:message</p>') !!}
                </div>
              </div>
              <div class="col-2">
                <select name="unit_time_part" class="form-control form-control-user">
                    <!-- <option value="hour">Hour</option> -->
                    <option selected value="minute">Minute</option>
                </select>
              </div>
            </div>
          </div>
          <div class="electrode_dep" id="electrode_dep">
            <div class="row justify-content-md-center">
              <div class="col-md-8 mt-3">
                  <label>Type: Electrode</label>
              </div>
              <div class="col-6">
                <div class="form-group bmd-form-group">
                  <input type="number" name="time_electrode" class="form-control form-control-user" placeholder="Estimate time" required>
                  {!! $errors->first('time_electrode', '<p class="help-block text-danger mb-0">:message</p>') !!}
                </div>
              </div>
              <div class="col-2">
                <select name="unit_time_electrode" class="form-control form-control-user">
                    <!-- <option value="hour">Hour</option> -->
                    <option selected value="minute">Minute</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row justify-content-md-center">
            <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" type="text/css" href="{{ asset('css/check_style.css') }}">
  <style type="text/css">
    select:invalid { color: gray; }
    .form-control-user{
      font-size: .8rem;
      border-radius: 10rem;
      padding: 0rem 1rem !important;
    }
    .department_name,.electrode_dep,.part_dep{
      display: none;
    }
  </style>
@endsection

@section('script')
  <script type="text/javascript">
    $('#job_id').change(function(){
      let job_id = $(this).val();
      $.ajax({
        url: "{{ route('task.search.job') }}",
        type: 'post',
        dataType: 'json',
        data: {
          _token: '{{ csrf_token() }}',
          job_id: job_id
        },
        success: function(res){
         
          $('#department_name').val(res.dep.name);
          $('#departmentFK').val(res.dep.id);
          $('.department_name').show();
          
          if(res.dep.part > 0){
            $('.part_dep').show();
          }else{
            $('.part_dep').hide();
            $('.part_dep input').val('');
          }
          if(res.dep.et > 0){
            $('.electrode_dep').show();
          }else{
            $('.electrode_dep').hide();
            $('.electrode_dep input').val('');
          }
        }
      });
    });
  </script>
@endsection