@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-12">
        <h4>Jobs</h4>
    </div>
    <div class="col-xl-3 col-lg-6 col-12">
      <div class="card gradient-orange-amber">
        <div class="card-body">
          <div class="px-3 py-3">
            <div class="media">
              <div class="align-center">
                <i class="icon-pointer text-white font-large-2 float-left"></i>
              </div>
              <div class="media-body text-white text-right">
                <h3 class="text-white">{{$total_jobs}}</h3>
                <span>Total Jobs</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-12">
      <div class="card gradient-light-blue-cyan">
        <div class="card-body">
          <div class="px-3 py-3">
            <div class="media">
              <div class="align-center">
                <i class="icon-pencil text-white font-large-2 float-left"></i>
              </div>
              <div class="media-body text-white text-right">
                <h3 class="text-white">{{$pending_jobs}}</h3>
                <span>Total Current Jobs</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-12">
      <div class="card gradient-red-pink">
        <div class="card-body">
          <div class="px-3 py-3">
            <div class="media">
              <div class="align-center">
                <i class="icon-speech text-white font-large-2 float-left"></i>
              </div>
              <div class="media-body text-white text-right">
                <h3 class="text-white">{{$pending_jobs}}</h3>
                <span>No. of pending jobs</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 mt-3">
        <h4>Edit Jobs</h4>
    </div>
    <div class="col-xl-3 col-lg-6 col-12">
        <div class="card bg-success" style="height: 145.6px;">
          <div class="card-body">
            <div class="px-3 py-3">
              <div class="row text-white">
                <div class="col-4">
                  <h1><i class="fa fa-usd background-round text-white p-2 font-medium-3"></i></h1>
                </div>
                <div class="col-8 text-right pl-0">
                  <h5 class="text-white mb-2">All Jobs</h5>
                  <a href="{{url('parachaJobList')}}" class="text-white"><span>View All Jobs</span></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-12">
        <div class="card bg-danger" style="height: 145.6px;">
          <div class="card-body">
            <div class="px-3 py-3">
              <div class="row text-white">
                  <div class="col-4">
                    <h1><i class="fa fa-usd background-round text-white p-2 font-medium-3"></i></h1>
                  </div>
                  <div class="col-8 text-right pl-0">
                    <h5 class="text-white mb-2">Open New Job</h5>
                    <a href="{{url('parachaJob/create')}}" class="text-white"><span>Add New</span></a>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-12">
        <div class="card bg-info" style="height: 145.6px;">
          <div class="card-body">
            <div class="px-3 py-3">
              <div class="row text-white">
                  <div class="col-4">
                    <h1><i class="fa fa-usd background-round text-white p-2 font-medium-3"></i></h1>
                  </div>
                  <div class="col-8 text-right pl-0">
                    <h5 class="text-white mb-2">Close Job</h5>
                    <a data-toggle="modal" data-keyboard="false" data-target="#closeJobDetail" class="text-white"><span>Close Job</span></a>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  {{-- Modal --}}
<div class="modal fade text-left" id="closeJobDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header gradient-green-tea">
              <h3 class="modal-title text-white" id="myModalLabel3">Close Job</h3>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body">
              <form class="form" id="closeJob">
                  <div class="row">
                      <div class="col-6">
                          <div class="form-group">
                            <label for="job_id">Select Job Number</label>
                            <select id="job_id" name="job_id" class="form-control">
                                <option selected disabled="">Select Job</option>
                                @foreach ($jobs as $item)
                                    <option value="{{$item->id}}">{{$item->job_no}}</option>
                                @endforeach
                            </select>
                          </div>
                      </div>
                  </div>
                  <div class="form-actions center pt-2">
                      <a data-dismiss="modal">
                          <button type="button" class="btn btn-danger mr-1">
                              <i class="icon-trash"></i> Cancel
                          </button>
                      </a>
                      <button type="button" class="btn btn-raised btn-success closeJob">
                          <i class="icon-note"></i> Update
                      </button>
                  </div>
              </form>    
          </div>
      </div>
  </div>
</div>
@endsection

@section('afterScript')
    <script>
      $(document).ready(function(){
        $('#job_id').select2();

        $(document).on('click','.closeJob',function(e){
          e.preventDefault();
          var form_data = new FormData($("#closeJob")[0]);

          $.ajaxSetup({
              headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              url : "{{ route('close_job.update') }}",
              type: "POST",
              data : form_data,
              async: false,
              cache: false,
              contentType: false,
              enctype: 'multipart/form-data',
              processData: false,
              success: function (res) {
                  swal("Inserted!", "Job has been closed Successfully!", "success");
                   setTimeout(function() { 
                      location.reload();
                  }, 1500);
              },
              error: function(err) {
                  swal('Not Valid',err.responseJSON.message,'error');
                  // setTimeout(function() { 
                  //     location.reload();
                  // }, 1000);
              
              }
          });
        })
      })
    </script>
@endsection