@extends("frontend.layouts.app")

@section("title")
{{ app_name() }}
@endsection

@section("content")

@if(session('flash_error'))
    <div class="mt-3 text-center alert alert-danger fw-bold h5">
        {{ session('flash_error') }}
    </div>
@endif

@if(session('flash_success'))
    <div class="mt-3 text-center alert alert-success fw-bold h5">
        {{ session('flash_success') }}
    </div>
@endif

<section class="py-16 subscription-page inner-page">
	<!-- Header -->
	<div class="mb-12 text-center heading">
		<h2 class="text-3xl font-bold text-gray-800">Find Your Perfect Plan</h1>
			<p class="mt-2 text-gray-600">Discover the ideal plan to fuel your business growth. Our pricing options are<br>carefully crafted to cater to businesses.</p>
	</div>


	<!-- Pricing Cards -->
    <div class="px-4 mx-auto max-w-7xl">
        <!-- Tabs -->
        <div class="justify-center mb-6 space-x-4 d-flex tab-btn-box">
            <button id="monthly-tab" class="px-6 py-2 text-white bg-red-500 rounded-lg tab-btn text-dark focus:outline-none">
                Monthly
            </button>
            <button id="yearly-tab" class="px-6 py-2 text-gray-600 bg-gray-200 rounded-lg tab-btn focus:outline-none">
                Yearly
            </button>
        </div>
    
        <!-- Monthly Plans -->
        <div id="monthly-plans" class="grid grid-cols-1 gap-6 tab-content md:grid-cols-3">
            @foreach($packages as $package)
                @php
                    // Check if this package is the user's current active subscription
                    $isActiveSubscription = false;
                    if(auth()->check()) {
                        $activeSubscription = \App\Models\Subscription::where('user_id', auth()->id())
                                            ->where('plan_id', $package->id)
                                            ->where('status', 'active')
                                            ->first();
                        $isActiveSubscription = $activeSubscription ? true : false;
                    }
                @endphp
    
                @if($package->billing_cycle == 'monthly')
                <div class="p-10 bg-white tab-box {{ $isActiveSubscription ? 'active' : '' }}">
                    <div class="flex img-box align-center">
                        <img src="images/tab-icon.png" alt="">
                        <h3 class="text-xl font-bold text-black-600">{{ $package->name }}</h3>
                    </div>
                    <p class="mt-3">{{ $package->about }}</p>
                    <h4 class="mt-4 text-2xl font-bold" style="text-align:left!important">AUD {{ $package->price }} <span class="text-2xl text-dark">/ Month</span></h4>
                    <ul class="hidden-content" id="monthly-content-{{ $package->id }}">
                        @foreach(explode('<li>', strip_tags(htmlspecialchars_decode($package->features), '<li>')) as $feature)
                            @php
                                $clean_feature = trim(str_replace(['&lt;/li&gt;', '&nbsp;', '\\r', '\\n', '\\t', '<li>', '</li>', '"'], '', $feature));
                            @endphp
                            @if(!empty($clean_feature))
                                <li>{{ $clean_feature }}</li>
                            @endif
                        @endforeach
                    </ul>
                    <button class="button-anchor" onclick="toggleContent('monthly-content-{{ $package->id }}', this)">Show More</button>
                    @if($isActiveSubscription)
                        <button class="px-6 py-2 mb-4 text-white bg-green-500 rounded-lg" style="width: -webkit-fill-available; border-radius: 75px;margin-right: 40px;" disabled>
                            Currently Active
                        </button>
                    @else
                        @if(auth()->user() && auth()->user()->hasRole('broker'))
                        <form action="{{ route('stripe.checkout') }}" method="POST">
                            @csrf
                            <input type="hidden" name="plan_id" value="{{ $package->id }}">
                            <button class="px-6 py-2 mb-4 text-white bg-red-500 rounded-lg hover:bg-red-600" style="width: -webkit-fill-available; border-radius: 75px;margin-right: 40px;">
                                Choose Plan
                            </button>
                        </form>
                        @endif
                    @endif
                </div>
                @endif
            @endforeach
        </div>
        
        <!-- Yearly Plans -->
        <div id="yearly-plans" class="grid hidden grid-cols-1 gap-6 tab-content md:grid-cols-3">
            @foreach($packages as $package)
                @php
                    $isActiveSubscription = false;
                    if(auth()->check()) {
                        $activeSubscription = \App\Models\Subscription::where('user_id', auth()->id())
                                            ->where('plan_id', $package->id)
                                            ->where('status', 'active')
                                            ->first();
                        $isActiveSubscription = $activeSubscription ? true : false;
                    }
                @endphp
    
                @if($package->billing_cycle == 'yearly')
                <div class="p-10 bg-white tab-box {{ $isActiveSubscription ? 'active' : '' }}">
                    <div class="flex img-box align-center">
                        <img src="images/tab-icon.png" alt="">
                        <h3 class="text-xl font-bold text-black-600">{{ $package->name }}</h3>
                    </div>
                    <p class="mt-3">{{ $package->about }}</p>
                    <h4 class="mt-4 text-2xl font-bold" style="text-align:left!important">AUD {{ $package->price }} <span class="text-2xl text-dark">/ Year</span></h4>
                    <ul class="hidden-content" id="yearly-content-{{ $package->id }}">
                        @foreach(explode('<li>', strip_tags(htmlspecialchars_decode($package->features), '<li>')) as $feature)
                            @php
                                $clean_feature = trim(str_replace(['&lt;/li&gt;', '&nbsp;', '\\r', '\\n', '\\t', '<li>', '</li>', '"'], '', $feature));
                            @endphp
                            @if(!empty($clean_feature))
                                <li>{{ $clean_feature }}</li>
                            @endif
                        @endforeach
                    </ul>
                    <button class="button-anchor" onclick="toggleContent('yearly-content-{{ $package->id }}', this)">Show More</button>
                    @if($isActiveSubscription)
                        <button class="px-6 py-2 mb-4 text-white bg-green-500 rounded-lg" style="width: -webkit-fill-available; border-radius: 75px;margin-right: 40px;" disabled>
                            Currently Active
                        </button>
                    @else
                        @if(auth()->user() && auth()->user()->hasRole('broker'))
                        <form action="{{ route('stripe.checkout') }}" method="POST">
                            @csrf
                            <input type="hidden" name="plan_id" value="{{ $package->id }}">
                            <button class="px-6 py-2 mb-4 text-white bg-red-500 rounded-lg hover:bg-red-600" style="width: -webkit-fill-available; border-radius: 75px;margin-right: 40px;">
                                Choose Plan
                            </button>
                        </form>
                        @endif
                    @endif
                </div>
                @endif
            @endforeach
        </div>
    
     
    
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Tab switching functionality
                const monthlyTab = document.getElementById('monthly-tab');
                const yearlyTab = document.getElementById('yearly-tab');
                const monthlyPlans = document.getElementById('monthly-plans');
                const yearlyPlans = document.getElementById('yearly-plans');
                
                monthlyTab.addEventListener('click', function() {
                    monthlyTab.classList.add('bg-red-500', 'text-white');
                    monthlyTab.classList.remove('bg-gray-200', 'text-gray-600');
                    yearlyTab.classList.add('bg-gray-200', 'text-gray-600');
                    yearlyTab.classList.remove('bg-red-500', 'text-white');
                    monthlyPlans.classList.remove('hidden');
                    yearlyPlans.classList.add('hidden');
                });
                
                yearlyTab.addEventListener('click', function() {
                    yearlyTab.classList.add('bg-red-500', 'text-white');
                    yearlyTab.classList.remove('bg-gray-200', 'text-gray-600');
                    monthlyTab.classList.add('bg-gray-200', 'text-gray-600');
                    monthlyTab.classList.remove('bg-red-500', 'text-white');
                    yearlyPlans.classList.remove('hidden');
                    monthlyPlans.classList.add('hidden');
                });
            });
            
            // Toggle content function for both monthly and yearly plans
            function toggleContent(contentId, button) {
                const content = document.getElementById(contentId);
                content.classList.toggle('show');
                button.classList.toggle('active');
                
                if (button.textContent === 'Show More') {
                    button.textContent = 'Show Less';
                } else {
                    button.textContent = 'Show More';
                }
            }
        </script>
    </div>
</section>
@endsection