@extends('admin.layouts.master')

@section('title','Potential Candidates')

@section('content')
<div class="container">
  {{-- <div class="text-right my-4">
    <a class="btn btn-primary" href="{{ route('admin.candidatesSheet') }}">Download Potential Candidates Sheet</a>
  </div> --}}
  <h1 class="text-center my-3">Potential Candidates</h1>
  <div class="my-4 text-center">
    <a class="btn btn-success" href="{{ route('admin.possibleCandidateForm') }}">Add New Candidate</a>
  </div>
  <div class="search-field mt-4">
    <form action="{{ route('admin.possibleCandidates') }}" 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.."/>
        <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-end align-items-center mt-4 mb-1">
    <form class="d-flex justify-content-center align-items-center" action="{{route('admin.candidate.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 class="btn btn-danger text-white p-2 mx-2" id="dis">
          <i class="fa fa-trash mx-1"></i>Delete All
        </button>
        <button type="submit" id="submit55" hidden></button>
      </div>
    </form>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal55" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
              <button type="button" class="close ml-1" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
              </div>
              <div class="modal-body">
                are you sure you want to delete those candidates
              </div>
              <div class="modal-footer">
                  <button id="55" class='btn btn-danger'>Delete</button>
              </div>
          </div>
      </div>
  </div>
  </div>
  <table class="table table-bordered text-center bg-light">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Mobile</th>
        <th>Email</th>
        <th>Coverge Area</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      @foreach ($candidates as $candidate)
          <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $candidate->name }}</td>
            <td>{{ $candidate->mobile }}</td>
            <td>{{ $candidate->email }}</td>
            <td>{{ $candidate->CovergeArea }}</td>
            <td class="col-1">
              <div class="d-flex">
                <input type="checkbox" class="checkDel" id="{{ $candidate->id }}" value="{{ $candidate->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.candidate.sheet',$candidate->id) }}">
                      <div class="text-center p-2">
                        Download Sheet
                      </div>
                    </a>
                    <a class="text-decoration-none text-body" href="{{ route('admin.candidate.show',$candidate->id) }}">
                      <div class="text-center p-2">
                        Show
                      </div>
                    </a>
                    <a class="text-decoration-none text-body" href="{{ route('admin.candidateEdit',$candidate->id) }}">
                      <div class="text-center p-2">
                        Edit
                      </div>
                    </a>
                    <div class="text-center p-2">
                      <form action="{{ route('admin.candidate.destroy',$candidate->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>
    {{$candidates->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});
    }
  });
  $('#dis').on('click',function(e){
    e.preventDefault();
    $('#exampleModal55').modal('show');
  });
  $('#55').on('click',function(){
    $('#submit55').click();
  });
  $(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