@extends('layouts.master')

@section('title', 'Pricing Plans - DigitalStore')

@php
    $plans = \App\Modules\CustomerSubscription\Models\CustomerPlan::where('is_active', true)
        ->where('show_on_pricing', true)
        ->orderBy('sort_order')
        ->orderBy('price')
        ->get();
@endphp

@section('content')
<div class="bg-slate-50 min-h-screen pt-24 pb-24" x-data="{ billing: 'monthly' }">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        {{-- Header --}}
        <div class="text-center max-w-3xl mx-auto mb-12 space-y-4">
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-brand-50 text-brand-500 rounded-full text-[10px] font-900 uppercase tracking-widest">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                Pricing Plans
            </div>
            <h1 class="text-4xl lg:text-6xl font-900 text-slate-900 tracking-tight">Choose the perfect plan <br>for your needs</h1>
            <p class="text-slate-500 text-lg font-500">Simple, transparent pricing that grows with you.</p>

            {{-- Toggle --}}
            @if(setting('enable_yearly_billing', true))
            <div class="flex items-center justify-center gap-6 pt-4">
                <span :class="billing === 'monthly' ? 'text-slate-900 font-800' : 'text-slate-400 font-600'" class="text-sm transition-all cursor-pointer" @click="billing = 'monthly'">Monthly</span>
                <button @click="billing = (billing === 'monthly' ? 'yearly' : 'monthly')" class="relative w-14 h-7 bg-slate-200 rounded-full p-1 transition-all">
                    <div :class="billing === 'yearly' ? 'translate-x-7 bg-brand-500' : 'translate-x-0 bg-white'" class="w-5 h-5 rounded-full transition-all shadow-md"></div>
                </button>
                <div class="flex items-center gap-2">
                    <span :class="billing === 'yearly' ? 'text-slate-900 font-800' : 'text-slate-400 font-600'" class="text-sm transition-all cursor-pointer" @click="billing = 'yearly'">Annual</span>
                    <span class="bg-emerald-100 text-emerald-600 text-[10px] font-900 px-2 py-0.5 rounded-lg border border-emerald-200">{{ setting('yearly_discount_text', 'Save up to 30%') }}</span>
                </div>
            </div>
            @endif
        </div>

        {{-- Plans Grid --}}
        <div class="flex flex-wrap justify-center gap-8 items-stretch">
            @foreach($plans as $plan)
            @php
                $planInterval = ($plan->duration_unit === 'year' || $plan->duration_unit === 'years') ? 'yearly' : 'monthly';
            @endphp
            <div x-show="!@js(setting('enable_yearly_billing', true)) || billing === '{{ $planInterval }}'" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 class="relative group h-full w-full md:w-[320px] lg:w-[350px]">
                @if($plan->highlight_plan)
                <div class="absolute -inset-[2px] bg-brand-500 rounded-[2.5rem] opacity-20 blur-[2px]"></div>
                @endif
                
                <div class="relative h-full bg-white rounded-[2rem] p-8 flex flex-col border border-slate-100 shadow-sm transition-all group-hover:shadow-xl group-hover:border-brand-500/20 {{ $plan->highlight_plan ? 'ring-2 ring-brand-500 ring-offset-0' : '' }}">
                    
                    @if($plan->badge)
                    <div class="absolute top-0 right-1/2 translate-x-1/2 -translate-y-1/2 bg-brand-500 text-white text-[9px] font-900 uppercase tracking-widest px-4 py-1.5 rounded-full shadow-lg">
                        {{ $plan->badge }}
                    </div>
                    @endif

                    <div class="mb-8">
                        <h3 class="text-2xl font-900 text-slate-900 mb-2">{{ $plan->name }}</h3>
                        <p class="text-slate-400 text-sm font-500 leading-relaxed">{{ $plan->short_description }}</p>
                    </div>

                    <div class="mb-10 flex items-baseline gap-1">
                        <span class="text-slate-900 text-4xl font-900">
                            {{ $plan->currency === 'USD' ? '$' : $plan->currency }}{{ number_format($plan->price, 2) }}
                        </span>
                        <span class="text-slate-400 text-xs font-700 uppercase tracking-widest lowercase">/ {{ $plan->billing_interval }}</span>
                    </div>

                    <ul class="space-y-6 mb-10 flex-1">
                        {{-- Dynamic Limits & Permissions --}}
                        {{-- 1. Download Limits --}}
                        <li class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-[#f4f7ff] text-[#4f46e5] rounded-xl flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            </div>
                            <span class="text-[#4b5563] text-[15px] font-700">
                                @if($plan->limit_type === 'monthly_limit')
                                {{ number_format($plan->monthly_download_limit) }} Monthly
                                @else
                                {{ number_format($plan->total_download_limit) }} Lifetime
                                @endif
                            </span>
                        </li>

                        {{-- 2. Access Type --}}
                        <li class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-[#f0fdf4] text-[#10b981] rounded-xl flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                            </div>
                            <span class="text-[#4b5563] text-[15px] font-700">
                                @if($plan->access_type === 'all')
                                All Products
                                @elseif($plan->access_type === 'categories')
                                Specific Categories
                                @else
                                Hand-picked Products
                                @endif
                            </span>
                        </li>

                        {{-- 3. Daily Cap --}}
                        @if($plan->daily_download_limit > 0)
                        <li class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-[#fffbeb] text-[#f59e0b] rounded-xl flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <span class="text-[#4b5563] text-[15px] font-700">Daily cap: {{ $plan->daily_download_limit }}</span>
                        </li>
                        @endif

                        {{-- Feature Matrix Logic --}}
                        @php
                            $planFeatures = is_array($plan->features_list) ? $plan->features_list : json_decode($plan->features_list, true);
                            $planFeatures = $planFeatures ?? [];
                            $customFeatures = array_diff($planFeatures, $globalFeatures ?? []);
                        @endphp

                        {{-- 1. Global Master Features --}}
                        @foreach($globalFeatures ?? [] as $gFeature)
                            @php $hasFeature = in_array($gFeature, $planFeatures); @endphp
                            <li class="flex items-center gap-4 transition-all duration-300 {{ !$hasFeature ? 'opacity-40 grayscale' : '' }}">
                                <div class="w-10 h-10 bg-brand-50 text-brand-500 rounded-xl flex items-center justify-center shrink-0">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </div>
                                <span class="text-slate-600 text-[15px] font-600 {{ $hasFeature ? '' : 'text-slate-400' }}">{{ $gFeature }}</span>
                            </li>
                        @endforeach

                        {{-- 2. Custom One-off Features --}}
                        @foreach($customFeatures as $cFeature)
                        <li class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-brand-50 text-brand-500 rounded-xl flex items-center justify-center shrink-0">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                            <span class="text-slate-600 text-[15px] font-600">{{ $cFeature }}</span>
                        </li>
                        @endforeach
                    </ul>

                    <div class="mt-auto">
                        <a href="{{ route('customer.subscription.checkout', $plan->slug) }}" class="w-full h-14 rounded-2xl flex items-center justify-center font-900 text-sm transition-all {{ $plan->highlight_plan ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/30 hover:bg-brand-600' : 'border-2 border-brand-500/20 text-brand-500 hover:border-brand-500 hover:bg-brand-50' }}">
                            Get Started
                        </a>
                        <p class="text-[10px] text-slate-400 text-center mt-3 font-700 uppercase tracking-widest">No credit card required</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Bottom Badges --}}
        <div class="mt-20 grid grid-cols-2 lg:grid-cols-4 gap-8 bg-white rounded-[2.5rem] p-10 border border-slate-100 shadow-sm">
            @php
                $badges = [
                    ['icon' => '☁️', 'title' => 'Instant Download', 'desc' => 'Get your files instantly after purchase.'],
                    ['icon' => '🛡️', 'title' => 'Secure Payment', 'desc' => 'All payments are encrypted and 100% secure.'],
                    ['icon' => '📜', 'title' => 'Commercial License', 'desc' => 'Use in personal & client projects. No attribution.'],
                    ['icon' => '🔄', 'title' => 'Cancel Anytime', 'desc' => 'Change or cancel your plan anytime. No hassle.'],
                ];
            @endphp
            @foreach($badges as $b)
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 bg-brand-50 rounded-2xl flex items-center justify-center text-3xl shrink-0">
                    {{ $b['icon'] }}
                </div>
                <div>
                    <h4 class="text-slate-900 text-sm font-900 tracking-tight">{{ $b['title'] }}</h4>
                    <p class="text-slate-400 text-[11px] font-600 leading-snug">{{ $b['desc'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection