@extends('superadmin.layouts.app')

@section('title', 'All Shops')
@section('page-title', 'Merchant Shops')

@section('content')

{{-- Filters --}}
<form method="GET" class="flex flex-wrap gap-3 mb-6">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Search domain, name, email…"
           class="flex-1 min-w-48 px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    <select name="status" class="px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <option value="">All statuses</option>
        @foreach(['pending','active','suspended'] as $s)
        <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst($s) }}</option>
        @endforeach
    </select>
    <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-lg transition-colors">
        Filter
    </button>
    @if(request('search') || request('status'))
    <a href="{{ route('superadmin.shops.index') }}" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 text-sm rounded-lg transition-colors">Clear</a>
    @endif
</form>

{{-- Table --}}
<div class="bg-slate-800/60 border border-slate-700/50 rounded-xl overflow-hidden">
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-slate-700/50">
                <th class="text-left px-5 py-3.5 text-xs font-medium text-slate-400">Shop</th>
                <th class="text-left px-5 py-3.5 text-xs font-medium text-slate-400">Owner</th>
                <th class="text-left px-5 py-3.5 text-xs font-medium text-slate-400">Status</th>
                <th class="text-left px-5 py-3.5 text-xs font-medium text-slate-400">Orders</th>
                <th class="text-left px-5 py-3.5 text-xs font-medium text-slate-400">Registered</th>
                <th class="text-left px-5 py-3.5 text-xs font-medium text-slate-400">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-700/40">
            @forelse($shops as $shop)
            <tr class="hover:bg-slate-700/20 transition-colors">
                <td class="px-5 py-3.5">
                    <p class="font-medium text-white">{{ $shop->name ?: '—' }}</p>
                    <p class="text-xs text-slate-400 mt-0.5">{{ $shop->domain }}</p>
                </td>
                <td class="px-5 py-3.5">
                    @if($admin = $shop->users->where('role','admin')->first())
                    <p class="text-slate-200">{{ $admin->name }}</p>
                    <p class="text-xs text-slate-400">{{ $admin->email }}</p>
                    @else
                    <span class="text-slate-500">—</span>
                    @endif
                </td>
                <td class="px-5 py-3.5">
                    <span @class([
                        'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
                        'bg-green-900/40 text-green-400'  => $shop->status === 'active',
                        'bg-amber-900/40 text-amber-400'  => $shop->status === 'pending',
                        'bg-red-900/40 text-red-400'      => $shop->status === 'suspended',
                        'bg-slate-700 text-slate-400'     => !in_array($shop->status, ['active','pending','suspended']),
                    ])>
                        {{ ucfirst($shop->status ?? 'unknown') }}
                    </span>
                    @if(!$shop->isInstalled())
                    <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-slate-700 text-slate-400">not installed</span>
                    @endif
                </td>
                <td class="px-5 py-3.5 text-slate-300">
                    {{ number_format($shop->orders_count) }}
                </td>
                <td class="px-5 py-3.5 text-slate-400 text-xs">
                    {{ $shop->created_at->format('d M Y') }}
                </td>
                <td class="px-5 py-3.5">
                    <div class="flex items-center gap-2">
                        <a href="{{ route('superadmin.shops.show', $shop->id) }}"
                           class="text-xs px-2.5 py-1.5 bg-slate-700/60 hover:bg-slate-700 text-slate-300 rounded-lg transition-colors">
                            View
                        </a>
                        @if($shop->status === 'pending')
                        <form method="POST" action="{{ route('superadmin.shops.approve', $shop->id) }}">
                            @csrf
                            <button class="text-xs px-2.5 py-1.5 bg-green-800/40 hover:bg-green-800/70 text-green-300 rounded-lg transition-colors">
                                Approve
                            </button>
                        </form>
                        @elseif($shop->status === 'active')
                        <form method="POST" action="{{ route('superadmin.shops.suspend', $shop->id) }}" onsubmit="return confirm('Suspend this shop?')">
                            @csrf
                            <button class="text-xs px-2.5 py-1.5 bg-red-900/40 hover:bg-red-900/70 text-red-300 rounded-lg transition-colors">
                                Suspend
                            </button>
                        </form>
                        @elseif($shop->status === 'suspended')
                        <form method="POST" action="{{ route('superadmin.shops.approve', $shop->id) }}">
                            @csrf
                            <button class="text-xs px-2.5 py-1.5 bg-green-800/40 hover:bg-green-800/70 text-green-300 rounded-lg transition-colors">
                                Reactivate
                            </button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="px-5 py-10 text-center text-slate-500">No shops found</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    @if($shops->hasPages())
    <div class="px-5 py-4 border-t border-slate-700/50">
        {{ $shops->links() }}
    </div>
    @endif
</div>

@endsection