<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Support Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">

                <form wire:submit.prevent="submitSearch" class="flex items-end gap-4 mb-6">
                    <div class="w-full max-w-md">
                        <x-label for="searchID" value="Enter Customer ID" />
                        <x-input id="searchID" class="block mt-1 w-full" type="text" 
                                 wire:model="searchID" placeholder="e.g. CUST-001" />
                    </div>

                    <div>
                        <x-button type="submit" wire:loading.attr="disabled" class="h-[42px]">
                            <span wire:loading.remove>Search</span>
                            <span wire:loading>...</span>
                        </x-button>
                    </div>
                </form>
                <x-input-error for="searchID" class="mt-2" />

                <hr class="border-gray-200 mb-6">

                @if($restaurantDetails)
                    <div class="relative overflow-x-auto">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Search Results</h3>
                        <table class="w-full text-sm text-left text-gray-500 border rounded-lg">
                            <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3">Restaurant Name</th>
                                    <th class="px-6 py-3">City</th>
                                    <th class="px-6 py-3">Branch Count</th>
                                    <th class="px-6 py-3">Last Support Access</th>
                                    <th class="px-6 py-3 text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="bg-white border-b hover:bg-gray-50">
                                    <th class="px-6 py-4 font-medium text-gray-900">
                                        {{ $restaurantDetails->name }}
                                        <div class="text-xs text-gray-400 font-normal">ID: {{ $restaurantDetails->id }}</div>
                                    </th>
                                    <td class="px-6 py-4">
                                        {{ $restaurantDetails->city ?? 'N/A' }} 
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                                            {{ $restaurantDetails->branches_count ?? 0 }} Branches
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-gray-600">
                                        <i class="fa fa-clock-o mr-1"></i> {{ $lastAccessTime }}
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <button wire:click="openLoginModal" 
                                            class="text-white bg-indigo-600 hover:bg-indigo-700 font-medium rounded-lg text-sm px-4 py-2">
                                            Login
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <x-dialog-modal wire:model.live="showLoginModal">
        <x-slot name="title">
            <div class="border-b pb-2">
                Support Login Verification
            </div>
        </x-slot>

        <x-slot name="content">
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-4 bg-gray-50 p-4 rounded-lg">
                    <div>
                        <span class="block text-xs text-gray-500 uppercase">Customer ID</span>
                        <span class="font-bold text-gray-800">{{ $searchID }}</span>
                    </div>
                    <div>
                        <span class="block text-xs text-gray-500 uppercase">Restaurant Name</span>
                        <span class="font-bold text-gray-800">{{ $restaurantDetails->name ?? '' }}</span>
                    </div>
                </div>

                <div>
                    <x-label for="supportPin" value="Enter Support PIN" />
                    <x-input id="supportPin" type="password" class="block mt-1 w-full text-center tracking-widest text-lg" 
                             wire:model="supportPin" placeholder="****" />
                    <x-input-error for="supportPin" class="mt-2" />
                </div>

                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-yellow-800">Privacy Note</h3>
                            <div class="mt-2 text-sm text-yellow-700 space-y-1">
                                <p>● Restaurant owner will be notified when support access is granted.</p>
                                <p>● This access is time-limited and read-only.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showLoginModal', false)" wire:loading.attr="disabled">
                Cancel
            </x-secondary-button>

            <x-button class="ml-3 bg-red-600 hover:bg-red-700 focus:bg-red-700 active:bg-red-900" 
                      wire:click="verifyAndLogin" 
                      wire:loading.attr="disabled">
                Verify & Login
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>