@extends('layouts.app')
@section('title', 'Document |')
@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">Company Docs</h3>                                
            </div>
            <div class="col-auto float-right ml-auto">
                 @if( auth()->user()->role_id == 1 || auth()->user()->role_id ==2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4  )
                <a href="{{route('/company/doc/create')}}" class="btn add-btn " ><i class="fa fa-plus"></i> Add Document</a>
                @endif
            </div>
        </div>
    </div>
    <!-- /Page Header -->
    
    <!-- Search Filter -->
    <div class="row filter-row">        
        <div class="col-sm-6 col-md-3">  
            <div class="form-group ">
                <label class="focus-label">Comapny</label>
                <select class=" company_list form-control onCompanySelect"></select> 
            </div>
        </div>
        <div class="col-sm-2 col-md-2"> 
            <div class="form-group ">
                <label class="focus-label">Start date</label>
                <input type="text" name="start_date" class="form-control start_date commonDatepicker" placeholder="DD-MM-YYY">              
            </div>
        </div>
         <div class="col-sm-2 col-md-2"> 
            <div class="form-group ">
                <label class="focus-label">End date</label>
                <input type="text" name="" class="form-control end_date commonDatepicker" placeholder="DD-MM-YYY">              
            </div>
        </div>
        <div class="col-sm-6 col-md-2"> 
            <div class="form-group ">
                <label class="">Status</label>
                <select class="form-control select doc_status"> 
                    <option value="">-All-</option>
                    <option value="1">Active</option>
                    <option value="0">Expired</option>                           
                </select>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">  
        <button type="submit" class="btn btn-success searchBtn" style="padding: 3px 10px;margin-top: 30px;min-width: 26px;min-height: 36px;">
            Search
        </button>  
        </div>     
    </div>
    <!-- /Search Filter -->
   
    <!-- /Search Filter -->
    <div id="resultRows">
        @include('company-docs.ajax')   
    </div>
    <!--  -->
    <!--  -->
</div>
<!-- /Page Content -->


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

$(document).ready(function(){
    var notificationTimeout;

//Shows updated notification popup 
var updateNotification = function(task, notificationText, newClass){
    var notificationPopup = $('.notification-popup ');
    notificationPopup.find('.task').text(task);
    notificationPopup.find('.notification-text').text(notificationText);
    notificationPopup.removeClass('hide success');
    // If a custom class is provided for the popup, add It
    if(newClass)
        notificationPopup.addClass(newClass);
    // If there is already a timeout running for hiding current popup, clear it.
    if(notificationTimeout)
        clearTimeout(notificationTimeout);
    // Init timeout for hiding popup after 3 seconds
    notificationTimeout = setTimeout(function(){
        notificationPopup.addClass('hide');
    }, 5000);
};

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

$(document).on('change','.start_date, .end_date, .doc_status', 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 company_id      =  $(".company_list").val();                
    var status          =  $(".doc_status option:selected").val();                
    var start_date      =  $(".start_date").val();     
    var end_date        =  $(".end_date").val();                

        $.ajax(
        {
            url: '?page=' + page+'&company_id='+company_id+'&status='+status+'&start_date='+start_date+'&end_date='+end_date,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#resultRows").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