@extends('layouts.app')
@section('title', 'Subscription Plans')
@section('page-title', 'Choose Your Plan')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span>Subscription</div>
        <h1>Choose Your Plan</h1>
        <p>Select the plan that works best for your hotel.</p>
    </div>
</div>

@if($currentSubscription && $currentSubscription->isActive())
<div class="alert alert-info" style="margin-bottom:24px;">
    <i class="fas fa-info-circle"></i>
    You are currently on the <strong>{{ $currentSubscription->plan->name }}</strong> plan.
    @if(!$currentSubscription->isUnlimited() && $currentSubscription->end_date)
        <br>Expires: {{ $currentSubscription->end_date->format('d M Y') }}
        ({{ $currentSubscription->daysRemaining() }} days remaining)
    @endif
    Choosing a new plan will replace your current subscription.
</div>
@endif

<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px;">
    @foreach($plans as $plan)
    <div class="card" style="position:relative; {{ $currentSubscription && $currentSubscription->plan_id == $plan->id ? 'border:2px solid #1a56db;' : '' }}">
        @if($currentSubscription && $currentSubscription->plan_id == $plan->id)
        <div style="position:absolute; top:-10px; right:20px; background:#1a56db; color:white; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600;">
            Current Plan
        </div>
        @endif
        
        <div class="card-header" style="text-align:center; justify-content:center;">
            <span class="card-title" style="font-size:22px; font-weight:700;">{{ $plan->name }}</span>
        </div>
        
        <div class="card-body">
            <!-- Price Display -->
            <div style="text-align:center; margin-bottom:20px;">
                <div style="font-size:36px; font-weight:900; color:#1a56db;">
                    ₦{{ number_format($plan->price_annually, 0) }}
                    <span style="font-size:14px; font-weight:500; color:#6b7280;">/year</span>
                </div>
                <div style="font-size:14px; color:#059669;">
                    ₦{{ number_format($plan->price_annually / 12, 0) }}/month
                </div>
                <div style="font-size:12px; color:#6b7280; margin-top:5px;">
                    or ₦{{ number_format($plan->price_monthly, 0) }}/monthly | ₦{{ number_format($plan->price_termly, 0) }}/termly
                </div>
            </div>
            
            <!-- Plan Stats -->
            <div style="display:flex; justify-content:space-between; margin-bottom:16px; padding:10px; background:#f8fafc; border-radius:8px;">
                <div style="text-align:center;">
                    <div style="font-size:20px; font-weight:700;">{{ $plan->max_staff == 999 ? '∞' : $plan->max_staff }}</div>
                    <div style="font-size:11px; color:#6b7280;">Staff</div>
                </div>
                <div style="text-align:center;">
                    <div style="font-size:20px; font-weight:700;">{{ $plan->commission_rate }}%</div>
                    <div style="font-size:11px; color:#6b7280;">Commission</div>
                </div>
                <div style="text-align:center;">
                    <div style="font-size:20px; font-weight:700;">{{ $plan->report_days == 9999 ? '∞' : $plan->report_days }}</div>
                    <div style="font-size:11px; color:#6b7280;">Report Days</div>
                </div>
            </div>
            
            <!-- Features List -->
            <ul style="list-style:none; margin:16px 0 24px; padding:0;">
                @php
                    $features = [];
                    if (is_string($plan->features)) {
                        $features = json_decode($plan->features, true) ?? [];
                    } elseif (is_array($plan->features)) {
                        $features = $plan->features;
                    }
                    
                    if (empty($features)) {
                        if ($plan->name == 'Essential') {
                            $features = ['Unlimited rooms', 'Up to 5 staff', 'Bookings', 'Invoicing', 'Receipts', 'Basic reports'];
                        } elseif ($plan->name == 'Professional') {
                            $features = ['Unlimited rooms', 'Up to 15 staff', 'All Basic features', 'Housekeeping', 'Guest management', 'Advanced reports'];
                        } elseif ($plan->name == 'Enterprise') {
                            $features = ['Unlimited rooms', 'Unlimited staff', 'All Standard features', 'Priority support', 'Custom integrations'];
                        } elseif ($plan->name == 'Custom') {
                            $features = ['Contact us for custom quote', 'One-time purchase available', 'Custom website + management', 'Tailored to your needs'];
                        }
                    }
                @endphp
                
                @foreach($features as $feature)
                <li style="padding:8px 0; border-bottom:1px solid #f3f4f6; font-size:13px; display:flex; align-items:center; gap:8px;">
                    <i class="fas fa-check-circle" style="color:#059669; font-size:14px;"></i> 
                    <span>{{ trim($feature) }}</span>
                </li>
                @endforeach
            </ul>
            
            <!-- Action Button -->
            @if($plan->name == 'Custom')
                <a href="{{ route('contact') }}" class="btn btn-outline" style="width:100%; justify-content:center;">
                    <i class="fas fa-envelope"></i> Contact Us
                </a>
            @elseif($currentSubscription && $currentSubscription->plan_id == $plan->id)
                <button class="btn btn-secondary" style="width:100%; justify-content:center;" disabled>
                    <i class="fas fa-check"></i> Current Plan
                </button>
            @else
                <div style="display:flex; gap:8px;">
                    <form method="POST" action="{{ route('hotel.subscription.initiate') }}" style="flex:1;">
                        @csrf
                        <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        <input type="hidden" name="duration" value="monthly">
                        <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center;">
                            Monthly
                        </button>
                    </form>
                    <form method="POST" action="{{ route('hotel.subscription.initiate') }}" style="flex:1;">
                        @csrf
                        <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        <input type="hidden" name="duration" value="annually">
                        <button type="submit" class="btn btn-success" style="width:100%; justify-content:center; background:#059669;">
                            Annually <span style="font-size:10px;">(Save)</span>
                        </button>
                    </form>
                </div>
            @endif
        </div>
    </div>
    @endforeach
</div>

<!-- Custom Plan Note -->
<div class="card mt-4" style="background:#f8fafc;">
    <div class="card-body" style="text-align:center;">
        <p style="margin-bottom:0;">Need a custom plan? <a href="{{ route('contact') }}">Contact us</a> for a tailored solution or one-time purchase option.</p>
    </div>
</div>
@endsection