@extends('layouts.app')

@section('title', 'Pilihan Paket - FIN-ANALYSIS PRO')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 py-12 px-4">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-16">
            <h1 class="text-5xl font-bold text-gray-900 mb-4">
                Pilih <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Paket</span> Anda
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                Mulai analisis keuangan dengan paket yang sesuai kebutuhan bisnis Anda
            </p>
        </div>

        <!-- Current Subscription Alert -->
        @if($subscription && $subscription->status === 'active')
        <div class="mb-8 max-w-2xl mx-auto">
            <div class="bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 rounded-lg p-6">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-600 text-2xl mr-4"></i>
                    <div>
                        <h3 class="font-bold text-green-900 text-lg">Paket Aktif</h3>
                        <p class="text-green-700">Anda menggunakan paket <strong>{{ \App\Models\Subscription::planLabel($subscription->plan) }}</strong> hingga <strong>{{ $subscription->expired_at->format('d F Y') }}</strong></p>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Pricing Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            <!-- Free Plan -->
            <div class="relative bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                <div class="h-2 bg-gray-200"></div>
                <div class="p-8">
                    <h3 class="text-3xl font-bold text-gray-900 mb-2">Gratis</h3>
                    <p class="text-gray-600 mb-6 text-sm">Untuk mencoba fitur dasar</p>
                    
                    <div class="mb-8">
                        <div class="text-5xl font-bold text-gray-900">
                            Rp 0
                            <span class="text-lg text-gray-500 font-normal">/bulan</span>
                        </div>
                    </div>

                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">5 Analisis per bulan</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Laporan PDF dasar</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Riwayat 30 hari</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-gray-300 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-400">Fitur premium</span>
                        </li>
                    </ul>

                    <button disabled class="w-full py-3 px-6 rounded-lg font-semibold text-gray-500 bg-gray-100 cursor-not-allowed">
                        Paket Saat Ini
                    </button>
                </div>
            </div>

            <!-- Pro Plan (Popular) -->
            <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden transform scale-105 hover:shadow-2xl transition-shadow duration-300">
                <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-blue-600"></div>
                <div class="absolute -top-3 right-8 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1 rounded-full text-sm font-bold">
                    POPULER
                </div>

                <div class="p-8">
                    <h3 class="text-3xl font-bold text-gray-900 mb-2">Pro</h3>
                    <p class="text-gray-600 mb-6 text-sm">Untuk bisnis berkembang</p>
                    
                    <div class="mb-8">
                        <div class="text-5xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
                            Rp 299K
                            <span class="text-lg text-gray-500 font-normal">/bulan</span>
                        </div>
                    </div>

                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Analisis tak terbatas</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Laporan PDF lengkap</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Riwayat selamanya</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Export Excel</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Prioritas support</span>
                        </li>
                    </ul>

                    <button onclick="selectPlan('pro')" class="w-full py-3 px-6 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl">
                        Pilih Pro
                    </button>
                </div>
            </div>

            <!-- Enterprise Plan -->
            <div class="relative bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                <div class="h-2 bg-gradient-to-r from-purple-500 to-purple-600"></div>
                <div class="p-8">
                    <h3 class="text-3xl font-bold text-gray-900 mb-2">Enterprise</h3>
                    <p class="text-gray-600 mb-6 text-sm">Untuk perusahaan besar</p>
                    
                    <div class="mb-8">
                        <div class="text-5xl font-bold text-gray-900">
                            Custom
                            <span class="text-lg text-gray-500 font-normal block mt-2">Hubungi kami</span>
                        </div>
                    </div>

                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Semua fitur Pro</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">API Access</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Multi-user accounts</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Dedicated support</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
                            <span class="text-gray-700">Customization</span>
                        </li>
                    </ul>

                    <a href="{{ route('public.contact') }}" class="block w-full py-3 px-6 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 transition-all duration-300 text-center">
                        Hubungi Kami
                    </a>
                </div>
            </div>
        </div>

        <!-- Features Comparison -->
        <div class="bg-white rounded-2xl shadow-lg p-8 mb-12">
            <h3 class="text-2xl font-bold text-gray-900 mb-8">Perbandingan Fitur</h3>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b-2 border-gray-200">
                            <th class="text-left py-4 px-6 text-gray-700 font-bold">Fitur</th>
                            <th class="text-center py-4 px-6 text-gray-700 font-bold">Gratis</th>
                            <th class="text-center py-4 px-6 text-blue-600 font-bold">Pro</th>
                            <th class="text-center py-4 px-6 text-purple-600 font-bold">Enterprise</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-6">Analisis per bulan</td>
                            <td class="text-center py-4 px-6">5</td>
                            <td class="text-center py-4 px-6"><i class="fas fa-infinity text-blue-600"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-infinity text-purple-600"></i></td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-6">Laporan PDF</td>
                            <td class="text-center py-4 px-6"><i class="fas fa-check text-gray-300"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-check text-blue-600"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-check text-purple-600"></i></td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-6">Export Excel</td>
                            <td class="text-center py-4 px-6"><i class="fas fa-times text-gray-300"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-check text-blue-600"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-check text-purple-600"></i></td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-6">Riwayat analisis</td>
                            <td class="text-center py-4 px-6">30 hari</td>
                            <td class="text-center py-4 px-6">Selamanya</td>
                            <td class="text-center py-4 px-6">Selamanya</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-6">API Access</td>
                            <td class="text-center py-4 px-6"><i class="fas fa-times text-gray-300"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-times text-gray-300"></i></td>
                            <td class="text-center py-4 px-6"><i class="fas fa-check text-purple-600"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-4 px-6">Support</td>
                            <td class="text-center py-4 px-6">Email</td>
                            <td class="text-center py-4 px-6">Prioritas</td>
                            <td class="text-center py-4 px-6">Dedicated</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="@if($isSandbox) https://app.sandbox.midtrans.com/snap/snap.js @else https://app.midtrans.com/snap/snap.js @endif" 
    data-client-key="{{ config('midtrans.client_key') }}"></script>

<script>
function selectPlan(plan) {
    if (!plan) return;

    // Show loading
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';

    // Send request to checkout
    fetch('{{ route("subscription.checkout") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ plan: plan })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.data.token) {
            // Open Midtrans Snap payment
            snap.pay(data.data.token, {
                onSuccess: function(result){
                    alert('Pembayaran berhasil! Paket Anda sedang diaktifkan...');
                    window.location.href = '{{ route("subscription.success") }}?order_id=' + result.order_id;
                },
                onPending: function(result){
                    alert('Pembayaran pending, silakan tunggu konfirmasi...');
                    window.location.href = '{{ route("subscription.pending") }}?order_id=' + result.order_id;
                },
                onError: function(result){
                    alert('Pembayaran gagal!');
                },
                onClose: function(){
                    alert('Pembayaran dibatalkan.');
                    btn.disabled = false;
                    btn.innerHTML = originalText;
                }
            });
        } else {
            alert('Gagal mendapatkan token pembayaran: ' + (data.message || 'Unknown error'));
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan, silakan coba lagi.');
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
}
</script>
@endpush
@endsection