@extends('layouts.app')

@section('title', 'SaaS Subscriptions & Plans')

@section('content')
<div class="mb-4">
    <h4 class="fw-bold mb-1">SaaS Subscriptions & Module Entitlements</h4>
    <p class="text-secondary small mb-0">Manage organization seat licenses, module tiers, and billing cycles in Bangladeshi Taka (BDT ৳)</p>
</div>

<!-- Current Plan Overview Card -->
<div class="card mb-4 shadow-sm border-0 bg-white">
    <div class="card-body p-4">
        <div class="row align-items-center g-4">
            <div class="col-12 col-md-4">
                <span class="text-muted text-xs text-uppercase fw-bold">Current Subscription</span>
                <h4 class="fw-bold text-primary mt-1 mb-1">
                    {{ $subscription && $subscription->plan ? $subscription->plan->name : '14-Day Enterprise Trial' }}
                </h4>
                <div class="small text-secondary">
                    Status: <span class="badge badge-soft-success">{{ strtoupper($organization->status ?? 'ACTIVE') }}</span>
                    &bull; Currency: <strong>BDT (৳)</strong>
                </div>
            </div>
            <div class="col-12 col-md-5">
                <div class="d-flex justify-content-between align-items-center mb-1 small">
                    <span class="fw-semibold text-secondary">Staff Seat Utilization:</span>
                    <span class="fw-bold text-dark">{{ $employeeCount }} / {{ $employeeLimit }} Seats</span>
                </div>
                @php
                    $usagePct = $employeeLimit > 0 ? min(100, round(($employeeCount / $employeeLimit) * 100)) : 0;
                @endphp
                <div class="progress" style="height: 8px;">
                    <div class="progress-bar {{ $usagePct > 90 ? 'bg-danger' : 'bg-success' }}" style="width: {{ $usagePct }}%"></div>
                </div>
                <span class="text-xs text-muted mt-1 d-block">
                    {{ max(0, $employeeLimit - $employeeCount) }} available employee seat(s) remaining in this plan.
                </span>
            </div>
            <div class="col-12 col-md-3 text-md-end">
                <span class="badge bg-light text-secondary border p-2">
                    <i class="bi bi-clock-history me-1"></i> Auto-Renews Monthly
                </span>
            </div>
        </div>
    </div>
</div>

<!-- Plan Tiers -->
<h5 class="fw-bold mb-3">Available Subscription Tiers</h5>
<div class="row g-3">
    @foreach($plans as $plan)
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card h-100 shadow-sm border-{{ $subscription && $subscription->subscription_plan_id === $plan->id ? 'primary' : 'light' }}">
                <div class="card-header bg-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold mb-0 text-dark">{{ $plan->name }}</h6>
                        @if($subscription && $subscription->subscription_plan_id === $plan->id)
                            <span class="badge bg-primary">Current</span>
                        @endif
                    </div>
                    <div class="mt-2">
                        <span class="fs-4 fw-bold text-dark">৳ {{ number_format($plan->price_monthly, 0) }}</span>
                        <span class="text-muted small">/ month</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="small fw-semibold text-secondary mb-2">Entitlements & Features:</div>
                    <ul class="list-unstyled small mb-4">
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> Up to <strong>{{ $plan->employee_limit }}</strong> Employees</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> <strong>{{ $plan->storage_limit_mb }} MB</strong> Encrypted Vault</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> Biometric Attendance</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> Leave Approval Workflows</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> BDT Payroll & Tax</li>
                        @if($plan->employee_limit >= 50)
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> Recruitment & ATS</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-1"></i> HR Helpdesk System</li>
                        @endif
                    </ul>

                    <form action="{{ route('subscriptions.change-plan') }}" method="POST">
                        @csrf
                        <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        <input type="hidden" name="billing_cycle" value="monthly">
                        <button type="submit" class="btn btn-sm w-100 {{ $subscription && $subscription->subscription_plan_id === $plan->id ? 'btn-outline-primary' : 'btn-primary' }}" {{ $subscription && $subscription->subscription_plan_id === $plan->id ? 'disabled' : '' }}>
                            {{ $subscription && $subscription->subscription_plan_id === $plan->id ? 'Active Plan' : 'Select ' . $plan->name }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
</div>
@endsection