@extends(getTemplate() . '.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
@endpush

@section('content')
    <section class="site-top-banner search-top-banner opacity-04 position-relative">
        <img src="{{ getPageBackgroundSettings('redeem_points') }}" class="img-cover" alt="" />

        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-12 col-md-9 col-lg-7">
                    <div class="top-search-categories-form">
                        <h1 class="text-white font-30 mb-15">{{ $pageTitle }}</h1>
                        <span id="user_balance"
                            class="course-count-badge font-weight-bold font-16 py-5 px-10 text-white rounded">{{ handlePrice($user_balance) }}
                            {{ trans('admin/main.wallet_balance') }}</span>
                            <br>
                            <a href="/panel/my-coupons" class="mt-3 btn btn-primary text-white text-center btn-border-white ">{{ trans('admin/main.show_my_coupons') }}</a>

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

    <div class="container mt-30">

        <section class="mt-lg-50 pt-lg-20 mt-md-40 pt-md-40">

            <div class="row mt-20">
                <div class="col-12 col-lg-12">
                    <h3 class="mb-3">{{ $message }}</h3>
                    
                    <div class="row">
                        @foreach ($redeemPoints as $redeemPoint)
                            <div class="col-12 col-lg-4 mt-20">
                                @include('web.default.includes.redeem-points-card', [
                                    'redeemPoint' => $redeemPoint,
                                ])
                            </div>
                        @endforeach
                    </div>

                </div>

            </div>

            @if (count($redeemPoints) > 0)
                <div class="mt-50 pt-30">
                    {{ $redeemPoints->appends(request()->input())->links('vendor.pagination.panel') }}
                </div>
            @endif
        </section>
    </div>

    {{-- Redeem Modal --}}
    <div id="redeemModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ trans('admin/main.confirm_redeem') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p><span id="itemMessage"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">{{ trans('admin/main.close') }}</button>
                    <button id="confirmRedeemButton" class="btn btn-primary">{{ trans('admin/main.confirm') }}</button>

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

    {{-- Code Modal --}}
    <div id="codeModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ trans('admin/main.copy_coupon') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <pre class="copy" id="codeContent"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ trans('admin/main.close') }}</button>
                    <button id="copyCodeButton" class="btn btn-primary">{{ trans('admin/main.copy') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>

    <script src="/assets/default/js/parts/categories.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.redeem-button').click(function() {
                var itemMessage = $(this).data('message');
                var itemID = $(this).data('id');
                $('#itemMessage').text(itemMessage);
                $('#redeemModal').modal('show');

                $('#confirmRedeemButton').attr('url', '/redeem-points/' + itemID);

            });

            // Redeem points and copy response
            $('#confirmRedeemButton').click(function() {

                $.ajax({
                    type: "POST",
                    url: $(this).attr('url'),
                    success: function(data) {

                        if (data.coupon) {
                            let user_balance = $('#user_balance');
                            user_balance.text(data.balance);

                            $.toast({
                                heading: data.message,
                                text: '',
                                bgColor: '#1f3b64',
                                textColor: 'white',
                                hideAfter: 10000,
                                position: 'bottom-right',
                                icon: 'success'
                            });

                            // Close the modal
                            $('#redeemModal').modal('hide');

                            $('#codeModal').modal('show');
                            $('#codeContent').text(data.coupon);

                            $('#copyCodeButton').click(function() {
                                var code = $('#codeContent').text();
                                copyToClipboard(code);
                                $.toast({
                                    heading: '{{ trans('admin/main.copied') }}',
                                    text: '',
                                    bgColor: '#1f3b64',
                                    textColor: 'white',
                                    hideAfter: 10000,
                                    position: 'bottom-right',
                                    icon: 'success'
                                });
                            });

                        } else {
                            $.toast({
                                heading: data.message,
                                text: '',
                                bgColor: '#f63c3c',
                                textColor: 'white',
                                hideAfter: 10000,
                                position: 'bottom-right',
                                icon: 'error'
                            });
                        }
                    }
                });

            });

            // Function to copy text to clipboard
            function copyToClipboard(text) {
                var tempInput = $('<input>');
                $('body').append(tempInput);
                tempInput.val(text).select();
                document.execCommand('copy');
                tempInput.remove();

            }
        });
    </script>
@endpush