@extends('layouts.private')

@section('content')
@section('breadcrumb')
<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="javascript:;" onclick="openFilterPopup()" style="border-right: solid 1px #fff;">
                <i class="fas fa-plus-square" aria-hidden="true"></i>&nbsp;New</a> 
            </div>           
        </li>
        <li class="text-left px-3">
                <div class="sortingAction text-center p-0 m-0">                                        
                    <label class="p-0 m-0 small">My Interviews?</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" checked name="user" value="true" onchange="updateInterviewListing()" ><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                    </label><br/>
                </div>
          
        </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="search" onkeyup="updateInterviewListing()" 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="interviewListing">
             </div>
        </div>
        <input type="hidden" id="sortByStatus">
</div>
 
<div class="interviewdrawer drawer drawer-right slide" tabindex="-1" role="dialog" aria-labelledby="drawer-1-title" aria-hidden="true" id="drawer-1">
    <div class="drawer-content drawer-content-scrollable" role="document">
        <div class="drawer-header">
            <h4 class="drawer-title" id="drawer-1-title">Interview Details</h4>
        </div>
        <div class="drawer-body">
            <form id="interviews" autocomplete="off">
             @include('private.interviews.create', ['record' => '', 'prifix' => '']) 
            </form>
        </div>
        <div class="drawer-footer">
            <div class="row">
                <div class="col-sm-6">
                    <button  class="btn btn-dark px-4 mt-3" type="button" onclick="saveRecords()">Save</button>
            </div>
            <div class="col-sm-6  text-right">
                    <button class="btn btn-dark px-4 mt-3" data-dismiss="drawer" type="button">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<link href="{{ asset('css/select2.min.css') }}" rel="stylesheet">
@section('css')
<style>

.select2-container .select2-selection--single {
        height: 32px !important;
    }
    .select2-container--default .select2-selection--single{
    border-color: #e4e7ea !important;
}
    .select2-container--default .select2-selection--multiple{
    border-color: #e4e7ea !important;
}
.drawer {
  width: 800px !important;
}
    </style>

    



@endsection  


@section('script')


<script>
updateInterviewListing();
    function sortType(event){
        $('.sortValue').val($(event).find('i').data("sort"));
        $('.sortType').val($(event).find('i').data("name"));
        updateInterviewListing();
    }
function updateInterviewListing(url = ''){
        var search = $('#search').val();
        var getUrl = "{{route('interviews.index')}}?query="+search;
        if(url != ""){
            getUrl = url+"&query="+search;
        }
   

        var sortValue = '';
        var sortType = '';
        if($('.sortValue').val()){
           sortValue = $('.sortValue').val();
            sortType = $('.sortType').val();
        }

        var user = $('input[name="user"]:checked').val();

       var sortByStatus = $("#sortByStatus").val();
        $.get(getUrl+'&listing=true&user='+user+'&sortType='+sortType+'&sortValue='+sortValue+'&status='+sortByStatus, function(data) {
            $('#interviewListing').html(data.html);
         
         });
    }
  $('body').on('click', '#companyPagination a', function(event){
    event.preventDefault();
    updateInterviewListing($(this).attr('href'));
  });

  function updateStatus(id, event){
    
    var active = 'Scheduled';
    if($(event).prop("checked") == true){
            active = 'Completed';
    }
    $.post("{{route('interviewStatusUpdate')}}", {'status' : active, 'id' : id}, function(data) {
        toastr.success(data.message);
        updateInterviewListing();

    });
}
function applyStatusFilters(val){
        $("#sortByStatus").val(val);
        updateInterviewListing();
    }
function openFilterPopup(id = 0){
    $('#id').val('');
    $('input[type=text]').val('');
    $('#interviewScheduled').prop('checked',true);
    $('select').val('');
    $('#interviewer').val('').trigger('change');
    $('#candidate').val('').trigger('change');
    $('#job_applications').val('').trigger('change');
    CKEDITOR.instances.notes.setData('');
    if(id == 0){
        $('.interviewdrawer').drawer('show');
    }else{
        var url =  "{{url('/my/interviews')}}/"+id;
        $.get(url, function(data) {
            $('#interviews').html(data.html);
            $('.interviewdrawer').drawer('show');
        });
    }
    // document.getElementById("interviews").reset();
    //     $('.country').val('').trigger('change');
    //     $('.state').val('').trigger('change');
    } 

    function saveRecords(){
        var formData = $('#interviews').serializeArray();
        formData.push({
            name: 'notes',
            value: CKEDITOR.instances.notes.getData()
        });

        $.post("{{route('saveInterviews')}}", formData, function(data) {
         toastr.success(data.message);
         $('.interviewdrawer').drawer('hide');
         updateInterviewListing();
        }).fail(function(response) {
            var errors = response.responseJSON.errors;

            var msg = '';
            $.each(errors, function(index, value) {
                toastr.error(errors[index][0]);
            });

        }); 
    }
    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