@extends($theme.'.layouts.admin')
@section('content')

<section id="myorder-page" class="checkout-page section-padding">
    <div class="paralax-section-slide-data1" style="background-color: #dedede;">
        <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 current-page" aria-current="page"><a href="{{ url('/myorder') }}">My Orders</a></li>
            </ol>
        </nav>
    </div>
    <div class="container">
        <div class="row pt-2">
            
            <div class="col-lg-12 col-md-12 wow slideInUp">
                <div class="bg-white mb-4">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="sec-heading-flex pl-2 pr-2  mb-0">
                                <div class="sec-heading-flex-one">
                                    <h2>My Orders</h2>
                                </div>
                                <div class="sec-heading-flex-last">
                                    <select class="custom-select" id="statusFilter">
                                        <option value="1">All</option>
                                        <option value="8">Past</option>
                                        <!-- <option value="10">Cancelled</option> -->
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dynamic_content">
                    @include($theme.'.admin.orderlist_ajax')</div>
                    <div class="row pagination_block">
                        <div class="col-lg-12">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item left">
                                        <a class="page-link prev_next" id="prev" data-state="1" href="javascript:;" aria-label="Previous">
                                            <span aria-hidden="true"><i class="ti-arrow-left mr-1"></i>Prev</span>
                                        </a>
                                    </li>
                                                                        <li class="page-item right">
                                        <a class="page-link prev_next" id="next" data-state="2" href="#myorder-page" aria-label="Next">
                                            <span aria-hidden="true"><i class="ti-arrow-right mr-1"></i>Next</span>
                                        </a>
                                        <input type="hidden" name="current_page" value="1" id="current_page">
                                        <input type="hidden" name="total_count" value="{{$orderlist->order_total_count}}" id="total_count">
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
   $(document).ready(function(){
    var total_count = $("#total_count").val();
    if(total_count < 10)
    {
        $("pagination_block").css('display', 'none')
        $(".pagination_block").hide();
    }

    $('#statusFilter').on('change', function() {
        var token, url, data,statusfilter,page,total_count;

        var statusfilter = $(this).val();
        $(".paginate").removeClass('active');
        page='1';
        $(".paginate_"+page).addClass("active");
        $("#current_page").val(page);
        token = $('meta[name="csrf-token"]').attr('content');
        url = '{{url('/myorder/ajax')}}';
        data = {'status':statusfilter,'page':page};
        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'HTML',
            success: function (resp) {

                $(".dynamic_content").html(resp);
                var order_count = $("#order_count").val();
                if(order_count < 10)
                {
                    $(".pagination_block").css('display', 'none')
                    $(".pagination_block").hide();
                }
                else
                {
                    $(".pagination_block").css('display', 'block')
                    $(".pagination_block").show();
                }

            },
        });
    });

    $('.paginate').on('click', function() {
        $(".paginate").removeClass('active');
        var token, url, data,statusfilter,page,current_element;
        page = $(this).data('value');
        $("#current_page").val(page);
        current_element = $(this);
        statusfilter = $('#statusFilter').val();
        token = $('meta[name="csrf-token"]').attr('content');
        url = '{{url('/myorder/ajax')}}';
        data = {'status':statusfilter,'page':page};

        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'HTML',
            success: function (resp) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
                $(".dynamic_content").html(resp);
                current_element.addClass('active');
                //current_element.addClass('active');
            },
        });
    });

    $('.prev_next').on('click', function() {
        var token, url, data,statusfilter,page,current_element;
        var state = $(this).attr('id');
        var current_page = $("#current_page").val();
        var totalpagecount=Math.ceil(total_count/10);

        if(state == 'prev' && current_page > 1)
        {
            page = parseInt(current_page)-1;
        }
        else if(state == 'next' && totalpagecount>current_page)
        {
            page = parseInt(current_page)+1;
        }
        else
        {
            return false;
        }

        $(".paginate").removeClass('active');
        $("#current_page").val(page);
        current_element = $(this);
        statusfilter = $('#statusFilter').val();
        token = $('meta[name="csrf-token"]').attr('content');
        url = '{{url('/myorder/ajax')}}';
        data = {'status':statusfilter,'page':page};
        $(".paginate_"+page).addClass("active");
        $.ajax({
            url: url,
            headers: {'X-CSRF-TOKEN': token},
            data: data,
            type: 'POST',
            datatype: 'HTML',
            success: function (resp) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
                $(".dynamic_content").html(resp);
            },
        });
    });


});
    </script>
@endsection