@extends('layouts.userLayouts')

@section('head')
    <meta name="_token" content="{{csrf_token()}}">
@stop
@section('main')
    <div class="profile-page col-xl-9 col-lg-8 col-md-12 order-2">
        <div class="row">
            <div class="col-12">
                <div class="col-12">
                    <h1 class="title-tab-content">افزایش اعتبار</h1>
                    <p>برای سفارش راحت و سریع تر اعتبار خود را افزایش دهید</p>
                </div>
                <div class="content-section default">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="row">
                                <div class="col-12">
                                    <h1 class="title-tab-content">افزایش اعتبار (مقدار دلخواه)</h1>
                                </div>
                                <div class="col-12">
                                    <form method="post" onsubmit="return false" id="wallet_desired">
                                        <div class="form-account-row">
                                            <input class="input-field text-right" type="text" autocomplete="off"
                                                   placeholder="مبلغ دلخواه (تومان)" name="amount" id="price_1"
                                                   onkeyup="number_to_letter('price_1');">
                                        </div>
                                        <span style="font-size: 9pt" id="letter_result_price_1"></span>
                                        تومان

                                        <div class="form-account-row text-center">
                                            <button onclick="walletDesired();" class="btn btn-primary btn-no-icon">
                                                پرداخت
                                            </button>
                                        </div>
                                    </form>
                                    <div class="message-light walletDesiredResponse" style="display: none"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="mb-0 mt-0">
                    <div class="row">
                        <div class="col-12">
                            <div class="message-light giftcardResponse" style="display: none">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="checkout-price-options default">
                                <div class="checkout-price-options-form default">
                                    <section class="default">
                                        <div class="checkout-price-options-header default">
                                            <h1 class="title-tab-content">استفاده از کارت هدیه
                                            </h1>
                                        </div>
                                        <form action="" onsubmit="return false" id="giftcardForm">
                                            <div class="checkout-price-options-content default">
                                                <div class="checkout-price-options-row default">
                                                    <div class="form-account-row default">
                                                        <div class="form-element float-rigth">
                                                            <div class="checkout-price-options-form-field">
                                                                <input class="ui-input-field" value=""
                                                                       name="code" type="text"
                                                                       placeholder="مثلا 837A2CS" id="giftcard-code">
                                                                <button onclick="checkGiftcard();" type="button"
                                                                        class="btn-primary btn-no-icon">
                                                                    بررسی
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>
                                            </div>
                                        </form>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="col-12">
                    <h1 class="title-tab-content">تاریخچه اعتبار</h1>
                </div>
                @if(count($histories) == 0 )
                    <div class="content-section text-center">
                        <div class="icon-empty">
                            <i class="now-ui-icons travel_info"></i>
                        </div>
                        <h1 class="text-empty">موردی برای نمایش وجود ندارد!</h1>
                    </div>
                @else
                    <div class="content-section default">
                        <div class="table-responsive" id="history_container">
                            @include('user.include.wallet.history')
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @include('layouts.loading')

@stop

@section('footer')
    @parent
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('click', '.pagination a', function (event) {
                $('#loading').show();
                event.preventDefault();

                $('li').removeClass('active');
                $(this).parent('li').addClass('active');

                var myurl = $(this).attr('href');
                var page = $(this).attr('href').split('page=')[1];

                getData(page);
            });

        });

        function getData(page) {
            $.ajax(
                {
                    url: '?page=' + page,
                    type: "get",
                    datatype: "html"
                }).done(function (data) {
                $("#history_container").empty().html(data);
                location.hash = page;
                $('#loading').hide();
            }).fail(function (jqXHR, ajaxOptions, thrownError) {
                $('#loading').hide();
                toastr.warning('خطایی در سامانه رخ داد!');
            });
        }
    </script>

    <script>
        walletDesired = function () {
            $('#loading').show();
            var number = document.getElementById('price_1').value;
            var amount = Number(number.replace(/[^0-9.-]+/g, ""));
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: '{{ url('/profile/wallet') }}',
                method: "POST",
                data: {amount: amount},
                success: function (response) {
                    if (response.status === 200) {
                        window.location.replace(response.url);
                        $('#loading').hide();
                    } else {
                        $('#loading').hide();
                        $('.walletDesiredResponse').html('');
                        jQuery.each(response.errors, function (key, value) {
                            jQuery('.walletDesiredResponse').show();
                            jQuery('.walletDesiredResponse').append('<p>' + value + '</p>');
                        });
                    }
                }
            });
        }
    </script>

    <script>
        checkGiftcard = function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $('#loading').show();
            var code = document.getElementById('giftcard-code').value;
            $.ajax({
                url: '{{url('/giftcard')}}',
                type: 'POST',
                data: {code: code},
                success: function (response) {

                    $('#loading').hide();
                    $('.giftcardResponse').html('');
                    jQuery('.giftcardResponse').show();
                    jQuery('.giftcardResponse').append('<p>کیف پول شما به مبلغ ' + response.amount + ' تومان شارژ گردید.</p>');
                    jQuery('.giftcardResponse').append('<p>موجودی فعلی کیف پول شما' + response.balance + ' تومان می باشد.</p>');
                    document.getElementById("giftcardForm").reset();
                },
                error: function (xhr) {
                    $('#loading').hide();
                    document.getElementById("giftcardForm").reset();
                    if (xhr.status === 422) {
                        jQuery.each(xhr.responseJSON.errors, function (key, value) {
                            toastr.error(value);
                        });
                    } else if (xhr.status === 429) {
                        $('.giftcardResponse').html('');
                        jQuery('.giftcardResponse').show();
                        jQuery('.giftcardResponse').append('<p>دفعات سعی شما از حد مجاز بیشتر است. برای چند دقیقه اجازه ارسال درخواست ندارید.</p>');
                    } else {
                        $('.giftcardResponse').html('');
                        jQuery('.giftcardResponse').show();
                        jQuery('.giftcardResponse').append('<p>' + xhr.responseJSON.error + '</p>');
                    }
                }
            });
        }
    </script>
    <script type="text/javascript" src="/js/number_to_letter.js"></script>
@stop