@php use Illuminate\Support\Str; @endphp
<x-filament-panels::page>
    <style>
        /* Full-width layout */
        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;
        }
        
        .max-w-7xl,
        .max-w-6xl,
        .max-w-5xl,
        .max-w-4xl {
            max-width: 100% !important;
        }
        
        x-filament-panels::page,
        [x-filament-panels-page],
        .fi-page-content {
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important;
        }

        .api-developer-container {
            padding: 0;
            width: 100%;
            margin: 0;
        }

        .api-developer-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;
        }

        .method-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .method-get { background-color: #dbeafe; color: #1e40af; }
        .method-post { background-color: #dcfce7; color: #166534; }
        .method-put { background-color: #fef3c7; color: #92400e; }
        .method-patch { background-color: #f3e8ff; color: #6b21a8; }
        .method-delete { background-color: #fee2e2; color: #991b1b; }
        .method-options { background-color: #e0e7ff; color: #3730a3; }

        .param-card {
            background: linear-gradient(to bottom, #ffffff, #f8fafc);
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            padding: 1.25rem;
            margin-bottom: 1rem;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
        }

        .param-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: #cbd5e1;
        }

        .param-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #e2e8f0;
        }

        .param-card-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.75rem;
        }

        .add-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
        }

        .add-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
        }

        .add-btn:active {
            transform: translateY(0);
        }

        .remove-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 0.5rem;
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fecaca;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .remove-btn:hover {
            background: #fecaca;
            border-color: #f87171;
            transform: scale(1.05);
        }

        .empty-state {
            text-align: center;
            padding: 2.5rem 1.5rem;
            background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
            border: 2px dashed #cbd5e1;
            border-radius: 0.75rem;
            color: #64748b;
        }

        .empty-state-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 1rem;
            opacity: 0.5;
        }

        .form-field-enhanced {
            border: 1.5px solid #e2e8f0;
            border-radius: 0.5rem;
            padding: 0.625rem 0.875rem;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            background: white;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1rem;
            padding-right: 2.5rem;
        }

        .form-field-enhanced:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23667eea'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        }

        /* Hide default select arrows for all browsers */
        .form-field-enhanced::-ms-expand {
            display: none;
        }

        select.form-field-enhanced {
            cursor: pointer;
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.9375rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 1rem;
        }

        .section-icon {
            width: 20px;
            height: 20px;
            color: #667eea;
        }
    </style>

    <div class="api-developer-container">
        <!-- Page Header -->
        <div class="api-developer-header">
            <div class="header-left">
                <x-breadcrumbs :breadcrumbs="$breadcrumbs ?? null" />
                <p class="page-subtitle">Create and manage API definitions with inputs, outputs, and headers</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, endpoint, 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">
                            <span>Method</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="methodFilter"
                            >
                                <option value="all">All</option>
                                <option value="GET">GET</option>
                                <option value="POST">POST</option>
                                <option value="PUT">PUT</option>
                                <option value="PATCH">PATCH</option>
                                <option value="DELETE">DELETE</option>
                                <option value="OPTIONS">OPTIONS</option>
                            </select>
                        </div>

                        @if(count($this->categories) > 0)
                            <div class="flex items-center gap-2 text-sm text-slate-600">
                                <span>Category</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="categoryFilter"
                                >
                                    <option value="all">All</option>
                                    @foreach($this->categories as $category)
                                        <option value="{{ $category }}">{{ $category }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        <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 API</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('endpoint')" class="flex items-center gap-1 hover:text-slate-700">
                                        <span>Endpoint</span>
                                        @if($sortColumn === 'endpoint')
                                            @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('method')" class="flex items-center gap-1 hover:text-slate-700">
                                        <span>Method</span>
                                        @if($sortColumn === 'method')
                                            @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">Category</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->apiDefinitions as $api)
                                <tr class="hover:bg-slate-50/60">
                                    <td class="px-4 py-3">
                                        <p class="font-semibold text-slate-900">{{ $api->name }}</p>
                                        @if($api->description)
                                            <p class="text-xs text-slate-500 mt-1">{{ Str::limit($api->description, 60) }}</p>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        <code class="text-xs bg-slate-100 px-2 py-1 rounded text-slate-700">{{ Str::limit($api->endpoint, 40) }}</code>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="method-badge method-{{ strtolower($api->method) }}">{{ $api->method }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-sm text-slate-600">{{ $api->category ?? '—' }}</span>
                                    </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 {{ $api->status ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                                            <span class="w-1.5 h-1.5 rounded-full {{ $api->status ? 'bg-emerald-500' : 'bg-rose-500' }}"></span>
                                            {{ $api->status ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-slate-500">
                                        {{ $api->created_at ? $api->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="editApi({{ $api->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="editApi({{ $api->id }})"
                                            >
                                                <svg wire:loading.remove wire:target="editApi({{ $api->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="editApi({{ $api->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="editApi({{ $api->id }})">Edit</span>
                                                <span wire:loading wire:target="editApi({{ $api->id }})">Loading...</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-4 py-6 text-center text-sm text-slate-500">
                                        No API definitions found. Create your first API definition above.
                                    </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->apiDefinitions->firstItem() ?? 0 }}</span>
                        to
                        <span class="font-semibold">{{ $this->apiDefinitions->lastItem() ?? 0 }}</span>
                        of
                        <span class="font-semibold">{{ $this->apiDefinitions->total() }}</span>
                        results
                    </p>
                    <div>
                        {{ $this->apiDefinitions->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-4xl 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 API Definition' : 'Create API Definition' }}
                            </p>
                            <p style="font-size: 14px; color: #64748b; margin: 4px 0 0 0;">
                                {{ $editingId ? 'Update API details, inputs, outputs, and headers.' : 'Define a new API with request/response structure.' }}
                            </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">
                        <!-- Basic Information -->
                        <div class="space-y-4 border-b border-slate-200 pb-4">
                            <h3 class="text-sm font-semibold text-slate-900">Basic Information</h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-slate-700">API Name <span class="text-red-500">*</span></label>
                                    <input
                                        type="text"
                                        placeholder="e.g., Get User Profile"
                                        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"
                                        data-clear-error
                                        oninput="clearFieldError(this)"
                                    />
                                    @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">HTTP Method <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.method') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                        wire:model.defer="form.method"
                                        data-clear-error
                                        onchange="clearFieldError(this)"
                                    >
                                        <option value="GET">GET</option>
                                        <option value="POST">POST</option>
                                        <option value="PUT">PUT</option>
                                        <option value="PATCH">PATCH</option>
                                        <option value="DELETE">DELETE</option>
                                        <option value="OPTIONS">OPTIONS</option>
                                    </select>
                                    @error('form.method')
                                        <p class="text-xs validation-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-slate-700">Endpoint URL <span class="text-red-500">*</span></label>
                                <input
                                    type="text"
                                    placeholder="e.g., /api/v1/users/{id}"
                                    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.endpoint') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                    wire:model.defer="form.endpoint"
                                    data-clear-error
                                    oninput="clearFieldError(this)"
                                />
                                @error('form.endpoint')
                                    <p class="text-xs validation-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-slate-700">Base URL <span class="text-red-500">*</span></label>
                                    <input
                                        type="text"
                                        placeholder="e.g., https://api.example.com"
                                        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.base_url') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                        wire:model.defer="form.base_url"
                                        data-clear-error
                                        oninput="clearFieldError(this)"
                                    />
                                    @error('form.base_url')
                                        <p class="text-xs validation-error">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-slate-700">Path</label>
                                    <input
                                        type="text"
                                        placeholder="e.g., /v1/users"
                                        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.path') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                        wire:model.defer="form.path"
                                        data-clear-error
                                        oninput="clearFieldError(this)"
                                    />
                                    @error('form.path')
                                        <p class="text-xs validation-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-slate-700">Description</label>
                                <textarea
                                    placeholder="Describe what this API does..."
                                    rows="3"
                                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 border-slate-200"
                                    wire:model.defer="form.description"
                                ></textarea>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-slate-700">Version</label>
                                    <input
                                        type="text"
                                        placeholder="1.0.0"
                                        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.version') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                        wire:model.defer="form.version"
                                        data-clear-error
                                        oninput="clearFieldError(this)"
                                    />
                                    @error('form.version')
                                        <p class="text-xs validation-error">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-slate-700">Category</label>
                                    <input
                                        type="text"
                                        placeholder="e.g., User Management"
                                        class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 border-slate-200"
                                        wire:model.defer="form.category"
                                    />
                                </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"
                                        data-clear-error
                                        onchange="clearFieldError(this)"
                                    >
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                    @error('form.status')
                                        <p class="text-xs validation-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Authentication -->
                        <div class="space-y-4 border-b border-slate-200 pb-4">
                            <h3 class="text-sm font-semibold text-slate-900">Authentication</h3>
                            
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-slate-700">Auth Type <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.auth_type') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                    wire:model.defer="form.auth_type"
                                    data-clear-error
                                    onchange="clearFieldError(this)"
                                >
                                    <option value="none">None</option>
                                    <option value="api_key">API Key</option>
                                    <option value="bearer">Bearer Token</option>
                                    <option value="basic">Basic Auth</option>
                                    <option value="oauth2">OAuth 2.0</option>
                                    <option value="custom">Custom</option>
                                </select>
                                @error('form.auth_type')
                                    <p class="text-xs validation-error">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Request Headers -->
                        <div class="space-y-4 border-b border-slate-200 pb-6">
                            <div class="flex items-center justify-between">
                                <div class="section-title">
                                    <svg class="section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                    </svg>
                                    <span>Request Headers</span>
                                </div>
                                <button
                                    type="button"
                                    class="add-btn"
                                    wire:click="addRequestHeader"
                                    wire:loading.attr="disabled"
                                    wire:target="addRequestHeader"
                                >
                                    <svg wire:loading.remove wire:target="addRequestHeader" 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="M12 4v16m8-8H4" />
                                    </svg>
                                    <svg wire:loading wire:target="addRequestHeader" class="animate-spin w-4 h-4" 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="addRequestHeader">Add Header</span>
                                    <span wire:loading wire:target="addRequestHeader">Adding...</span>
                                </button>
                            </div>
                            
                            @forelse($requestHeaders as $index => $header)
                                <div class="param-card @error('requestHeaders.' . $index . '.key') !border-2 !border-red-500 @enderror @error('requestHeaders.' . $index . '.value') !border-2 !border-red-500 @enderror" wire:key="header-{{ $index }}">
                                    <div class="param-card-header">
                                        <div class="flex items-center">
                                            <span class="param-card-number">{{ $index + 1 }}</span>
                                            <span class="text-sm font-semibold text-slate-700">Header #{{ $index + 1 }}</span>
                                        </div>
                                        <button
                                            type="button"
                                            class="remove-btn"
                                            wire:click="removeRequestHeader({{ $index }})"
                                            wire:loading.attr="disabled"
                                            wire:target="removeRequestHeader({{ $index }})"
                                            title="Remove header"
                                        >
                                            <svg wire:loading.remove wire:target="removeRequestHeader({{ $index }})" 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="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                            <svg wire:loading wire:target="removeRequestHeader({{ $index }})" class="animate-spin w-4 h-4" 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>
                                        </button>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Header Key <span class="text-red-500">*</span></label>
                                            <input
                                                type="text"
                                                placeholder="e.g., Content-Type, Authorization"
                                                class="w-full form-field-enhanced @error('requestHeaders.' . $index . '.key') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="requestHeaders.{{ $index }}.key"
                                                data-clear-error
                                                oninput="clearFieldError(this)"
                                            />
                                            @error('requestHeaders.' . $index . '.key')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Header Value <span class="text-red-500">*</span></label>
                                            <input
                                                type="text"
                                                placeholder="e.g., application/json, Bearer token"
                                                class="w-full form-field-enhanced @error('requestHeaders.' . $index . '.value') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="requestHeaders.{{ $index }}.value"
                                                data-clear-error
                                                oninput="clearFieldError(this)"
                                            />
                                            @error('requestHeaders.' . $index . '.value')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center gap-4 mb-3">
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input
                                                type="checkbox"
                                                class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                                                wire:model="requestHeaders.{{ $index }}.required"
                                            />
                                            <span class="text-sm font-medium text-slate-700">Required</span>
                                        </label>
                                    </div>
                                    
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Description</label>
                                        <input
                                            type="text"
                                            placeholder="Optional description for this header"
                                            class="w-full form-field-enhanced"
                                            wire:model="requestHeaders.{{ $index }}.description"
                                        />
                                    </div>
                                </div>
                            @empty
                                <div class="empty-state">
                                    <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                    </svg>
                                    <p class="text-sm font-medium mb-1">No headers added yet</p>
                                    <p class="text-xs">Click "Add Header" to define request headers for this API</p>
                                </div>
                            @endforelse
                        </div>

                        <!-- Request Parameters -->
                        <div class="space-y-4 border-b border-slate-200 pb-6">
                            <div class="flex items-center justify-between">
                                <div class="section-title">
                                    <svg class="section-icon" 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" />
                                    </svg>
                                    <span>Request Parameters</span>
                                </div>
                                <button
                                    type="button"
                                    class="add-btn"
                                    wire:click="addRequestParam"
                                    wire:loading.attr="disabled"
                                    wire:target="addRequestParam"
                                >
                                    <svg wire:loading.remove wire:target="addRequestParam" 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="M12 4v16m8-8H4" />
                                    </svg>
                                    <svg wire:loading wire:target="addRequestParam" class="animate-spin w-4 h-4" 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="addRequestParam">Add Parameter</span>
                                    <span wire:loading wire:target="addRequestParam">Adding...</span>
                                </button>
                            </div>
                            
                            @forelse($requestParams as $index => $param)
                                <div class="param-card @error('requestParams.' . $index . '.name') !border-2 !border-red-500 @enderror @error('requestParams.' . $index . '.type') !border-2 !border-red-500 @enderror" wire:key="param-{{ $index }}">
                                    <div class="param-card-header">
                                        <div class="flex items-center">
                                            <span class="param-card-number">{{ $index + 1 }}</span>
                                            <span class="text-sm font-semibold text-slate-700">Parameter #{{ $index + 1 }}</span>
                                        </div>
                                        <button
                                            type="button"
                                            class="remove-btn"
                                            wire:click="removeRequestParam({{ $index }})"
                                            wire:loading.attr="disabled"
                                            wire:target="removeRequestParam({{ $index }})"
                                            title="Remove parameter"
                                        >
                                            <svg wire:loading.remove wire:target="removeRequestParam({{ $index }})" 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="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                            <svg wire:loading wire:target="removeRequestParam({{ $index }})" class="animate-spin w-4 h-4" 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>
                                        </button>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Parameter Name <span class="text-red-500">*</span></label>
                                            <input
                                                type="text"
                                                placeholder="e.g., user_id, email, name"
                                                class="w-full form-field-enhanced @error('requestParams.' . $index . '.name') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="requestParams.{{ $index }}.name"
                                                data-clear-error
                                                oninput="clearFieldError(this)"
                                            />
                                            @error('requestParams.' . $index . '.name')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Data Type <span class="text-red-500">*</span></label>
                                            <select
                                                class="w-full form-field-enhanced @error('requestParams.' . $index . '.type') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="requestParams.{{ $index }}.type"
                                                data-clear-error
                                                onchange="clearFieldError(this)"
                                            >
                                                <option value="">Select Type</option>
                                                <option value="string">String</option>
                                                <option value="integer">Integer</option>
                                                <option value="float">Float</option>
                                                <option value="boolean">Boolean</option>
                                                <option value="array">Array</option>
                                                <option value="object">Object</option>
                                            </select>
                                            @error('requestParams.' . $index . '.type')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Default Value</label>
                                            <input
                                                type="text"
                                                placeholder="Optional default value"
                                                class="w-full form-field-enhanced"
                                                wire:model="requestParams.{{ $index }}.default"
                                            />
                                        </div>
                                        <div class="space-y-1 flex items-end">
                                            <label class="flex items-center gap-2 cursor-pointer w-full">
                                                <input
                                                    type="checkbox"
                                                    class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                                                    wire:model="requestParams.{{ $index }}.required"
                                                />
                                                <span class="text-sm font-medium text-slate-700">Required Parameter</span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Description</label>
                                        <input
                                            type="text"
                                            placeholder="Describe what this parameter is used for"
                                            class="w-full form-field-enhanced"
                                            wire:model="requestParams.{{ $index }}.description"
                                        />
                                    </div>
                                </div>
                            @empty
                                <div class="empty-state">
                                    <svg class="empty-state-icon" 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" />
                                    </svg>
                                    <p class="text-sm font-medium mb-1">No parameters added yet</p>
                                    <p class="text-xs">Click "Add Parameter" to define request parameters for this API</p>
                                </div>
                            @endforelse
                        </div>

                        <!-- Query Parameters -->
                        <div class="space-y-4 border-b border-slate-200 pb-6">
                            <div class="flex items-center justify-between">
                                <div class="section-title">
                                    <svg class="section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                    <span>Query Parameters</span>
                                </div>
                                <button
                                    type="button"
                                    class="add-btn"
                                    wire:click="addQueryParam"
                                    wire:loading.attr="disabled"
                                    wire:target="addQueryParam"
                                >
                                    <svg wire:loading.remove wire:target="addQueryParam" 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="M12 4v16m8-8H4" />
                                    </svg>
                                    <svg wire:loading wire:target="addQueryParam" class="animate-spin w-4 h-4" 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="addQueryParam">Add Query Param</span>
                                    <span wire:loading wire:target="addQueryParam">Adding...</span>
                                </button>
                            </div>
                            
                            @forelse($queryParams as $index => $param)
                                <div class="param-card @error('queryParams.' . $index . '.name') !border-2 !border-red-500 @enderror @error('queryParams.' . $index . '.type') !border-2 !border-red-500 @enderror" wire:key="query-{{ $index }}">
                                    <div class="param-card-header">
                                        <div class="flex items-center">
                                            <span class="param-card-number">{{ $index + 1 }}</span>
                                            <span class="text-sm font-semibold text-slate-700">Query Param #{{ $index + 1 }}</span>
                                        </div>
                                        <button
                                            type="button"
                                            class="remove-btn"
                                            wire:click="removeQueryParam({{ $index }})"
                                            wire:loading.attr="disabled"
                                            wire:target="removeQueryParam({{ $index }})"
                                            title="Remove query parameter"
                                        >
                                            <svg wire:loading.remove wire:target="removeQueryParam({{ $index }})" 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="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                            <svg wire:loading wire:target="removeQueryParam({{ $index }})" class="animate-spin w-4 h-4" 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>
                                        </button>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Parameter Name <span class="text-red-500">*</span></label>
                                            <input
                                                type="text"
                                                placeholder="e.g., page, limit, sort"
                                                class="w-full form-field-enhanced @error('queryParams.' . $index . '.name') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="queryParams.{{ $index }}.name"
                                                data-clear-error
                                                oninput="clearFieldError(this)"
                                            />
                                            @error('queryParams.' . $index . '.name')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Data Type <span class="text-red-500">*</span></label>
                                            <select
                                                class="w-full form-field-enhanced @error('queryParams.' . $index . '.type') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="queryParams.{{ $index }}.type"
                                                data-clear-error
                                                onchange="clearFieldError(this)"
                                            >
                                                <option value="">Select Type</option>
                                                <option value="string">String</option>
                                                <option value="integer">Integer</option>
                                                <option value="float">Float</option>
                                                <option value="boolean">Boolean</option>
                                                <option value="array">Array</option>
                                            </select>
                                            @error('queryParams.' . $index . '.type')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Default Value</label>
                                            <input
                                                type="text"
                                                placeholder="Optional default value"
                                                class="w-full form-field-enhanced"
                                                wire:model="queryParams.{{ $index }}.default"
                                            />
                                        </div>
                                        <div class="space-y-1 flex items-end">
                                            <label class="flex items-center gap-2 cursor-pointer w-full">
                                                <input
                                                    type="checkbox"
                                                    class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                                                    wire:model="queryParams.{{ $index }}.required"
                                                />
                                                <span class="text-sm font-medium text-slate-700">Required Parameter</span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Description</label>
                                        <input
                                            type="text"
                                            placeholder="Describe what this query parameter is used for"
                                            class="w-full form-field-enhanced"
                                            wire:model="queryParams.{{ $index }}.description"
                                        />
                                    </div>
                                </div>
                            @empty
                                <div class="empty-state">
                                    <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                    <p class="text-sm font-medium mb-1">No query parameters added yet</p>
                                    <p class="text-xs">Click "Add Query Param" to define URL query parameters for this API</p>
                                </div>
                            @endforelse
                        </div>

                        <!-- Request Body (JSON Editor) -->
                        <div class="space-y-4 border-b border-slate-200 pb-4">
                            <h3 class="text-sm font-semibold text-slate-900">Request Body (JSON)</h3>
                            <textarea
                                placeholder='{"key": "value"}'
                                rows="6"
                                class="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('form.request_body') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                wire:model.defer="form.request_body"
                                data-clear-error
                                oninput="clearFieldError(this)"
                            >{{ $form['request_body'] ?? '' }}</textarea>
                            <p class="text-xs text-slate-500">Enter JSON structure for request body (optional)</p>
                            @error('form.request_body')
                                <p class="text-xs validation-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Response Schema (JSON Editor) -->
                        <div class="space-y-4 border-b border-slate-200 pb-4">
                            <h3 class="text-sm font-semibold text-slate-900">Response Schema (JSON)</h3>
                            <textarea
                                placeholder='{"status": "success", "data": {}}'
                                rows="6"
                                class="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('form.response_schema') border-red-500 focus:border-red-500 focus:ring-red-500 @else border-slate-200 @enderror"
                                wire:model.defer="form.response_schema"
                                data-clear-error
                                oninput="clearFieldError(this)"
                            >{{ $form['response_schema'] ?? '' }}</textarea>
                            <p class="text-xs text-slate-500">Enter JSON schema for response structure (optional)</p>
                            @error('form.response_schema')
                                <p class="text-xs validation-error">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Response Examples -->
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <div class="section-title">
                                    <svg class="section-icon" 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" />
                                    </svg>
                                    <span>Response Examples</span>
                                </div>
                                <button
                                    type="button"
                                    class="add-btn"
                                    wire:click="addResponseExample"
                                    wire:loading.attr="disabled"
                                    wire:target="addResponseExample"
                                >
                                    <svg wire:loading.remove wire:target="addResponseExample" 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="M12 4v16m8-8H4" />
                                    </svg>
                                    <svg wire:loading wire:target="addResponseExample" class="animate-spin w-4 h-4" 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="addResponseExample">Add Example</span>
                                    <span wire:loading wire:target="addResponseExample">Adding...</span>
                                </button>
                            </div>
                            
                            @forelse($responseExamples as $index => $example)
                                <div class="param-card @error('responseExamples.' . $index . '.name') !border-2 !border-red-500 @enderror @error('responseExamples.' . $index . '.status_code') !border-2 !border-red-500 @enderror" wire:key="example-{{ $index }}">
                                    <div class="param-card-header">
                                        <div class="flex items-center">
                                            <span class="param-card-number">{{ $index + 1 }}</span>
                                            <span class="text-sm font-semibold text-slate-700">Response Example #{{ $index + 1 }}</span>
                                        </div>
                                        <button
                                            type="button"
                                            class="remove-btn"
                                            wire:click="removeResponseExample({{ $index }})"
                                            wire:loading.attr="disabled"
                                            wire:target="removeResponseExample({{ $index }})"
                                            title="Remove response example"
                                        >
                                            <svg wire:loading.remove wire:target="removeResponseExample({{ $index }})" 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="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                            <svg wire:loading wire:target="removeResponseExample({{ $index }})" class="animate-spin w-4 h-4" 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>
                                        </button>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Example Name <span class="text-red-500">*</span></label>
                                            <input
                                                type="text"
                                                placeholder="e.g., Success Response, Error Response"
                                                class="w-full form-field-enhanced @error('responseExamples.' . $index . '.name') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="responseExamples.{{ $index }}.name"
                                                data-clear-error
                                                oninput="clearFieldError(this)"
                                            />
                                            @error('responseExamples.' . $index . '.name')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                        <div class="space-y-1">
                                            <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">HTTP Status Code <span class="text-red-500">*</span></label>
                                            <input
                                                type="number"
                                                placeholder="e.g., 200, 400, 404, 500"
                                                class="w-full form-field-enhanced @error('responseExamples.' . $index . '.status_code') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror"
                                                wire:model.defer="responseExamples.{{ $index }}.status_code"
                                                data-clear-error
                                                oninput="clearFieldError(this)"
                                            />
                                            @error('responseExamples.' . $index . '.status_code')
                                                <p class="text-xs validation-error">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                    <div class="space-y-1 mb-3">
                                        <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Response Body (JSON)</label>
                                        <textarea
                                            placeholder='{"status": "success", "data": {}, "message": "..."}'
                                            rows="6"
                                            class="w-full form-field-enhanced font-mono text-xs"
                                            wire:model="responseExamples.{{ $index }}.body"
                                        ></textarea>
                                    </div>
                                    
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-slate-600 uppercase tracking-wide">Description</label>
                                        <input
                                            type="text"
                                            placeholder="Describe when this response example is returned"
                                            class="w-full form-field-enhanced"
                                            wire:model="responseExamples.{{ $index }}.description"
                                        />
                                    </div>
                                </div>
                            @empty
                                <div class="empty-state">
                                    <svg class="empty-state-icon" 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" />
                                    </svg>
                                    <p class="text-sm font-medium mb-1">No response examples added yet</p>
                                    <p class="text-xs">Click "Add Example" to define sample responses for this API</p>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- Fixed Footer -->
                    <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>
    </div>

    <script>
        // JavaScript function to clear errors client-side (no AJAX calls)
        function clearFieldError(input) {
            // Remove red border classes
            input.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
            input.classList.add('border-slate-200');
            
            // Find and hide error message - check both .space-y-1 and .space-y-4 containers
            let fieldContainer = input.closest('.space-y-1');
            if (!fieldContainer) {
                fieldContainer = input.closest('.space-y-4');
            }
            if (fieldContainer) {
                const errorMessage = fieldContainer.querySelector('.validation-error');
                if (errorMessage) {
                    errorMessage.style.display = 'none';
                }
            }
            
            // Remove red border from parent card if it exists
            const card = input.closest('.param-card');
            if (card) {
                card.classList.remove('!border-2', '!border-red-500');
            }
        }
        
        // Initialize on page load and after Livewire updates
        document.addEventListener('DOMContentLoaded', function() {
            attachErrorClearing();
        });
        
        // Re-attach after Livewire updates
        document.addEventListener('livewire:load', function() {
            attachErrorClearing();
        });
        
        document.addEventListener('livewire:update', function() {
            attachErrorClearing();
        });
        
        function attachErrorClearing() {
            // Add event listeners to all inputs, selects, and textareas with error clearing
            document.querySelectorAll('input[data-clear-error], select[data-clear-error], textarea[data-clear-error]').forEach(function(input) {
                // Remove existing listeners to avoid duplicates
                const newInput = input.cloneNode(true);
                input.parentNode.replaceChild(newInput, input);
                
                if (newInput.tagName === 'INPUT' || newInput.tagName === 'TEXTAREA') {
                    newInput.addEventListener('input', function() {
                        clearFieldError(this);
                    });
                } else if (newInput.tagName === 'SELECT') {
                    newInput.addEventListener('change', function() {
                        clearFieldError(this);
                    });
                }
            });
        }
    </script>
</x-filament-panels::page>