@extends('frontend.main_master')
@section('body-class', 'panel-page')
@section('no-header', true)
@section('title', t('buy-package') . ' - ' . t('site-title'))

@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/profile.css') }}">
    <style>
        header, .main-header, .site-header {
            display: none !important;
        }

        html, body {
            overflow-x: hidden !important;
            max-width: 100vw;
        }

        body, body.panel-page {
            padding-top: 0 !important;
            overflow-x: hidden !important;
        }
        .pkg-page {
            background: #f6f7f8;
            min-height: 100vh;
            overflow-x: hidden !important;
        }

        /* ─── Hero ─── */
        .pkg-hero {
            text-align: center;
            padding: 0.5rem 0 1.5rem;
        }

        .pkg-hero h1 {
            font-size: 2.6rem;
            font-weight: 900;
            color: #1a1a1a;
            letter-spacing: -.03em;
            margin-bottom: .65rem;
        }

        .pkg-hero p {
            font-size: .95rem;
            color: #4a4a4a;
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.65;
        }

        @media (min-width: 768px) {
            .pkg-hero h1 {
                font-size: 3rem;
            }
        }

        /* ─── Package Cards ─── */
        .pkg-grid {
            margin-bottom: 2.5rem;
        }

        .pkg-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 2rem 1.75rem;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            transition: all .22s ease;
            height: 100%;
        }

        .pkg-card:hover {
            box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
            border-color: #cbd5e1;
        }

        /* Selected */
        .pkg-card.selected {
            border: 2px solid var(--astro-main-green);
            box-shadow: 0 16px 40px rgba(47, 143, 122, .12);
        }

        @media (min-width: 768px) {
            .pkg-card.selected {
                transform: scale(1.03);
                z-index: 2;
            }

            .pkg-card.selected:hover {
                transform: scale(1.03);
                box-shadow: 0 20px 50px rgba(47, 143, 122, .15);
            }
        }

        .pkg-name {
            font-size: 1.15rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: .3rem;
        }

        .pkg-token-badge {
            display: inline-block;
            border-radius: 999px;
            padding: .15rem .7rem;
            font-size: .72rem;
            font-weight: 600;
            background: #ecfdf5;
            color: #047857;
            margin-bottom: .6rem;
        }

        .pkg-desc {
            font-size: .82rem;
            color: #4a4a4a;
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }

        .pkg-price-block {
            margin-bottom: 1.5rem;
        }

        .pkg-price {
            font-size: 2.5rem;
            font-weight: 900;
            color: #1a1a1a;
            line-height: 1;
        }

        .pkg-price-unit {
            font-size: .88rem;
            color: #4a4a4a;
            font-weight: 500;
        }

        .pkg-old-price {
            font-size: .78rem;
            color: #cbd5e1;
            text-decoration: line-through;
            margin-top: .2rem;
        }

        .pkg-subscriber-price {
            font-size: .72rem;
            color: var(--astro-main-green);
            font-weight: 600;
            margin-top: .2rem;
        }

        /* Features */
        .pkg-feat-label {
            font-size: .6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .14em;
            color: #6b6b6b;
            margin-bottom: .85rem;
        }

        .pkg-feat-item {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            font-size: .85rem;
            color: #1a1a1a;
            margin-bottom: .65rem;
            line-height: 1.4;
        }

        .pkg-feat-item i {
            color: var(--astro-main-green);
            font-size: .8rem;
            margin-top: .2rem;
            flex-shrink: 0;
        }

        /* ─── Single Token Section ─── */
        .single-section {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            padding: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .single-section h5 {
            font-size: 1rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: .3rem;
        }

        .single-section .section-desc {
            font-size: .82rem;
            color: #4a4a4a;
            margin-bottom: 1.25rem;
        }

        .single-token-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 1rem 1.25rem;
            transition: all .2s ease;
            height: 100%;
        }

        .single-token-card:hover {
            border-color: var(--astro-main-green);
            box-shadow: 0 4px 12px rgba(47, 143, 122, .08);
        }

        .single-token-name {
            font-size: .88rem;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: .25rem;
        }

        .single-token-price {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--astro-main-green);
        }

        .single-token-btn {
            background: var(--astro-main-green);
            border-color: var(--astro-main-green);
            color: #fff;
            border-radius: 8px;
            font-size: .78rem;
            font-weight: 600;
            padding: .35rem .85rem;
        }

        .single-token-btn:hover {
            background: var(--astro-main-green-hover);
            border-color: var(--astro-main-green-hover);
            color: #fff;
        }

        /* ─── Action bar ─── */
        .pkg-action-bar {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            padding: 1.15rem 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
            margin-bottom: 1.5rem;
        }

        .btn-go-cart {
            background: var(--astro-main-green);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: .7rem 1.5rem;
            font-weight: 700;
            font-size: .9rem;
            transition: all .18s;
            cursor: pointer;
        }

        .btn-go-cart:hover {
            background: var(--astro-main-green-hover);
            color: #fff;
            box-shadow: 0 6px 18px rgba(47, 143, 122, .25);
        }

        /* ─── Mobile ─── */
        @media (max-width: 767.98px) {
            .pkg-hero {
                padding: 2rem 0 1rem;
            }

            .pkg-hero h1 {
                font-size: 1.8rem;
            }

            .pkg-card {
                padding: 1.5rem 1.25rem;
            }

            .pkg-price {
                font-size: 2rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="pkg-page">
        <div class="container">

            {{-- Toast Notifications --}}
            <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080;">
                @if (session('success'))
                    <div class="toast astro-toast astro-toast--success border-0 show" role="alert" data-bs-autohide="true"
                        data-bs-delay="4000">
                        <div class="astro-toast__inner">
                            <div class="astro-toast__icon"><i class="fa-solid fa-check"></i></div>
                            <div class="astro-toast__content">
                                <span class="astro-toast__title">{{ t('success') }}</span>
                                <span class="astro-toast__body">{{ session('success') }}</span>
                            </div>
                            <button type="button" class="astro-toast__close" data-bs-dismiss="toast"><i
                                    class="fa-solid fa-xmark"></i></button>
                        </div>
                        <div class="astro-toast__progress astro-toast__progress--run" style="animation-duration:4000ms">
                        </div>
                    </div>
                @endif
                @if (session('error'))
                    <div class="toast astro-toast astro-toast--error border-0 show" role="alert" data-bs-autohide="true"
                        data-bs-delay="5000">
                        <div class="astro-toast__inner">
                            <div class="astro-toast__icon"><i class="fa-solid fa-circle-xmark"></i></div>
                            <div class="astro-toast__content">
                                <span class="astro-toast__title">{{ t('error') }}</span>
                                <span class="astro-toast__body">{{ session('error') }}</span>
                            </div>
                            <button type="button" class="astro-toast__close" data-bs-dismiss="toast"><i
                                    class="fa-solid fa-xmark"></i></button>
                        </div>
                        <div class="astro-toast__progress astro-toast__progress--run" style="animation-duration:5000ms">
                        </div>
                    </div>
                @endif
            </div>

            {{-- Breadcrumb --}}
            <nav aria-label="breadcrumb" class="mb-3 pt-3">
                <ol class="breadcrumb small mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('panel') }}" class="text-decoration-none"
                            style="color: var(--astro-main-green);">{{ t('home-page') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ t('buy-package') }}</li>
                </ol>
            </nav>

            {{-- Hero --}}
            <div class="pkg-hero">
                <h1>{{ t('token-packages') }}</h1>
                <p>{{ t('token-packages-description') }}</p>
                @if (($userCredits['chat_words'] ?? 0) > 0)
                    <p class="small mt-2 mb-0" style="color: var(--astro-main-green);">
                        <i class="fa-solid fa-wallet me-1"></i>
                        {{ t('current-balance') }}: {{ number_format($userCredits['chat_words']) }}
                    </p>
                @endif
            </div>

            {{-- Package Cards --}}
            @php $subscriber = !empty($isSubscriber) && $isSubscriber; @endphp
            <form action="{{ route('cart.add') }}" method="POST" id="pkgForm">
                @csrf
                <input type="hidden" name="type" value="package">

                <div class="row g-4 justify-content-center pkg-grid">
                    @foreach ($packages as $package)
                        @php
                            $baseDiscounted = $package->price_discounted;
                            $subscriberPrice =
                                $subscriber && !is_null($package->price_discounted_subscriber)
                                    ? $package->price_discounted_subscriber
                                    : null;
                            $effectivePrice = $subscriberPrice ?? $baseDiscounted;
                            $isFeatured = $package->sort_order === 2;
                            $hasDiscount = $package->price_normal > $effectivePrice;
                        @endphp
                        <div class="col-md-4">
                            <label class="d-block h-100" style="cursor:pointer">
                                <input type="radio" name="package_id" value="{{ $package->id }}"
                                    class="d-none pkg-radio" {{ $isFeatured ? 'checked' : '' }}>
                                <div class="pkg-card">
                                    <div class="pkg-name">{{ $package->name }}</div>
                                    <div class="pkg-token-badge">{{ number_format($package->word_limit) }}
                                        {{ t('token') }}</div>
                                    <div class="pkg-desc">{{ t('package-description') }}</div>

                                    <div class="pkg-price-block">
                                        <span class="pkg-price">{{ number_format($effectivePrice, 0, ',', '.') }}
                                            {{ t('currency') }}</span>
                                        @if ($subscriberPrice)
                                            <span class="badge bg-success-subtle text-success ms-2"
                                                style="font-size: .68rem; vertical-align: middle;">{{ t('subscriber-price') }}</span>
                                        @endif
                                        @if ($hasDiscount)
                                            <div class="pkg-old-price">
                                                {{ number_format($package->price_normal, 0, ',', '.') }}
                                                {{ t('currency') }}</div>
                                        @endif
                                        @if ($subscriberPrice && $baseDiscounted != $subscriberPrice)
                                            <div class="pkg-subscriber-price">{{ t('list-price') }}:
                                                {{ number_format($baseDiscounted, 0, ',', '.') }} {{ t('currency') }}
                                            </div>
                                        @endif
                                    </div>

                                    <div class="pkg-feat-label">{{ t('package-included') }}:</div>
                                    <div class="pkg-feat-item"><i
                                            class="fa-solid fa-circle-check"></i><span>{{ t('package-included-1') }}</span>
                                    </div>
                                    <div class="pkg-feat-item"><i
                                            class="fa-solid fa-circle-check"></i><span>{{ t('package-included-2') }}</span>
                                    </div>
                                    <div class="pkg-feat-item"><i
                                            class="fa-solid fa-circle-check"></i><span>{{ t('package-included-3') }}</span>
                                    </div>
                                    <div class="pkg-feat-item"><i
                                            class="fa-solid fa-circle-check"></i><span>{{ t('package-included-4') }}</span>
                                    </div>
                                </div>
                            </label>
                        </div>
                    @endforeach
                </div>

                {{-- Action bar --}}
                <div
                    class="pkg-action-bar d-flex flex-column flex-md-row align-items-center justify-content-between gap-3 mb-4">
                    <div>
                        <div class="fw-bold" style="color:#1a1a1a">{{ t('select-package-to-cart') }}</div>
                        <div class="text-muted small">{{ t('package-cart-description') }}</div>
                    </div>
                    <div class="d-flex gap-2 flex-shrink-0">
                        <button type="submit" class="btn-go-cart d-flex align-items-center gap-2">
                            <i class="fa-solid fa-cart-plus"></i> {{ t('add-to-cart') }}
                        </button>
                        <a href="{{ route('cart.show') }}"
                            class="btn btn-outline-secondary d-flex align-items-center gap-2"
                            style="border-radius:10px;font-weight:600;font-size:.88rem">
                            <i class="fa-solid fa-bag-shopping"></i> {{ t('go-to-cart') }}
                        </a>
                    </div>
                </div>
            </form>

            {{-- Single Token Products --}}
            @if (!empty($commentTokenProducts))
                <div class="single-section">
                    <h5><i class="fa-solid fa-coins me-2" style="color: var(--astro-main-green);"></i>
                        {{ t('single-comment-tokens') }}
                    </h5>
                    <p class="section-desc">
                        {{ t('single-comment-tokens-description') }}
                    </p>
                    <div class="row g-3">
                        @foreach (['natal' => t('natal-comment'), 'relationship' => t('relationship-comment'), 'annual' => t('annual-comment')] as $commentType => $commentLabel)
                            @php
                                $prod = $commentTokenProducts[$commentType] ?? null;
                                if (!$prod) {
                                    continue;
                                }
                            @endphp
                            <div class="col-md-4">
                                <div class="single-token-card d-flex align-items-center justify-content-between">
                                    <div>
                                        <div class="single-token-name">{{ $commentLabel }}</div>
                                        <div class="single-token-price">{{ number_format($prod['price'], 0, ',', '.') }}
                                            {{ t('currency') }}
                                        </div>
                                    </div>
                                    <form action="{{ route('cart.add') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="type" value="single_comment_tokens">
                                        <input type="hidden" name="comment_type" value="{{ $commentType }}">
                                        <button type="submit" class="btn single-token-btn">
                                            <i class="fa-solid fa-cart-plus me-1"></i>{{ t('add') }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif


        </div>
    </div>

    <div style="margin-bottom: 3rem"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.toast.show').forEach(function(el) {
                new bootstrap.Toast(el).show();
            });

            var radios = document.querySelectorAll('.pkg-radio');

            function sync() {
                document.querySelectorAll('.pkg-card').forEach(function(c) {
                    c.classList.remove('selected');
                });
                radios.forEach(function(r) {
                    if (r.checked) {
                        var card = r.closest('label').querySelector('.pkg-card');
                        if (card) card.classList.add('selected');
                    }
                });
            }
            radios.forEach(function(r) {
                r.addEventListener('change', sync);
            });
            sync();
        });
    </script>
@endsection