@extends('layouts.admin')

@section('title', 'Edit Vendor')

@section('content')
<div class="py-6" x-data="vendorEditForm()">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
            <div class="flex items-center gap-4">
                <div class="p-2 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl shadow-sm">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.367 3h13.266a1.5 1.5 0 011.049.44l1.428 1.23a3.001 3.001 0 01-.621 4.72"/></svg>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Edit Vendor</h1>
                    <p class="text-sm text-gray-500">Manage {{ $vendor->name }}'s store details and settings</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.vendors.index') }}" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Back to Vendors
                </a>
                @php
                    $statusClass = match($vendor->status) {
                        'approved' => 'bg-emerald-100 text-emerald-700',
                        'pending' => 'bg-amber-100 text-amber-700',
                        'suspended' => 'bg-red-100 text-red-700',
                        'rejected' => 'bg-gray-100 text-gray-700',
                        default => 'bg-gray-100 text-gray-700',
                    };
                @endphp
                <span class="px-3 py-1 rounded-full text-xs font-medium {{ $statusClass }}">
                    {{ ucfirst($vendor->status) }}
                </span>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Main Form --}}
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    {{-- Tabs --}}
                    <div class="border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-6 py-3">
                        <nav class="flex gap-1 overflow-x-auto" role="tablist">
                            @php
                                $tabs = [
                                    ['id' => 'store', 'label' => 'Store Info', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.367 3h13.266a1.5 1.5 0 011.049.44l1.428 1.23a3.001 3.001 0 01-.621 4.72"/>'],
                                    ['id' => 'contact', 'label' => 'Contact & Location', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>'],
                                    ['id' => 'settings', 'label' => 'Business Settings', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>'],
                                    ['id' => 'social', 'label' => 'Social & Branding', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>'],
                                ];
                            @endphp
                            @foreach($tabs as $tab)
                            <button @click="activeTab = '{{ $tab['id'] }}'" :class="activeTab === '{{ $tab['id'] }}' ? 'text-emerald-600 border-emerald-600 bg-emerald-50/50' : 'text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300'" class="inline-flex items-center gap-2 px-4 py-2.5 border-b-2 text-sm font-medium whitespace-nowrap transition-all duration-150" role="tab">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $tab['icon'] !!}</svg>
                                <span>{{ $tab['label'] }}</span>
                            </button>
                            @endforeach
                        </nav>
                    </div>

                    <form action="{{ route('admin.vendors.update', $vendor) }}" method="POST" class="p-6">
                        @csrf
                        @method('PUT')

                        {{-- Tab: Store Info --}}
                        <div x-show="activeTab === 'store'" x-cloak>
                            <div class="space-y-5">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Store Name <span class="text-red-500">*</span></label>
                                    <input type="text" name="name" value="{{ old('name', $vendor->name) }}" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    <p class="text-xs text-gray-400 mt-1">This is the public name of the vendor's store</p>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Store Description</label>
                                    <textarea name="description" rows="4" placeholder="Tell customers about this store..." class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">{{ old('description', $vendor->description) }}</textarea>
                                </div>

                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Store Slug</label>
                                        <input type="text" name="slug" value="{{ old('slug', $vendor->slug) }}" placeholder="store-slug" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm font-mono">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone</label>
                                        <input type="text" name="phone" value="{{ old('phone', $vendor->phone) }}" placeholder="+1 (555) 000-0000" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Contact Email</label>
                                    <input type="email" name="email" value="{{ old('email', $vendor->email) }}" placeholder="store@example.com" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                </div>
                            </div>
                        </div>

                        {{-- Tab: Contact & Location --}}
                        <div x-show="activeTab === 'contact'" x-cloak>
                            <div class="space-y-5">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Street Address</label>
                                    <textarea name="address" rows="2" placeholder="123 Main Street, Suite 100" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">{{ old('address', $vendor->address) }}</textarea>
                                </div>

                                <div class="grid grid-cols-2 gap-5">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">City</label>
                                        <input type="text" name="city" value="{{ old('city', $vendor->city) }}" placeholder="New York" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">State / Province</label>
                                        <input type="text" name="state" value="{{ old('state', $vendor->state) }}" placeholder="NY" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 gap-5">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Country</label>
                                        <input type="text" name="country" value="{{ old('country', $vendor->country) }}" placeholder="United States" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Postal Code</label>
                                        <input type="text" name="postal_code" value="{{ old('postal_code', $vendor->postal_code) }}" placeholder="10001" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Tab: Business Settings --}}
                        <div x-show="activeTab === 'settings'" x-cloak>
                            <div class="space-y-6">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Commission Rate (%) <span class="text-red-500">*</span></label>
                                        <input type="number" name="commission_rate" value="{{ old('commission_rate', $vendor->commission_rate) }}" step="0.01" min="0" max="100" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                        <p class="text-xs text-gray-400 mt-1">Platform commission on each sale</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Vendor Status <span class="text-red-500">*</span></label>
                                        <select name="status" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                            <option value="pending" {{ old('status', $vendor->status) === 'pending' ? 'selected' : '' }}>Pending</option>
                                            <option value="approved" {{ old('status', $vendor->status) === 'approved' ? 'selected' : '' }}>Approved</option>
                                            <option value="rejected" {{ old('status', $vendor->status) === 'rejected' ? 'selected' : '' }}>Rejected</option>
                                            <option value="suspended" {{ old('status', $vendor->status) === 'suspended' ? 'selected' : '' }}>Suspended</option>
                                        </select>
                                    </div>
                                </div>

                                @if($vendor->user)
                                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">Linked Account</p>
                                    <div class="flex items-center gap-3">
                                        @if($vendor->user->avatar)
                                        <img src="{{ $vendor->user->avatar_url }}" class="w-10 h-10 rounded-full object-cover">
                                        @else
                                        <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center">
                                            <span class="text-sm font-semibold text-emerald-700">{{ strtoupper(substr($vendor->user->name, 0, 1)) }}</span>
                                        </div>
                                        @endif
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">{{ $vendor->user->name }}</p>
                                            <p class="text-xs text-gray-500">{{ $vendor->user->email }}</p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <div class="p-4 bg-amber-50 rounded-lg border border-amber-200">
                                    <p class="text-xs font-medium text-amber-700 uppercase tracking-wider mb-3">Financial Summary</p>
                                    <div class="grid grid-cols-3 gap-4 text-center">
                                        <div>
                                            <p class="text-lg font-bold text-amber-900">{{ price($vendor->total_sales) }}</p>
                                            <p class="text-xs text-amber-600">Total Sales</p>
                                        </div>
                                        <div>
                                            <p class="text-lg font-bold text-amber-900">{{ price($vendor->total_earnings) }}</p>
                                            <p class="text-xs text-amber-600">Earnings</p>
                                        </div>
                                        <div>
                                            <p class="text-lg font-bold text-amber-900">{{ price($vendor->balance) }}</p>
                                            <p class="text-xs text-amber-600">Balance</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Tab: Social & Branding --}}
                        <div x-show="activeTab === 'social'" x-cloak>
                            @php
                                $socialLinks = is_array($vendor->social_links) ? $vendor->social_links : (json_decode($vendor->social_links ?? '[]', true) ?: []);
                            @endphp
                            <div class="space-y-5">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Facebook URL</label>
                                    <div class="flex items-center gap-2">
                                        <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                                        <input type="url" name="social_links[facebook]" value="{{ old('social_links.facebook', $socialLinks['facebook'] ?? '') }}" placeholder="https://facebook.com/username" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Twitter / X URL</label>
                                    <div class="flex items-center gap-2">
                                        <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                                        <input type="url" name="social_links[twitter]" value="{{ old('social_links.twitter', $socialLinks['twitter'] ?? '') }}" placeholder="https://x.com/username" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Instagram URL</label>
                                    <div class="flex items-center gap-2">
                                        <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                                        <input type="url" name="social_links[instagram]" value="{{ old('social_links.instagram', $socialLinks['instagram'] ?? '') }}" placeholder="https://instagram.com/username" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1.5">YouTube URL</label>
                                    <div class="flex items-center gap-2">
                                        <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                                        <input type="url" name="social_links[youtube]" value="{{ old('social_links.youtube', $socialLinks['youtube'] ?? '') }}" placeholder="https://youtube.com/@channel" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Footer Actions --}}
                        <div class="flex justify-end gap-3 pt-6 mt-8 border-t border-gray-200">
                            <a href="{{ route('admin.vendors.index') }}" class="px-5 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors">Cancel</a>
                            <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-medium rounded-lg hover:from-emerald-700 hover:to-teal-700 transition-all shadow-sm">
                                Update Vendor
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                {{-- Vendor Info --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="p-5 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h2 class="text-sm font-semibold text-gray-900">Vendor Information</h2>
                    </div>
                    <div class="p-5 space-y-4">
                        @if($vendor->user)
                        <div class="text-center">
                            @if($vendor->user->avatar)
                            <img src="{{ $vendor->user->avatar_url }}" class="w-16 h-16 rounded-full object-cover mx-auto border-2 border-gray-200">
                            @else
                            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center mx-auto">
                                <span class="text-xl font-bold text-emerald-700">{{ strtoupper(substr($vendor->user->name, 0, 1)) }}</span>
                            </div>
                            @endif
                            <p class="text-sm font-medium text-gray-900 mt-3">{{ $vendor->user->name }}</p>
                            <p class="text-xs text-gray-500">{{ $vendor->user->email }}</p>
                        </div>
                        @endif

                        <div class="border-t border-gray-100 pt-4 space-y-3">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Products</span>
                                <span class="font-medium text-gray-900">{{ $vendor->products->count() ?? 0 }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Commission</span>
                                <span class="font-medium text-emerald-600">{{ $vendor->commission_rate }}%</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Joined</span>
                                <span class="font-medium text-gray-900">{{ $vendor->created_at->format('M d, Y') }}</span>
                            </div>
                            @if($vendor->approved_at)
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Approved</span>
                                <span class="font-medium text-gray-900">{{ $vendor->approved_at->format('M d, Y') }}</span>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Quick Actions --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="p-5 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h2 class="text-sm font-semibold text-gray-900">Quick Actions</h2>
                    </div>
                    <div class="p-5 space-y-3">
                        <a href="{{ route('admin.vendors.show', $vendor) }}" class="block w-full text-center px-4 py-2.5 bg-white border border-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors text-sm">
                            View Store Details
                        </a>
                        <a href="{{ route('admin.vendors.index') }}?q={{ urlencode($vendor->name) }}" class="block w-full text-center px-4 py-2.5 bg-white border border-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors text-sm">
                            View Vendor Products
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function vendorEditForm() {
    return {
        activeTab: 'store',
    }
}
</script>
@endpush
@endsection