@extends('layouts.recruiter')
@section('title', 'Plan & Subscription — JOBES')

@section('recruiter_content')
<div class="card-recruiter-panel animate__animated animate__fadeIn">
    <!-- Header banner -->
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
        <h5 class="fw-800 text-dark mb-0" style="font-size:1.1rem; border-left:3px solid #0d9488; padding-left:10px;">Plan & Subscription</h5>
        
        @if($activeSub)
            <span class="badge bg-success-light text-success px-3 py-2 fw-800" style="font-size:0.8rem; border-radius:30px;">
                <i class="fas fa-check-circle me-1.5"></i> Active Subscription
            </span>
        @else
            <span class="badge bg-rose-accent-light text-rose-accent px-3 py-2 fw-800" style="font-size:0.8rem; border-radius:30px;">
                <i class="fas fa-exclamation-circle me-1.5"></i> No Active Plan
            </span>
        @endif
    </div>

    <!-- Active Subscription Details Card -->
    @if($activeSub)
        <div class="card bg-light border-0 p-4 rounded-4 text-start mb-5">
            <div class="row g-4 align-items-center">
                <div class="col-lg-8 col-md-7 col-12">
                    <h6 class="fw-800 text-dark mb-2" style="font-size:0.98rem;">Your Current Subscription Details:</h6>
                    <div class="row g-2 mt-2">
                        <div class="col-md-6 col-12 text-muted small fw-600">
                            Plan Name: <span class="text-dark fw-800">{{ $activeSub->plan->name }}</span>
                        </div>
                        <div class="col-md-6 col-12 text-muted small fw-600">
                            Billing Cycle: <span class="text-dark fw-800 text-capitalize">{{ $activeSub->plan->billing_cycle }}</span>
                        </div>
                        <div class="col-md-6 col-12 text-muted small fw-600">
                            Ends On: <span class="text-dark fw-800">{{ $activeSub->ends_at ? $activeSub->ends_at->format('d M Y, h:i A') : 'N/A' }}</span>
                        </div>
                        <div class="col-md-6 col-12 text-muted small fw-600">
                            Subscription ID: <span class="text-dark fw-800 font-monospace">{{ $activeSub->razorpay_subscription_id }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-5 col-12 text-md-end text-start border-start" style="border-left-color:#e2e8f0 !important;">
                    <div class="text-muted small fw-600 mb-1">Pricing Plan:</div>
                    <h3 class="fw-900 text-teal-accent mb-0" style="font-size:1.85rem;">
                        ₹{{ number_format($activeSub->plan->price, 0) }}
                    </h3>
                    <span class="text-muted small fw-700">/ {{ $activeSub->plan->billing_cycle }}</span>
                </div>
            </div>
        </div>
    @else
        <!-- No Active Plan Alert Banner -->
        <div class="alert alert-danger border-0 shadow-xs rounded-4 p-4 mb-5 text-start d-flex align-items-center gap-3" style="background:#fee2e2; color:#991b1b;">
            <div class="rounded-circle d-flex align-items-center justify-content-center bg-white" style="width:48px; height:48px; flex-shrink:0;">
                <i class="fas fa-exclamation-triangle fs-4 text-danger"></i>
            </div>
            <div>
                <h6 class="fw-800 mb-1" style="font-size:0.95rem;">Subscription Required!</h6>
                <p class="mb-0 small fw-600 text-muted-dark" style="color:rgba(153,27,27,0.85);">You currently do not have an active pricing subscription plan. To post new jobs and access candidate profiles, please choose one of our verified recruitment plans below.</p>
            </div>
        </div>
    @endif

    <!-- Pricing Cards Grid -->
    <h5 class="text-dark mb-4 text-start" style="font-size:1.15rem; font-weight: 700; letter-spacing: -0.3px;">Available Recruitment Plans:</h5>
    <div class="row g-4 justify-content-center">
        @foreach($plans as $plan)
            @php
                $isCurrent = $activeSub && $activeSub->plan_id == $plan->id;
                $featuresList = json_decode($plan->features, true) ?? [];
                
                // Determine button label and styling
                $btnText = 'Subscribe Now';
                $btnClass = $plan->is_popular ? 'btn-teal-gradient' : 'btn-light border';
                $btnStyle = !$plan->is_popular ? 'background:#fff; color:#475569; border-radius:0.5rem; border-color:#cbd5e1 !important;' : '';
                
                if ($activeSub) {
                    if ($isCurrent) {
                        $btnText = 'Current Active Plan';
                    } elseif ($plan->price > $activeSub->plan->price) {
                        $btnText = 'Upgrade Plan';
                        $btnClass = 'btn-teal-gradient';
                        $btnStyle = '';
                    } else {
                        $btnText = 'Choose Plan';
                    }
                }
            @endphp
            <div class="col-lg-4 col-md-6 col-12">
                <div class="card h-100 border p-4 rounded-4 bg-white text-start d-flex flex-column justify-content-between hover-lift transition-all-300 {{ $isCurrent ? 'border-emerald-active shadow-sm' : ($plan->is_popular ? 'border-teal' : '') }}" style="border-color:{{ $isCurrent ? '#10b981' : ($plan->is_popular ? '#0d9488' : '#e2e8f0') }} !important; border-width:{{ $isCurrent ? '2px' : '1px' }} !important; box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important; position:relative; background: {{ $isCurrent ? '#f8fafc' : '#fff' }} !important;">
                    
                    @if($isCurrent)
                        <span class="badge bg-success text-white px-3 py-1.5 position-absolute animate__animated animate__pulse animate__infinite" style="top:-13px; left:0; right:0; margin:0 auto; width:fit-content; border-radius:30px; font-size:0.65rem; letter-spacing:0.5px; box-shadow:0 4px 12px rgba(16,185,129,0.2); background:#10b981 !important; font-weight:700; z-index:10;">
                            <i class="fas fa-check-circle me-1"></i> ACTIVE PLAN
                        </span>
                    @elseif($plan->is_popular)
                        <span class="badge bg-teal-accent text-white px-3 py-1.5 text-uppercase position-absolute" style="top:-13px; left:0; right:0; margin:0 auto; width:fit-content; border-radius:30px; font-size:0.65rem; letter-spacing:0.5px; box-shadow:0 4px 10px rgba(13,148,136,0.15); font-weight:700; z-index:10;">
                            MOST POPULAR
                        </span>
                    @endif
                    
                    <div>
                        <!-- Plan Name & Pricing -->
                        <div class="mb-4">
                            <h5 class="text-dark mb-1" style="font-size:1.25rem; font-weight: 700; letter-spacing: -0.3px;">{{ $plan->name }}</h5>
                            <p class="text-muted small mb-3" style="line-height:1.5; font-size:0.85rem; min-height:45px;">{{ $plan->description }}</p>
                            
                            <div class="d-flex align-items-baseline gap-1 mt-2">
                                <span class="text-dark" style="font-size:2.2rem; font-weight:800; letter-spacing:-1px; line-height:1;">₹{{ number_format($plan->price, 0) }}</span>
                                <span class="text-muted small" style="font-weight:500; font-size:0.85rem;">/ {{ $plan->billing_cycle }}</span>
                            </div>
                        </div>

                        <!-- Features -->
                        <div class="pt-3 border-top mb-4" style="border-top-color:#e2e8f0 !important;">
                            <ul class="list-unstyled d-flex flex-column gap-3 mb-0">
                                @foreach($featuresList as $feat)
                                    <li class="d-flex align-items-start text-muted small fw-600" style="gap:10px; line-height:1.4;">
                                        <i class="fas fa-check-circle {{ $isCurrent ? 'text-success' : 'text-teal-accent' }} mt-0.5" style="font-size:0.85rem; flex-shrink:0;"></i>
                                        <span>{{ $feat }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <!-- Action Subscribe Button -->
                    <div class="pt-3">
                        @if($isCurrent)
                            <button class="btn btn-success w-100 py-2.5 disabled d-flex align-items-center justify-content-center gap-2" disabled style="opacity:1; cursor:not-allowed; background:#10b981 !important; border:none !important; color:#fff !important; border-radius:0.5rem; font-weight:600; font-size:0.9rem;">
                                <i class="fas fa-check-circle"></i> {{ $btnText }}
                            </button>
                        @else
                            <form method="POST" action="{{ route('recruiter.plans.subscribe', $plan->slug) }}">
                                @csrf
                                <button type="submit" class="btn w-100 py-2.5 d-flex align-items-center justify-content-center gap-2 {{ $btnClass }}" style="{{ $btnStyle }} font-weight:600; font-size:0.9rem; border-radius:0.5rem;">
                                    {{ $btnText }} <i class="fas fa-arrow-right" style="font-size:0.8rem;"></i>
                                </button>
                            </form>
                        @endif
                    </div>
                    
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection

@section('recruiter_styles')
<style>
    .border-teal {
        border-width: 1.5px !important;
    }
    .border-emerald-active {
        border-width: 2.5px !important;
    }
    .text-muted-dark {
        color: rgba(153, 27, 27, 0.85);
    }
</style>
@endsection