@extends('frontend.main_master')

@section('title', $title)
@section('meta_description', $meta_description)
@section('meta_keywords', $meta_keywords)
@section('og_title', $og_title)
@section('og_description', $og_description)

@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/api-products/api-products.css') }}">
@endpush

@section('content')
    <div class="api-page">
        <section class="api-hero api-hero--compact">
            <div class="container text-center">
                <span class="api-pill">
                    <i class="fa-solid fa-tags" aria-hidden="true"></i> {{ t('api-services-subnav-pricing') }}
                </span>
                <h1 class="api-hero__title mt-3 mb-3">{{ t('api-pricing-hero-title') }}</h1>
                <p class="api-hero__subtitle mx-auto mb-3" style="max-width: 720px;">
                    {{ t('api-pricing-hero-subtitle') }}
                </p>
                {{-- Satın alma yalnızca API panelinde yapılır; host config'ten gelir --}}
                <p class="api-note mb-0">
                    <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    {{ str_replace(':host', $panelHost, t('api-pricing-panel-note')) }}
                </p>
            </div>
        </section>

        @include('frontend.api_products.partials.subnav')

        @php
            // Sekmeler: ?tab=plans|endpoints|credits (controller doğrular, varsayılan plans).
            $activeTab = $activeTab ?? 'plans';
            $pricingTabs = [
                'plans' => t('api-pricing-plans-title'),
                'endpoints' => t('api-pricing-endpoints-title'),
                'credits' => t('api-pricing-packs-title'),
            ];
        @endphp

        <section class="api-section">
            <div class="container">
                <ul class="nav api-tabs" id="apiPricingTabs" role="tablist">
                    @foreach ($pricingTabs as $tabKey => $tabLabel)
                        <li class="nav-item" role="presentation">
                            {{-- "active" Bootstrap tab eklentisinin kullandığı sınıf: tıklamada kendisi taşır. --}}
                            <button class="api-tab {{ $activeTab === $tabKey ? 'active' : '' }}"
                                id="api-tab-{{ $tabKey }}" data-bs-toggle="tab"
                                data-bs-target="#api-pane-{{ $tabKey }}" data-tab-key="{{ $tabKey }}" type="button"
                                role="tab" aria-controls="api-pane-{{ $tabKey }}"
                                aria-selected="{{ $activeTab === $tabKey ? 'true' : 'false' }}">
                                {{ $tabLabel }}
                            </button>
                        </li>
                    @endforeach
                </ul>

                <div class="tab-content api-tab-content">
                    <div class="tab-pane fade {{ $activeTab === 'plans' ? 'show active' : '' }}" id="api-pane-plans"
                        role="tabpanel" aria-labelledby="api-tab-plans" tabindex="0">
                        <div class="api-section__head text-center">
                            {{-- Başlık sekme etiketinde görünüyor; burada yalnızca erişilebilirlik/SEO için. --}}
                            <h2 class="api-section__title visually-hidden">{{ t('api-pricing-plans-title') }}</h2>
                            <p class="api-section__subtitle mb-0">{{ t('api-pricing-plans-subtitle') }}</p>
                        </div>

                    @if ($plans->isEmpty())
                        <p class="text-center text-muted mb-0">{{ t('api-pricing-plans-empty') }}</p>
                    @else
                        <div class="row g-3 g-lg-4 justify-content-center">
                            @foreach ($plans as $plan)
                                @php
                                    $isHighlighted = $plan->code === 'pro';
                                @endphp
                                <div class="col-12 col-md-6 col-xl-4">
                                    <div class="api-plan h-100 {{ $isHighlighted ? 'api-plan--featured' : '' }}">
                                        @if ($isHighlighted)
                                            <span class="api-plan__ribbon">{{ t('api-pricing-popular') }}</span>
                                        @endif
                                        <h3 class="api-plan__name">{{ t($plan->name_key) }}</h3>
                                        <p class="api-plan__desc">{{ $plan->description_key ? t($plan->description_key) : '' }}</p>

                                        <div class="api-plan__price">
                                            @if ((float) $plan->monthly_price > 0)
                                                <span class="api-plan__amount">{{ number_format((float) $plan->monthly_price, 0, ',', '.') }} ₺</span>
                                                <span class="api-plan__period">{{ t('api-pricing-monthly') }}</span>
                                            @else
                                                <span class="api-plan__amount api-plan__amount--custom">{{ t('api-pricing-custom') }}</span>
                                            @endif
                                        </div>

                                        <ul class="api-plan__specs">
                                            <li>
                                                <i class="fa-solid fa-arrow-right-arrow-left" aria-hidden="true"></i>
                                                <span>{{ t('api-pricing-quota-label') }}:</span>
                                                <strong>
                                                    {{ $plan->isUnlimited() ? t('api-pricing-unlimited') : number_format($plan->monthly_request_quota, 0, ',', '.') }}
                                                </strong>
                                            </li>
                                            <li>
                                                <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
                                                <span>{{ t('api-pricing-rate-label') }}:</span>
                                                <strong>{{ $plan->rate_limit_per_minute }}</strong>
                                            </li>
                                            <li>
                                                <i class="fa-solid fa-key" aria-hidden="true"></i>
                                                <span>{{ t('api-pricing-keys-label') }}:</span>
                                                <strong>{{ $plan->max_keys }}</strong>
                                            </li>
                                        </ul>

                                        <div class="api-plan__features">
                                            <span class="api-plan__features-label">{{ t('api-pricing-features-label') }}</span>
                                            <div class="d-flex flex-wrap gap-2 mt-2">
                                                @foreach ($plan->features ?? [] as $feature)
                                                    <span class="api-tag">{{ $featureLabels[$feature] ?? $feature }}</span>
                                                @endforeach
                                            </div>
                                        </div>

                                        {{-- Satın alma API panelinde (API paneli): ana site oturumundan bağımsız --}}
                                        <a href="{{ $panelUrl }}"
                                            class="btn {{ $isHighlighted ? 'btn-astro-gold' : 'btn-outline-astro-wood' }} rounded-pill w-100 mt-3 fw-semibold"
                                            rel="noopener"
                                            aria-label="{{ t($plan->name_key) }} — {{ t('api-pricing-cta-panel') }}">
                                            {{ t('api-pricing-cta-panel') }}
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                        <p class="api-note text-center mt-4 mb-0">{{ t('api-pricing-vat-note') }}</p>
                    </div>

                    {{-- Endpoint bazlı satış: plan almadan tek bir ucu satın alma (one_time / monthly) --}}
                    <div class="tab-pane fade {{ $activeTab === 'endpoints' ? 'show active' : '' }}"
                        id="api-pane-endpoints" role="tabpanel" aria-labelledby="api-tab-endpoints" tabindex="0">
                        <div class="api-section__head text-center" id="endpoint-packages">
                            <h2 class="api-section__title visually-hidden">{{ t('api-pricing-endpoints-title') }}</h2>
                            <p class="api-section__subtitle mb-0">{{ t('api-pricing-endpoints-subtitle') }}</p>
                        </div>

                    @if (empty($endpointOfferGroups))
                        <p class="text-center text-muted mb-0">{{ t('api-pricing-endpoints-empty') }}</p>
                    @else
                        @foreach ($endpointOfferGroups as $offerGroup)
                            <div class="api-offer-group">
                                <h3 class="api-offer-group__title">
                                    <i class="{{ $offerGroup['icon'] }}" aria-hidden="true"></i>
                                    {{ t('api-group-' . $offerGroup['key'] . '-name') }}
                                </h3>

                                <div class="row g-3 g-lg-4">
                                    @foreach ($offerGroup['skus'] as $offerSku)
                                        <div class="col-12 col-lg-6">
                                            <article class="api-offer h-100">
                                                <div class="api-offer__head">
                                                    <h4 class="api-offer__title">{{ t($offerSku['name_key']) }}</h4>
                                                    @if ($offerSku['credits'] > 0)
                                                        <span class="api-credit-badge"
                                                            title="{{ str_replace(':credits', $offerSku['credits'], t('api-pricing-credit-note')) }}">
                                                            {{ t('api-pricing-credit-badge-label') }}
                                                            {{ $offerSku['credits'] }} {{ t('api-services-credit-unit') }}/{{ t('api-pricing-per-request-unit') }}
                                                        </span>
                                                    @endif
                                                </div>
                                                <code class="api-endpoint api-offer__endpoint">
                                                    <span class="api-method api-method--{{ strtolower($offerSku['method']) }}">{{ $offerSku['method'] }}</span>
                                                    {{ $offerSku['path'] }}
                                                </code>

                                                @if ($offerSku['credits'] > 0)
                                                    <p class="api-note small mb-2">
                                                        {{ str_replace(':credits', $offerSku['credits'], t('api-pricing-credit-note')) }}
                                                    </p>
                                                @endif

                                                <ul class="api-offer__list">
                                                    @foreach ($offerSku['offers'] as $offer)
                                                        @php
                                                            $offerLabel = str_replace(
                                                                ':count',
                                                                number_format($offer['requests'], 0, ',', '.'),
                                                                t($offer['label_key']),
                                                            );
                                                        @endphp
                                                        <li class="api-offer__row">
                                                            <div class="api-offer__info">
                                                                <span class="api-offer__badge {{ $offer['is_monthly'] ? 'api-offer__badge--monthly' : '' }}">
                                                                    {{ t($offer['badge_key']) }}
                                                                </span>
                                                                <span class="api-offer__label">{{ $offerLabel }}</span>
                                                            </div>
                                                            <div class="api-offer__price">
                                                                {{ number_format($offer['price'], 0, ',', '.') }} ₺
                                                                @if ($offer['is_monthly'])
                                                                    <span>{{ t('api-pricing-monthly') }}</span>
                                                                @endif
                                                            </div>
                                                            <a href="{{ $panelUrl }}"
                                                                class="btn btn-outline-astro-wood btn-sm rounded-pill fw-semibold api-offer__cta"
                                                                rel="noopener"
                                                                aria-label="{{ t($offerSku['name_key']) }} — {{ $offerLabel }} — {{ t('api-pricing-endpoint-buy') }}">
                                                                {{ t('api-pricing-endpoint-buy') }}
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </article>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach

                        <p class="api-note text-center mt-4 mb-0">{{ t('api-pricing-endpoints-note') }}</p>
                    @endif
                    </div>

                    <div class="tab-pane fade {{ $activeTab === 'credits' ? 'show active' : '' }}"
                        id="api-pane-credits" role="tabpanel" aria-labelledby="api-tab-credits" tabindex="0">
                        <div class="api-section__head text-center">
                            <h2 class="api-section__title visually-hidden">{{ t('api-pricing-packs-title') }}</h2>
                            <p class="api-section__subtitle mb-0">{{ t('api-pricing-packs-subtitle') }}</p>
                        </div>

                    @if ($creditPacks->isEmpty())
                        <p class="text-center text-muted mb-0">{{ t('api-pricing-packs-empty') }}</p>
                    @else
                        <div class="row g-3 g-lg-4 justify-content-center">
                            @foreach ($creditPacks as $pack)
                                @php
                                    $perCredit = $pack->credits > 0 ? (float) $pack->price / $pack->credits : 0;
                                @endphp
                                <div class="col-12 col-md-6 col-xl-4">
                                    <div class="api-pack h-100">
                                        <h3 class="api-pack__name">{{ t($pack->name_key) }}</h3>
                                        <div class="api-pack__credits">
                                            {{ number_format($pack->credits, 0, ',', '.') }}
                                            <span>{{ t('api-pricing-pack-credits') }}</span>
                                        </div>
                                        <div class="api-pack__price">{{ number_format((float) $pack->price, 0, ',', '.') }} ₺</div>
                                        <p class="api-pack__unit">
                                            {{ number_format($perCredit, 2, ',', '.') }} ₺ / {{ t('api-pricing-pack-per-credit') }}
                                        </p>
                                        <a href="{{ $panelUrl }}"
                                            class="btn btn-outline-astro-wood rounded-pill w-100 fw-semibold"
                                            rel="noopener"
                                            aria-label="{{ t($pack->name_key) }} — {{ t('api-pricing-endpoint-buy') }}">
                                            {{ t('api-pricing-endpoint-buy') }}
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    </div>
                </div>
            </div>
        </section>

        {{-- SSS ve kapanış CTA'sı sekmelerin dışında: hangi sekme açık olursa olsun görünür. --}}
        <section class="api-section api-section--alt">
            <div class="container">
                <div class="mx-auto" style="max-width: 860px;">
                    <div class="api-callout mb-4">
                        <h2 class="api-callout__title">{{ t('api-pricing-credits-title') }}</h2>
                        <p class="api-callout__text mb-0">{{ t('api-pricing-credits-text') }}</p>
                    </div>

                    <h2 class="api-section__title text-center mb-4">{{ t('api-pricing-faq-title') }}</h2>
                    <div class="accordion api-accordion" id="apiPricingFaq">
                        @foreach (range(1, 4) as $i)
                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button {{ $i === 1 ? '' : 'collapsed' }}" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#apiFaq{{ $i }}"
                                        aria-expanded="{{ $i === 1 ? 'true' : 'false' }}"
                                        aria-controls="apiFaq{{ $i }}">
                                        {{ t('api-pricing-faq-q' . $i) }}
                                    </button>
                                </h3>
                                <div id="apiFaq{{ $i }}"
                                    class="accordion-collapse collapse {{ $i === 1 ? 'show' : '' }}"
                                    data-bs-parent="#apiPricingFaq">
                                    <div class="accordion-body">{{ t('api-pricing-faq-a' . $i) }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

        <section class="api-cta">
            <div class="container text-center">
                <h2 class="api-cta__title">{{ t('api-pricing-cta-title') }}</h2>
                <p class="api-cta__text">{{ t('api-pricing-cta-text') }}</p>
                <div class="d-flex flex-column flex-sm-row flex-wrap gap-2 justify-content-center">
                    <a href="{{ $panelUrl }}" class="btn btn-light rounded-pill px-4 py-2 fw-semibold" rel="noopener">
                        {{ t('api-pricing-cta-panel') }}
                    </a>
                    <a href="{{ route('api-services.docs') }}"
                        class="btn btn-outline-light rounded-pill px-4 py-2 fw-semibold">
                        {{ t('api-services-hero-cta-docs') }}
                    </a>
                </div>
            </div>
        </section>
    </div>

    {{-- Sekme değişince adres çubuğundaki ?tab= güncellenir: link paylaşımı ve geri/ileri tuşu tutarlı kalır. --}}
    <script>
        (function () {
            var tabs = document.querySelectorAll('#apiPricingTabs .api-tab');
            if (!tabs.length || !window.history || !window.history.replaceState) {
                return;
            }

            Array.prototype.forEach.call(tabs, function (tab) {
                tab.addEventListener('shown.bs.tab', function () {
                    var key = tab.getAttribute('data-tab-key');
                    if (!key) {
                        return;
                    }
                    var url = new URL(window.location.href);
                    url.searchParams.set('tab', key);
                    window.history.replaceState({}, '', url.toString());
                });
            });
        })();
    </script>
@endsection