@extends('website.layouts.main')

@section('meta_title', 'Pricing - KiyoHRMS')
@section('meta_description', 'Yearly team plans for KiyoHRMS: Free for 10 users in year one, then Team 25, 50, 100, and 500.')

@section('content')
<section class="section-space brand-gradient">
    <div class="container text-center">
        <h1 class="display-5 fw-bold mb-3">Simple <span class="text-kiyo">yearly pricing </span>by team size</h1>
        <p class="lead text-muted col-lg-8 mx-auto mb-4">Start free for 10 users in your first year, then pick a Team plan that fits your headcount. Custom packages available on request.</p>
        <span class="badge rounded-pill text-bg-light px-3 py-2">Billed yearly only</span>
    </div>
</section>

<section class="section-space pt-2">
    <div class="container">
        <div class="row g-4 justify-content-center">
            @forelse($plans as $plan)
                @php
                    $enabledFeatures = $plan->planFeatures
                        ->where('feature_value', '1')
                        ->pluck('feature_key')
                        ->map(fn ($key) => str($key)->replace('_', ' ')->title()->toString())
                        ->take(4)
                        ->values()
                        ->all();

                    $effective = $plan->effectiveYearlyPrice();
                    $strike = $plan->displayStrikePrice();
                    $cardFeatures = array_merge(
                        [$plan->employee_limit ? ('Up to ' . $plan->employee_limit . ' employees') : 'Unlimited employees'],
                        ['Yearly billing'],
                        $enabledFeatures
                    );
                @endphp

                <div class="col-lg-4 col-md-6 d-flex justify-content-center">
                    <div class="pricing-card w-100">
                        <div class="card h-100 card-soft {{ $plan->is_popular ? 'border border-kiyo' : '' }}">
                            <div class="card-body p-4">
                                @if($plan->is_popular)
                                    <span class="badge rounded-pill text-bg-success mb-3">Recommended</span>
                                @endif
                                <h3 class="h4 fw-bold">{{ $plan->name }}</h3>
                                <p class="text-muted">{{ $plan->description ?: 'Built for growing teams.' }}</p>
                                <div class="mb-3">
                                    @if($strike)
                                        <div class="text-muted text-decoration-line-through small">{{ $plan->currency_symbol ?: '₹' }}{{ number_format($strike, 0) }}/year</div>
                                    @endif
                                    <span class="h2 fw-bolder"><span class="price-currency">{{ $plan->currency_symbol ?: '₹' }}</span>{{ number_format($effective, 0) }}</span>
                                    <span class="text-muted">/year</span>
                                </div>
                                <ul class="list-unstyled small mb-4">
                                    @foreach($cardFeatures as $feature)
                                        <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>{{ $feature }}</li>
                                    @endforeach
                                </ul>
                                <a href="{{ route('register') }}" class="btn {{ $plan->is_popular ? 'btn-kiyo' : 'pricing-trial-btn' }} w-100">
                                    {{ $plan->isFreeDefault() ? 'Start free' : 'Get started' }} <i class="bi bi-arrow-right-short"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info text-center mb-0">
                        No active plans available. Please configure plans in Super Admin.
                    </div>
                </div>
            @endforelse
        </div>
        <p class="text-center text-muted mt-4 mb-0">Need more than 500 users? <a href="{{ route('website.contact') }}">Contact us</a> for a Custom / Private package.</p>
    </div>
</section>

<section class="section-space soft-bg">
    <div class="container">
        <h2 class="fw-bold mb-4 section-title-underline">Plan comparison</h2>
        <div class="table-responsive card-soft p-2 bg-white">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th>Features</th>
                        @foreach($plans as $plan)
                            <th>{{ $plan->name }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Employee limit</td>
                        @foreach($plans as $plan)
                            <td>{{ $plan->employee_limit ?: 'Unlimited' }}</td>
                        @endforeach
                    </tr>
                    <tr>
                        <td>Yearly price</td>
                        @foreach($plans as $plan)
                            <td>{{ $plan->currency_symbol ?: '₹' }}{{ number_format($plan->effectiveYearlyPrice(), 0) }}</td>
                        @endforeach
                    </tr>
                    @foreach($featureLabels as $featureKey => $featureLabel)
                        <tr>
                            <td>{{ $featureLabel }}</td>
                            @foreach($plans as $plan)
                                @php
                                    $featureEnabled = optional($plan->planFeatures->firstWhere('feature_key', $featureKey))->feature_value === '1';
                                @endphp
                                <td>{!! $featureEnabled ? '<i class="bi bi-check text-success"></i>' : '-' !!}</td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>

<section class="section-space">
    <div class="container">
        <h2 class="fw-bold mb-4 section-title-underline">Frequently asked questions</h2>
        <div class="accordion" id="pricingFaq">
            @include('website.partials.faq-item', ['id' => 'faqTrial', 'question' => 'Is the first year free?', 'answer' => 'Yes. New companies get the Free plan for up to 10 users for the first year.', 'show' => 'show'])
            @include('website.partials.faq-item', ['id' => 'faqUpgrade', 'question' => 'Can I upgrade mid-year?', 'answer' => 'Yes. You can upgrade to a higher team plan anytime. We auto-calculate a prorated amount for the remaining licence days.'])
            @include('website.partials.faq-item', ['id' => 'faqGst', 'question' => 'Is GST included?', 'answer' => 'Prices are exclusive of applicable GST. Final invoice values will show GST based on billing location.'])
        </div>
    </div>
</section>

@include('website.partials.cta-banner', ['title' => 'Start free for 10 users', 'subtitle' => 'Set up your team in minutes and run your first automated payroll with KiyoHRMS.'])
@endsection