@extends('layouts.app')

@section('title', 'Vendor Details - Admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <h2 class="fw-bold mb-0">{{ $vendor->shop_name }}</h2>
        <p class="text-muted mb-0">{{ $vendor->user->name }} · {{ $vendor->user->email }}</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ route('admin.vendors.edit', $vendor->id) }}" class="btn btn-primary btn-sm">Edit Vendor</a>
        <a href="{{ route('admin.vendor-verification.show', $vendor->id) }}" class="btn btn-outline-primary btn-sm">KYC Review</a>
        <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success border-0 shadow-sm">{{ session('success') }}</div>
@endif

<div class="row g-4">
    <div class="col-md-4">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body text-center p-4">
                @if($vendor->logo)
                    <img src="{{ $vendor->logo_url }}" class="rounded-circle border p-1 mb-3" width="100" height="100" alt="">
                @else
                    <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center border mb-3" style="width: 100px; height: 100px;">
                        <i class="bi bi-shop fs-2 text-muted"></i>
                    </div>
                @endif
                <h4 class="fw-bold mb-1">{{ $vendor->shop_name }}</h4>
                <p class="text-muted small mb-3">{{ $vendor->shop_slug }}</p>
                <div class="d-flex justify-content-center gap-2 flex-wrap mb-3">
                    @if($vendor->is_approved)<span class="badge bg-success">Active</span>@else<span class="badge bg-warning text-dark">Suspended</span>@endif
                    <span class="badge bg-info">Comm {{ $vendor->commission_rate }}%</span>
                    <span class="badge bg-primary">Level {{ $vendor->verification_level }}</span>
                </div>
                <hr>
                <div class="text-start small">
                    <p class="mb-1"><strong>Member Since:</strong> {{ $vendor->created_at->format('d M Y') }}</p>
                    <p class="mb-1"><strong>Seller Type:</strong> {{ ucfirst($vendor->seller_type ?? 'individual') }}</p>
                    <p class="mb-0"><strong>Setup Wizard:</strong> {{ $vendor->setup_wizard_completed ? 'Completed' : 'Pending' }}</p>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white"><h6 class="fw-bold mb-0">Financial</h6></div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Wallet</span>
                    <span class="fw-bold text-success">₹{{ number_format($vendor->user->wallet?->balance ?? 0, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Pending Payouts</span>
                    <span class="fw-bold text-warning">₹{{ number_format($verificationStats['pending_payouts'] ?? 0, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="text-muted">Total Paid Out</span>
                    <span class="fw-bold">₹{{ number_format($verificationStats['total_paid'] ?? 0, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        @include('admin.vendors.partials.verification-controls')

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Products ({{ $vendor->products_count }})</h5>
                <a href="{{ route('admin.products.index') }}?vendor={{ $vendor->id }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4">Product</th>
                            <th>Price</th>
                            <th>Stock</th>
                            <th>Status</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($vendorProducts->take(5) as $product)
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="bg-white border rounded p-1 flex-shrink-0" style="width: 48px; height: 48px;">
                                        <img src="{{ $product->getPrimaryImage() }}" class="w-100 h-100 rounded object-fit-cover" alt="{{ $product->name }}">
                                    </div>
                                    <div class="min-w-0">
                                        <div class="fw-bold text-truncate" style="max-width: 220px;">{{ $product->name }}</div>
                                        <small class="text-muted">{{ $product->sku }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>₹{{ number_format($product->price, 2) }}</td>
                            <td>{{ $product->stock_qty }}</td>
                            <td><span class="badge bg-{{ $product->status === 'active' ? 'success' : 'secondary' }}">{{ $product->status }}</span></td>
                            <td class="text-end pe-4">
                                <a href="{{ route('admin.products.show', $product->id) }}" class="btn btn-sm btn-light border">View</a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">No products listed yet.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Product Images</h5>
                <span class="badge bg-light text-dark border">{{ $vendorProducts->count() }} shown</span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    @forelse($vendorProducts as $product)
                    <div class="col-6 col-md-4 col-lg-3">
                        <a href="{{ route('admin.products.show', $product->id) }}" class="text-decoration-none text-dark">
                            <div class="border rounded overflow-hidden bg-light h-100 shadow-sm-hover">
                                <div style="height: 140px;">
                                    <img src="{{ $product->getPrimaryImage() }}" class="w-100 h-100 object-fit-cover" alt="{{ $product->name }}">
                                </div>
                                <div class="p-2">
                                    <div class="small fw-bold text-truncate">{{ $product->name }}</div>
                                    <div class="d-flex justify-content-between align-items-center mt-1">
                                        <span class="small text-muted">₹{{ number_format($product->price, 0) }}</span>
                                        <span class="badge bg-{{ $product->status === 'active' ? 'success' : 'secondary' }}" style="font-size: 0.65rem;">{{ $product->status }}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @empty
                    <div class="col-12 text-center py-4 text-muted">
                        <i class="bi bi-images display-6 opacity-25 d-block mb-2"></i>
                        No product images available.
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        @if($vendor->banner_url || $vendor->logo_url || $vendor->sliders->where('status', true)->count())
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white">
                <h5 class="fw-bold mb-0">Shop Branding</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    @if($vendor->banner_url)
                    <div class="col-12">
                        <label class="small fw-bold text-muted text-uppercase mb-2">Shop Banner</label>
                        <img src="{{ $vendor->banner_url }}" class="w-100 rounded border object-fit-cover" style="max-height: 180px;" alt="Shop banner">
                    </div>
                    @endif
                    @if($vendor->logo_url)
                    <div class="col-md-3">
                        <label class="small fw-bold text-muted text-uppercase mb-2">Logo</label>
                        <img src="{{ $vendor->logo_url }}" class="rounded border w-100 object-fit-cover" style="height: 120px;" alt="Shop logo">
                    </div>
                    @endif
                    @foreach($vendor->sliders->where('status', true)->sortBy('order_priority') as $slide)
                    <div class="col-md-4 col-lg-3">
                        <label class="small fw-bold text-muted text-uppercase mb-2">Slide {{ $loop->iteration }}</label>
                        <img src="{{ media_url($slide->image_path) }}" class="w-100 rounded border object-fit-cover" style="height: 120px;" alt="{{ $slide->title ?? 'Shop slide' }}">
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        @if($vendor->auditLogs->count())
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white"><h6 class="fw-bold mb-0">Activity Log</h6></div>
            <div class="list-group list-group-flush">
                @foreach($vendor->auditLogs as $log)
                <div class="list-group-item small">
                    <strong>{{ str_replace('_', ' ', ucfirst($log->action)) }}</strong>
                    <span class="text-muted">· {{ $log->created_at->diffForHumans() }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

@if(in_array($vendor->normalizedKycStatus(), ['under_review', 'rejected']))
<div class="modal fade" id="rejectKycModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.vendors.reject-kyc', $vendor->id) }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Reject KYC</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body"><textarea name="reason" class="form-control" rows="4" required placeholder="Reason for rejection..."></textarea></div>
            <div class="modal-footer"><button type="submit" class="btn btn-danger">Reject KYC</button></div>
        </form>
    </div>
</div>
@endif
@endsection

@push('styles')
<style>
    .shadow-sm-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
    .shadow-sm-hover:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; transform: translateY(-2px); }
    .object-fit-cover { object-fit: cover; }
</style>
@endpush