@extends('layouts.admin')

@section('title', $vendor->shop_name)
@section('page-title', 'Vendor Details')

@section('content')
<div class="max-w-4xl">
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex items-start gap-6">
            <img src="{{ $vendor->logo_url }}" class="w-20 h-20 object-cover rounded-xl">
            <div class="flex-1">
                <h2 class="text-xl font-bold">{{ $vendor->shop_name }}</h2>
                <p class="text-gray-500 text-sm mt-1">{{ $vendor->description }}</p>
                <div class="grid grid-cols-2 gap-4 mt-4 text-sm">
                    <div><span class="text-gray-500">Owner:</span> {{ $vendor->user->name }}</div>
                    <div><span class="text-gray-500">Email:</span> {{ $vendor->user->email }}</div>
                    <div><span class="text-gray-500">Location:</span> {{ $vendor->city }}, {{ $vendor->country }}</div>
                    <div><span class="text-gray-500">Commission:</span> {{ $vendor->commission_rate }}%</div>
                </div>
            </div>
            <span class="px-3 py-1 rounded-full text-sm font-medium
                {{ $vendor->status === 'approved' ? 'bg-green-100 text-green-700' :
                   ($vendor->status === 'rejected' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                {{ ucfirst($vendor->status) }}
            </span>
        </div>
    </div>

    <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-4 text-center">
            <p class="text-2xl font-bold">{{ $stats['total_products'] }}</p>
            <p class="text-sm text-gray-500">Products</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4 text-center">
            <p class="text-2xl font-bold">{{ $stats['total_orders'] }}</p>
            <p class="text-sm text-gray-500">Orders</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4 text-center">
            <p class="text-2xl font-bold">{{ format_currency($stats['total_earnings']) }}</p>
            <p class="text-sm text-gray-500">Earnings</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4 text-center">
            <p class="text-2xl font-bold text-green-600">{{ format_currency($stats['balance']) }}</p>
            <p class="text-sm text-gray-500">Balance</p>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-gray-800 mb-4">Update Vendor</h3>
        <form action="{{ route('admin.vendors.update', $vendor->id) }}" method="POST" class="flex gap-4 items-end">
            @csrf @method('PUT')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <option value="pending" {{ $vendor->status == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ $vendor->status == 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="suspended" {{ $vendor->status == 'suspended' ? 'selected' : '' }}>Suspended</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Commission Rate (%)</label>
                <input type="number" name="commission_rate" value="{{ $vendor->commission_rate }}" step="0.1" min="0" max="100" class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-28">
            </div>
            <button type="submit" class="bg-gray-800 text-white px-6 py-2 rounded-lg hover:bg-gray-900 text-sm">Update</button>
        </form>
    </div>
</div>
@endsection
