@extends('frontend.layouts.app')

@section('content')
@php
    // Only request('availability') లో వస్తేనే valid — session trust చేయం
    $selectedPincode = request('availability');

    if ($selectedPincode) {
        // Fresh pincode వచ్చింది → session లో store చేయి
        session(['selected_pincode' => $selectedPincode]);
    } else {
        // Pincode లేకపోతే → session clear చేసి affiliate page కి redirect
        session()->forget('selected_pincode');
        header('Location: ' . url('/affiliate'));
        exit;
    }
@endphp
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

.pkg-page { font-family: 'DM Sans', sans-serif; }

/* ── HERO ── */
.pkg-hero {
    background: linear-gradient(135deg, #0b1426 0%, #1e3a5f 100%);
    padding: 20px 0 26px;
    position: relative; overflow: hidden;
}
.pkg-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232,76,30,.12) 0%, transparent 60%);
    pointer-events: none;
}
.pkg-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 28px 28px;
}
.pkg-hero-inner { position: relative; z-index: 1; text-align: center; }
.pkg-hero-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.3);
    color: #f5a623; padding: 5px 16px; border-radius: 50px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 16px;
}
.pkg-hero h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 25px;
    color: #fff; line-height: 1.1; margin-bottom: 12px;
}
.pkg-hero p { font-size: 15px; color: rgba(255,255,255,.55); margin: 0; }

/* ── PINCODE BAR ── */
.pkg-pincode-bar { background: #fff; border-bottom: 1px solid #e8ecf4; padding: 12px 0; }
.pkg-pincode-inner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13.5px; color: #475569;
}
.pkg-pincode-badge {
    background: #f4f6fa; border: 1px solid #e8ecf4;
    padding: 4px 12px; border-radius: 50px;
    font-weight: 600; color: #0b1426; font-size: 13px;
}

/* ── SECTION ── */
.pkg-section { padding: 64px 0 88px; background: #f0f2f8; }
.pkg-container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
    gap: 28px; justify-content: center;
}

/* ── CARD ── */
.pkg-card {
    background: #fff; border-radius: 24px;
    border: 1.5px solid #e2e8f0; overflow: hidden;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    position: relative; display: flex; flex-direction: column;
    box-shadow: 0 2px 12px rgba(11,20,38,.06);
}
.pkg-card:hover { transform: translateY(-10px); box-shadow: 0 32px 72px rgba(11,20,38,.16); border-color: transparent; }
.pkg-card.active-package { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.12); }
.pkg-card.featured { border-color: transparent; box-shadow: 0 12px 48px rgba(232,76,30,.2); }

.pkg-stripe { height: 5px; background: linear-gradient(90deg, #0b1426, #1e3a5f); }
.pkg-card.active-package .pkg-stripe { background: linear-gradient(90deg, #059669, #10b981); }
.pkg-card.featured .pkg-stripe { background: linear-gradient(90deg, #e84c1e, #ff6b3d); }

.pkg-badge {
    position: absolute; top: 20px; right: 20px;
    font-size: 10px; font-weight: 700; padding: 4px 11px;
    border-radius: 50px; letter-spacing: .8px; text-transform: uppercase;
}
.pkg-badge-popular { background: linear-gradient(130deg,#e84c1e,#ff6b3d); color: #fff; display: none; }
.pkg-card.featured .pkg-badge-popular { display: block; }
.pkg-badge-active { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; display: none; }
.pkg-card.active-package .pkg-badge-active { display: block; }

.pkg-card-body { padding: 32px 28px 26px; flex: 1; display: flex; flex-direction: column; }

.pkg-logo {
    width: 80px; height: 80px; border-radius: 20px;
    background: linear-gradient(135deg, #f4f6fa, #e8ecf4);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; box-shadow: 0 4px 14px rgba(11,20,38,.1);
}
.pkg-logo img { max-width: 60px; max-height: 60px; object-fit: contain; }

.pkg-name {
    font-size: 17px; font-weight: 800; color: #0b1426;
    text-align: center; margin-bottom: 6px;
    letter-spacing: 2px; text-transform: uppercase;
}

.pkg-desc-list { list-style: none; padding: 16px 0 0; margin: 0 0 20px; }
.pkg-desc-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid #f8f9fb;
    font-size: 13.5px; color: #334155; line-height: 1.5;
}
.pkg-desc-list li:last-child { border-bottom: none; }
.pkg-desc-icon {
    width: 20px; height: 20px; border-radius: 50%;
    background: #ecfdf5; color: #059669;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.pkg-card.featured .pkg-desc-icon { background: #fff4f1; color: #e84c1e; }

.pkg-price-block {
    text-align: center; padding: 20px 0 24px;
    border-top: 1px dashed #e8ecf4; margin-top: auto;
}
.pkg-amount {
    font-family: 'DM Serif Display', serif;
    font-size: 46px; color: #0b1426; line-height: 1; display: block;
}
.pkg-amount-sub { font-size: 11px; color: #94a3b8; margin-top: 5px; letter-spacing: 1px; text-transform: uppercase; display: block; }

.pkg-btn {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    font-size: 14.5px; font-family: 'DM Sans', sans-serif; font-weight: 600;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; letter-spacing: .2px;
}
.pkg-btn-dark { background: linear-gradient(130deg, #0b1426, #1e3a5f); color: #fff; }
.pkg-btn-dark:hover { box-shadow: 0 8px 24px rgba(11,20,38,.3); transform: translateY(-1px); color: #fff; }
.pkg-btn-flame { background: linear-gradient(130deg, #e84c1e, #ff6b3d); color: #fff; }
.pkg-btn-flame:hover { box-shadow: 0 8px 24px rgba(232,76,30,.4); transform: translateY(-1px); color: #fff; }
.pkg-btn-success { background: #ecfdf5; color: #059669; cursor: default; border: 1.5px solid #a7f3d0; }
.pkg-btn-muted { background: #f4f6fa; color: #94a3b8; cursor: not-allowed; }
/* BEFORE pseudo element */

@media (max-width: 640px) {
    .pkg-grid { grid-template-columns: 1fr; }
    .pkg-section { padding: 40px 0 60px; }
    .pkg-amount { font-size: 38px; }
}
</style>

<div class="pkg-page">

<section class="pkg-hero">
    <div class="pkg-container pkg-hero-inner">
        <div class="pkg-hero-tag">🤝 Partner Plans</div>
        <h1>{{ translate('Choose Your Partner Plan') }}</h1>
        <p>{{ translate('One-time investment. Lifetime earning opportunity.') }}</p>
    </div>
</section>

@if($selectedPincode)
<div class="pkg-pincode-bar">
    <div class="pkg-container">
        <div class="pkg-pincode-inner">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
            <span>{{ translate('Showing plans for') }}</span>
            <span class="pkg-pincode-badge">{{ $selectedPincode }}</span>
            <span style="color:#059669;font-weight:600;">✓ {{ translate('Available') }}</span>
            <a href="{{ url('/affiliate') }}" style="font-size:12px;color:#64748b;margin-left:8px;text-decoration:underline;">
                {{ translate('Change') }}
            </a>
        </div>
    </div>
</div>
@endif

@php
    if(!Auth::check()){
        session(['intended_url' => url()->current()]);
    }

    $affiliateData        = Auth::check() ? App\Models\Affiliate::where('user_id', Auth::user()->id)->first() : null;
    $pkgId                = isset($affiliateData->package_id) ? $affiliateData->package_id : "";
    $customer_package_id  = Auth::check() && isset(Auth::user()->customer_package_id) ? Auth::user()->customer_package_id : $pkgId;
    $customerPackageDetails = App\Models\CustomerPackage::find($customer_package_id);
    $customerPackageAmount  = isset($customerPackageDetails->amount) ? $customerPackageDetails->amount : '';
    $totalPkgs    = count($customer_packages);
    $featuredIndex = floor($totalPkgs / 2);
@endphp

<section class="pkg-section">
    <div class="pkg-container">
        @if($customer_packages->isEmpty())
            <div style="text-align:center;padding:80px 20px;color:#94a3b8;">
                <h3 style="color:#475569;">{{ translate('No plans available') }}</h3>
            </div>
        @else
        <div class="pkg-grid">
            @foreach ($customer_packages as $key => $customer_package)
            @php
                $isActive   = ($customer_package->id == $customer_package_id);
                $isDisabled = $customerPackageAmount > $customer_package->amount;
                $isFeatured = ($key == $featuredIndex && $totalPkgs > 1);
                $descLines  = $customer_package->description
                    ? array_filter(array_map('trim', preg_split('/\r\n|\r|\n/', $customer_package->description)))
                    : [];
            @endphp
            <form action="{{ route('affiliate.userinfo') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="limitation" value="{{ $customer_package->limitation }}">
                <input type="hidden" name="sharing"    value="{{ $customer_package->sharing }}">
                <input type="hidden" name="amount"     value="{{ $customer_package->amount }}">
                <input type="hidden" name="id"         value="{{ $customer_package->id }}">
                <input type="hidden" name="pincode"    value="{{ $selectedPincode }}">

                <div class="pkg-card {{ $isActive ? 'active-package' : '' }} {{ $isFeatured && !$isActive ? 'featured' : '' }}">
                    <div class="pkg-stripe"></div>
                    <span class="pkg-badge pkg-badge-popular">⭐ Popular</span>
                    <span class="pkg-badge pkg-badge-active">✓ Current</span>

                    <div class="pkg-card-body">
                        <div class="pkg-logo">
                            <img src="{{ uploaded_asset($customer_package->logo) }}" alt="{{ $customer_package->getTranslation('name') }}">
                        </div>

                        <div class="pkg-name">{{ $customer_package->getTranslation('name') }}</div>

                        @if(count($descLines))
                        <ul class="pkg-desc-list">
                            @foreach($descLines as $line)
                            <li>
                                <span class="pkg-desc-icon">✓</span>
                                <span>{{ $line }}</span>
                            </li>
                            @endforeach
                        </ul>
                        @endif

                        <div class="pkg-price-block">
                            <span class="pkg-amount">{{ single_price($customer_package->amount) }}</span>
                            <span class="pkg-amount-sub">{{ translate('One Time Payment') }}</span>
                        </div>

                        @if($isActive)
                            <button type="button" class="pkg-btn pkg-btn-success">✓ {{ translate('Your Current Plan') }}</button>
                        @elseif($isDisabled)
                            <button type="button" class="pkg-btn pkg-btn-muted" disabled>{{ translate('Not Available') }}</button>
                        @else
                            @auth
                                <button type="submit" class="pkg-btn {{ $isFeatured ? 'pkg-btn-flame' : 'pkg-btn-dark' }}">
                                    {{ translate('Purchase Package') }} →
                                </button>
                            @else
                                <a href="{{ route('user.login') }}" class="pkg-btn {{ $isFeatured ? 'pkg-btn-flame' : 'pkg-btn-dark' }}">
                                    {{ translate('Login to Purchase') }} →
                                </a>
                            @endauth
                        @endif
                    </div>
                </div>
            </form>
            @endforeach
        </div>
        @endif
    </div>
</section>

</div>
@endsection

@section('modal')
<div class="modal fade" id="select_payment_type_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ translate('Select Payment Type') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="package_id" name="package_id" value="">
                <div class="row">
                    <div class="col-md-2"><label>{{ translate('Payment Type')}}</label></div>
                    <div class="col-md-10">
                        <select class="form-control aiz-selectpicker" onchange="payment_type(this.value)" data-minimum-results-for-search="Infinity">
                            <option value="">{{ translate('Select One')}}</option>
                            <option value="online">{{ translate('Online payment')}}</option>
                            <option value="offline">{{ translate('Offline payment')}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group text-right mt-3">
                    <button type="button" class="btn btn-sm btn-primary mr-1" id="select_type_cancel" data-dismiss="modal">{{translate('Cancel')}}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="price_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ translate('Purchase Your Package') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="package_payment_form" action="{{ route('customer_packages.purchase') }}" method="post">
                @csrf
                <input type="hidden" name="customer_package_id" value="">
                <div class="modal-body gry-bg px-3 pt-3">
                    <div class="row">
                        <div class="col-md-2"><label>{{ translate('Payment Method')}}</label></div>
                        <div class="col-md-10">
                            <select class="form-control selectpicker" data-live-search="true" name="payment_option">
                                @if (get_setting('paypal_payment') == 1)<option value="paypal">{{ translate('Paypal')}}</option>@endif
                                @if (get_setting('stripe_payment') == 1)<option value="stripe">{{ translate('Stripe')}}</option>@endif
                                @if (get_setting('razorpay') == 1)<option value="razorpay">{{ translate('RazorPay')}}</option>@endif
                                @if (get_setting('instamojo_payment') == 1)<option value="instamojo">{{ translate('Instamojo')}}</option>@endif
                                @if(get_setting('paystack') == 1)<option value="paystack">{{ translate('PayStack')}}</option>@endif
                                @if(get_setting('mercadopago_payment') == 1)<option value="mercadopago">{{ translate('Mercadopago')}}</option>@endif
                                @if(get_setting('toyyibpay_payment') == 1)<option value="toyyibpay">{{ translate('ToyyibPay')}}</option>@endif
                                @if(get_setting('sslcommerz_payment') == 1)<option value="sslcommerz">{{ translate('sslcommerz')}}</option>@endif
                                @if(get_setting('voguepay') == 1)<option value="voguepay">{{ translate('Voguepay')}}</option>@endif
                                @if(get_setting('payhere') == 1)<option value="payhere">{{ translate('Payhere')}}</option>@endif
                                @if(get_setting('ngenius') == 1)<option value="ngenius">{{ translate('Ngenius')}}</option>@endif
                                @if(get_setting('iyzico') == 1)<option value="iyzico">{{ translate('Iyzico')}}</option>@endif
                                @if(get_setting('nagad') == 1)<option value="nagad">{{ translate('Nagad')}}</option>@endif
                                @if(get_setting('bkash') == 1)<option value="bkash">{{ translate('Bkash')}}</option>@endif
                                @if (addon_is_activated('paytm') && get_setting('myfatoorah') == 1)<option value="myfatoorah">{{ translate('MyFatoorah') }}</option>@endif
                                @if (addon_is_activated('paytm') && get_setting('khalti_payment') == 1)<option value="khalti">{{ translate('Khalti') }}</option>@endif
                                @if(addon_is_activated('african_pg'))
                                    @if(get_setting('mpesa') == 1)<option value="mpesa">{{ translate('Mpesa')}}</option>@endif
                                    @if(get_setting('flutterwave') == 1)<option value="flutterwave">{{ translate('Flutterwave')}}</option>@endif
                                    @if (get_setting('payfast') == 1)<option value="payfast">{{ translate('PayFast')}}</option>@endif
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="form-group text-right mt-3">
                        <button type="button" class="btn btn-sm btn-secondary mr-1" data-dismiss="modal">{{translate('Cancel')}}</button>
                        <button type="submit" class="btn btn-sm btn-primary mr-1">{{translate('Confirm')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="offline_customer_package_purchase_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ translate('Offline Package Purchase') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="offline_customer_package_purchase_modal_body"></div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
function select_payment_type(id) {
    $('input[name=package_id]').val(id);
    $('#select_payment_type_modal').modal('show');
}
function payment_type(type) {
    var package_id = $('#package_id').val();
    if (type == 'online') {
        $("#select_type_cancel").click();
        show_price_modal(package_id);
    } else if (type == 'offline') {
        $("#select_type_cancel").click();
        $.post('{{ route('offline_customer_package_purchase_modal') }}', {
            _token: '{{ csrf_token() }}', package_id: package_id
        }, function(data) {
            $('#offline_customer_package_purchase_modal_body').html(data);
            $('#offline_customer_package_purchase_modal').modal('show');
        });
    }
}
function show_price_modal(id) {
    $('input[name=customer_package_id]').val(id);
    $('#price_modal').modal('show');
}
function get_free_package(id) {
    $('input[name=customer_package_id]').val(id);
    $('#package_payment_form').submit();
}
</script>
@endsection