@extends('layouts.private')

@section('content')
@section('breadcrumb')
@php
if(empty($data['user'])){
    $data['user'] = false;
} 

if(empty($data['active'])){
    $data['active'] = false;
} 
@endphp 
<div class="c-subheader justify-content-between px-3 py-0 bg-white">
    <ol class="breadcrumb border-0 m-0 px-0 py-0 px-md-3    col-sm-8 col-md-8">

        <li class="pt-3">
            <div class="btn-group">
                <a class="btn btn-md btn-dark border" href="{{ route('pjobs.jobs.create') }}" style="border-right: solid 1px #fff;">
                <i class="fas fa-plus-square" aria-hidden="true"></i>&nbsp;New</a> 
            </div>           
        </li>
        
        <!-- <li class="pt-3 px-3">
        <a class="btn btn-dark"  href="{{ route('jobHotlistDownload', [Auth::user()->tenant_id, 'user' =>  $data['user'], 'active' => $data['active']]) }}" >Download Hotlist</a>
        </li> -->
        <li class="text-left px-3">
            <form method="get" action="{{route('pjobFilters')}}" id="sorting">
                <div class="sortingAction text-center p-0 m-0">                                        
                    <label class="p-0 m-0 small">Active?</label><br/>
                    <label class="c-switch c-switch-label c-switch-opposite c-switch c-switch-success">                        
                        <input class="c-switch-input p-0 m-0" type="checkbox" name="active" value="true" checked onchange="updateJobListing()"  ><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                    </label><br/>
                </div>
                <div class="sortingAction text-center p-0 m-0 ml-3">                                        
                    <label class="p-0 m-0 small">My Listing?</label><br/>
                    <label class="c-switch c-switch-label c-switch-opposite c-switch c-switch-success">
                        <input class="c-switch-input" type="checkbox" name="user" value="true" checked onchange="updateJobListing()" ><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                    </label><br/>
                </div>
            </form>
        </li>
    </ol>
    <ol class="breadcrumb border-0 m-0 px-0 py-0 px-md-3 col-sm-4 col-md-4">
        <li class="pt-3 col-sm-11 col-md-12">
            <div class="text-right">
                <div  class="dataTables_filter">
                    <label class="col-md-10 mb-3"> 
                        <input type="text" id="searchPeople"  onkeyup="updateJobListing()" class="form-control p-3" placeholder="Search.." aria-controls="DataTables_Table_0">
                    </label>
                </div>
            </div>
        </li>
    </ol>
</div>
@endsection
<div class="card " style="overflow-x: auto;">
    
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12" id="jobListing">
                @include('private.jobs.indexTableListing')
             </div>
        </div>
</div>

        

 <!-- Modal
 <div class="modal fade right" id="detailPopup" role="dialog" data-backdrop="static" data-keyboard="false">

                    
                <div class="modal-dialog modal-full-height modal-right" role="document">
                            <div class="modal-content" id="detailPopup_inner">
                            <button class="btn btn-primary backDetailPopup" type="button" onclick="closePopup('detailPopup')"><i class="fa fa-arrow-left"></i> Back</button>

                                <div class="modal-body detailBody">
                                </div>
                            </div>
                        </div>
                    </div>
                    modal -->

 <link href="{{ asset('css/dataTables.bootstrap4.css') }}" rel="stylesheet">

<script src="{{ asset('js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
@section('script')

<script>
  function sortType(event){
        $('.sortValue').val($(event).find('i').data("sort"));
        $('.sortType').val($(event).find('i').data("name"));
        updateJobListing();
    }
function updateJobListing(url = ''){
        var search = $('#searchPeople').val();
        var getUrl = "{{route('pjobs.jobs.index')}}?query="+search;
        if(url != ""){
            getUrl = url+"&query="+search;
        }
        var sortValue = $('.sortValue').val();
        var sortType = $('.sortType').val();
        var active = $('input[name="active"]:checked').val();
        var user = $('input[name="user"]:checked').val();
        $.get(getUrl+'&listing=true&active='+active+'&user='+user+'&sortType='+sortType+'&sortValue='+sortValue, function(data) {
            $('#jobListing').html(data.html);
         
         });
    }
  $('body').on('click', '#jobsPagination a', function(event){
    event.preventDefault();
    updateJobListing($(this).attr('href'));
  });
    
    function updateStatus(event){
        var value = 'Inactive';
        if(event.checked) {
             value = 'Active';
        }
        $.post("{{route('updateStatus')}}", {'status': value, 'id': $(event).val()}, function(data) {
            toastr.success('Status updated successfully');
        });
        
      
    }
 /*   $('#sorting').find('input').change(function (){
        $('#sorting').submit();
    });*/
    function getDetail(url){
        $('.ajax-loader').css("visibility", "visible");

        $.get(url, function(data) {
           $('#detailPopup').find('.detailBody').html(data.html);
           $('#detailPopup').modal();
      
      //appending modal background inside the bigform-content
        $('.modal-backdrop').appendTo('.bigform-content');
      //removing body classes to able click events
      $('body').removeClass();
      $('body').addClass('detailPopup');
      $('body').removeAttr("style");
        $('.modal-backdrop.show').remove();
        setTimeout(function(){ window.scrollTo(0, 0);  $('.ajax-loader').css("visibility", "hidden"); }, 1000);

        });
    }
</script>

@endsection
@endsection