@extends('layouts.app')
@section('title','Pricing Plans — JobPortal')
@section('content')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/pricing.css') }}">
<style>
/* Banner utility classes */
.fw-900 { font-weight: 900; }
.fw-800 { font-weight: 800; }
.fw-600 { font-weight: 600; }
.text-teal-accent { color: #0d9488 !important; }
.text-teal-accent:hover { color: #0f766e !important; }
.hover-teal:hover { color: #0d9488 !important; }

/* Missing badges */
.badge-not-available {
    position: absolute;
    top: -14px;
    right: 20px;
    background: #ef4444;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 50px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    z-index: 10;
}
.pricing-card.not-available {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(1);
}

/* Toggle */
.billing-toggle-wrap {
display: inline-flex;
align-items: center;
gap: 12px;
background: #f8f9fa;
border-radius: 50px;
padding: 6px 20px;
}
.billing-toggle-wrap .label-text {
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: color .2s;
}
.billing-toggle-wrap .label-text.active {
color: #4f46e5;
}
.billing-toggle-wrap .label-text.inactive {
color: #94a3b8;
}

/* Pricing card */
.pricing-card {
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 16px;
padding: 36px 32px;
transition: transform .3s ease, box-shadow .3s ease;
height: 100%;
display: flex;
flex-direction: column;
text-align: left;
}
.pricing-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
border-color: #c7d2fe;
}

/* Plan name */
.pricing-card .plan-name {
font-size: 1.35rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 16px;
}

/* Price row */
.pricing-card .price-row {
margin-bottom: 10px;
}
.pricing-card .price-amount {
font-size: 2.8rem;
font-weight: 900;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.pricing-card .price-cycle {
font-size: 1rem;
font-weight: 500;
color: #64748b;
margin-left: 2px;
}

/* Description */
.pricing-card .plan-desc {
font-size: 0.88rem;
color: #94a3b8;
line-height: 1.5;
margin-bottom: 24px;
}

/* Divider */
.pricing-card .divider {
border: none;
border-top: 1px solid #f1f5f9;
margin: 0 0 24px 0;
}

/* Feature list */
.pricing-card .feature-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
flex: 1;
}
.pricing-card .feature-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 0.92rem;
font-weight: 500;
color: #334155;
}
.pricing-card .feature-list li .check-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pricing-card .feature-list li .check-icon svg {
width: 12px;
height: 12px;
fill: none;
stroke: #fff;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Choose plan button */
.pricing-card .btn-choose {
display: block;
width: 100%;
padding: 14px;
border: 2px solid #e2e8f0;
border-radius: 12px;
background: transparent;
color: #334155;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: all .25s ease;
}
.pricing-card .btn-choose:hover {
border-color: #4f46e5;
color: #4f46e5;
background: rgba(79,70,229,0.04);
}

/* Most Value badge */
.pricing-card.most-value {
border-color: #c7d2fe;
box-shadow: 0 8px 30px rgba(79,70,229,0.12);
position: relative;
overflow: visible;
}
.badge-most-value {
position: absolute;
top: -14px;
right: 20px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
padding: 6px 18px;
border-radius: 50px;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(79,70,229,0.3);
z-index: 10;
}
</style>
@endsection

<!-- ═══════════════ BREADCRUMB HEADER ═══════════════ -->
<section class="py-5 text-center position-relative overflow-hidden" style="background: linear-gradient(135deg, #fffbeb 0%, #fff1f2 100%); border-bottom: 1px solid #f1f5f9;">
    <div class="position-absolute" style="top:-50%; left:50%; transform:translateX(-50%); width:600px; height:600px; border:1px solid rgba(244,63,94,0.04); border-radius:50%; z-index:1;"></div>
    <div class="position-absolute" style="top:-40%; left:50%; transform:translateX(-50%); width:480px; height:480px; border:1px solid rgba(244,63,94,0.06); border-radius:50%; z-index:1;"></div>

    <div class="container position-relative py-3" style="z-index:2;">
        <h1 class="fw-900 text-dark mb-2" style="font-size:2.5rem; letter-spacing:-1px;">Pricing Plans</h1>
        <nav class="d-flex justify-content-center" style="--bs-breadcrumb-divider: '›';">
            <ol class="breadcrumb mb-0" style="font-size:0.95rem; font-weight:600;">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted text-decoration-none hover-teal">Home</a></li>
                <li class="breadcrumb-item active text-teal-accent" aria-current="page">Pricing Plans</li>
            </ol>
        </nav>
    </div>
</section>

<!-- ═══════════════ BILLING TOGGLE ═══════════════ -->
<div class="text-center mt-5 mb-4">
    <div class="billing-toggle-wrap">
        <span class="label-text active" id="toggle-monthly-label">Monthly</span>
        <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" id="billing-toggle" onchange="togglePricing()" style="cursor:pointer;">
        </div>
        <span class="label-text inactive" id="toggle-annual-label">Annually</span>
    </div>
</div>

<!-- ═══════════════ PRICING CARDS ═══════════════ -->
<div class="container pt-4 mb-5 pb-4">
    @if($plans->count())
    <div class="row g-4 justify-content-center">
        @foreach($plans as $plan)
        @php $idx = $loop->index; @endphp
        <div class="col-lg-4 col-md-6">
            <div class="pricing-card {{ $idx === 1 ? 'most-value' : '' }}">
                @if($idx === 1)
                <span class="badge-most-value">Most Value</span>
                @endif


                <!-- Plan name -->
                <div class="plan-name">
                    {{ $plan->name }}
                    @if($plan->badge)
                        <span class="badge bg-primary text-white ms-2 fs-6">{{ $plan->badge }}</span>
                    @endif
                </div>

                <!-- Price -->
                <div class="price-row">
                    <span class="price-amount">₹<span class="price-val" data-monthly="{{ $plan->price }}" data-annual="{{ $plan->annual_price > 0 ? $plan->annual_price : round($plan->price * 12 * 0.8) }}">{{ number_format($plan->price) }}</span></span>
                    <span class="price-cycle billing-cycle-text">/{{ $plan->billing_cycle }}</span>
                </div>

                <!-- Description -->
                <p class="plan-desc">{{ $plan->description ?? 'For most businesses that want to optimize their hiring process' }}</p>

                <!-- Divider -->
                <hr class="divider">

                <!-- Features -->
                <ul class="feature-list">
                    <li>
                        <span class="check-icon">
                            <svg viewBox="0 0 16 16"><polyline points="3.5 8.5 6.5 11.5 12.5 5.5"></polyline></svg>
                        </span>
                        {{ $plan->job_posts == 0 ? 'Unlimited' : $plan->job_posts }} Job Posts
                    </li>
                    <li>
                        <span class="check-icon">
                            <svg viewBox="0 0 16 16"><polyline points="3.5 8.5 6.5 11.5 12.5 5.5"></polyline></svg>
                        </span>
                        {{ $plan->resume_views_limit == 0 ? 'Unlimited' : $plan->resume_views_limit }} Resume Views
                    </li>
                    @if($plan->candidate_unlock_limit > 0)
                    <li>
                        <span class="check-icon">
                            <svg viewBox="0 0 16 16"><polyline points="3.5 8.5 6.5 11.5 12.5 5.5"></polyline></svg>
                        </span>
                        {{ $plan->candidate_unlock_limit }} Candidate Profile Unlocks
                    </li>
                    @endif
                    
                    @if(is_array($plan->features))
                        @foreach($plan->features as $feature)
                        <li>
                            <span class="check-icon">
                                <svg viewBox="0 0 16 16">
                                    <polyline points="3.5 8.5 6.5 11.5 12.5 5.5"></polyline>
                                </svg>
                            </span>
                            {{ $feature }}
                        </li>
                        @endforeach
                    @endif
                </ul>

                <!-- CTA -->
                @auth
                    @if(auth()->user()->activeSubscription && auth()->user()->activeSubscription->plan_id == $plan->id)
                        <button class="btn-choose text-success border-success" disabled>Current Plan</button>
                    @else
                        <a href="{{ route('checkout.plan', $plan->slug) }}" class="btn-choose">Upgrade to {{ $plan->name }}</a>
                    @endif
                @else
                    <a href="{{ route('register') }}" class="btn-choose">Get Started</a>
                @endauth
            </div>
        </div>
        @endforeach
    </div>
    <!-- Contact Us Section -->
    <section class="custom-plan-section text-center">
        <h2 class="section-title text-black text-center">Custom Plan Inquiry</h2>
        <p class="section-subtitle">Get a tailored pricing plan for your organization.</p>
        <a href="{{ route('contact') }}" class="btn btn-primary mx-auto d-block">Contact Us</a>
    </section>
    @else
    <p class="text-center text-muted">No plans available.</p>
    @endif
</div>

@endsection

@section('scripts')
<script>
    function togglePricing() {
        const isAnnual = document.getElementById('billing-toggle').checked;
        const priceElems = document.querySelectorAll('.price-val');
        priceElems.forEach(el => {
            const monthly = el.dataset.monthly.replace(/,/g, '');
            const annual = el.dataset.annual.replace(/,/g, '');
            const value = isAnnual ? annual : monthly;
            el.textContent = Number(value).toLocaleString('en-IN');
        });
        const cycleTexts = document.querySelectorAll('.billing-cycle-text');
        cycleTexts.forEach(el => el.textContent = isAnnual ? '/year' : '/month');

        const mLabel = document.getElementById('toggle-monthly-label');
        const aLabel = document.getElementById('toggle-annual-label');
        mLabel.classList.toggle('active', !isAnnual);
        mLabel.classList.toggle('inactive', isAnnual);
        aLabel.classList.toggle('active', isAnnual);
        aLabel.classList.toggle('inactive', !isAnnual);
    }

    document.addEventListener('DOMContentLoaded', function() {
        togglePricing();
        document.getElementById('toggle-monthly-label').addEventListener('click', () => {
            document.getElementById('billing-toggle').checked = false;
            togglePricing();
        });
        document.getElementById('toggle-annual-label').addEventListener('click', () => {
            document.getElementById('billing-toggle').checked = true;
            togglePricing();
        });
    });
</script>
@endsection