@extends('layouts.app')

@section('title', 'Vendor |')

@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 Vendor</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('/vendor/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=" vendor_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 vendor_category">                     
                    <option value="">All Category</option>
                    @if(count($v_category) > 0)
                        @foreach($v_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 vendor_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 class="" id="vendorResult">
        @include('vendor-user.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(){

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

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


$(document).on('change','.vendor_list, .vendor_category, .vendor_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 vendor_id           =    $(".vendor_list").val();                
    var vendor_status       =    $(".vendor_status option:selected").val();                
    var vendor_category     =    $(".vendor_category option:selected").val();                

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