@php use Illuminate\Support\Str; @endphp
<x-filament-panels::page>
    <style>
        /* Full-width layout - Override Filament container constraints */
        body .fi-main,
        body .fi-main-content,
        body .fi-main-ctn,
        body .filament-main-content,
        body .filament-page {
            max-width: 100% !important;
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        
        /* Override common Filament max-width constraints */
        .max-w-7xl,
        .max-w-6xl,
        .max-w-5xl,
        .max-w-4xl {
            max-width: 100% !important;
        }
        
        /* Override Filament page wrapper */
        x-filament-panels::page,
        [x-filament-panels-page],
        .fi-page-content {
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important;
        }

        .third-party-container {
            padding: 0;
            width: 100%;
            margin: 0;
        }

        .third-party-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
        }

        .header-left {
            flex: 1;
        }

        .page-subtitle {
            font-size: 1rem;
            color: #6b7280;
            margin: 0;
            margin-top: 0.5rem;
        }

        .create-client-btn {
            background-color: #2563eb !important;
            color: rgb(255, 255, 255) !important;
            transition: background-color 0.2s ease-in-out;
        }
        .create-client-btn:hover:not(:disabled) {
            background-color: #6366f1 !important;
        }
        .create-client-btn:focus {
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5) !important;
        }

        .validation-error {
            color: #dc2626 !important;
            font-weight: 500;
        }

        [x-cloak] {
            display: none !important;
        }

        /* Image Modal Styles */
        .image-modal-backdrop {
            backdrop-filter: blur(4px);
        }

        .image-modal-content {
            animation: fadeIn 0.2s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
    </style>

    <div class="third-party-container">
        <!-- Page Header -->
        <div class="third-party-header">
            <div class="header-left">
                <x-breadcrumbs :breadcrumbs="$breadcrumbs ?? null" />
                <p class="page-subtitle">Manage payment gateway integrations</p>
            </div>
        </div>

        <div class="space-y-6" style="padding: 0 1.5rem;">
        <div class="client-table-shell bg-white border-0 rounded-none shadow-sm p-4 md:p-6 space-y-4" style="margin: 0; width: 100%; max-width: 100%;">
            <div class="flex flex-col md:flex-row md:items-center gap-4 justify-between">
                <div class="flex flex-col md:flex-row md:items-center gap-3 flex-1">
                    <div class="relative w-full md:w-64">
                        <svg class="w-5 h-5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                        <input
                            type="search"
                            placeholder="Search name, description..."
                            class="w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                            style="padding-left: 2.75rem;"
                            wire:model.live.debounce.400ms="search"
                        />
                    </div>

                    <div class="flex items-center gap-2 text-sm text-slate-600">
                        <span>Status</span>
                        <select
                            class="border border-slate-200 rounded-lg py-2 pl-3 pr-8 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                            style="padding-right: 2rem;"
                            wire:model.live="statusFilter"
                        >
                            <option value="all">All</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>

                    <div class="flex items-center gap-2 text-sm text-slate-600">
                        <select
                            class="border border-slate-200 rounded-lg py-2 pl-3 pr-8 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
                            style="padding-right: 2rem;"
                            wire:model.live="perPage"
                        >
                            @foreach ($perPageOptions as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex justify-start md:justify-end">
                    <button
                        type="button"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2 text-white text-sm font-semibold rounded-lg focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed create-client-btn"
                        wire:click="openCreateDrawer"
                        wire:loading.attr="disabled"
                        wire:target="openCreateDrawer"
                    >
                        <svg wire:loading.remove wire:target="openCreateDrawer" class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 5v14m-7-7h14" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <svg wire:loading wire:target="openCreateDrawer" class="animate-spin w-4 h-4 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span wire:loading.remove wire:target="openCreateDrawer">Add New</span>
                        <span wire:loading wire:target="openCreateDrawer">Loading...</span>
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto" style="width: 100%;">
                <table class="w-full text-sm text-slate-700" style="width: 100%; table-layout: auto;">
                    <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                        <tr>
                            <th class="text-left font-semibold px-4 py-3">
                                <button type="button" wire:click="sortBy('name')" class="flex items-center gap-1 hover:text-slate-700">
                                    <span>Name</span>
                                    @if($sortColumn === 'name')
                                        @if($sortDirection === 'asc')
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                            </svg>
                                        @else
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                            </svg>
                                        @endif
                                    @else
                                        <svg class="w-4 h-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                                        </svg>
                                    @endif
                                </button>
                            </th>
                            <th class="text-left font-semibold px-4 py-3">
                                <button type="button" wire:click="sortBy('description')" class="flex items-center gap-1 hover:text-slate-700">
                                    <span>Description</span>
                                    @if($sortColumn === 'description')
                                        @if($sortDirection === 'asc')
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                            </svg>
                                        @else
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                            </svg>
                                        @endif
                                    @else
                                        <svg class="w-4 h-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                                        </svg>
                                    @endif
                                </button>
                            </th>
                            <th class="text-left font-semibold px-4 py-3">Logo</th>
                            <th class="text-left font-semibold px-4 py-3">
                                <button type="button" wire:click="sortBy('status')" class="flex items-center gap-1 hover:text-slate-700">
                                    <span>Status</span>
                                    @if($sortColumn === 'status')
                                        @if($sortDirection === 'asc')
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                            </svg>
                                        @else
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                            </svg>
                                        @endif
                                    @else
                                        <svg class="w-4 h-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                                        </svg>
                                    @endif
                                </button>
                            </th>
                            <th class="text-left font-semibold px-4 py-3">
                                <button type="button" wire:click="sortBy('created_at')" class="flex items-center gap-1 hover:text-slate-700">
                                    <span>Created At</span>
                                    @if($sortColumn === 'created_at')
                                        @if($sortDirection === 'asc')
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                            </svg>
                                        @else
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                            </svg>
                                        @endif
                                    @else
                                        <svg class="w-4 h-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                                        </svg>
                                    @endif
                                </button>
                            </th>
                            <th class="text-right font-semibold px-4 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($this->paymentGateways as $gateway)
                            <tr class="hover:bg-slate-50/60">
                                <td class="px-4 py-3">
                                    <p class="font-semibold text-slate-900">{{ $gateway->name }}</p>
                                </td>
                                <td class="px-4 py-3">
                                    <p class="text-sm text-slate-600">{{ Str::limit($gateway->description, 50) }}</p>
                                </td>
                                <td class="px-4 py-3">
                                    @if($gateway->logo)
                                        <img src="{{ $gateway->logo }}" alt="{{ $gateway->name }}" class="h-8 w-auto object-contain" onerror="this.style.display='none'">
                                    @else
                                        <span class="text-xs text-slate-400">No logo</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $gateway->status ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                                        <span class="w-1.5 h-1.5 rounded-full {{ $gateway->status ? 'bg-emerald-500' : 'bg-rose-500' }}"></span>
                                        {{ $gateway->status ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-sm text-slate-500">
                                    {{ $gateway->created_at ? $gateway->created_at->format('M d, Y') : 'N/A' }}
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <button
                                            type="button"
                                            class="inline-flex items-center justify-center gap-1 px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
                                            wire:click="editGateway({{ $gateway->id }})"
                                            wire:loading.attr="disabled"
                                            wire:target="editGateway({{ $gateway->id }})"
                                        >
                                            <svg wire:loading.remove wire:target="editGateway({{ $gateway->id }})" class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
                                                <path d="M5 21h14M12 4l8 8-8 8-8-8 8-8Z" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                            <svg wire:loading wire:target="editGateway({{ $gateway->id }})" class="animate-spin w-4 h-4 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            <span wire:loading.remove wire:target="editGateway({{ $gateway->id }})">Edit</span>
                                            <span wire:loading wire:target="editGateway({{ $gateway->id }})">Loading...</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-6 text-center text-sm text-slate-500">
                                    No payment gateways found. Try updating the search criteria.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
                <p class="text-xs text-slate-500">
                    Showing
                    <span class="font-semibold">{{ $this->paymentGateways->firstItem() ?? 0 }}</span>
                    to
                    <span class="font-semibold">{{ $this->paymentGateways->lastItem() ?? 0 }}</span>
                    of
                    <span class="font-semibold">{{ $this->paymentGateways->total() }}</span>
                    results
                </p>
                <div>
                    {{ $this->paymentGateways->links() }}
                </div>
            </div>
        </div>
        </div>

        <!-- Drawer Modal -->
        <div
            x-data="{ drawerOpen: @entangle('drawerOpen').live }"
            x-show="drawerOpen"
            x-cloak
            class="fixed inset-0 z-40 flex items-stretch"
        >
            <div
                class="fixed inset-0 bg-black/50 backdrop-blur-sm"
                @click="drawerOpen = false"
                wire:click="closeDrawer"
            ></div>

            <div class="relative z-10 ml-auto w-full max-w-xl bg-white shadow-2xl" style="height: 100vh; display: flex; flex-direction: column;">
                <!-- Fixed Header -->
                <div style="flex-shrink: 0; padding: 16px 24px; border-bottom: 1px solid #e2e8f0;">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div>
                            <p style="font-size: 18px; font-weight: 600; color: #0f172a; margin: 0;">
                                {{ $editingId ? 'Edit payment gateway' : 'Create payment gateway' }}
                            </p>
                            <p style="font-size: 14px; color: #64748b; margin: 4px 0 0 0;">
                                {{ $editingId ? 'Update payment gateway details.' : 'Add a new payment gateway integration.' }}
                            </p>
                        </div>
                        <button
                            type="button"
                            style="color: #94a3b8; font-size: 24px; background: none; border: none; cursor: pointer; padding: 4px;"
                            @click="drawerOpen = false"
                            wire:click="closeDrawer"
                        >
                            &times;
                        </button>
                    </div>
                </div>

                <form wire:submit.prevent="save" style="flex: 1; display: flex; flex-direction: column; min-height: 0;" wire:ignore.self>
                    <!-- Scrollable Content -->
                    <div style="flex: 1; overflow-y: auto; padding: 24px;" class="space-y-5">
                        <div class="space-y-1">
                            <label class="text-sm font-semibold text-slate-700">Name <span class="text-red-500">*</span></label>
                            <input
                                type="text"
                                placeholder="Payment gateway name"
                                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('form.name') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                wire:model.defer="form.name"
                            />
                            @error('form.name')
                                <p class="text-xs validation-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-1">
                            <label class="text-sm font-semibold text-slate-700">Description <span class="text-red-500">*</span></label>
                            <textarea
                                placeholder="Payment gateway description"
                                rows="4"
                                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('form.description') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                wire:model.defer="form.description"
                            ></textarea>
                            @error('form.description')
                                <p class="text-xs validation-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="space-y-3">
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-slate-700">Logo</label>
                                <label class="block">
                                    <input
                                        type="file"
                                        accept="image/*,.svg"
                                        class="hidden"
                                        wire:model="logoFile"
                                    />
                                    <div class="flex items-center gap-3 p-3 border border-slate-200 rounded-lg cursor-pointer hover:border-indigo-300 hover:bg-indigo-50/50 transition-colors">
                                        <svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                        </svg>
                                        <div class="flex-1">
                                            <p class="text-sm font-medium text-slate-700">
                                                <span wire:loading.remove wire:target="logoFile">
                                                    {{ $logoFile ? $logoFile->getClientOriginalName() : 'Choose file to upload' }}
                                                </span>
                                                <span wire:loading wire:target="logoFile" class="text-slate-500">Uploading...</span>
                                            </p>
                                            <p class="text-xs text-slate-500">PNG, JPG, GIF, SVG, WEBP up to 2MB</p>
                                        </div>
                                    </div>
                                </label>
                                @error('logoFile')
                                    <p class="text-xs validation-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Logo Preview -->
                            @if($this->logoPreview)
                                <div class="space-y-1">
                                    <p class="text-xs font-medium text-slate-700">Preview:</p>
                                    <div class="border border-slate-200 rounded-lg p-3 bg-slate-50 flex items-center justify-center cursor-pointer hover:border-indigo-300 transition-colors" style="min-height: 100px;" wire:click="openImageModal">
                                        <img 
                                            src="{{ $this->logoPreview }}" 
                                            alt="Logo preview" 
                                            class="max-h-20 max-w-full object-contain"
                                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                                        >
                                        <p class="text-xs text-slate-400" style="display: none;">Failed to load image</p>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="space-y-1">
                            <label class="text-sm font-semibold text-slate-700">Status <span class="text-red-500">*</span></label>
                            <select
                                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('form.status') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                wire:model.defer="form.status"
                            >
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                            <p class="text-xs text-slate-500 mt-1">Inactive payment gateways will not be available for use.</p>
                            @error('form.status')
                                <p class="text-xs validation-error">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Fixed Footer - Always visible at bottom -->
                    <div style="flex-shrink: 0; padding: 16px 24px; margin-bottom: 20px; border-top: 1px solid #e2e8f0; background: white; display: flex; align-items: center; justify-content: center; gap: 12px;">
                        <button
                            type="button"
                            style="padding: 10px 20px; font-size: 14px; font-weight: 600; color: #475569; background: white; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer;"
                            @click="drawerOpen = false"
                            wire:click="closeDrawer"
                            wire:loading.attr="disabled"
                            wire:target="save"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: white; background: #2563eb; border: none; border-radius: 8px; cursor: pointer;"
                            wire:loading.attr="disabled"
                            wire:target="save"
                        >
                            <svg wire:loading.remove wire:target="save" style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <svg wire:loading wire:target="save" class="animate-spin" style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <span wire:loading.remove wire:target="save">{{ $editingId ? 'Update' : 'Create' }}</span>
                            <span wire:loading wire:target="save">Saving...</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Image Modal -->
        @if($showImageModal && $this->logoPreview)
            <div 
                x-data="{ show: @entangle('showImageModal').live }"
                x-show="show"
                x-cloak
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 z-50 flex items-center justify-center image-modal-backdrop"
                style="background-color: rgba(0, 0, 0, 0.75);"
                @click.self="show = false; $wire.closeImageModal()"
                @keydown.escape.window="show = false; $wire.closeImageModal()"
            >
                <div class="relative max-w-4xl max-h-[90vh] mx-4 image-modal-content">
                    <!-- Close Button (Top Right) -->
                    <button
                        type="button"
                        class="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors z-10"
                        wire:click="closeImageModal"
                        style="font-size: 36px; line-height: 1; padding: 4px 12px; font-weight: 300;"
                        title="Close (ESC)"
                    >
                        &times;
                    </button>
                    
                    <!-- Image Container -->
                    <div class="bg-white rounded-lg p-6 shadow-2xl overflow-auto max-h-[85vh]">
                        <img 
                            src="{{ $this->logoPreview }}" 
                            alt="Logo preview" 
                            class="max-w-full max-h-[80vh] object-contain mx-auto block"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                        >
                        <p class="text-center text-slate-400 text-sm mt-4" style="display: none;">Failed to load image</p>
                    </div>
                    
                    <!-- Close Button at Bottom -->
                    <div class="mt-4 text-center">
                        <button
                            type="button"
                            class="px-6 py-2.5 bg-white text-slate-700 rounded-lg font-medium hover:bg-gray-100 transition-colors shadow-lg"
                            wire:click="closeImageModal"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>
</x-filament-panels::page>