@include('admin.header', [
    'title' => 'BAOPCL Dashboard',
    'active' => 'dashboard',
    'searchPlaceholder' => 'Search farmers, orders, certificates, reports...'
])

<section class="hero mb-3">
    <div class="hero-content">
        <h1>Welcome to BAOPCL</h1>
        <div class="hero-tagline mb-3">
            <span>Empowering Farmers</span>
            <span>|</span>
            <span>Quality Ginger</span>
            <span>|</span>
            <span>Sustainable Growth</span>
        </div>
        <p class="mb-4 text-secondary">
            Bokakhat Agro Organic Producer Company Limited works with farmers to produce and supply high quality organic ginger from Bokakhat, Assam to global markets.
        </p>
        <a class="btn-earth" href="{{ route('admin.blog.index') }}">
            Manage Organic Stories
            <i class="bi bi-arrow-right"></i>
        </a>
    </div>
    <div class="hero-badges">
        <div class="hero-badge"><i class="bi bi-leaf-fill"></i><span>Organic<br>Produce</span></div>
        <div class="hero-badge"><i class="bi bi-people-fill"></i><span>Farmer<br>First</span></div>
        <div class="hero-badge"><i class="bi bi-globe2"></i><span>Export<br>Ready</span></div>
        <div class="hero-badge"><i class="bi bi-shield-check"></i><span>Quality<br>Checked</span></div>
    </div>
</section>

<section class="row g-3 mb-3">
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card" data-watermark="&#xf579;">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon"><i class="bi bi-people-fill"></i></div>
                <div class="min-w-0">
                    <div class="fw-bold text-secondary small">Total Farmers</div>
                    <div class="stat-value">1,284 <span class="trend"><i class="bi bi-arrow-up"></i>12%</span></div>
                    <div class="small text-muted">Across Bokakhat regions</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card amber" data-watermark="&#xf6cc;">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon"><i class="bi bi-sunrise-fill"></i></div>
                <div class="min-w-0">
                    <div class="fw-bold text-secondary small">Farm Clusters</div>
                    <div class="stat-value">42 <span class="trend"><i class="bi bi-arrow-up"></i>8%</span></div>
                    <div class="small text-muted">Active procurement clusters</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card amber" data-watermark="&#xf1c7;">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon"><i class="bi bi-box-seam-fill"></i></div>
                <div class="min-w-0">
                    <div class="fw-bold text-secondary small">Bulk Orders</div>
                    <div class="stat-value">28 <span class="trend"><i class="bi bi-arrow-up"></i>27%</span></div>
                    <div class="small text-muted">Domestic & export orders</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="stat-card" data-watermark="&#xf377;">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon"><i class="bi bi-shield-check"></i></div>
                <div class="min-w-0">
                    <div class="fw-bold text-secondary small">Certificates</div>
                    <div class="stat-value">96 <span class="trend"><i class="bi bi-arrow-up"></i>6%</span></div>
                    <div class="small text-muted">Passed quality checks</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="row g-3 mb-3">
    <div class="col-12 col-xl-5">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-flower1"></i></span>Procurement Overview</h2>
                <div class="d-flex flex-wrap gap-3 small fw-semibold">
                    <span><i class="bi bi-circle-fill text-success me-1"></i>Fresh Ginger</span>
                    <span><i class="bi bi-circle-fill text-warning me-1"></i>Dried Ginger</span>
                </div>
            </div>
            <div class="card-body-pad">
                <div class="chart-box"><canvas id="procurementChart"></canvas></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#b8782d"><i class="bi bi-box-seam-fill"></i></span>Ginger Stock Levels</h2>
            </div>
            <div class="card-body-pad stock-wrap">
                <div class="stock-ring">
                    <div class="stock-center">
                        <span><strong>286</strong>MT<br><span class="small fw-semibold text-muted">Total Stock</span></span>
                    </div>
                </div>
                <div>
                    <div class="legend-row">
                        <span class="dot" style="background:#2f7b35"></span>
                        <span><strong>Fresh Ginger</strong><br><span class="fw-bold fs-5">180 MT</span></span>
                        <span class="fw-bold text-muted">63%</span>
                    </div>
                    <div class="legend-row">
                        <span class="dot" style="background:#b8782d"></span>
                        <span><strong>Dried Ginger</strong><br><span class="fw-bold fs-5">76 MT</span></span>
                        <span class="fw-bold text-muted">27%</span>
                    </div>
                    <div class="legend-row mb-0">
                        <span class="dot" style="background:#e6c78f"></span>
                        <span><strong>Ginger Powder</strong><br><span class="fw-bold fs-5">30 MT</span></span>
                        <span class="fw-bold text-muted">10%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-xl-3">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-globe2"></i></span>Export vs Domestic</h2>
            </div>
            <div class="card-body-pad">
                <div class="chart-box"><canvas id="ordersChart"></canvas></div>
            </div>
        </div>
    </div>
</section>

<section class="row g-3">
    <div class="col-12 col-xl-5">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#a96824"><i class="bi bi-people-fill"></i></span>Recent Farmer Registrations</h2>
            </div>
            <div class="card-body-pad pt-1">
                <div class="table-responsive">
                    <table class="table wide-table align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Farmer Name</th>
                                <th>Village / Area</th>
                                <th>Cluster</th>
                                <th>Land Area</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td class="fw-semibold">Ramen Tanti</td>
                                <td>Borpathar</td>
                                <td>Bokakhat</td>
                                <td>2.5</td>
                                <td><span class="pill">Active</span></td>
                                <td><i class="bi bi-three-dots-vertical"></i></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td class="fw-semibold">Mukul Saikia</td>
                                <td>Dihingia</td>
                                <td>Garukhuti</td>
                                <td>1.8</td>
                                <td><span class="pill">Active</span></td>
                                <td><i class="bi bi-three-dots-vertical"></i></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td class="fw-semibold">Parbati Gogoi</td>
                                <td>Chakraguri</td>
                                <td>Bokakhat</td>
                                <td>3.0</td>
                                <td><span class="pill">Active</span></td>
                                <td><i class="bi bi-three-dots-vertical"></i></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td class="fw-semibold">Jiten Moran</td>
                                <td>Salmara</td>
                                <td>Jorhat Road</td>
                                <td>1.2</td>
                                <td><span class="pill">Active</span></td>
                                <td><i class="bi bi-three-dots-vertical"></i></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-7 col-xl-4">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#b8782d"><i class="bi bi-geo-alt-fill"></i></span>Sourcing Network</h2>
            </div>
            <div class="card-body-pad">
                <div class="map-panel">
                    <span class="pin" style="left:43%; top:43%;"><i class="bi bi-geo-alt-fill"></i></span>
                    <span class="pin" style="left:25%; top:58%;"><i class="bi bi-geo-alt-fill"></i></span>
                    <span class="pin" style="left:60%; top:35%;"><i class="bi bi-geo-alt-fill"></i></span>
                    <span class="pin" style="left:72%; top:25%;"><i class="bi bi-geo-alt-fill"></i></span>
                    <span class="map-place" style="left:18%; top:73%;">Golaghat</span>
                    <span class="map-place" style="left:69%; top:45%;">Jorhat</span>
                    <span class="map-label">Bokakhat<br><span class="small fw-semibold">Assam</span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-5 col-xl-3">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#a96824"><i class="bi bi-file-earmark-text-fill"></i></span>Certifications & Reports</h2>
            </div>
            <div class="card-body-pad">
                <div class="report-item"><i class="bi bi-flower1"></i><span class="fw-semibold">Organic Certification</span><span class="pill">Valid</span></div>
                <div class="report-item"><i class="bi bi-file-earmark-medical-fill"></i><span class="fw-semibold">Quality Test Reports</span><span class="pill">Latest</span></div>
                <div class="report-item"><i class="bi bi-clipboard2-check-fill"></i><span class="fw-semibold">Export Compliance</span><span class="pill">Updated</span></div>
                <div class="report-item"><i class="bi bi-shield-check"></i><span class="fw-semibold">FSSAI Registration</span><span class="pill">Valid</span></div>
                <div class="report-item"><i class="bi bi-qr-code-scan"></i><span class="fw-semibold">Scanner Forms</span><span class="pill">Active</span></div>
            </div>
        </div>
    </div>
</section>

@include('admin.footer')