@extends('layouts.app')

@section('title', 'Office Asset |')

@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">Your Assets</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('/asset/create')}}" class="btn add-btn " ><i class="fa fa-plus"></i> Add </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-groug ">                
                <label class="focus-label">Name</label>
                <select id="" class=" asset_list form-control onclientSelect">
                </select>   
            </div>
        </div>
        <div class="col-sm-6 col-md-3"> 
            <div class="form-group ">
                <label class="">-Category-</label>                    
                <select class=" form-control select asset_category">                     
                    <option value="">All Category</option>
                    @if(count($category) > 0)
                        @foreach($category as $item)
                        <option value="{{$item->id}}">{{$item->title}}</option>
                    @endforeach
                    @endif
                </select>                
            </div>
        </div>
        <div class="col-sm-6 col-md-3"> 
            <div class="form-group ">
                <label class="focus-label">Status</label>
                <select class="form-control asset_status"> 
                    <option value="">Status</option>
                    <option value="">Active</option>                    
                </select>                
            </div>
        </div>
        <div class="col-sm-6 col-md-3">  
            <button type="submit" class="btn btn-success" style="margin-top: 30px; padding: 5px 10px; min-height: 30px;">Search </button>          
        </div>     
    </div>
    <!-- /Search Filter -->
   <div id="assetResult">

        @include('office-asset.ajax')                

   </div>
    <!--  -->
    
    <!--  -->
</div>
<!-- /Page Content -->
<!--  -->

<!-- Delete Employee Modal -->
<div class="modal custom-modal fade" id="delete_employee" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-header">
                    <h3>Inactive Client</h3>
                    <p>Are you sure want to Inactive?</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">Disable</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>
<!-- /Delete Employee Modal -->
       

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

$(document).ready(function(){

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

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


$(document).on('change','.asset_list, .asset_category, .item_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 asset_name     =  $(".asset_list").val();                
    var asset_category =  $(".asset_category option:selected").val();                
    var asset_status   =  $(".asset_status option:selected").val();                

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