@extends("layouts.app")

@section('title', 'API Settings')

@section("main")
    <div class="min-h-screen flex flex-col sm:justify-center items-center py-12 bg-gray-100 dark:bg-gray-900">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden max-w-2xl w-full p-8 sm:p-10">
            <div class="mb-6 text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">API Settings</h2>
                <p class="text-base text-gray-600 dark:text-gray-400">Manage your API key and IP settings.</p>
            </div>

            @if ($api_setting)
                @if (session("error"))
                    <div class="bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg mb-4 text-center">
                        {{ session("error") }}
                    </div>
                @endif
                @if (session("success"))
                    <div class="bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg mb-4 text-center">
                        {{ session("success") }}
                    </div>
                @endif

                <div class="mb-6">
                    <label for="api_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">API Key <span class="text-red-500">*</span></label>
                    <input type="text" id="api_key" class="block w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500" value="{{ $api_setting->api_key }}" placeholder="XXX-XXX-XXX-XXX-XXX-XXX-XXX-XXX" readonly>
                </div>

                <div class="mb-6">
                    <label for="api_ip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">API IP <span class="text-red-500">*</span></label>
                    <input type="text" id="api_ip" class="block w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500" value="{{ $api_setting->api_ip }}" readonly>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400"><span class="text-red-500 font-medium">Note:</span> IP will auto assign while you connect first time from your server with this API Key.</p>
                </div>

                <div class="flex flex-col sm:flex-row gap-4 mt-6">
                    <!-- Regenerate API Key -->
                    <form action="{{ route("api.key.regenerate") }}" method="POST" class="w-full">
                        @csrf
                        <button type="submit" name="regenerate_api_key" class="w-full justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out">
                            Regenerate API Key
                        </button>
                    </form>
                    <!-- Reset IP -->
                    <form action="{{ route("api.reset.ip") }}" method="POST" class="w-full">
                        @csrf
                        <button type="submit" name="reset_ip" class="w-full justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
                            Reset IP
                        </button>
                    </form>
                </div>
            @else
                <p class="text-center text-xl text-gray-700 dark:text-gray-300">Dear, {{ $user->name }}. Currently, there is no API assigned to your account. To get access to an API, please contact support.</p>
            @endif
        </div>
    </div>
@endsection