@extends('layouts.seller')

@section('title', 'Analytics')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="page-title fw-bold text-dark fs-5 mb-0">Analytics</h4>
        <p class="text-muted small mb-0">Track your business performance.</p>
    </div>
    <div class="dropdown">
        <button class="btn btn-white btn-sm border shadow-sm rounded-pill px-3 dropdown-toggle text-muted small" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-calendar3 me-1"></i> This Month
        </button>
        <ul class="dropdown-menu shadow-sm border-0 small">
            <li><a class="dropdown-item" href="#">Today</a></li>
            <li><a class="dropdown-item" href="#">Last 7 Days</a></li>
            <li><a class="dropdown-item" href="#">This Month</a></li>
            <li><a class="dropdown-item" href="#">Last 6 Months</a></li>
        </ul>
    </div>
</div>

<!-- Compact Stats -->
<div class="row g-2 mb-3">
    <div class="col-6 col-md-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 justify-content-between">
                    <div>
                         <div class="text-uppercase fw-bold text-muted" style="font-size: 0.65rem;">Products</div>
                         <div class="h4 fw-bold mb-0 text-dark mt-1">{{ $seller->products->count() }}</div>
                    </div>
                     <div class="bg-primary bg-opacity-10 text-primary p-2 rounded">
                        <i class="bi bi-box-seam-fill"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-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 justify-content-between">
                    <div>
                         <div class="text-uppercase fw-bold text-muted" style="font-size: 0.65rem;">Inquiries</div>
                         <div class="h4 fw-bold mb-0 text-dark mt-1">{{ $seller->inquiries->count() }}</div>
                    </div>
                     <div class="bg-success bg-opacity-10 text-success p-2 rounded">
                        <i class="bi bi-envelope-open-fill"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-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 justify-content-between">
                    <div>
                         <div class="text-uppercase fw-bold text-muted" style="font-size: 0.65rem;">Quotes</div>
                         <div class="h4 fw-bold mb-0 text-dark mt-1">{{ $seller->quotes->count() }}</div>
                    </div>
                     <div class="bg-warning bg-opacity-10 text-warning p-2 rounded">
                        <i class="bi bi-chat-quote-fill"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-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 justify-content-between">
                    @php $settings = $seller->getOrCreateMicrositeSettings(); @endphp
                    <div>
                         <div class="text-uppercase fw-bold text-muted" style="font-size: 0.65rem;">Total Views</div>
                         <div class="h4 fw-bold mb-0 text-dark mt-1">{{ number_format($settings->page_views ?? 0) }}</div>
                    </div>
                     <div class="bg-info bg-opacity-10 text-info p-2 rounded">
                        <i class="bi bi-eye-fill"></i>
                    </div>
                </div>
            </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">Performance Overview</h6>
            </div>
            <div class="card-body p-3">
                <canvas id="analyticsChart" height="250"></canvas>
            </div>
        </div>
    </div>

    <!-- Quick Stats List -->
    <div class="col-lg-4">
        <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">
                <h6 class="fw-bold mb-0 text-dark small text-uppercase">Key Metrics</h6>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush small">
                    <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-2 border-bottom-light">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-box-seam text-primary me-3"></i>
                            <span class="text-muted fw-medium">Active Products</span>
                        </div>
                        <span class="fw-bold text-dark">{{ $seller->products->where('is_approved', true)->count() }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-2 border-bottom-light">
                        <div class="d-flex align-items-center">
                             <i class="bi bi-hourglass-split text-warning me-3"></i>
                            <span class="text-muted fw-medium">Pending Products</span>
                        </div>
                        <span class="fw-bold text-dark">{{ $seller->products->where('is_approved', false)->count() }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-2 border-bottom-light">
                        <div class="d-flex align-items-center">
                             <i class="bi bi-check-lg text-success me-3"></i>
                            <span class="text-muted fw-medium">Accepted Quotes</span>
                        </div>
                        <span class="fw-bold text-dark">{{ $seller->quotes->where('status', 'accepted')->count() }}</span>
                    </div>
                     <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-2 border-bottom-light">
                        <div class="d-flex align-items-center">
                             <i class="bi bi-chat-heart-fill text-info me-3"></i>
                            <span class="text-muted fw-medium">Testimonials</span>
                        </div>
                        <span class="fw-bold text-dark">{{ $seller->testimonials->count() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Assuming you have data pass from controller, or use dummy for now
    const ctx = document.getElementById('analyticsChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
            datasets: [{
                label: 'Views',
                data: [50, 75, 60, 90],
                backgroundColor: '#0d6efd',
                borderRadius: 4
            }, {
                label: 'Inquiries',
                data: [12, 19, 8, 15],
                backgroundColor: '#198754',
                borderRadius: 4
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { position: 'top', align: 'end', labels: { boxWidth: 10, usePointStyle: true } } },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 10 } } },
                y: { beginAtZero: true, grid: { borderDash: [2, 4] }, ticks: { font: { size: 10 } } }
            }
        }
    });
</script>
@endpush