@extends('admin.layout.dashboard_master')

@section('content')
<main id="main" class="main">
    <div class="pagetitle mb-4">
        <h1>Store Analytics</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('american.plastic.admin.dashboard')}}">Home</a></li>
                <li class="breadcrumb-item active">Analytics</li>
            </ol>
        </nav>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs nav-tabs-bordered mb-4" id="analyticsTabs" role="tablist" style="border-bottom: 2px solid #ebeef4;">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales-pane" type="button" role="tab" aria-controls="sales-pane" aria-selected="true" style="font-weight: 600; padding: 12px 20px; font-size: 0.95rem;">
                <i class="bi bi-currency-dollar me-2 text-primary"></i>Sales & Business
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="web-tab" data-bs-toggle="tab" data-bs-target="#web-pane" type="button" role="tab" aria-controls="web-pane" aria-selected="false" style="font-weight: 600; padding: 12px 20px; font-size: 0.95rem;">
                <i class="bi bi-globe me-2 text-success"></i>Web Traffic & Visitors
            </button>
        </li>
    </ul>

    <!-- Tab Contents -->
    <div class="tab-content" id="analyticsTabsContent">
        <!-- Sales & Business Tab -->
        <div class="tab-pane fade show active" id="sales-pane" role="tabpanel" aria-labelledby="sales-tab">
            <div class="card" style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.02);">
                <div class="card-body p-0">
                    @livewire('sales-analytics')
                </div>
            </div>
        </div>

        <!-- Web Traffic Tab -->
        <div class="tab-pane fade" id="web-pane" role="tabpanel" aria-labelledby="web-tab">
            <div class="card" style="border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.02);">
                <div class="card-body p-0">
                    @livewire('web-analytics')
                </div>
            </div>
        </div>
    </div>
</main>
@endsection