@extends('frontend.layouts.master')

@section('content')
    <div class="min-h-screen flex justify-center">
        <div class="max-w-2xl w-full">
            <!-- Main Card -->
            <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
                <form id="whoisForm" class="space-y-6">
                    @csrf
                    <!-- Domain Input -->
                    <div>
                        <flux:field>
                            <flux:label> {{ __('Tên miền') }}</flux:label>
                            <flux:input  id="domain" name="domain" placeholder="{{ __('ví dụ: example.com') }}" />
                            <flux:error name="domainError" id="domainError" />
                        </flux:field>
                    </div>

                    <!-- Action Buttons -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <button type="button" id="getDomainInfo"
                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center space-x-2">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                                </path>
                            </svg>
                            <span>{{ __('Lấy thông tin tên miền') }}</span>
                        </button>

                        <button type="button" id="checkAvailability"
                            class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center space-x-2">
                            <svg class="h-5 w-5" 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>
                            <span>{{ __('Kiểm tra tính sẵn sàng') }}</span>
                        </button>
                    </div>
                </form>

                <!-- Loading State -->
                <div id="loading" class="hidden text-center py-8">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    <p class="mt-3 text-gray-600">{{ __('Đang tải...') }}</p>
                </div>

                <!-- Results Section -->
                <div id="results" class="hidden mt-8">
                    <div class="who-info">
                        <!-- Header -->
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center space-x-3">
                                <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center">
                                    <svg class="h-4 w-4 text-green-600" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900">{{ __('Thông tin Whois tên miền') }}
                                    </h3>
                                    <p class="text-sm text-gray-500" id="domainTitle"></p>
                                </div>
                            </div>
                        </div>

                        <!-- Whois Table -->
                        <div class="table-responsive">
                            <div class="bg-gray-50 rounded-lg overflow-hidden">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-100">
                                        <tr>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/3">
                                                {{ __('Property') }}</th>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                {{ __('Value') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Domain Name') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium"
                                                id="domain_name"></td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Registration Date') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
                                                id="domain_reg_date"></td>
                                        </tr>
                                        <tr id="domain_update_row" class="hidden">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Last Updated') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
                                                id="domain_update_date"></td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Expiration Date') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
                                                id="domain_exp_date"></td>
                                        </tr>
                                        <tr id="domain_owner_row">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Domain Owner') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium"
                                                id="domain_own_name"></td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Status') }}</td>
                                            <td class="px-6 py-4 text-sm text-gray-900">
                                                <div id="domain_status_list" class="flex flex-wrap gap-1"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Registrar') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium"
                                                id="domain_registrar"></td>
                                        </tr>
                                        <tr id="domain_whois_server_row" class="hidden">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Whois Server') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
                                                id="domain_server_whois"></td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('Nameserver') }}</td>
                                            <td class="px-6 py-4 text-sm text-gray-900">
                                                <div id="domain_ns_list" class="space-y-1"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
                                                {{ __('DNSSEC') }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                <span id="domain_dnssec"
                                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Availability Check Results -->
                        <div id="availabilityResults" class="hidden mt-6">
                            <div id="availabilityAlert" class="rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 mr-3" id="availabilityIcon"></div>
                                    <div>
                                        <h4 class="text-sm font-medium" id="availabilityTitle"></h4>
                                        <p class="text-sm" id="availabilityMessage"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Set up translations and routes for JavaScript
        window.translations = {
            domainRequired: '{{ __('Domain name is required.') }}',
            requestError: '{{ __('An error occurred while processing your request.') }}',
            domainAvailable: '{{ __('Domain Available') }}',
            domainUnavailable: '{{ __('Domain Unavailable') }}',
            isAvailable: '{{ __('is available for registration') }}',
            isNotAvailable: '{{ __('is not available for registration') }}'
        };

        window.routes = {
            domainInfo: '{{ route('whois.domain-info') }}',
            checkAvailability: '{{ route('whois.check-availability') }}'
        };
    </script>
    <script src="{{ asset('js/whois.min.js') }}"></script>
@endsection