@extends($layout)
@section('content')
    <div class="{{ auth()->user() ? '' : 'pt-80 pb-80' }}">
        <div class="deposit-preview bg--section">
            <h6 class="text-center mb-2">{{ __($subcategory->name) }}</h6>
            <div class="deposit-thumb">
                <img src="{{ getImage(getFilePath('subcategory') . '/' . $subcategory->image, getFileSize('subcategory')) }}"
                    alt="">
            </div>
            <div class="deposit-content text-center">
                <form class="form" action="{{ route('user.purchase.card') }}" method="post">
                    @csrf
                    <input name="id" type="hidden" value="{{ $subcategory->id }}" required>
                    <ul>
                        <li>
                            @lang('Category'): <span class="text--success">
                                {{ __($subcategory->category->name) }}
                            </span>
                        </li>
                        <li>
                            @lang('Price'): <span class="text--success">
                                {{ showAmount($subcategory->price) }}
                            </span>
                        </li>
                        <li>
                            @lang('Available'): <span class="text--success">
                                {{ $subcategory->cards()->where('user_id', 0)->count() }} @lang('pcs')
                            </span>
                        </li>
                        <li>
                            <span class="d-block mb-2">@lang('Quantity'):</span>
                            <div class="quantity quantity-wrapper">
                                <input class="text--base text-center bg-transparent border-0" name="quantity" type="number"
                                    value="1" min="1">
                            </div>
                        </li>
                    </ul>
                    <button class="cmn--btn w-100 justify-content-center mt-3" type="submit">@lang('Purchase')</button>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade cmn--modal" id="confirm" aria-labelledby="confirmModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">@lang('Confirmation')</h6>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    @lang('Are you sure buy this card')?
                </div>
                <div class="modal-footer">
                    <button class="btn btn--danger" data-bs-dismiss="modal" type="button">@lang('Close')</button>
                    <div class="prevent-double-click">
                        <button class="btn btn--success confirmBtn" type="submit">@lang('Confirm')</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        jQuery(
                '<div class="quantity-nav"><div class="quantity-button quantity-up"><i class="fa fa-plus"></i></div><div class="quantity-button quantity-down"><i class="fa fa-minus"></i></div></div>'
            )
            .insertAfter('.quantity input');
        jQuery('.quantity').each(function() {
            var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = input.attr('max');

            btnUp.on('click', function() {
                var oldValue = parseFloat(input.val());
                if (oldValue >= max) {
                    var newVal = oldValue;
                } else {
                    var newVal = oldValue + 1;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
            });

            btnDown.on('click', function() {
                var oldValue = parseFloat(input.val());
                if (oldValue <= min) {
                    var newVal = oldValue;
                } else {
                    var newVal = oldValue - 1;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
            });
        });

        $('.form').on('submit', function(e) {
            e.preventDefault();
            $('#confirm').modal('show');

            $('.confirmBtn').on('click', function() {
                e.currentTarget.submit();
            });
        });
    </script>
@endpush
