@extends('account.base', [
    'scripts' => [
        'multiLineEllipsis',
        'simpleCountdown'
    ]
])

@section('title', __('Order History'))

@section('account_content')

    @include('common.no_cache')

    <div class="ui grid" id="orderHistory">
        <h2 class="ui dividing header font-title">{{ __('Order History') }}</h2>

        <div class="row">
            <div class="col">
                <div class="ui grid">
                    <div class="sixteen wide column order-history-filters">
                        <div class="order-type-filter">
                            <div class="order-type-filter-item">
                                <input type="radio" name="historyFilter" value="all" id="historyFilter_all" class="order-type-input" checked>
                                <label for="historyFilter_all" title="{{__('orders-all')}}">{{__('orders-all')}}</label>
                            </div>
    
                            <div class="order-type-filter-item">
                                <input type="radio" name="historyFilter" value="{{\App\Enumerables\PaymentStatus::PAID}}" id="historyFilter_paid" class="order-type-input">
                                <label for="historyFilter_paid" title="{{__('orders-paid')}}">{{__('orders-paid')}}</label>
                            </div>
    
                            <div class="order-type-filter-item">
                                <input type="radio" name="historyFilter" value="{{\App\Enumerables\PaymentStatus::CART_PROCESSING}}" id="historyFilter_pending" class="order-type-input">
                                <label for="historyFilter_pending" title="{{__('orders-to-pay')}}">{{__('orders-to-pay')}}</label>
                            </div>
    
                            <div class="order-type-filter-item">
                                <input type="radio" name="historyFilter" value="{{\App\Enumerables\PaymentStatus::CANCELLED}}" id="historyFilter_cancelled" class="order-type-input">
                                <label for="historyFilter_cancelled" title="{{__('orders-cancelled')}}">{{__('orders-cancelled')}}</label>
                            </div>
                        </div>
                        
                        <div class="ui inline dropdown icon" id="sort">
                            <div class="text">{{ __('Recent Orders') }}</div>
                            <i class="chevron down icon"></i>
                            <div class="menu">
                                <div class="active selected item" data-value="1">{{ __('Recent Orders') }}</div>
                                <div class="item" data-value="6">{{ __('Last 6 Months') }}</div>
                                <div class="item" data-value="12">{{ __('All-order-history') }}{{' '}}{{date('Y')}} {{ __('Orders') }} </div>
                                <div class="item" data-value="all">{{ __('All Orders') }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui grid" id="orders-table">

                </div>
            </div>
        </div>
    </div>

    <script>
        var ellipsis = new MultiLineEllipsis(true);
        var currentPage = 1;

        $(function () {
            $('.ui.breadcrumb').append("<a href=\"#\" class=\"section\">"+"{{ __('Order History') }}"+"</a>");
            $('#orderHistoryMenuItem').addClass('active');
    
            $('.order-type-input').on('change', function () {
                searchFilter(1);
            });
    
            $('#sort .menu').on('click', function () {
                searchFilter(1);
            });

            searchFilter(1);
        });

        function searchFilter(page) {
            currentPage = page;
            
            $.ajax({
                type: 'GET',
                url: '{{route('orderHistoryFilter')}}',
                data: {
                    _token: '{{csrf_token()}}',
                    sortBy: $("#sort .item.active").attr('data-value'),
                    page: page,
                    paymentStatus: document.querySelector('.order-type-input:checked').value
                },
                success: function (data) {
                    $('#orders-table').html(data);
        
                    ellipsis.clipText('.details-column .details-title, .details-column .details-subtitle', '.ellipsis-text');
                    
                    $('.payment-countdown').each(function () {
                        simpleCountdown2(
                            this,
                            this.getAttribute('data-text'),
                            cancelOrder,
                            this.getAttribute('data-order')
                        );
                    });
                }
            });
        }
        
        function cancelOrder(id) {
            $.ajax({
                type: 'POST',
                url: '{{route('cancelOrder')}}',
                data: {
                    _token: '{{csrf_token()}}',
                    orderId: id
                },
                success: function () {
                    searchFilter(currentPage);
                }
            });
        }
    </script>
@endsection