<div>
    <div class="mx-4 p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-3 pt-4 px-5 border-b">
                    <h4 class="card-title text-lg font-semibold mb-1">
                        @lang('superadmin.desktopApplicationSettings')
                    </h4>
                    <p class="card-text text-sm text-gray-500">
                        @lang('superadmin.desktopApplicationSettingsDescription')
                    </p>
                    <p class="mt-2 text-xs text-blue-700 dark:text-blue-300 font-medium">
                        @lang('superadmin.desktopApplicationSettingsDescription2')
                    </p>

                    <div class="mt-3 p-3 bg-yellow-100 border-l-4 border-yellow-400 text-yellow-800 rounded">
                        <p>@lang('superadmin.desktopApplicationSettingsNote')</p>
                    </div>
                </div>

                <div class="card-body p-5">

                    <!-- Desktop App Requirement Notice -->
                    <div class="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg dark:bg-amber-900/20 dark:border-amber-800">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 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.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                            </svg>
                            <div class="ml-3">
                                <h5 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                                    @lang('superadmin.desktopAppRequired')
                                </h5>
                                <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">
                                    @lang('superadmin.desktopAppRequiredDescription')
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Desktop App Preview -->
                    @if(($windows_file_path === \App\Models\DesktopApplication::WINDOWS_FILE_PATH) && ($mac_file_path === \App\Models\DesktopApplication::MAC_FILE_PATH))
                        <div class="mb-6 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-center">
                            <img src="{{ asset('img/icon.png') }}" class="w-14 h-14 mx-auto mb-3">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
                                TableTrack Desktop Application
                            </h3>
                            <p class="text-xs text-gray-600 dark:text-gray-400">
                                Official desktop app for enhanced performance
                            </p>
                        </div>
                    @endif

                    <!-- Download URLs -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">

                        <!-- Windows Application -->
                        <div class="p-4 border rounded bg-gray-50 dark:bg-gray-800">
                            <h5 class="font-semibold mb-2 text-gray-900 dark:text-white">
                                @lang('superadmin.windowsApplication')
                            </h5>

                            <input type="url"
                                   wire:model="windows_file_path"
                                   class="w-full px-3 py-2 border rounded text-sm
                                          focus:outline-none focus:ring-blue-500 focus:border-blue-500
                                          dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                   placeholder="https://example.com/windows-app.exe">

                            @error('windows_file_path')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror

                            @if(!empty($windows_file_path))
                                <div class="mt-3">
                                    <a href="{{ $windows_file_path }}" target="_blank"
                                       class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
                                        @lang('superadmin.downloadNow')
                                    </a>
                                </div>
                            @endif
                        </div>

                        <!-- Mac Application -->
                        <div class="p-4 border rounded bg-gray-50 dark:bg-gray-800">
                            <h5 class="font-semibold mb-2 text-gray-900 dark:text-white">
                                @lang('superadmin.macApplication')
                            </h5>

                            <input type="url"
                                   wire:model="mac_file_path"
                                   class="w-full px-3 py-2 border rounded text-sm
                                          focus:outline-none focus:ring-gray-500 focus:border-gray-500
                                          dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                   placeholder="https://example.com/mac-app.dmg">

                            @error('mac_file_path')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror

                            @if(!empty($mac_file_path))
                                <div class="mt-3">
                                    <a href="{{ $mac_file_path }}" target="_blank"
                                       class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
                                        @lang('superadmin.downloadNow')
                                    </a>
                                </div>
                            @endif
                        </div>

                    </div>

                    <!-- Save Button -->
                    <div class="flex justify-end mt-6">
                        <button type="button"
                                wire:click="saveAll"
                                wire:loading.attr="disabled"
                                class="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:ring-2 focus:ring-blue-500">
                            <span wire:loading.remove>@lang('superadmin.saveAllSettings')</span>
                            <span wire:loading>@lang('superadmin.saving')</span>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
