{{-- resources/views/settings/subscription.blade.php --}}
@extends('layouts.app')
@section('title', 'Subscription')
@section('page_title', 'Subscription')
@section('page_subtitle', 'Your plan and billing details')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    {{-- Current Plan --}}
    <div class="col-xl-8">

        {{-- Status Card --}}
        <div class="card mb-3"
             style="border-left:3px solid var(--clay);">
            <div class="card-body">
                <div class="row g-3 align-items-center">
                    <div class="col-md-6">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Current Plan
                        </div>
                        <div style="font-size:1.3rem;font-weight:800;
                                    color:var(--clay);">
                            {{ strtoupper($property->plan_slug ?? 'Starter') }}
                        </div>
                        <div style="font-size:.75rem;color:var(--muted);
                                    margin-top:3px;">
                            @if($property->subscription_status === 'trialing')
                                Trial expires
                                {{ $property->trial_ends_at?->format('d M Y') }}
                                ({{ $property->trial_ends_at?->diffForHumans() }})
                            @elseif($property->subscription_status === 'active')
                                Active subscription
                            @elseif($property->subscription_status === 'grace_period')
                                Grace period expires
                                {{ $property->grace_period_ends_at?->format('d M Y') }}
                            @else
                                {{ ucfirst($property->subscription_status ?? 'Unknown') }}
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);
                                    margin-bottom:4px;">
                            Status
                        </div>
                        @php
                            $subs = $property->subscription_status ?? 'unknown';
                            $subColor = [
                                'active'       => ['bg'=>'#d1fae5','color'=>'#065f46'],
                                'trialing'     => ['bg'=>'#dbeafe','color'=>'#1e40af'],
                                'grace_period' => ['bg'=>'#fef3c7','color'=>'#92400e'],
                                'expired'      => ['bg'=>'#fee2e2','color'=>'#991b1b'],
                                'suspended'    => ['bg'=>'#f1f5f9','color'=>'#475569'],
                            ][$subs] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
                        @endphp
                        <span style="font-size:.78rem;font-weight:600;
                                     padding:4px 12px;border-radius:20px;
                                     background:{{ $subColor['bg'] }};
                                     color:{{ $subColor['color'] }};">
                            {{ ucfirst(str_replace('_', ' ', $subs)) }}
                        </span>
                    </div>
                    <div class="col-md-3">
                        <form method="POST"
                              action="{{ tenant_route('settings.subscription.sync') }}">
                            @csrf
                            <button class="btn btn-sm btn-outline-secondary w-100"
                                    type="submit">
                                <i class="bi bi-arrow-clockwise me-1"></i>
                                Sync
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Available Plans --}}
        <div class="row g-3">
            @foreach($plans as $plan)
                @php
                    $isCurrent = $property->plan_slug === $plan->slug;
                @endphp
                <div class="col-md-4">
                    <div class="card h-100"
                         style="{{ $isCurrent ? 'border:2px solid var(--clay);' : '' }}">
                        <div class="card-body">
                            @if($isCurrent)
                                <div style="font-size:.65rem;font-weight:700;
                                             text-transform:uppercase;
                                             letter-spacing:.08em;
                                             color:var(--clay);margin-bottom:8px;">
                                    ✓ Current Plan
                                </div>
                            @endif
                            <div style="font-size:1rem;font-weight:800;
                                        margin-bottom:2px;">
                                {{ $plan->name }}
                            </div>
                            <div style="font-size:1.4rem;font-weight:800;
                                        color:var(--clay);margin-bottom:6px;">
                                ${{ $plan->price }}
                                <span style="font-size:.75rem;color:var(--muted);
                                             font-weight:400;">/month</span>
                            </div>
                            <div style="font-size:.75rem;color:var(--muted);
                                        margin-bottom:14px;line-height:1.4;">
                                {{ $plan->description }}
                            </div>

                            @if(!empty($plan->features))
                                <div style="display:flex;flex-direction:column;
                                            gap:5px;margin-bottom:14px;">
                                    @foreach($plan->features as $feature)
                                        <div style="display:flex;align-items:center;
                                                    gap:6px;font-size:.75rem;">
                                            <i class="bi bi-check-circle-fill"
                                               style="color:var(--success);
                                                      flex-shrink:0;font-size:.7rem;"></i>
                                            {{ $feature }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if(!$isCurrent)
                                <a href="{{ config('kubhuka.utsanzi.portal_url', 'https://utsanzi.com') }}"
                                   target="_blank"
                                   class="btn btn-outline-secondary btn-sm w-100">
                                    Upgrade →
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Right --}}
    <div class="col-xl-4">

        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">Subscription Details</span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;
                            gap:8px;font-size:.8rem;">
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Plan</span>
                        <span class="fw-semibold">
                            {{ strtoupper($property->plan_slug ?? 'Starter') }}
                        </span>
                    </div>
                    @if($property->trial_ends_at)
                        <div style="display:flex;justify-content:space-between;">
                            <span style="color:var(--muted);">Trial Ends</span>
                            <span>
                                {{ $property->trial_ends_at->format('d M Y') }}
                            </span>
                        </div>
                    @endif
                    @if($property->plan_synced_at)
                        <div style="display:flex;justify-content:space-between;">
                            <span style="color:var(--muted);">Last Synced</span>
                            <span>
                                {{ $property->plan_synced_at->diffForHumans() }}
                            </span>
                        </div>
                    @endif
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Billing via</span>
                        <a href="{{ config('kubhuka.utsanzi.portal_url', 'https://utsanzi.com') }}"
                           target="_blank"
                           style="color:var(--clay);">
                            Utsanzi Portal →
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div style="font-size:.78rem;color:var(--muted);
                            line-height:1.6;margin-bottom:12px;">
                    Billing and subscription management is handled through the
                    Utsanzi portal. Click below to manage your subscription,
                    update payment details or download invoices.
                </div>
                <a href="{{ config('kubhuka.utsanzi.portal_url', 'https://utsanzi.com') }}"
                   target="_blank"
                   class="btn btn-primary btn-sm w-100">
                    <i class="bi bi-box-arrow-up-right me-1"></i>
                    Open Utsanzi Portal
                </a>
            </div>
        </div>

    </div>

</div>

@endsection