@extends('layouts.admin')

@section('content')

<div class="row g-4">

    <div class="col-lg-3">
        <div class="card dashboard-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <small>Total Suppliers</small>
                    <h2 class="mb-0">5</h2>
                </div>

                <div class="icon-box bg-soft-primary">
                    <i class="bi bi-building"></i>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-3">
        <div class="card dashboard-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <small>Total Products</small>
                    <h2 class="mb-0">1500</h2>
                </div>

                <div class="icon-box bg-soft-success">
                    <i class="bi bi-box-seam"></i>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-3">
        <div class="card dashboard-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <small>G2G Listings</small>
                    <h2 class="mb-0">845</h2>
                </div>

                <div class="icon-box bg-soft-warning">
                    <i class="bi bi-bag"></i>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-3">
        <div class="card dashboard-card shadow-sm">
            <div class="card-body d-flex justify-content-between align-items-center">

                <div>
                    <small>Failed Sync</small>
                    <h2 class="mb-0">3</h2>
                </div>

                <div class="icon-box bg-soft-danger">
                    <i class="bi bi-exclamation-triangle"></i>
                </div>

            </div>
        </div>
    </div>

</div>

<div class="row mt-4">

    <div class="col-lg-4">

        <div class="card table-card shadow-sm">

            <div class="card-header bg-white">
                API Status
            </div>

            <div class="card-body">

                <p>
                    Relograde API :
                    <span class="status-online">● Online</span>
                </p>

                <p>
                    G2G API :
                    <span class="status-online">● Online</span>
                </p>

                <p>
                    Last Sync :
                    <strong>2 Minutes Ago</strong>
                </p>

            </div>

        </div>

    </div>

    <div class="col-lg-8">

        <div class="card table-card shadow-sm">

            <div class="card-header bg-white">
                Recent Activities
            </div>

            <div class="card-body">

                <table class="table align-middle">

                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>Activity</th>
                        <th>Status</th>
                    </tr>
                    </thead>

                    <tbody>

                    <tr>
                        <td>30-05-2026</td>
                        <td>Inventory Sync</td>
                        <td>
                            <span class="badge bg-success">
                                Success
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td>30-05-2026</td>
                        <td>Price Sync</td>
                        <td>
                            <span class="badge bg-warning">
                                Pending
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td>30-05-2026</td>
                        <td>Catalog Import</td>
                        <td>
                            <span class="badge bg-danger">
                                Failed
                            </span>
                        </td>
                    </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

@endsection