@extends('layouts.app')

@section('title', 'Activity log |')

@section('content')

<!-- Page Content -->
<div class="content container-fluid" style="padding: 5px;">

    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h3 class="page-title">Activity log</h3>                                
            </div>
            <div class="col-auto float-right ml-auto">
               
            </div>
        </div>
    </div>
    <!-- /Page Header -->
    
    <!-- Search Filter -->
    <div class="row filter-row"> 
    <div class="col-sm-6 col-md-3">  
            <div class="form-groug ">                
               <label class="focus-label">Date</label>
               <input type="text" class="form-control commonDatepicker log_date" name="date">
            </div>
        </div>       
        <div class="col-sm-6 col-md-3">  
            <div class="form-groug ">                
               <label class="focus-label">Log name</label>
               <select class=" form-control select log_name">                     
                    <option value="">All</option>
                    <option value="user">User</option>
                    <option value="address">Address</option>
                    <option value="client">Client</option>
                    <option value="vendor">Vendor</option>
                    <option value="asset">Asset</option>
                    
                </select>    
            </div>
        </div>
        <div class="col-sm-6 col-md-3"> 
            <div class="form-group ">
                <label class="">Activity</label>                    
                <select class=" form-control select activity_name">                     
                    <option value="">All</option>
                    <option value="created">Create</option>
                    <option value="updated">Update</option>
                    
                </select>                
            </div>
        </div>
        
        <div class="col-sm-6 col-md-3">  
            <button type="submit" class="btn btn-success searchBtn" style="margin-top: 30px; padding: 5px 10px; min-height: 30px;">Search </button>          
        </div>     
    </div>
    <!-- /Search Filter -->
    <div class="" id="logResult">
        @include('activity.ajax')   
    </div>
   
   
</div>
<!-- /Page Content -->
<!--  -->

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

$(document).ready(function(){

$(document).on('change','.log_date, .activity_name, .log_name', function (e){
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();
});
//
$(document).on('click','.searchBtn', 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 log_date            =    $(".log_date").val();                
    var activity_name       =    $(".activity_name option:selected").val();                
    var log_name            =    $(".log_name option:selected").val();                

        $.ajax(
        {
            url: '?page=' + page+'&log_date='+log_date+'&activity_name='+activity_name+'&log_name='+log_name,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#logResult").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