@extends('layouts.seller')

@section('title', 'Microsite Analytics')

@section('content')
@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">Microsite Analytics</h4>
        <p class="text-muted mb-0">Track your public profile performance</p>
    </div>
    <a href="{{ route('seller.microsite.settings') }}" class="btn btn-light border shadow-sm">
        <i class="bi bi-arrow-left me-1"></i> Back to Settings
    </a>
</div>

<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card stat-card-primary h-100">
            <div class="stat-icon bg-white bg-opacity-25 text-white">
                <i class="bi bi-eye-fill"></i>
            </div>
            <div class="text-white">
                <span class="stat-value d-block">{{ number_format($settings->page_views) }}</span>
                <span class="stat-label text-white-50">Total Page Views</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card stat-card-success h-100">
            <div class="stat-icon bg-white bg-opacity-25 text-white">
                <i class="bi bi-envelope-fill"></i>
            </div>
            <div class="text-white">
                <span class="stat-value d-block">{{ number_format($settings->inquiry_count) }}</span>
                <span class="stat-label text-white-50">Total Inquiries</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card stat-card-info h-100">
            <div class="stat-icon bg-white bg-opacity-25 text-white">
                <i class="bi bi-box-fill"></i>
            </div>
            <div class="text-white">
                <span class="stat-value d-block">{{ $seller->products->count() }}</span>
                <span class="stat-label text-white-50">Products Listed</span>
            </div>
        </div>
    </div>
</div>

<!-- Microsite Link -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-4 px-4">
        <h5 class="fw-bold mb-3 text-primary"><i class="bi bi-link-45deg me-2"></i>Your Microsite Link</h5>
        <div class="input-group">
            <input type="text" class="form-control form-control-lg bg-light border-end-0" readonly
                   value="{{ route('seller.public.profile', $seller->slug) }}" id="micrositeLink">
            <button class="btn btn-primary-gradient px-4" onclick="copyLink()">
                <i class="bi bi-clipboard me-1"></i> Copy Link
            </button>
            <a href="{{ route('seller.public.profile', $seller->slug) }}" target="_blank" class="btn btn-outline-primary px-3">
                <i class="bi bi-box-arrow-up-right"></i>
            </a>
        </div>
        <small class="text-muted mt-2 d-block"><i class="bi bi-info-circle me-1"></i>Share this link on social media, business cards, or email signatures to attract more buyers.</small>
    </div>
</div>

<!-- Content Stats -->
<div class="row g-4">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white py-3 border-bottom">
                <h5 class="mb-0 fw-bold text-dark"><i class="bi bi-pie-chart me-2 text-primary"></i>Content Overview</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
                        <span class="fw-medium"><i class="bi bi-image me-2 text-primary"></i>Banners</span>
                        <span class="badge bg-primary-subtle text-primary rounded-pill px-3">{{ $seller->banners->count() }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
                        <span class="fw-medium"><i class="bi bi-award me-2 text-success"></i>Certificates</span>
                        <span class="badge bg-success-subtle text-success rounded-pill px-3">{{ $seller->certificates->count() }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
                        <span class="fw-medium"><i class="bi bi-chat-quote me-2 text-warning"></i>Testimonials</span>
                        <span class="badge bg-warning-subtle text-warning rounded-pill px-3">{{ $seller->testimonials->count() }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
                        <span class="fw-medium"><i class="bi bi-question-circle me-2 text-info"></i>FAQs</span>
                        <span class="badge bg-info-subtle text-info rounded-pill px-3">{{ $seller->faqs->count() }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 px-4">
                        <span class="fw-medium"><i class="bi bi-file-text me-2 text-secondary"></i>Custom Pages</span>
                        <span class="badge bg-secondary-subtle text-secondary rounded-pill px-3">{{ $seller->pages->count() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white py-3 border-bottom">
                <h5 class="mb-0 fw-bold text-dark"><i class="bi bi-search me-2 text-info"></i>SEO Status</h5>
            </div>
            <div class="card-body p-4">
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold text-dark">Meta Title</span>
                        @if($settings->meta_title)
                            <span class="badge bg-success-subtle text-success"><i class="bi bi-check-circle me-1"></i>Optimized</span>
                        @else
                            <span class="badge bg-warning-subtle text-warning"><i class="bi bi-exclamation-circle me-1"></i>Missing</span>
                        @endif
                    </div>
                    <div class="progress" style="height: 6px;">
                        <div class="progress-bar {{ $settings->meta_title ? 'bg-success' : 'bg-warning' }}" role="progressbar" style="width: {{ $settings->meta_title ? '100%' : '10%' }}"></div>
                    </div>
                </div>
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold text-dark">Meta Description</span>
                        @if($settings->meta_description)
                            <span class="badge bg-success-subtle text-success"><i class="bi bi-check-circle me-1"></i>Optimized</span>
                        @else
                            <span class="badge bg-warning-subtle text-warning"><i class="bi bi-exclamation-circle me-1"></i>Missing</span>
                        @endif
                    </div>
                    <div class="progress" style="height: 6px;">
                        <div class="progress-bar {{ $settings->meta_description ? 'bg-success' : 'bg-warning' }}" role="progressbar" style="width: {{ $settings->meta_description ? '100%' : '10%' }}"></div>
                    </div>
                </div>
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold text-dark">Theme Color</span>
                        <span class="d-flex align-items-center text-muted small">
                            <span class="d-inline-block rounded-circle me-2 border shadow-sm" style="width: 16px; height: 16px; background: {{ $seller->theme_color ?? '#0d6efd' }}"></span>
                            {{ $seller->theme_color ?? 'Default Blue' }}
                        </span>
                    </div>
                </div>
                <div class="mb-0">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-bold text-dark">Company Logo</span>
                        @if($seller->logo)
                            <span class="badge bg-success-subtle text-success"><i class="bi bi-check-circle me-1"></i>Uploaded</span>
                        @else
                            <span class="badge bg-danger-subtle text-danger"><i class="bi bi-x-circle me-1"></i>Missing</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function copyLink() {
    var input = document.getElementById('micrositeLink');
    input.select();
    document.execCommand('copy');
    // You might want to use a toast notification here instead of alert
    // but for now we keep it simple or use a custom toast if available
    alert('Link copied to clipboard!');
}
</script>
@endsection