@extends('backend.template-admin')
@section('content')
    <section class="mb-4">
        <div class="grid gap-2">
            <div
                class="md:col-span-2 bg-white shadow-lg h-24  grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 grid-rows-5 rounded-md p-4">
                <div class="flex gap-5">
                    <div class=" bg-orange-200  rounded-md px-5 py-4">
                        <i class="fa-solid fa-users text-2xl text-orange-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Akaun</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $totalAcount }} Pengguna</h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:col-start-3">
                <div class="flex gap-5">
                    <div class=" bg-red-200  rounded-md px-5 py-4">
                        <i class="fa-solid fa-hand-holding-heart text-2xl text-red-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Penderma</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $penderma }} Penderma</h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:col-start-5">
                <div class="flex gap-5">
                    <div class=" bg-yellow-200 rounded-md px-5 py-4">
                        <i class="fa-solid fa-triangle-exclamation text-2xl text-yellow-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Report</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $reportKempen }} Report</h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:row-start-2">
                <div class="flex gap-5">
                    <div class=" bg-fuchsia-200 rounded-md px-5 py-4">
                        <i class="fa-solid fa-users-line text-2xl text-fuchsia-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Penerima</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $totalPenerima }} Penerima</h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:col-start-3 md:row-start-2">
                <div class="flex gap-5">
                    <div class=" bg-indigo-200 rounded-md px-5 py-4">
                        <i class="fa-solid fa-people-group text-2xl text-indigo-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Pengumpul Dana</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $totalPengumpulDana }}</h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:col-start-5 md:row-start-2">
                <div class="flex gap-5">
                    <div class=" bg-rose-200  rounded-md px-5 py-4">
                        <i class="fa-solid fa-video text-2xl text-rose-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Video Sokongan</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $videoKempen }} Video</h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:row-start-3">
                <div class="flex gap-5">
                    <div class=" bg-lime-200 rounded-md px-5 py-4">
                        <i class="fa-solid fa-sack-dollar text-2xl text-lime-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Uang Masuk</h4>
                        <h4 class="mt-auto text-xl font-medium"> + RM.{{ number_format($totalUangMasuk, 2) }} <i
                                class="fa-solid fa-caret-up text-yellow-400"></i>
                        </h4>
                    </div>

                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:col-start-3 md:row-start-3">
                <div class="flex gap-5">
                    <div class=" bg-stone-200  rounded-md px-5 py-4">
                        <i class="fa-solid fa-coins text-2xl text-stone-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Uang Keluar</h4>
                        <h4 class="mt-auto text-xl font-medium"> - RM.{{ number_format($totalUangKeluar, 2) }} <i
                                class="fa-solid fa-caret-down text-red-500"></i>
                        </h4>
                    </div>
                </div>
            </div>
            <div class="md:col-span-2 bg-white shadow-md h-24 rounded-md p-4 md:col-start-5 md:row-start-3">
                <div class="flex gap-5">
                    <div class=" bg-red-200  rounded-md px-5 py-4">
                        <i class="fa-solid fa-heart text-2xl text-red-500"></i>
                    </div>
                    <div>
                        <h4 class="mt-auto text-base font-medium">Jumlah Kempen</h4>
                        <h4 class="mt-auto text-xl font-medium">{{ $totalKempen }} Kempen</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full mt-8">
            <div class="flex sm:border-b sm:flex-nowrap flex-wrap gap-4 sm:justify-center border-b-orange-200">
                <div class="px-5 py-2 bg-orange-200 sm:rounded-t-lg   text-orange-600">
                    Misi Sumbangan: RM. {{ number_format($misiSumbangan, 2) }}
                </div>
                <div class="px-5 py-2 bg-orange-200  sm:rounded-t-lg   text-orange-600">
                    Mohon Bantuan: RM. {{ number_format($mohonBantuan, 2) }}
                </div>
                <div class="px-5 py-2 bg-orange-200  sm:rounded-t-lg   text-orange-600">
                    Usahawan Sosial: RM. {{ number_format($usahawanSosial, 2) }}
                </div>
                <div class="px-5 py-2 bg-orange-200  sm:rounded-t-lg   text-orange-600">
                    Zakat: RM. {{ number_format($zakat, 2) }}
                </div>
            </div>
        </div>
        <div class="p-4 bg-white">
            {!! $statistikChart->container() !!}
        </div>
        </div>
    </section>

    <script src="{{ $statistikChart->cdn() }}"></script>

    {{ $statistikChart->script() }}
@endsection