@extends('layouts.seller')

@section('title', 'Dashboard')

@section('content')
<!-- Welcome Banner -->
<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4 position-relative">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(120deg, #2b5876 0%, #4e4376 100%); z-index: 0;"></div>
    <!-- Decor Pattern -->
    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 20px 20px; z-index: 0;"></div>
    <div class="position-absolute bottom-0 end-0 opacity-25" style="transform: translate(20%, 30%);">
        <svg width="300" height="300" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <path fill="#FFFFFF" d="M47.5,-61.2C59.6,-51.1,66.6,-33.5,69.8,-15.6C73,2.4,72.4,20.6,64.2,36.2C56,51.8,40.1,64.8,22.8,69.5C5.5,74.2,-13.3,70.6,-30.2,61.9C-47.1,53.2,-62.1,39.4,-68.8,21.8C-75.5,4.2,-73.9,-17.1,-63.9,-33.4C-53.9,-49.7,-35.5,-61,-18.2,-63.9C-0.8,-66.8,16.5,-61.2,33.8,-55.6Z" transform="translate(100 100)" />
        </svg>
    </div>
    
    <div class="card-body p-4 p-lg-5 position-relative z-1 text-white">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <h2 class="fw-bold mb-2">Welcome back, {{ auth()->user()->name }}! 👋</h2>
                <p class="mb-0 opacity-75 fs-5 fw-light">Your business overview for {{ now()->format('l, F j, Y') }}</p>
            </div>
            <div class="d-none d-md-block">
                <a href="{{ route('seller.products.create') }}" class="btn btn-light rounded-pill px-4 py-2 fw-bold text-primary shadow-lg hover-lift">
                    <i class="bi bi-plus-lg me-2"></i>Add New Product
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Verification Alert -->
@if(!auth()->user()->seller->is_verified)
    <div class="alert alert-warning border-0 shadow-sm rounded-3 d-flex align-items-center p-3 mb-3">
        <div class="bg-warning bg-opacity-25 rounded-circle p-2 me-3 flex-shrink-0">
            <i class="bi bi-shield-exclamation text-warning-emphasis fs-5"></i>
        </div>
        <div class="flex-grow-1">
            <h6 class="fw-bold mb-0 text-warning-emphasis text-uppercase small">Verification Pending</h6>
            <p class="mb-0 small text-muted">Complete your KYC to unlock full features.</p>
        </div>
        <a href="{{ route('seller.verification.index') }}" class="btn btn-sm btn-warning rounded-pill fw-bold text-dark px-3 mt-2 mt-md-0">Verify Now</a>
    </div>
@endif

<!-- Account Visibility Status -->
<div class="alert border-0 shadow-sm rounded-3 d-flex align-items-center p-3 mb-3 {{ auth()->user()->seller->is_active ? 'alert-success' : 'alert-secondary' }}">
    <div class="rounded-circle p-2 me-3 flex-shrink-0 {{ auth()->user()->seller->is_active ? 'bg-success bg-opacity-25' : 'bg-secondary bg-opacity-25' }}">
        <i class="bi {{ auth()->user()->seller->is_active ? 'bi-eye-fill text-success' : 'bi-eye-slash-fill text-secondary' }} fs-5"></i>
    </div>
    <div class="flex-grow-1">
        <h6 class="fw-bold mb-0 text-uppercase small {{ auth()->user()->seller->is_active ? 'text-success' : 'text-secondary' }}">
            {{ auth()->user()->seller->is_active ? 'Profile Visible' : 'Profile Hidden' }}
        </h6>
        <p class="mb-0 small text-muted">
            {{ auth()->user()->seller->is_active 
                ? 'Your profile & products are visible to buyers on the platform.' 
                : 'Your profile is hidden from buyers. Toggle to make it visible.' 
            }}
        </p>
    </div>
    <form action="{{ route('seller.account.toggle-status') }}" method="POST" class="d-inline">
        @csrf
        <button type="submit" class="btn btn-sm rounded-pill fw-bold px-3 {{ auth()->user()->seller->is_active ? 'btn-outline-danger' : 'btn-success' }}">
            <i class="bi {{ auth()->user()->seller->is_active ? 'bi-eye-slash' : 'bi-eye' }} me-1"></i>
            {{ auth()->user()->seller->is_active ? 'Hide Profile' : 'Show Profile' }}
        </button>
    </form>
</div>

<!-- Compact Stats Row -->
<div class="row g-2 mb-3">
     <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center mb-2">
                    <div class="bg-primary bg-opacity-10 text-primary rounded p-1 me-2">
                        <i class="bi bi-eye-fill"></i>
                    </div>
                    <span class="text-muted small fw-bold text-uppercase" style="font-size: 0.7rem;">Profile Views</span>
                </div>
                <h4 class="fw-bold mb-0 text-dark">{{ $viewsCount ?? 0 }}</h4>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center mb-2">
                    <div class="bg-success bg-opacity-10 text-success rounded p-1 me-2">
                        <i class="bi bi-envelope-fill"></i>
                    </div>
                    <span class="text-muted small fw-bold text-uppercase" style="font-size: 0.7rem;">Inquiries</span>
                </div>
                <h4 class="fw-bold mb-0 text-dark">{{ $inquiriesCount ?? 0 }}</h4>
            </div>
        </div>
    </div>
     <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center mb-2">
                    <div class="bg-warning bg-opacity-10 text-warning rounded p-1 me-2">
                         <i class="bi bi-chat-quote-fill"></i>
                    </div>
                    <span class="text-muted small fw-bold text-uppercase" style="font-size: 0.7rem;">Active Quotes</span>
                </div>
                <h4 class="fw-bold mb-0 text-dark">{{ $quotesCount ?? 0 }}</h4>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center mb-2">
                    <div class="bg-info bg-opacity-10 text-info rounded p-1 me-2">
                        <i class="bi bi-box-seam-fill"></i>
                    </div>
                    <span class="text-muted small fw-bold text-uppercase" style="font-size: 0.7rem;">Products</span>
                </div>
                <h4 class="fw-bold mb-0 text-dark">{{ auth()->user()->seller->products->count() }}</h4>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <!-- Performance Chart -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-3 h-100 overflow-hidden">
            <div class="card-header bg-white border-bottom py-2 px-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold mb-0 text-dark small text-uppercase">Profile Performance</h6>
                <div class="dropdown">
                    <button class="btn btn-xs btn-light border rounded-pill dropdown-toggle smaller-text" type="button" data-bs-toggle="dropdown">Last 30 Days</button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
                        <li><a class="dropdown-item small" href="#">Last 7 Days</a></li>
                        <li><a class="dropdown-item small" href="#">Last 30 Days</a></li>
                    </ul>
                </div>
            </div>
            <div class="card-body p-3">
                 <canvas id="performanceChart" height="200" style="max-height: 200px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Right Col: Subscription & Plan -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-3 bg-light h-100 mb-3">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="fw-bold text-dark text-uppercase small mb-0">Current Plan</h6>
                    @if(auth()->user()->seller->subscription && auth()->user()->seller->subscription->status === 'active')
                        <span class="badge bg-primary rounded-pill small">Active</span>
                    @else
                        <span class="badge bg-secondary rounded-pill small">Free</span>
                    @endif
                </div>
                <div class="text-center py-2">
                    @if(auth()->user()->seller->subscription && auth()->user()->seller->subscription->plan)
                        <div class="h3 fw-bold text-primary mb-1 text-truncate">{{ auth()->user()->seller->subscription->plan->name }}</div>
                        @if(auth()->user()->seller->subscription->end_date)
                            <p class="text-muted small mb-3">Expires in {{ auth()->user()->seller->subscription->end_date->diffInDays(now()) }} days</p>
                        @endif
                    @else
                        <div class="h3 fw-bold text-secondary mb-1">Free Plan</div>
                        <p class="text-muted small mb-3">Upgrade to unlock more features</p>
                    @endif
                    <a href="{{ route('seller.subscription.index') }}" class="btn btn-outline-primary btn-sm w-100 rounded-pill fw-bold">Upgrade Plan</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mt-0">
    <!-- Recent Inquiries -->
    <div class="col-md-6">
        <div class="card border-0 shadow-sm rounded-3 h-100">
             <div class="card-header bg-white border-bottom py-2 px-3">
                <h6 class="fw-bold mb-0 text-dark small text-uppercase">Recent Inquiries</h6>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                     @forelse(auth()->user()->seller->inquiries->take(4) as $inquiry)
                        <div class="list-group-item border-bottom-0 py-2 px-3 small hover-bg-light transition-all">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-bold text-dark d-block">{{ $inquiry->name }}</span>
                                    <span class="text-muted text-truncate d-block" style="max-width: 200px;">{{ $inquiry->message }}</span>
                                </div>
                                <span class="text-muted extra-small">{{ $inquiry->created_at->diffForHumans() }}</span>
                            </div>
                        </div>
                    @empty
                        <div class="p-4 text-center text-muted small">No recent inquiries.</div>
                    @endforelse
                </div>
             </div>
             <div class="card-footer bg-white border-top-0 py-2 text-center">
                <a href="{{ route('seller.inquiries.index') }}" class="small fw-bold text-decoration-none">View All</a>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="col-md-6">
         <div class="card border-0 shadow-sm rounded-3 h-100">
             <div class="card-header bg-white border-bottom py-2 px-3">
                <h6 class="fw-bold mb-0 text-dark small text-uppercase">Quick Shortcuts</h6>
            </div>
            <div class="card-body p-3">
                <div class="row g-2">
                    <div class="col-4">
                        <a href="{{ route('seller.products.create') }}" class="d-block bg-light rounded p-3 text-center text-decoration-none hover-bg-gray transition-all h-100 d-flex flex-column justify-content-center">
                             <i class="bi bi-plus-circle text-primary fs-4 mb-2 d-block"></i>
                             <span class="small text-dark fw-medium d-block">Add Product</span>
                        </a>
                    </div>
                     <div class="col-4">
                        <a href="{{ route('seller.microsite.settings') }}" class="d-block bg-light rounded p-3 text-center text-decoration-none hover-bg-gray transition-all h-100 d-flex flex-column justify-content-center">
                             <i class="bi bi-globe text-info fs-4 mb-2 d-block"></i>
                             <span class="small text-dark fw-medium d-block">Microsite</span>
                        </a>
                    </div>
                     <div class="col-4">
                        <a href="{{ route('seller.inquiries.index') }}" class="d-block bg-light rounded p-3 text-center text-decoration-none hover-bg-gray transition-all h-100 d-flex flex-column justify-content-center">
                             <i class="bi bi-chat-dots text-success fs-4 mb-2 d-block"></i>
                             <span class="small text-dark fw-medium d-block">Messages</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .extra-small { font-size: 0.70rem; }
    .btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
    .smaller-text { font-size: 0.8rem; }
    .hover-bg-gray:hover { background-color: #e9ecef !important; }
    .hover-bg-light:hover { background-color: #f8f9fa; }
    .transition-all { transition: all 0.2s; }
</style>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Chart init code (Can stay same, just ensure ID matches)
    const ctx = document.getElementById('performanceChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Views',
                data: [12, 19, 3, 5, 2, 3, 10], 
                borderColor: '#0d6efd',
                tension: 0.4,
                fill: true,
                backgroundColor: 'rgba(13, 110, 253, 0.05)'
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 10 } } },
                y: { beginAtZero: true, grid: { borderDash: [2, 4] }, ticks: { font: { size: 10 } } }
            }
        }
    });
</script>
@endpush