@extends('layouts.app')
@section('title', 'Pilih Paket')

@section('content')
<div class="py-8 lg:py-12 px-6 lg:px-8 max-w-6xl mx-auto">

    <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-900">Pilih Paket / Choose Plan</h1>
        <p class="text-slate-500 text-sm mt-1">Ubah paket sesuai kebutuhan bisnis Anda / Change your plan to fit your business needs</p>
    </div>

    {{-- Flash messages --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-2xl px-5 py-4 mb-6 flex items-center gap-3 text-green-700 text-sm font-medium">
        <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif
    @if(session('info'))
    <div class="bg-blue-50 border border-blue-200 rounded-2xl px-5 py-4 mb-6 flex items-center gap-3 text-blue-700 text-sm font-medium">
        <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('info') }}
    </div>
    @endif

    {{-- Expired banner --}}
    @if($tenant->isPlanExpired())
    <div class="bg-red-50 border border-red-200 rounded-2xl px-5 py-4 mb-6 flex items-start gap-3">
        <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
        <div>
            <p class="font-semibold text-red-700 text-sm">Paket {{ strtoupper($tenant->plan) }} telah kedaluwarsa / Your {{ strtoupper($tenant->plan) }} plan has expired</p>
            <p class="text-red-600 text-xs mt-0.5">Fitur saat ini dibatasi ke paket Pemula. Pilih paket di bawah untuk melanjutkan. / Features are now limited to Pemula. Choose a plan below to continue.</p>
        </div>
    </div>
    @endif

    {{-- Current plan status --}}
    <div class="bg-blue-50 border border-blue-200 rounded-2xl px-5 py-4 mb-8 flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            </div>
            <div>
                <p class="text-xs font-semibold text-blue-500 uppercase tracking-wide">Paket Aktif / Current Plan</p>
                <p class="font-bold text-blue-800 text-lg">{{ $plans[$tenant->plan]['label'] ?? strtoupper($tenant->plan) }}</p>
            </div>
        </div>
        <div class="text-right">
            @if($tenant->plan === 'pemula')
                <span class="inline-flex items-center gap-1.5 bg-green-100 text-green-700 text-xs font-semibold px-3 py-1.5 rounded-full">
                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    Gratis Selamanya / Free Forever
                </span>
            @elseif($tenant->isPlanExpired())
                <span class="inline-flex items-center gap-1.5 bg-red-100 text-red-700 text-xs font-semibold px-3 py-1.5 rounded-full">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    Kedaluwarsa {{ $tenant->plan_expires_at->format('d/m/Y') }}
                </span>
            @elseif($tenant->plan_expires_at)
                @php $days = $tenant->daysUntilExpiry(); @endphp
                <div>
                    <span class="inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full
                        {{ $days <= 7 ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Aktif hingga {{ $tenant->plan_expires_at->format('d/m/Y') }}
                    </span>
                    @if($days <= 7)
                    <p class="text-xs text-amber-600 mt-1 text-right font-medium">Berakhir dalam {{ $days }} hari / Expires in {{ $days }} days</p>
                    @endif
                </div>
            @endif
        </div>
    </div>

    {{-- Plan cards --}}
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
        @foreach($plans as $key => $plan)
        @php
        $isCurrent  = $tenant->plan === $key && ! $tenant->isPlanExpired();
        $isExpiredOf = $tenant->plan === $key && $tenant->isPlanExpired();
        
        $badgeColor = [
            'pemula' => 'bg-emerald-100 text-emerald-700',
            'umkm' => 'bg-blue-100 text-blue-700',
            'start' => 'bg-violet-100 text-violet-700',
            'start_plus' => 'bg-amber-100 text-amber-700',
        ][$key] ?? 'bg-slate-100 text-slate-600';
        
        $btnColor = [
            'pemula' => 'bg-emerald-600 hover:bg-emerald-700',
            'umkm' => 'bg-blue-600 hover:bg-blue-700',
            'start' => 'bg-violet-600 hover:bg-violet-700',
            'start_plus' => 'bg-amber-600 hover:bg-amber-700',
        ][$key] ?? 'bg-slate-600';
        
        $borderColor = [
            'pemula' => 'border-emerald-200',
            'umkm' => 'border-blue-200',
            'start' => 'border-violet-300',
            'start_plus' => 'border-amber-300',
        ][$key] ?? 'border-slate-200';
        
        $isPopular = $key === 'start';
        @endphp
        <div class="relative bg-white rounded-2xl border-2 overflow-hidden transition-all hover:shadow-lg hover:-translate-y-1
            {{ $isCurrent ? $borderColor.' ring-2 ring-offset-2' : $borderColor }}
            {{ $isExpiredOf ? 'ring-2 ring-red-300' : '' }}
            {{ $isPopular ? 'shadow-xl shadow-violet-200' : 'shadow-sm' }}">

            @if($isPopular)
            <div class="absolute -top-px left-1/2 -translate-x-1/2 bg-violet-600 text-white text-xs font-bold px-4 py-1.5 rounded-b-xl flex items-center gap-1.5">
                <span class="text-sm">⭐</span> PALING POPULER
            </div>
            @endif

            @if($isCurrent && !$isExpiredOf)
            <div class="absolute top-3 right-3 z-10">
                <span class="flex items-center gap-1 text-xs font-bold text-green-600 bg-green-50 px-2.5 py-1 rounded-full border border-green-200">
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    Aktif
                </span>
            </div>
            @endif

            {{-- Header --}}
            <div class="px-6 pt-6 pb-5{{ $isPopular ? ' pt-8' : '' }}">
                <div class="flex items-center gap-2 mb-3">
                    <span class="px-3 py-1 rounded-full text-xs font-bold {{ $badgeColor }}">{{ strtoupper($key) }}</span>
                </div>
                <p class="font-bold text-slate-900 text-lg leading-tight">
                    @if($key === 'pemula')
                        Pemula
                    @elseif($key === 'umkm')
                        UMKM
                    @else
                        {{ str_replace(['Start ', ' Plus'], ['', ' Plus'], $plan['label']) }}
                    @endif
                </p>
                <p class="text-3xl font-black text-slate-900 mt-3">
                    @if($plan['price'] > 0)
                        Rp {{ number_format($plan['price'], 0, ',', '.') }}
                        <span class="text-base font-normal text-slate-400">/bulan</span>
                    @else
                        <span class="text-emerald-600">GRATIS</span>
                    @endif
                </p>
            </div>

            {{-- Features --}}
            <div class="px-6 py-4 space-y-3 bg-slate-50/70">
                @php
                $videoLimit = [
                    'pemula' => '50 video / bulan',
                    'umkm' => '400 video / bulan',
                    'start' => '1.200 video / bulan',
                    'start_plus' => '5.000 video / bulan',
                ][$key] ?? 'Unlimited';
                
                $durationLimit = [
                    'pemula' => 'Max 2 menit / video',
                    'umkm' => 'Max 3 menit / video',
                    'start' => 'Max 5 menit / video',
                    'start_plus' => 'Max 10 menit / video',
                ][$key] ?? 'Unlimited';
                
                $retention = [
                    'pemula' => 30,
                    'umkm' => 60,
                    'start' => 60,
                    'start_plus' => 120,
                ][$key] ?? 30;
                
                $features = [
                    $videoLimit,
                    $durationLimit,
                    'Simpan '.$retention.' hari',
                ];
                @endphp
                @foreach($features as $f)
                <div class="flex items-center gap-2.5 text-sm text-slate-600">
                    <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    <span class="font-medium">{{ $f }}</span>
                </div>
                @endforeach
            </div>

            {{-- Empty space for solo badge --}}
            @if(!$plan['can_add_employees'])
            <div class="px-6 py-3 text-xs text-slate-400">
                Solo (tanpa karyawan)
            </div>
            @endif

            {{-- CTA --}}
            <div class="px-6 pb-6 pt-4">
                @if($isCurrent && $key === 'pemula')
                    <div class="w-full py-3 rounded-xl text-center text-sm font-semibold bg-emerald-50 text-emerald-600 border border-emerald-200">
                        ✓ Paket Aktif — Gratis Selamanya
                    </div>
                @elseif($isCurrent)
                    <form method="POST" action="{{ route('dashboard.plan.request') }}">
                        @csrf
                        <input type="hidden" name="plan" value="{{ $key }}">
                        <button type="submit" class="w-full py-3 rounded-xl text-sm font-semibold text-white transition {{ $btnColor }} shadow-sm">
                            Perpanjang 30 Hari
                        </button>
                    </form>
                @else
                    <form method="POST" action="{{ route('dashboard.plan.request') }}">
                        @csrf
                        <input type="hidden" name="plan" value="{{ $key }}">
                        <button type="submit" class="w-full py-3 rounded-xl text-sm font-semibold text-white transition {{ $btnColor }} shadow-sm">
                            @if($key === 'pemula')
                                Turun ke Gratis
                            @elseif($plan['price'] > ($plans[$tenant->plan]['price'] ?? 0))
                                Upgrade ke {{ strtoupper($key) }}
                            @else
                                Pilih {{ strtoupper($key) }}
                            @endif
                        </button>
                    </form>
                @endif
            </div>
        </div>
        @endforeach
    </div>

    {{-- Payment note --}}
    <div class="bg-amber-50 border border-amber-200 rounded-2xl px-6 py-5 flex items-start gap-4">
        <svg class="w-6 h-6 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <div>
            <p class="font-semibold text-amber-800 mb-2">Cara Pembayaran</p>
            <p class="text-sm text-amber-700 leading-relaxed">Pilih paket di atas, lalu hubungi admin ResiCam untuk konfirmasi pembayaran. Paket akan diaktifkan setelah pembayaran dikonfirmasi. Paket Pemula gratis selamanya tanpa perlu pembayaran.</p>
        </div>
</div>
</div>
@endsection