@extends('layouts.app')
@section('title', $product->name . ' License')

@push('styles')
<style>
.product-hero { padding: 60px 5% 40px; }
.back-link { color: var(--muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 6px; }
.back-link:hover { color: var(--accent); }
.product-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-icon-lg { width: 80px; height: 80px; background: rgba(108,99,255,0.12); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--accent); margin-bottom: 24px; }
.product-title { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; margin-bottom: 12px; }
.product-desc { color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.feature-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feature-list li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--muted); }
.feature-list li::before { content:'\f058'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--accent); font-size:0.8rem; }

.pricing-box { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 30px; position: sticky; top: 84px; }
.pricing-box h3 { font-family: var(--font-head); font-weight: 700; margin-bottom: 20px; }
.plan-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all .18s; position: relative; }
.plan-option:hover { border-color: var(--accent); }
.plan-option.selected { border-color: var(--accent); background: rgba(108,99,255,0.08); }
.plan-option input[type=radio] { position: absolute; opacity: 0; }
.plan-name { font-weight: 600; font-size: 0.9rem; }
.plan-months { font-size: 0.75rem; color: var(--muted); }
.plan-price { text-align: right; }
.plan-price-val { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; }
.plan-price-per { font-size: 0.72rem; color: var(--muted); }
.featured-badge { background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.order-form { margin-top: 20px; }
.order-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.order-form input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.88rem; outline: none; }
.order-form input:focus { border-color: var(--accent); }
.total-box { background: rgba(108,99,255,0.08); border: 1px solid rgba(108,99,255,0.2); border-radius: 10px; padding: 14px 16px; margin: 16px 0; display: flex; justify-content: space-between; align-items: center; }
.total-label { font-size: 0.85rem; color: var(--muted); }
.total-val { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--accent2); }

@media (max-width: 900px) {
    .product-header { grid-template-columns: 1fr; }
    .feature-list { grid-template-columns: 1fr; }
    .pricing-box { position: static; }
}
</style>
@endpush

@section('content')
<div class="product-hero">
    <a href="{{ route('home') }}" class="back-link"><i class="fa fa-arrow-left"></i> Back to Products</a>

    <div class="product-header">
        <div>
            <div class="product-icon-lg">
                @php
                $icons = ['server'=>'fa-server','cloud'=>'fa-cloud','zap'=>'fa-bolt','shield'=>'fa-shield-halved','database'=>'fa-database','credit-card'=>'fa-credit-card','layout'=>'fa-table-columns','package'=>'fa-box'];
                @endphp
                <i class="fa {{ $icons[$product->icon] ?? 'fa-key' }}"></i>
            </div>
            <h1 class="product-title">{{ $product->name }}</h1>
            <p class="product-desc">{{ $product->description }}</p>
            @if($product->features)
            <ul class="feature-list">
                @foreach($product->features as $feature)
                <li>{{ $feature }}</li>
                @endforeach
            </ul>
            @endif
        </div>

        <div>
            <div class="pricing-box">
                <h3><i class="fa fa-tag" style="color:var(--accent);"></i> Choose Your Plan</h3>
                @foreach($product->plans->sortBy('cycle_months') as $plan)
                <label class="plan-option {{ $plan->is_featured ? 'selected' : '' }}" onclick="selectPlan({{ $plan->id }}, {{ $plan->price }})">
                    <input type="radio" name="plan" value="{{ $plan->id }}" {{ $plan->is_featured ? 'checked' : '' }}>
                    <div>
                        <div class="plan-name">
                            {{ $plan->billing_cycle }}
                            @if($plan->is_featured) <span class="featured-badge">BEST VALUE</span> @endif
                        </div>
                        <div class="plan-months">{{ $plan->cycle_months }} month{{ $plan->cycle_months > 1 ? 's' : '' }}</div>
                    </div>
                    <div class="plan-price">
                        <div class="plan-price-val">${{ number_format($plan->price, 2) }}</div>
                        <div class="plan-price-per">total</div>
                    </div>
                </label>
                @endforeach

                @auth
                <form class="order-form" action="{{ route('user.order.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="plan_id" id="selected_plan" value="{{ $product->plans->where('is_featured', true)->first()?->id ?? $product->plans->first()?->id }}">
                    <div style="margin-bottom:14px;">
                        <label>Server IP Address *</label>
                        <input type="text" name="server_ip" placeholder="e.g. 192.168.1.100" required pattern="^(\d{1,3}\.){3}\d{1,3}$">
                        <div style="font-size:0.75rem;color:var(--muted);margin-top:4px;">The IP address where this license will be active.</div>
                    </div>
                    <div class="total-box">
                        <span class="total-label">Total Due Today</span>
                        <span class="total-val" id="price-display">${{ number_format($product->plans->where('is_featured', true)->first()?->price ?? $product->plans->first()?->price ?? 0, 2) }}</span>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:12px;">
                        <i class="fa fa-lock"></i> Order Now
                    </button>
                    <div style="text-align:center;font-size:0.75rem;color:var(--muted);margin-top:10px;">
                        <i class="fa fa-shield-halved"></i> Secure order via ResellerCenter API
                    </div>
                </form>
                @else
                <div style="margin-top:16px;text-align:center;">
                    <p style="color:var(--muted);font-size:0.88rem;margin-bottom:14px;">Sign in to purchase this license</p>
                    <a href="{{ route('login') }}" class="btn btn-primary" style="width:100%;justify-content:center;">
                        <i class="fa fa-sign-in-alt"></i> Sign In to Order
                    </a>
                    <a href="{{ route('register') }}" class="btn btn-outline" style="width:100%;justify-content:center;margin-top:8px;">
                        Create Account
                    </a>
                </div>
                @endauth
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const planPrices = {
    @foreach($product->plans as $plan)
    {{ $plan->id }}: {{ $plan->price }},
    @endforeach
};

function selectPlan(planId, price) {
    document.querySelectorAll('.plan-option').forEach(el => el.classList.remove('selected'));
    event.currentTarget.classList.add('selected');
    document.getElementById('selected_plan').value = planId;
    document.getElementById('price-display').textContent = '$' + price.toFixed(2);
}
</script>
@endpush
@endsection