@extends('layouts.app')
@section('title', 'Report | ')
@section('content')
<style type="text/css">
/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.on { cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
</style>               
<!-- Page Content -->
<div class="content container-fluid" style="padding: 2px;">

    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h3 class="page-title">Report</h3>                               
            </div>
            <div class="col-auto float-right ml-auto">               
                <a href="{{ route('/report/create') }}" class="btn add-btn" ><i class="fa fa-plus"></i> Submit Report</a>               
            </div>
        </div>
    </div>
    <!-- /Page Header -->
    
    <!-- Search Filter -->
    @if( auth()->user()->role_id != 6)
    <div class="row filter-row">
       <!--  <div class="col-sm-6 col-md-3">  
            <div class="form-group ">
                <label class="focus-label">Project</label>
                <select class=" project_list form-control onSelectProject">

                </select>    
            </div>
        </div> -->
        <div class="col-sm-6 col-md-3">  
            <div class="form-group ">
                <label class="focus-label">User</label>
                <select class=" user_list form-control onSelectUser">

                </select>    
            </div>
        </div>
        <div class="col-sm-6 col-md-2">  
            <div class="form-group ">
                <label class="focus-label">Report Date</label>
                <input type="text" class="form-control clearable commonDatepicker report_date" placeholder="DD/MM/YYYY">
                
            </div>
        </div>
        <div class="col-sm-6 col-md-2"> 
            <div class="form-group ">
                <label class="focus-label">Status</label>
                <select class="select taskStatus"> 
                    <option value="">-Select-</option>                    
                    <option value="over_due">Pending</option>
                    <option value="completed">Approved</option>
                   
                </select>
                
            </div>
        </div>
        <div class="col-sm-6 col-md-2">  
            <a href="javascript:;" class="btn btn-success btn-block searchBtn" style="min-height: 30px; padding: 5px 10px; margin-top: 30px;"> Search </a>  
        </div>     
    </div>
    <!-- /Search Filter -->
    @endif
   
     <div id="projectResult">
        @include('report.ajax')   
    </div> 
   
</div>
<!-- /Page Content -->

                            
<!-- task action Modal -->
<div class="modal custom-modal fade" id="delete_project" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-header">
                    <h3>Delete Project</h3>
                    <p>Are you sure want to delete?</p>
                </div>
                <div class="modal-btn delete-action">
                    <div class="row">
                        <div class="col-6">
                            <a href="javascript:void(0);" class="btn btn-primary continue-btn">Delete</a>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /task Modal -->

<!-- assign task Modal -->
<div class="modal custom-modal fade" id="assignTaskModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
              <form method="post" id="assignTaskForm">
                @csrf
                <div class="form-header">
                <h3> Assign to an user  </h3>                    
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                   <p> You can assign this task to user who associated with project.</p> 
                   <p> If not found under list, go to team member then add user first.</p> 
                </div>
                </div>
                 <div class="form-group">                        
                        <label>Assign to </label>
                        <select class="select" name="assign_user">                          
                        </select>

                        <span class="errorDiv"></span>
                  </div>                   
                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <input type="hidden" name="task_id" id="input_task_id" value="">
                            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
                            <button class="btn btn-primary submit-btn">Assign now</button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>     
<!--  -->
<style type="text/css">
  
</style>

<!-- Script -->
<script type="text/javascript">

$(document).ready(function(){

//
$('.user_list').on('select2:select', function (e){
    var data = e.params.data.id;
    //loader
    $("#overlay").fadeIn(300);　
    getData(0);
    event.preventDefault();
});

$(document).on('change','.user_list, .projectStatus', function (e){    
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

//
$(document).on('click','.searchBtn', function (e){ 
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();
});
//
$(document).on('change','.report_date', function (e){ 
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();
});

// 
$(document).on('click', '.pagination a',function(event){
    //loader
    $("#overlay").fadeIn(300);　
    $('li').removeClass('active');
    $(this).parent('li').addClass('active');
    event.preventDefault();
    var myurl = $(this).attr('href');
    var page=$(this).attr('href').split('page=')[1];
    getData(page);
});

});

function getData(page){

    var user_id =    $(".user_list").val();                
    var status    =    $(".taskStatus option:selected").val();
    var report_date =    $(".report_date").val();                                

        $.ajax(
        {
            url: '?page=' + page+'&user_id='+user_id+'&status='+status+'&report_date='+report_date,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#projectResult").empty().html(data);
            $("#overlay").fadeOut(300);
            //debug to check page number
            // location.hash = page;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
            alert('No response from server');

        });

}



</script>


@endsection