@extends('layouts.master')

@section('title', 'Administration SaaS - NafaPOS')

@section('page-title', 'Administration SaaS')

@section('content')

    <div class="mb-4">

        <h4 class="mb-1 fw-semibold">
            Administration SaaS
        </h4>

        <p class="text-muted mb-0">
            Gérez la plateforme NafaPOS.
        </p>

    </div>

    <div class="row g-4">

        <div class="col-xl-3 col-md-6">

            <div class="card border-0 shadow-sm h-100">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>
                            <p class="text-muted mb-1">
                                Entreprises
                            </p>

                            <h3 class="mb-0 fw-bold">
                                0
                            </h3>
                        </div>

                        <div
                            class="d-flex align-items-center justify-content-center rounded-3"
                            style="width:48px;height:48px;background:#eaf6ef;color:#198754;"
                        >
                            <i class="bi bi-buildings fs-4"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-xl-3 col-md-6">

            <div class="card border-0 shadow-sm h-100">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>
                            <p class="text-muted mb-1">
                                Abonnements actifs
                            </p>

                            <h3 class="mb-0 fw-bold">
                                0
                            </h3>
                        </div>

                        <div
                            class="d-flex align-items-center justify-content-center rounded-3"
                            style="width:48px;height:48px;background:#fff7e6;color:#f59e0b;"
                        >
                            <i class="bi bi-credit-card fs-4"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-xl-3 col-md-6">

            <div class="card border-0 shadow-sm h-100">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>
                            <p class="text-muted mb-1">
                                Utilisateurs
                            </p>

                            <h3 class="mb-0 fw-bold">
                                0
                            </h3>
                        </div>

                        <div
                            class="d-flex align-items-center justify-content-center rounded-3"
                            style="width:48px;height:48px;background:#eaf6ef;color:#198754;"
                        >
                            <i class="bi bi-people fs-4"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-xl-3 col-md-6">

            <div class="card border-0 shadow-sm h-100">

                <div class="card-body">

                    <div class="d-flex align-items-center justify-content-between">

                        <div>
                            <p class="text-muted mb-1">
                                Chiffre d'affaires
                            </p>

                            <h3 class="mb-0 fw-bold">
                                0 FCFA
                            </h3>
                        </div>

                        <div
                            class="d-flex align-items-center justify-content-center rounded-3"
                            style="width:48px;height:48px;background:#eaf6ef;color:#198754;"
                        >
                            <i class="bi bi-graph-up-arrow fs-4"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="row g-4 mt-1">

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

            <div class="card border-0 shadow-sm">

                <div class="card-header bg-white border-0 py-3">

                    <h6 class="mb-0 fw-semibold">
                        Activité de la plateforme
                    </h6>

                </div>

                <div class="card-body">

                    <div class="text-center py-5">

                        <i
                            class="bi bi-bar-chart text-muted"
                            style="font-size:40px;"
                        ></i>

                        <p class="text-muted mt-3 mb-0">
                            Les statistiques apparaîtront ici.
                        </p>

                    </div>

                </div>

            </div>

        </div>

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

            <div class="card border-0 shadow-sm">

                <div class="card-header bg-white border-0 py-3">

                    <h6 class="mb-0 fw-semibold">
                        Administration
                    </h6>

                </div>

                <div class="card-body">

                    <div class="d-grid gap-2">

                        <button class="btn btn-success">
                            <i class="bi bi-building me-2"></i>
                            Nouvelle entreprise
                        </button>

                        <button class="btn btn-outline-success">
                            <i class="bi bi-credit-card me-2"></i>
                            Gérer les abonnements
                        </button>

                        <button class="btn btn-outline-secondary">
                            <i class="bi bi-people me-2"></i>
                            Utilisateurs
                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection