@extends('layouts.app')

@section('content')
    <div class="bg-gray-50 min-h-screen">
        <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">🔑 Lisensi Aplikasi</h1>
                    <p class="text-gray-600 mt-1">Kelola status lisensi aplikasi Anda.</p>
                </div>
                <div class="mt-4 sm:mt-0 flex space-x-3">
                    <form action="{{ route('settings.license.test-connectivity') }}" method="POST">
                        @csrf
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                            <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071a9.05 9.05 0 0112.728 0m-15.557-5.657a14 14 0 0119.8 0" />
                            </svg>
                            Cek Koneksi API
                        </button>
                    </form>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
                <div class="p-6 sm:p-8">
                    @if(session('success'))
                        <div class="mb-6 bg-green-50 border-l-4 border-green-400 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-green-400" 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>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-green-700">{{ session('success') }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="mb-6 bg-red-50 border-l-4 border-red-400 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-red-700">{{ session('error') }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="border-b border-gray-200 pb-6 mb-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">Status Lisensi</h2>
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0">
                                @if($settings->surecart_license_status === 'active')
                                    <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
                                        <svg class="h-6 w-6 text-green-600" 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"></path>
                                        </svg>
                                    </div>
                                @else
                                    <div class="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center">
                                        <svg class="h-6 w-6 text-gray-500" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                            </path>
                                        </svg>
                                    </div>
                                @endif
                            </div>
                            <div>
                                <h3 class="text-lg font-medium text-gray-900">
                                    @if($settings->surecart_license_status === 'active')
                                        Lisensi Aktif
                                    @else
                                        Lisensi Tidak Aktif
                                    @endif
                                </h3>
                                <p class="text-sm text-gray-500">
                                    @if($settings->surecart_license_status === 'active')
                                        Aplikasi Anda terlisensi penuh. Terima kasih telah mendukung kami!
                                    @else
                                        Fitur premium mungkin dibatasi. Silakan aktivasi lisensi Anda.
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    @if($settings->surecart_license_status === 'active')
                        <!-- Active License Info -->
                        <div class="bg-gray-50 rounded-lg p-6 mb-6">
                            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                                <div class="sm:col-span-1">
                                    <dt class="text-sm font-medium text-gray-500">License Key</dt>
                                    <dd class="mt-1 text-sm text-gray-900 font-mono">
                                        {{ Str::mask($settings->surecart_license_key, '*', 5, -5) }}
                                    </dd>
                                </div>
                                <div class="sm:col-span-1">
                                    <dt class="text-sm font-medium text-gray-500">Berlaku Hingga</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        {{ $settings->surecart_expires_at ? \Carbon\Carbon::parse($settings->surecart_expires_at)->translatedFormat('d F Y') : 'Sekali Bayar' }}
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        <form action="{{ route('settings.license.deactivate') }}" method="POST"
                            onsubmit="return confirm('Apakah Anda yakin ingin menonaktifkan lisensi ini? Aplikasi mungkin akan terbatas.');">
                            @csrf
                            <button type="submit"
                                class="w-full sm:w-auto flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                Nonaktifkan Lisensi
                            </button>
                        </form>
                    @else
                        <!-- Activation Form -->
                        <form action="{{ route('settings.license.activate') }}" method="POST">
                            @csrf
                            <div class="space-y-6">
                                <div>
                                    <label for="license_key" class="block text-sm font-medium text-gray-700">Masukkan License
                                        Key</label>
                                    <div class="mt-1">
                                        <input type="text" name="license_key" id="license_key" required
                                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                            placeholder="XXXX-XXXX-XXXX-XXXX">
                                    </div>
                                    <p class="mt-2 text-sm text-gray-500">Masukkan kunci lisensi yang Anda terima dari SureCart.
                                    </p>
                                </div>

                                <button type="submit"
                                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    Aktivasi Sekarang
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection