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

@section('title')
    {{ __('my-discount-coupon') }}
@endsection

@section('account_content')
    @include('common.no_cache')
    
    <div class="ui grid" id="discountCoupons">
        <h2 class="ui dividing header font-title">
            {{ __('my-discount-coupon') }}
        </h2>
        
        <div class="row">
            <div class="col">
                <div class="add-discount-container">
                    <div class="discount-input-container">
                        <input type="text" placeholder="" value="" id="discountInput" autocomplete="off">
            
                        <div class="button add-to-bag-btn" onclick="checkDiscount();">
                            {{__('add-discount-coupon')}}
                        </div>
    
                        <div class="discount-error" id="discountError"></div>
                    </div>
                </div>
                
                <div class="discount-coupons-list" id="couponsList"></div>
            </div>
        </div>
    </div>
    
    <script>
        var discountInput,
            discountError;
        var ellipsis = new MultiLineEllipsis();
        
        $(function () {
            discountInput = $('#discountInput');
            discountError = $('#discountError');
            
            $('#discountCouponsMenuItem').addClass('active');
            
            $('.ui.breadcrumb').append("<a href=\"#\" class=\"section\">"+"{{ __('my-discount-coupon') }}"+"</a>");
            
            discountInput.on('input', function () {
                if (discountError.hasClass('visible')) {
                    discountError.removeClass('visible');
                }
            }).on('keypress', function (e) {
                if (e.key === 'Enter') {
                    checkDiscount();
                }
            });
        });
        
        function checkDiscount() {
            var discountCode = discountInput.val().trim();
            
            if (discountCode.length >= 1) {
                $.ajax({
                    method: 'POST',
                    url: '{{route('validateDiscountCode')}}',
                    data: {
                        _token: '{{csrf_token()}}',
                        code: discountCode
                    },
                    success: function (data) {
                        if (data.status === 200) {
                            discountInput.val('');
                            loadCoupons();
                        } else if (data.error !== '') {
                            discountError.text(data.error)
                                .addClass('visible');
                        }
                    },
                    error: function () {
                        location.reload();
                    }
                });
            }
        }
        
        function loadCoupons() {
            $.ajax({
                method: 'POST',
                url: '{{route('getDiscountCoupons')}}',
                data: {
                    _token: '{{csrf_token()}}',
                },
                success: function (data) {
                    $('#couponsList').html(data);
    
                    ellipsis.clipText('.discount-coupon-wrapper .discount-coupon-name', '.ellipsis-text');
                }
            });
        }
        
        loadCoupons();
    </script>
@endsection