@extends('admin.layouts.master')

@section('title','HR')

@section('content')
<div class="container">
  <div class="my-4 d-flex justify-content-between align-items-center">
    <h1 class="text-center">Applications</h1>
    <div>
        <a class="btn btn-primary" href="{{ route('admin.applicationSheet') }}">Download Applications Sheet</a>
        <a class="btn btn-warning" href="{{ route('admin.followSheet') }}">Download Follow Ups Sheet</a>
        <a class="btn btn-success" href="{{ route('admin.contractSheet') }}">Download Contracts Sheet</a>
    </div>
  </div>
  <div class="search-field mt-4">
    <form action="{{ route('admin.hr.index') }}" method="get">
      @csrf
      <div class="d-flex justify-content-center align-items-center my-1">
        <input name="keyword" type="search" class="col-8 rounded p-2 border border-dark mx-2" placeholder="search.."/>
        <div class="col-3" style="height: 100px;overflow-y:scroll;border: 1px solid #555;border-radius:5px;">
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Business Partner">Business Partner</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Team Leader">Team Leader</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Team Member">Team Member</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Media Buyer">Media Buyer</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Branch Manager">Branch Manager</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Accountant">Accountant</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Programmer">Programmer</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="SEO">SEO</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="IT">IT</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="HR Assistant">HR Assistant</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Admin">Admin</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Admin Assistant">Admin Assistant</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Office Girl">Office Girl</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Content Creator">Content Creator</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Graphic Designer">Graphic Designer</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Broker">Broker</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Tech Support">Tech Support</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="HR">HR</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Office Boy">Office Boy</label>
          <label class="d-block"><input type="checkbox" class="mx-2" name="positions[]" value="Sanitation Worker">Sanitation Worker</label>
        </div>
        <button type="submit" class="btn btn-primary text-white col-1 p-2 mx-2">
          <i class="fa fa-search mx-1"></i>search
        </button>
      </div>
    </form>
  </div>
  <div class="d-flex justify-content-between">
      <div class="mt-4">
          <div class="d-inline">
            <a class="btn btn-primary" target="_blank" href="{{ route('applicationForm') }}">Add New Application</a>
          </div>
          <div class="d-inline">
            <a class="btn btn-warning" target="_blank" href="{{ route('admin.internal.index') }}">Agents Evaluation Control</a>
          </div>
      </div>
      <div class="d-flex justify-content-end align-items-center mt-4 mb-1">
        <form class="d-flex justify-content-center align-items-center" action="{{route('admin.hr.destroy','x')}}" method="post">
          @csrf
          @method('DELETE')
          <input type="text" name="ids" id="idsArray" hidden>
          <div>
            <input type="checkbox" id="selectAll"/>
            <label class="mb-0" for="selectAll" >Select All</label>
          </div>
          <div>
            <button type="submit" class="btn btn-primary text-white p-2 mx-2" id="dis">
              <i class="fa fa-trash mx-1"></i>Delete All
            </button>
          </div>
        </form>
      </div>
  </div>
  <table class="table table-bordered text-center bg-light">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Mobile</th>
        <th>Position</th>
        <th>Last Work Experience</th>
        <th>Application Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      @foreach ($applications as $application)
          <tr>
              @php $application->positionTitle = explode(',',$application->positionTitle); @endphp
            <td>{{ $loop->iteration }}</td>
            <td>{{ $application->name }}</td>
            <td>{{ $application->mobile }}</td>
            <td>{{ $application->position }}</td>
            <td>{{ $application->positionTitle[0] }}</td>
            <td>{{ $application->date }}</td>
            <td class="col-1">
              <div class="d-flex">
                <input type="checkbox" class="checkDel" id="{{ $application->id }}" value="{{ $application->id }}"/>
                <div class="btn-group dropleft">
                  <a class="py-1 px-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-ellipsis-v"></i>
                  </a>
                  <div class="dropdown-menu p-0 m-0">
                    <a class="text-decoration-none text-body" href="{{ route('admin.Sheet',['id'=>$application->id]) }}">
                      <div class="text-center p-2">
                        Download Sheet
                      </div>
                    </a>
                    <a class="text-decoration-none text-body" href="{{ route('admin.applicationEdit', $application->id) }}">
                        <div class="text-center p-2">
                            Edit Application
                        </div>
                    </a>
                    <a class="text-decoration-none text-body" href="{{ route('admin.hr.show',$application->id) }}">
                      <div class="text-center p-2">
                        Show
                      </div>
                    </a>
                    <a class="text-decoration-none text-body" href="{{ route('admin.hr.followup',['application'=>$application->id]) }}">
                      <div class="text-center p-2">
                        Follow Up
                      </div>
                    </a>
                    <a class="text-decoration-none text-body" href="{{ route('admin.hr.contract',['application'=>$application->id]) }}">
                      <div class="text-center p-2">
                        Contract
                      </div>
                    </a>
                    <div class="text-center p-2">
                      <form action="{{ route('admin.hr.destroy',$application->id) }}" class="p-0 m-0" method="POST">
                        @csrf
                        @method('DELETE')
                        <button class="p-0 m-0 border-0 bg-transparent text-danger col-12" type="submit">Delete</button>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              </td>
            </tr>
      @endforeach
    </tbody>
  </table>
    {{$applications->links()}}
</div>
@endsection
@section('js')
<script>
  let arr = [];
  let all = false;
  $('#dis').attr('disabled',true);
  $(document).on('click','.checkDel',function(){
    var item = $(this).val();
    if(arr.includes(item)){
      arr = arr.filter(e => e !== item)
    }else{
      arr.push(item);
    }
    $('#idsArray').val(arr);
    if(arr.length > 1){
      $('#dis').attr('disabled', function(_, attr){ return false});
    }else{
      $('#dis').attr('disabled', function(_, attr){ return true});
    }
  });
  $(document).on('change','#selectAll',function(){
    all==false? all = true : all = false;
    var items = $('.checkDel');
    items.each(element => {
      if(arr.includes(items[element].value) == false && all == true){
        $('#'+items[element].value).click();
      }
      if(arr.includes(items[element].value) == true && all == false){
        $('#'+items[element].value).click();
      }
    });
    console.log(arr);
  });
</script>
@endsection