@extends('website.webLayouts.master')

@section('content')
<style>
    .gw-page-header {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        color: #ffffff;
        padding: 60px 0;
        text-align: center;
    }
    .gw-page-header h1 {
        font-size: clamp(28px, 4vw, 44px);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
    }
    .gw-page-header p {
        color: #94a3b8;
        font-size: 16px;
        max-width: 650px;
        margin: 0 auto;
    }
    .gw-pkg-section {
        padding: 60px 0 80px;
        background: #f8fafc;
    }
    .gw-pkg-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 32px 24px;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
        transition: all 0.25s ease;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .gw-pkg-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.1);
        border-color: #cbd5e1;
    }
    .gw-pkg-card.is-popular {
        border-color: #2563eb;
        box-shadow: 0 20px 35px -5px rgba(37, 99, 235, 0.15);
    }
    .gw-pkg-badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: #2563eb;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 4px 14px;
        border-radius: 999px;
    }
    .gw-billing-pill {
        display: inline-block;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 6px;
        margin-bottom: 10px;
    }
    .pill-per_sms { background: #e0f2fe; color: #0284c7; }
    .pill-daily { background: #fef3c7; color: #d97706; }
    .pill-monthly { background: #dcfce7; color: #15803d; }
    .pill-yearly { background: #f3e8ff; color: #7e22ce; }

    .gw-pkg-title {
        font-size: 19px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 8px;
    }
    .gw-pkg-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-bottom: 16px;
    }
    .gw-pkg-price sup {
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
    }
    .gw-pkg-price strong {
        font-size: 36px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.03em;
    }
    .gw-pkg-price span {
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }
    .gw-pkg-specs {
        list-style: none;
        padding: 0;
        margin: 16px 0 24px;
        border-top: 1px solid #f1f5f9;
        padding-top: 16px;
        display: grid;
        gap: 10px;
        flex-grow: 1;
    }
    .gw-pkg-specs li {
        font-size: 13.5px;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .gw-pkg-specs li i {
        color: #10b981;
        font-size: 14px;
        flex-shrink: 0;
    }
    .gw-operator-strip {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 50px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    }
    .gw-operator-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f1f5f9;
        border-radius: 10px;
        font-weight: 700;
        font-size: 13px;
        color: #1e293b;
    }
    .gw-faq-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 20px 24px;
        margin-bottom: 14px;
    }
    .gw-faq-card h4 {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }
    .gw-faq-card p {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 0;
    }
</style>

<!-- Page Header -->
<section class="gw-page-header">
    <div class="container">
        <span class="badge bg-primary px-3 py-2 rounded-pill mb-3" style="font-weight: 700;">TRANSPARENT PRICING &amp; PACKAGES</span>
        <h1>Bulk SMS Packages &amp; Plans</h1>
        <p>Choose from flexible Per SMS, Daily, or Monthly packages with instant online automatic activation and real-time carrier delivery.</p>
    </div>
</section>

<section class="gw-pkg-section">
    <div class="container">

        <!-- Supported Operators Bar -->
        <div class="gw-operator-strip">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                <div>
                    <strong style="color:#0f172a; font-size:15px;">Supported Mobile Operators:</strong>
                    <p class="text-muted mb-0" style="font-size:13px;">Direct interconnectivity across all cellular networks in Bangladesh</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <span class="gw-operator-pill"><i class="fa fa-signal text-primary"></i> Grameenphone</span>
                    <span class="gw-operator-pill"><i class="fa fa-signal text-danger"></i> Robi / Airtel</span>
                    <span class="gw-operator-pill"><i class="fa fa-signal text-warning"></i> Banglalink</span>
                    <span class="gw-operator-pill"><i class="fa fa-signal text-success"></i> Teletalk</span>
                </div>
            </div>
        </div>

        <!-- Pricing Grid -->
        <div class="row g-4 justify-content-center mb-5">
            @forelse ($pricing as $price)
                @php
                    $bType = $price->billing_type ?: 'per_sms';
                    $pillClass = 'pill-' . $bType;
                    $billingLabel = match($bType) {
                        'daily' => 'Daily Package',
                        'monthly' => 'Monthly Package',
                        'yearly' => 'Yearly Package',
                        default => 'Pay Per SMS',
                    };
                @endphp
                <div class="col-lg-3 col-md-6">
                    <div class="gw-pkg-card {{ $price->is_popular == 1 ? 'is-popular' : '' }}">
                        @if ($price->is_popular == 1)
                            <div class="gw-pkg-badge">Most Popular</div>
                        @endif

                        <span class="gw-billing-pill {{ $pillClass }}">{{ $billingLabel }}</span>
                        <h3 class="gw-pkg-title">{{ $price->title }}</h3>

                        <div class="gw-pkg-price">
                            <sup>৳</sup>
                            <strong>{{ number_format($price->price, 2) }}</strong>
                            <span>/ {{ $bType === 'per_sms' ? 'SMS' : ($bType === 'daily' ? 'Day' : ($bType === 'monthly' ? 'Month' : 'Year')) }}</span>
                        </div>

                        <ul class="gw-pkg-specs">
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span><strong>Type:</strong> {{ $price->type == 1 ? 'Masking (Brand Sender)' : ($price->type == 3 ? 'Both Masking & Non-Masking' : 'Non-Masking') }}</span>
                            </li>
                            @if ($price->sms_limit > 0)
                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    <span><strong>SMS Quota:</strong> {{ number_format($price->sms_limit) }} SMS</span>
                                </li>
                            @endif
                            @if ($price->daily_limit > 0)
                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    <span><strong>Daily Limit:</strong> {{ number_format($price->daily_limit) }} SMS / Day</span>
                                </li>
                            @endif
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span><strong>Validity:</strong> {{ $price->validity_length }} {{ $price->validity_type }}</span>
                            </li>
                            @if ($price->masking_rate > 0)
                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    <span><strong>Masking Rate:</strong> ৳{{ $price->masking_rate }}/SMS</span>
                                </li>
                            @endif
                            @if ($price->non_masking_rate > 0)
                                <li>
                                    <i class="fa fa-check-circle"></i>
                                    <span><strong>Non-Masking Rate:</strong> ৳{{ $price->non_masking_rate }}/SMS</span>
                                </li>
                            @endif
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>REST API &amp; Webhook Integration</span>
                            </li>
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>Real-Time DLR Delivery Receipts</span>
                            </li>
                            <li>
                                <i class="fa fa-check-circle"></i>
                                <span>Android Gateway Node Support</span>
                            </li>
                        </ul>

                        <a href="{{ auth()->check() ? url('/admin/buy_sms') : url('/register?package_id=' . $price->id) }}" class="btn btn-primary w-100" style="padding:11px; font-weight:700; border-radius:10px;">
                            <span>{{ auth()->check() ? 'Activate Package' : 'Get Started & Activate' }}</span>
                            <i class="fa fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5 text-muted">
                    <i class="fa fa-tags fa-3x mb-3 text-secondary"></i>
                    <p>No active pricing plans configured at this moment. Contact sales for custom quotes.</p>
                </div>
            @endforelse
        </div>

        <!-- FAQ Section -->
        <div class="row justify-content-center mt-5">
            <div class="col-lg-8">
                <h2 class="text-center mb-4" style="font-weight: 800; font-size: 26px; color:#0f172a;">Frequently Asked Questions</h2>

                <div class="gw-faq-card">
                    <h4>How does user-wise package activation work?</h4>
                    <p>When you complete an online payment or when an admin approves your manual payment request, the package is immediately activated on your account with its full SMS quota, validity period, and daily limits.</p>
                </div>

                <div class="gw-faq-card">
                    <h4>What is the difference between Per SMS, Daily, and Monthly packages?</h4>
                    <p><strong>Per SMS</strong> packages charge based on the exact number of messages sent. <strong>Daily</strong> packages provide dedicated daily limits refreshed every 24 hours. <strong>Monthly</strong> packages allocate bulk monthly quotas with extended validity.</p>
                </div>

                <div class="gw-faq-card">
                    <h4>How do I integrate the SMS Gateway API?</h4>
                    <p>Generate your secure API Token from your dashboard Developer settings and make HTTP POST requests to <code style="color:#2563eb;">/api/sent_sms</code> with your API token in the Authorization header or as an ApiKey.</p>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection