@extends('backend.layout.layouts')

@section('content')
    <linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <div class="container p-4 mx-auto mt-6">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                <!-- Total Payments -->
                <div class="p-6 bg-white rounded-lg shadow">
                    <div class="flex items-center mb-4">
                        <i class="text-3xl text-green-500 fas fa-dollar-sign"></i>
                        <h2 class="ml-4 text-xl font-semibold">Total Payments</h2>
                    </div>
                    <p class="text-3xl font-bold">{{ $totalPayments }}</p>
                </div>

                <!-- Total Channel Payments -->
                <div class="p-6 bg-white rounded-lg shadow">
                    <div class="flex items-center mb-4">
                        <i class="text-3xl text-blue-500 fas fa-cogs"></i>
                        <h2 class="ml-4 text-xl font-semibold">Total Channel Payments</h2>
                    </div>
                    <p class="text-3xl font-bold">{{ $totalChannelPayments }}</p>
                </div>

                <!-- Total Products -->
                <div class="p-6 bg-white rounded-lg shadow">
                    <div class="flex items-center mb-4">
                        <i class="text-3xl text-yellow-500 fas fa-boxes"></i>
                        <h2 class="ml-4 text-xl font-semibold">Total Products</h2>
                    </div>
                    <p class="text-3xl font-bold">{{ $totalProducts }}</p>
                </div>
            </div>

            <!-- Chart -->

        </div>
    @endsection