@extends('layout.adminapp')
@section('content')
<style>
    .lds-ring {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 4px;
  border: 4px solid #007bff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #007bff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="container-fluid">
    
    @if (Session::has('status'))
    <div class="alert alert-success">
        <ul>
            <li>{{ Session::get('status') }}</li>
        </ul>
    </div>
@endif

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Edit Job Seekers</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered job_seeker" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Target Job</th>
                            <th>Nationality</th>
                            <th>Contact</th>
                            <th>E-mail</th>
                            {{-- <th>Gender</th> --}}
                            <th>Expected Salary</th>
                            <th>Edit</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Target Job</th>
                            <th>Nationality</th>
                            <th>Contact</th>
                            <th>E-mail</th>
                            {{-- <th>Gender</th> --}}
                            <th>Expected Salary</th>
                            <th>Edit</th>
                        </tr>
                    </tfoot>
                    <tbody>
                        @foreach ($members as $item)
                        <tr>
                            <td>{{$item['id']}}</td>
                            <td>{{$item['name']}}</td>
                            <td>{{$item->target_job->options->option}}</td>
                            <td>{{$item['nationality']}}</td>
                            <td>{{$item['phone_number']}}</td>
                            <td>{{$item['email']}}</td>
                            <td>{{$item['salary_min']}} to {{$item['salary_max']}}</td>
                            <td><form action="edit-seeker" method="post"> @csrf <input type="hidden" name="id" value="{{$item['id']}}"><button type="submit" class="btn btn-warning">User</button></form>
                            <a href="seeker-edu-edit/{{$item['id']}}" class="btn btn-primary m-1">Education</a><a href="seeker-exp-edit/{{$item['id']}}" class="btn btn-secondary m-1">Experience</a><a href="seeker-ach-edit/{{$item['id']}}" class="btn btn-info m-1">Awards</a><a href="seeker-job-edit/{{$item['id']}}" class="btn btn-info m-1">Target Job</a>
                            
                            
                            <div class="dropdown">
                                <button class="btn btn-primaryy dropdown-toggle" type="button"
                                    id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Resume<span class="caret"></span>
                                </button>
                                <ul class="dropdown-content dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <li><input type="button" class="btn btn-warning m-1" onclick="cvFunction({{$item['id']}});" value="Change Resume"></li>
                                    <li>@if ($item['cv'])
                                        <input type="button" class="btn btn-danger m-1" id="resume_remove{{$item['id']}}" onclick="deleteCv({{$item['id']}});" value="Delete Resume">
                                        @endif</li>
                                    <li>@if ($item['cv'])
                                        <a href="{{asset('CVs/'.$item['cv']['name'])}}" target="_blank" class="btn btn-primary m-1" >View</a>
                                        @endif</li>
                                </ul>
                            </div>
                            <!--img change remove and view-->
                            <div class="dropdown">
                                <button class="btn btn-primaryy dropdown-toggle" type="button"
                                    id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Image<span class="caret"></span>
                                </button>
                                <ul class="dropdown-content dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <li><input type="button" class="btn btn-warning m-1" onclick="imgFunction({{$item['id']}});" value="Change Image"></li>
                                    <li>@if ($item['attachment'] != "0")
                                        <input type="button" class="btn btn-danger m-1" id="img_remove{{$item['id']}}" onclick="deleteImg({{$item['id']}});" value="Delete Image">
                                        @endif</li>
                                    <li>@if ($item['attachment'] != "0")
                                        <a href="{{asset('images/jobseeker/'.$item['attachment'])}}" id="img_view{{$item['id']}}" target="_blank" class="btn btn-primary m-1" >View</a>
                                        @endif</li>
                                </ul>
                            </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="float-right" id="loading" style="display:none">
                    <div class="lds-ring"><div></div><div></div><div></div></div>
                </div>
            </div>
        </div>
    </div>

</div>
<form action="seeker-attachment" method="post" enctype="multipart/form-data">
    @csrf
    <input type="file" name="cv" style="display: none" id="cv">
    <input type="hidden" value="0" name="id" id="seeker_id" />
    <input type="submit" id="submit_cv" style="display:none">
</form>
<form action="{{ route('seeker-update-img') }}" method="post" enctype="multipart/form-data">
    @csrf
    <input type="file" name="image" style="display: none" id="img">
    <input type="hidden" value="0" name="id" id="jobseeker_id" />
    <input type="submit" id="submit_img" style="display:none">
</form>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<script>
//for cv
function cvFunction(id)
{
    document.getElementById("seeker_id").value = id;
    $("#cv").click()
}
$('#cv').change(function() {
            $('#submit_cv').click()
});
// for image
function imgFunction(id)
{
    document.getElementById("jobseeker_id").value = id;
    $("#img").click()
}
$('#img').change(function() {
            $('#submit_img').click()
});


function deleteCv(id)
{
    swal({
              title: `Are you sure you want to delete Resume?`,
              text: "If you delete this, it will be gone forever.",
              icon: "warning",
              buttons: true,
              dangerMode: true,
          })
          .then((willDelete) => {
            if (willDelete) {
                // console.log("resume_remove"+id)
                $("#resume_remove"+id).hide();
                $("#resume_view"+id).hide();
              $.ajax({
                    url: "delete-cv",
                    method: "GET",
                    data:
                    {
                        id: id
                    },
                })
            }})
}
function deleteImg(id)
{
    swal({
              title: `Are you sure you want to delete Image?`,
              text: "If you delete this, it will be gone forever.",
              icon: "warning",
              buttons: true,
              dangerMode: true,
          })
          .then((willDelete) => {
            if (willDelete) {
                // console.log("resume_remove"+id)
                $("#img_remove"+id).hide();
                $("#img_view"+id).hide();
              $.ajax({
                    url: "seeker-delete-img",
                    method: "GET",
                    data:
                    {
                        id: id
                    },
                })
            }})
}
$(document).ready(function(){
    $('#dataTable tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });
    var table4 = $('#dataTable').DataTable({
        //  ajax: '{{route('jobseeker.data')}}',
         "processing": true,
        select: true,
        "aaSorting":[],
         "scrollX": true,
      initComplete: function () {
          // Apply the search
          this.api()
              .columns()
              .every(function () {
                  var that = this;
    
                  $('input', this.footer()).on('keyup change clear', function () {
                      if (that.search() !== this.value) {
                          that.search(this.value).draw();
                      }
                  });
              });
      },
    });
    
    if({{$members->count()}} == 200){
        $('#loading').css('display', 'block');
        $.ajax({
                        url: "{{route('jobseeker.cv.data.edit')}}",
                        method: "GET",
                        // data:
                        // {
                        //     id: id
                        // },
                        success: function(data){
                            var data = JSON.parse(data);
                            // console.log(data.data)
                            
                            table4.rows.add(data.data);
                            table4.draw();
                            $('#loading').css('display', 'none');
                        }
                    })
    }
});

</script>
    <!-- Page level plugins -->
<script src="{{asset('admindic/vendor/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('admindic/vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>

<!-- Page level custom scripts -->
<!--<script src="{{asset('admindic/js/demo/datatables-demo.js')}}"></script>-->

@endsection