<div>
    {{-- Top Nav --}}
    @include('livewire.system-parameter.top-nav.system-parameter')

    <div class="mt-10">
        <div class="p-4 bg-white shadow-md">
            <div class="p-6 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">Company Logo</h2>

                <!-- Upload Logo -->
                <div class="flex justify-center items-start gap-4">
                    <label class="w-40 p-2 text-right font-medium">Upload Image:</label>
                    <div class="flex-1">
                        <label class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-md p-8 cursor-pointer hover:bg-gray-50 transition">
                            <input type="file" wire:model="image" class="hidden" accept="image/*">
                            <img src="/assets/unioil(orange).png" alt="Upload" class="h-16 mb-4" />
                            <p class="text-gray-600 font-semibold text-center">Click or drag file to this area to upload</p>
                            <p class="text-gray-400 text-sm">Support for a single upload only</p>
                        </label>

                        @error('image')
                        <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror

                        @if ($image)
                        <div class="mt-6">
                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
                            <img src="{{ $image->temporaryUrl() }}" class="h-48 rounded border shadow">
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Gps Radius -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">GPS Radius</h2>

                <div class="flex items-center gap-4">
                    <label class="w-60 text-right font-medium">GPS Radius (in meters):</label>
                    <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Enter radius" value="2000000000000">
                </div>
            </div>

            <!-- Customer Service Details -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">Customer Service Details</h2>

                <div class="flex items-center gap-4">
                    <label class="w-60 text-right font-medium">Contact Email Address:</label>
                    <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Email address" value="loyalty@unioil.com">
                </div>

                <div class="flex items-center gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Contact Number:</label>
                    <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Contact number" value="02 868 788 77">
                </div>
            </div>

            <!-- System Administrator Details -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">System Administrator Details</h2>

                <div class="flex items-center gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Contact Details:</label>
                    <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Contact number" value="grmontino@unioil.com">
                </div>
            </div>

            <!-- Information Guide Details -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">Information Guide Details</h2>

                <div class="flex items-start gap-4 mt-5">
                    <label class="w-60 text-right font-medium flex items-center">
                        Details:
                        <span class="ml-2 relative group cursor-pointer">
                            <i class="fas fa-question-circle text-gray-500"></i>

                            <!-- Tooltip -->
                            <div class="absolute left-6 top-1/2 transform -translate-y-1/2 w-72 bg-gray-800 text-white text-sm rounded-md p-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 shadow-md">
                                This content will be used in the <strong>"Enter ID Number"</strong> page as part of the <strong>Apply for a Card</strong> process of the Unioil Mobile App.

                                <!-- Arrow -->
                                <div class="absolute -left-1.5 top-1/2 transform -translate-y-1/2 w-3 h-3 bg-gray-800 rotate-45"></div>
                            </div>
                        </span>
                    </label>

                    <textarea wire:model="info_guide" class="flex-1 border rounded px-3 py-2 h-32 resize-none" placeholder="Enter information guide...">Testing</textarea>
                </div>
            </div>



            <!-- Android Version Update -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">Android Version Update</h2>

                <div class="flex items-center gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Android Version:</label>
                    <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Version" value="1.7.17">
                </div>

                <div class="flex items-start gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Version Update Message:</label>
                    <textarea wire:model="info_guide" class="flex-1 border rounded px-3 py-2 h-32 resize-none" value="test" placeholder="Message">A new update is available to provide you with a more secure, stable and seamless user experience.</textarea>
                </div>

                <div class="flex items-center gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Version Action:</label>
                    <select wire:model="version_action" class="flex-1 border rounded px-3 py-2">
                        <option value="update">Update</option>
                        <option value="force update">Force Update</option>
                        <option value="silent update">Silent Update</option>
                    </select>
                </div>
            </div>

            <!-- IOS Version Update -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md">
                <h2 class="text-2xl font-semibold mb-4">IOS Version Update</h2>

                <div class="flex items-center gap-4 mt-5">
                    <label class="w-60 text-right font-medium">IOS Version:</label>
                    <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Version" value="">
                </div>

                <div class="flex items-start gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Version Update Message:</label>
                    <textarea wire:model="info_guide" class="flex-1 border rounded px-3 py-2 h-32 resize-none" value="test" placeholder="Message">A new update is available to provide you with a more secure, stable and seamless user experience.</textarea>
                </div>

                <div class="flex items-center gap-4 mt-5">
                    <label class="w-60 text-right font-medium">Version Action:</label>
                    <select wire:model="version_action" class="flex-1 border rounded px-3 py-2">
                        <option value="update">Update</option>
                        <option value="force update">Force Update</option>
                        <option value="silent update">Silent Update</option>
                    </select>
                </div>
            </div>


            <!-- Sync Data Section with Info Tooltip -->
            <div class="p-6 mt-10 w-[80%] mx-auto bg-white rounded-md shadow-md relative" x-data="{ open: false }">
                <h2 class="text-2xl font-semibold mb-4">Update Details</h2>

                <!-- Info Tooltip -->
                <div class="absolute left-0 -top-32 w-[30rem]" x-show="open" x-transition>
                    <div class="bg-white border rounded-md shadow-md p-4">
                        <h3 class="font-semibold mb-2">Info</h3>
                        <p class="text-sm text-gray-700">
                            Select this button to sync the below data from the Unioil Website to the Unioil Mobile App system.
                        </p>
                        <ul class="text-sm text-gray-700 list-disc list-inside mt-2">
                            <li>City and Province</li>
                            <li>Products</li>
                            <li>Stations</li>
                        </ul>
                    </div>
                </div>

                <!-- Button -->
                <button
                    @mouseenter="open = true"
                    @mouseleave="open = false"
                    wire:click="sync_data"
                    class="mt-4 px-4 py-2 w-60 bg-blue-500 text-white rounded-md hover:bg-blue-600 cursor-pointer">
                    Sync Data
                </button>
            </div>



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