@extends($activeTemplate.'layouts.app')
@section('panel')
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <style>
            * {
                font-family: Kanit, cursive;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            /* NProgress Styles */
            #nprogress { pointer-events: none; }
            #nprogress .bar {
                background: #B72B41;
                position: fixed;
                z-index: 9999;
                top: 0;
                left: 0;
                width: 100%;
                height: 3px;
            }
            #nprogress .peg {
                display: block;
                position: absolute;
                right: 0;
                width: 100px;
                height: 100%;
                box-shadow: 0 0 10px #B72B41, 0 0 5px #B72B41;
                opacity: 1;
                transform: rotate(3deg) translate(0, -4px);
            }
            #nprogress .spinner {
                display: block;
                position: fixed;
                z-index: 1031;
                top: 15px;
                right: 15px;
            }
            #nprogress .spinner-icon {
                width: 18px;
                height: 18px;
                box-sizing: border-box;
                border: solid 2px transparent;
                border-top-color: #B72B41;
                border-left-color: #B72B41;
                border-radius: 50%;
                animation: nprogress-spinner 400ms linear infinite;
            }
            @keyframes nprogress-spinner {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
    </head>
    <body class="bg-gray-100">
        <!-- Header -->
        <div class="min-h-screen pb-10" style="background: url('../assets/images/bg3.png') no-repeat center center/cover;">
            <a href="{{ route('user.home') }}" class="h-14 w-full bg-gradient-to-r from-purple-500 to-pink-500 px-4 flex items-center gap-5 shadow text-white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 cursor-pointer">
        <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd"></path>
    </svg>
    <h2 class="text-xl font-bold">Packages</h2>
</a>
            <!-- Package Cards (একেকটি রোতে) -->
            <div class="grid grid-cols-1 gap-4 p-4">
                @foreach ($plans as $plan)
                    <div class="relative rounded-lg shadow-lg p-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white">
                        <div class="mb-4">
                            <!-- এখানে নামের টেক্সটকে গ্রেডিয়েন্ট করার জন্য bg-clip-text এবং text-transparent ক্লাস যোগ করা হয়েছে -->
                            <h2 class="text-xl font-bold text-center whitespace-nowrap bg-gradient-to-r from-yellow-400 to-red-600 bg-clip-text text-transparent">
                                {{ $plan->name }}
                            </h2>
                            <!-- ছোট ব্যাজ -->
                            <p class="w-7 h-7 bg-white text-black rounded-full flex justify-center items-center absolute top-2 right-2 text-xs font-semibold">
                                3x
                            </p>
                        </div>
                        <div class="mb-4">
                            <h2 class="text-lg font-bold text-center">{{ __(showAmount($plan->price)) }}</h2>
                            <hr class="my-2 border-white">
                            <div class="text-sm space-y-1">
                                <p class="flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                                        <polygon fill="#FFFFFF"
                                            points="24,3 28.7,6.6 34.5,5.8 36.7,11.3 42.2,13.5 41.4,19.3 45,24 41.4,28.7 42.2,34.5 36.7,36.7 34.5,42.2 28.7,41.4 24,45 19.3,41.4 13.5,42.2 11.3,36.7 5.8,34.5 6.6,28.7 3,24 6.6,19.3 5.8,13.5 11.3,11.3 13.5,5.8 19.3,6.6"/>
                                        <polygon fill="#CCFF90" points="34.6,14.6 21,28.2 15.4,22.6 12.6,25.4 21,33.8 37.4,17.4"/>
                                    </svg>
                                    Daily {{ $plan->daily_limit }} Ads
                                </p>
                                <p class="flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                                        <polygon fill="#FFFFFF"
                                            points="24,3 28.7,6.6 34.5,5.8 36.7,11.3 42.2,13.5 41.4,19.3 45,24 41.4,28.7 42.2,34.5 36.7,36.7 34.5,42.2 28.7,41.4 24,45 19.3,41.4 13.5,42.2 11.3,36.7 5.8,34.5 6.6,28.7 3,24 6.6,19.3 5.8,13.5 11.3,11.3 13.5,5.8 19.3,6.6"/>
                                        <polygon fill="#CCFF90" points="34.6,14.6 21,28.2 15.4,22.6 12.6,25.4 21,33.8 37.4,17.4"/>
                                    </svg>
                                    Validity {{ $plan->validity }} days
                                </p>
                                <p class="flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                                        <polygon fill="#FFFFFF"
                                            points="24,3 28.7,6.6 34.5,5.8 36.7,11.3 42.2,13.5 41.4,19.3 45,24 41.4,28.7 42.2,34.5 36.7,36.7 34.5,42.2 28.7,41.4 24,45 19.3,41.4 13.5,42.2 11.3,36.7 5.8,34.5 6.6,28.7 3,24 6.6,19.3 5.8,13.5 11.3,11.3 13.5,5.8 19.3,6.6"/>
                                        <polygon fill="#CCFF90" points="34.6,14.6 21,28.2 15.4,22.6 12.6,25.4 21,33.8 37.4,17.4"/>
                                    </svg>
                                    Refer Level {{ $plan->ref_level }}
                                </p>
                            </div>
                        </div>
                        <!-- Button -->
                        @if (@auth()->user()->runningPlan && @auth()->user()->plan_id == $plan->id)
                            <button disabled data-id="{{ $plan->id }}" data-title="{{ $plan->name }}" data-price="{{ $plan->price }}"
                                class="buyBtn mt-4 block w-full py-2 px-4 rounded-lg bg-gray-600 text-white font-bold text-xs uppercase shadow transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                type="button">
                                Already Bought
                            </button>
                        @else
                            <button data-id="{{ $plan->id }}" data-title="{{ $plan->name }}" data-price="{{ $plan->price }}"
                                class="buyBtn mt-4 block w-full py-2 px-4 rounded-lg bg-white text-[#7d0984] font-bold text-xs uppercase shadow transition duration-200 hover:shadow-lg"
                                type="button">
                                Buy Now
                            </button>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Buy Modal -->
        <div id="BuyModal" data-floating-ui-portal style="display: none;">
            <div class="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-60 flex items-center justify-center">
                <form action="{{ route('user.buyPlan') }}" method="POST" class="bg-white rounded-lg shadow-2xl w-11/12 max-w-lg p-6">
                    @csrf
                    <input type="hidden" name="id">
                    <h2 class="text-2xl font-semibold text-blue-gray-900 mb-4">Do you want to buy this Package?</h2>
                    <div class="border-t border-b border-blue-gray-100 py-4 mb-4">
                        <p id="content" class="text-black text-lg"></p>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button id="cancel" type="button" class="py-2 px-4 rounded text-green-500 font-bold text-xs uppercase transition duration-200 hover:bg-green-500/10">
                            Cancel
                        </button>
                        <button type="submit" class="py-2 px-4 rounded border border-[#7d0984] text-[#777] font-bold text-xs uppercase transition duration-200 hover:bg-[#7d0984] hover:text-white">
                            Buy Now
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Alternative Modal (if needed) -->
        <div id="BuyModeal" class="modal fade" style="display: none;" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content" style="margin-top: 50%;">
                    <div class="modal-header">
                        <h4 class="modal-title">Confirmation</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <form action="{{ route('user.buyPlan') }}" method="POST">
                        <div class="modal-body text-center">
                            @csrf
                            <strong>Are you sure to Buy this plan?</strong>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">Confirm</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
@endsection

@push('style')
    <style>
        .package-disabled {
            opacity: 0.5;
        }
    </style>
@endpush

@push('script')
    <script src="{{ asset('assets/front/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/front/js/popper.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/front/css/iziToast.min.css') }}">
    <script src="{{ asset('assets/front/js/iziToast.min.js') }}"></script>
    <script type="text/javascript">
        (function($, document) {
            "use strict";
            function notify(status, message) {
                iziToast[status]({
                    message: message,
                    position: "topRight"
                });
            }
        })(jQuery);

        (function ($) {
            "use strict";
            $('.buyBtn').click(function(){
                $('#BuyModal').css('display', 'block');
                $('#BuyModal').find('input[name=id]').val($(this).data('id'));
                let content = $(this).data('title') + ' = ' + $(this).data('price');
                $('#content').text(content);
            });
            $('#cancel').click(function(){
                $('#BuyModal').css('display', 'none');
            });
        })(jQuery);
    </script>
    <script type="text/javascript">
        (function($) {
            "use strict";
            $('.buyBtn').click(function() {
                // Additional logic can be added here if needed
                let symbol = '{{ $general->cur_sym }}';
                let currency = '{{ $general->cur_text }}';
                $('.gateway-info').addClass('d-none');
                let modal = $('#BuyModal');
                let plan = $(this).data('plan');
                modal.find('.planName').text(plan.name);
                modal.find('[name=id]').val(plan.id);
                let planPrice = parseFloat(plan.price).toFixed(2);
                modal.find('[name=amount]').val(planPrice).attr('readonly', true);
                modal.find('.dailyLimit').html(`Daily Ads Limit: <span class="text-danger">${plan.daily_limit}</span>`);
                modal.find('.refLevel').html(`Referral Level: <span class="text-danger">${plan.ref_level}</span>`);
                modal.find('.validity').html(`Plan Validity: <span class="text-danger">${plan.validity} Days</span>`);
                modal.modal('show');
            });
        })(jQuery);
    </script>
@endpush