@extends('superadmin.layouts.app')

@section('title', $shop->domain)
@section('page-title', 'Shop: ' . $shop->domain)

@section('content')

<div class="mb-6">
    <a href="{{ route('superadmin.shops.index') }}" class="text-sm text-slate-400 hover:text-white">← All Shops</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Main info --}}
    <div class="lg:col-span-2 space-y-6">

        {{-- Shop card --}}
        <div class="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6">
            <div class="flex items-start justify-between mb-5">
                <div>
                    <h2 class="text-lg font-bold text-white">{{ $shop->name ?: $shop->domain }}</h2>
                    <p class="text-sm text-slate-400 mt-0.5">{{ $shop->domain }}</p>
                </div>
                <span @class([
                    'px-3 py-1 rounded-full text-xs font-semibold',
                    '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',
                ])>{{ ucfirst($shop->status ?? 'unknown') }}</span>
            </div>

            <dl class="grid grid-cols-2 gap-4">
                <div>
                    <dt class="text-xs text-slate-500 mb-0.5">Email</dt>
                    <dd class="text-sm text-slate-200">{{ $shop->email ?: '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-slate-500 mb-0.5">Phone</dt>
                    <dd class="text-sm text-slate-200">{{ $shop->contact_phone ?: '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-slate-500 mb-0.5">App Installed</dt>
                    <dd class="text-sm">
                        @if($shop->isInstalled())
                        <span class="text-green-400">Yes</span>
                        @else
                        <span class="text-amber-400">Not yet</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-slate-500 mb-0.5">Registered</dt>
                    <dd class="text-sm text-slate-200">{{ $shop->created_at->format('d M Y, H:i') }}</dd>
                </div>
            </dl>

            <div class="flex items-center gap-3 mt-6 pt-5 border-t border-slate-700/50">
                @if($shop->status === 'pending')
                <form method="POST" action="{{ route('superadmin.shops.approve', $shop->id) }}">
                    @csrf
                    <button class="px-4 py-2 bg-green-700/40 hover:bg-green-700/70 text-green-300 text-sm font-medium rounded-lg transition-colors">
                        Approve & Activate
                    </button>
                </form>
                @elseif($shop->status === 'active')
                <form method="POST" action="{{ route('superadmin.shops.impersonate', $shop->id) }}">
                    @csrf
                    <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors">
                        Impersonate Merchant
                    </button>
                </form>
                <form method="POST" action="{{ route('superadmin.shops.suspend', $shop->id) }}" onsubmit="return confirm('Suspend {{ $shop->domain }}?')">
                    @csrf
                    <button class="px-4 py-2 bg-red-900/40 hover:bg-red-900/70 text-red-300 text-sm font-medium rounded-lg transition-colors">
                        Suspend
                    </button>
                </form>
                @elseif($shop->status === 'suspended')
                <form method="POST" action="{{ route('superadmin.shops.approve', $shop->id) }}">
                    @csrf
                    <button class="px-4 py-2 bg-green-700/40 hover:bg-green-700/70 text-green-300 text-sm font-medium rounded-lg transition-colors">
                        Reactivate
                    </button>
                </form>
                @endif
            </div>
        </div>

        {{-- Recent orders --}}
        <div class="bg-slate-800/60 border border-slate-700/50 rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700/50">
                <h3 class="text-sm font-semibold text-white">Recent Orders</h3>
            </div>
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-700/30">
                        <th class="text-left px-5 py-3 text-xs font-medium text-slate-400">Order</th>
                        <th class="text-left px-5 py-3 text-xs font-medium text-slate-400">Customer</th>
                        <th class="text-left px-5 py-3 text-xs font-medium text-slate-400">Amount</th>
                        <th class="text-left px-5 py-3 text-xs font-medium text-slate-400">Status</th>
                        <th class="text-left px-5 py-3 text-xs font-medium text-slate-400">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-700/30">
                    @forelse($shop->orders as $order)
                    <tr>
                        <td class="px-5 py-3 text-slate-200 font-mono text-xs">#{{ $order->id }}</td>
                        <td class="px-5 py-3 text-slate-300">{{ $order->customer->name ?? '—' }}</td>
                        <td class="px-5 py-3 text-slate-200">₹{{ number_format($order->total_amount, 2) }}</td>
                        <td class="px-5 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full
                                {{ $order->status === 'paid' ? 'bg-green-900/40 text-green-400' : 'bg-slate-700 text-slate-400' }}">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-slate-400 text-xs">{{ $order->created_at->format('d M, H:i') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-5 py-6 text-center text-slate-500 text-xs">No orders yet</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>

    {{-- Right sidebar --}}
    <div class="space-y-6">

        {{-- Users --}}
        <div class="bg-slate-800/60 border border-slate-700/50 rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700/50">
                <h3 class="text-sm font-semibold text-white">Team Members</h3>
            </div>
            <div class="divide-y divide-slate-700/40">
                @forelse($shop->users as $user)
                <div class="px-5 py-3.5 flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm text-white font-medium truncate">{{ $user->name }}</p>
                        <p class="text-xs text-slate-400 truncate">{{ $user->email }}</p>
                    </div>
                    <span class="text-xs text-slate-500 capitalize">{{ $user->role }}</span>
                </div>
                @empty
                <p class="px-5 py-4 text-xs text-slate-500 text-center">No team members</p>
                @endforelse
            </div>
        </div>

        {{-- Settings preview --}}
        <div class="bg-slate-800/60 border border-slate-700/50 rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700/50">
                <h3 class="text-sm font-semibold text-white">Branding Config</h3>
            </div>
            <div class="px-5 py-4 space-y-3">
                @php $branding = $shop->settings['branding'] ?? []; @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs text-slate-400">Primary Color</span>
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 rounded border border-slate-600"
                             style="background:{{ $branding['primary_color'] ?? '#111111' }}"></div>
                        <span class="text-xs font-mono text-slate-300">{{ $branding['primary_color'] ?? '#111111' }}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-slate-400">Button Color</span>
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 rounded border border-slate-600"
                             style="background:{{ $branding['button_color'] ?? '#111111' }}"></div>
                        <span class="text-xs font-mono text-slate-300">{{ $branding['button_color'] ?? '#111111' }}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-slate-400">Logo URL</span>
                    <span class="text-xs text-slate-300 truncate ml-2 max-w-32">{{ $branding['logo_url'] ?? 'none' }}</span>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection