@extends($theme.'.layouts.admin')
@section('content')
<!--Slider Start-->
<div class="paralax-section-slide-data1">
    <h1>List Of {{ $main_category_name }}</h1>
    <nav class="breadcrumb-bar" aria-label="breadcrumb">
        <ol class="container breadcrumb text-center text-lg-left">
            <li class="breadcrumb-item"><a href="{{ URL::to('/') }}">Home</a></li>
            <!-- <li class="breadcrumb-item"><a href="#">categories</a></li> -->
            <li class="breadcrumb-item current-page" aria-current="page"><a href="#">{{ $main_category_name }}</a></li>
        </ol>
    </nav>
</div>
<!--Slider End-->
<div class="product-listing">
    <div class="container">
        <div class="row no-gutters product-body category-list">
            <!-- START PRODUCT COL 8 -->
            <div class="col-md-12 col-lg-12 order-1 order-lg-2">
                <div class="row">
                    <!-- START PRODUCT LISTING SECTION -->
                    <div class="col-12 product-listing-products">
                        <!-- START DISPLAY PRODUCT -->
                        <div class="product-list row" id="category-div">
                            @forelse($sub_category_list as $data)
                                <div class="col-12 col-md-6 col-lg-3 manage-color-hover wow slideInUp school_name" data-wow-delay=".2s" data-category-id="{{ $data->id }}" data-category-name="{{ $data->name }}" data-image="{{ $data->image }}" href="#" data-toggle="modal" data-target="#password_modal">
                                    <div class="product-item ">
                                        <div class="item p-item-img">
                                            <a href="javascript:;">
                                                <img src="{{ $data->image }}" alt="images">
                                            </a>
                                            <div class="text-center d-flex -content-center align-items-center">
                                                <a class="listing-cart-icon" href="javascript:;">
                                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-item-detail">
                                        <h4 class="text-center p-item-name"><a href="javascript:;"> {{ $data->name }} </a></h4>
                                    </div>
                                </div>
                            @empty
                                <p> data not found </p>
                            @endforelse

                        </div>
                        <!-- END DISPLAY PRODUCT -->
                    </div>
                    <!-- END PRODUCT LISTING SECTION -->
                    <div class="col-12">
                    <nav class="d-flex align-items-center" aria-label="Page navigation example">
                        <ul class="pagination">
                            @if(!empty($sub_category_list) && $totalpages > 1)
                                @if($current_page != 1)
                                    @php
                                        $prev= $current_page - 1;
                                    @endphp
                                    <li class="page-item left page-link-previous">
                                        <a href="#" data-page="{{ $prev }}"  class="page-link" aria-label="Previous"> <span aria-hidden="true"><i class="ti-arrow-left mr-1"></i>Prev</span></a>
                                    </li>
                                @else
                                    <li class="page-item left">
                                    <li class="page-item disabled">
                                        <span  class="page-link left page-link-previous" data-page="0">@lang('messages.Previous')</span>
                                    </li>
                                @endif
                                                                @for($k = max(1, $current_page - 5); $k <= min($current_page + 8, $limit); $k++)
                                    <li class="page-item active"><a  class="page-link" href="#" data-page="{{ $k }}">{{ $k }}</a></li>
                                @endfor
                                @if($current_page != $totalpages)
                                    @php $next = $current_page + 1; @endphp
                                    <li class="page-item right">
                                        <a href="#" data-page="{{ $next }}"  class="page-link page-link-next"><span aria-hidden="true"><i class="ti-arrow-right mr-1"></i>Next</span></a>
                                    </li>
                                @else
                                    <li class="page-item right disabled">
                                        <span  class="page-link" data-page="">@lang('messages.Next')</span>
                                    </li>
                                @endif
                            @endif
                        </ul>
                    </nav>
                </div>
                </div>
            </div>
            <!-- END PRODUCT COL 8 -->
        </div>
    </div>
</div>

<script>
    $(document).on('click', '.page-link', function(e) {
    $('.loader').show();
    var token = $('meta[name="csrf-token"]').attr('content');
    var page = $(this).attr("data-page");
    var totalpages = '{{ $totalpages }}';
    var url = '{{ route('sub_categories.list', ['id' => $category_id]) }}';

    if(page == totalpages) {
        $('.page-link-next').parent().addClass('disabled');
    } else {
        $('.page-link-next').parent().removeClass('disabled');
        $('.page-link-next').parent().css('cursor', 'pointer');
    }
    if(page != 1) {
        $('.page-link-previous').parent().removeClass('disabled');
    } else {
        $('.page-link-previous').parent().addClass('disabled');
        $('.page-link-previous').parent().css('cursor', 'pointer');
    }

    $.ajax({
        url: url,
        headers: {
            'X-CSRF-TOKEN': token
        },
        type: 'get',
        data: {
            page: page,
        },
        datatype: 'JSON',
        success: function(resp) {
            $('.loader').hide();
            if (resp.http_code != 200) {
                toastr.error(resp.message);
                return false;
            } else {
                $('.page-item').removeClass('active');
                $('.page-link[data-page=' + page + ']').parent().addClass('active');
                $('.page-link-next').attr('data-page', Number(page)+1);
                $('.page-link-previous').attr('data-page', Number(page)-1);
                $('#category-div').html(resp.data);
            }
        },
        error: function(err) {
            $('.loader').hide();
        }
    });
});
</script>
@endsection