@extends('layouts.vendor')

@section('title', 'Vendor Dashboard')
@section('header_title', 'Optical Store Dashboard')

@section('content')
    <div class="grid-stats">
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-glasses"></i></div>
            <div>
                <div style="color: var(--text-muted); font-size: 0.9rem;">Total Frames Uploaded</div>
                <div class="stat-val">{{ $totalFrames }}</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon" style="background: rgba(99, 102, 241, 0.15); color: #818CF8;"><i class="fa-solid fa-eye"></i></div>
            <div>
                <div style="color: var(--text-muted); font-size: 0.9rem;">Contact Lenses</div>
                <div class="stat-val">{{ $totalLenses }}</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon" style="background: rgba(16, 185, 129, 0.15); color: #10B981;"><i class="fa-solid fa-crown"></i></div>
            <div>
                <div style="color: var(--text-muted); font-size: 0.9rem;">Subscription Status</div>
                <div class="stat-val" style="font-size: 1.2rem; color: #10B981;">
                    @if($activeSubscription)
                        {{ $activeSubscription->package->name ?? 'Active Plan' }}
                    @else
                        <span style="color: #EF4444;">Expired</span>
                    @endif
                </div>
                @if($activeSubscription)
                    <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 2px;">
                        Valid till {{ $activeSubscription->expires_at->format('d M, Y') }}
                    </div>
                @endif
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B;"><i class="fa-solid fa-cart-shopping"></i></div>
            <div>
                <div style="color: var(--text-muted); font-size: 0.9rem;">Orders</div>
                <div class="stat-val">{{ $totalOrders }}</div>
                <div style="font-size: 0.8rem; color: var(--text-muted);">{{ $pendingOrders }} awaiting action</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon" style="background: rgba(239, 68, 68, 0.15); color: #EF4444;"><i class="fa-solid fa-box-open"></i></div>
            <div>
                <div style="color: var(--text-muted); font-size: 0.9rem;">Low Stock Items</div>
                <div class="stat-val">{{ $lowStockItems }}</div>
                <a href="{{ route('vendor.stock') }}" style="font-size: 0.8rem; color: var(--primary);">Review inventory</a>
            </div>
        </div>
    </div>

    <!-- Frame Catalog Quickview -->
    <div class="card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem;">
            <h3><i class="fa-solid fa-glasses"></i> Recent Frames in Your Catalog</h3>
            <a href="{{ route('vendor.frames') }}" class="btn btn-primary" style="font-size: 0.8rem;">Upload & Manage All</a>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Frame Title</th>
                    <th>Category</th>
                    <th>Shape & Rim</th>
                    <th>Price</th>
                    <th>Try-On Asset</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentFrames as $frame)
                    <tr>
                        <td>
                            <strong style="color: #fff;">{{ $frame->name }}</strong>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">Size: {{ $frame->size ?? 'Standard' }} | Color: {{ $frame->color ?? 'Black' }}</div>
                        </td>
                        <td>{{ $frame->category->name ?? 'Eyeglasses' }}</td>
                        <td>{{ $frame->shape ?? 'Aviator' }} ({{ $frame->rim_type ?? 'Full-rim' }})</td>
                        <td style="color: #10B981; font-weight: 700;">₹{{ number_format($frame->price, 2) }}</td>
                        <td>
                            @if($frame->tryon_image_url)
                                <span class="badge badge-success"><i class="fa-solid fa-check"></i> AR Ready</span>
                            @else
                                <span class="badge badge-danger">Missing AR PNG</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge {{ $frame->is_active ? 'badge-success' : 'badge-danger' }}">
                                {{ $frame->is_active ? 'Active' : 'Disabled' }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 2rem;">No frames uploaded yet. Click "Upload & Manage All" to add your first eyewear!</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection
