@extends('menu/index')
@section('konten-laporan')
<!-- component -->
<main class="app-main"> <!--begin::App Content Header-->
@include('flash-message')
<script>
setTimeout(function() { 
  var flashMessage = document.querySelector('.alert'); 
   if (flashMessage) { flashMessage.style.transition = 'opacity 1s ease'; flashMessage.style.opacity = 0; setTimeout(function() { flashMessage.remove(); }, 1000); 
   } }, 1500); </script>
   @include('Laporan/navbar-laporan')
    <div class="flex items-center justify-center p-2 row">
      <h5 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" class="text-center">Dashboard Laporan</h5>
        <!-- Author: FormBold Team -->  
        <!-- Learn More: https://formbold.com -->
                <div class="mt-4">
                    <div class="flex flex-wrap -mx-6">
                        <div class="w-full px-6 sm:w-1/2 xl:w-1/3">
                            <div class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm">
                                <div class="p-3 bg-indigo-600 bg-opacity-75 rounded-full">
                                  <i class="fa-solid fa-money-bill-transfer fa-xl"></i>
                                </div>

                                <div class="mx-5">
                                    {{-- <h4 class="text-2xl font-semibold text-gray-700">-</h4> --}}
                                    <div>{{ number_format($TotalPpnNonTunai  , 2, ',', '.') }}</div>
                                    <div class="text-gray-500">Non Tunai</div>
                                </div>
                            </div>
                        </div>

                        <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0">
                            <div class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm">
                                <div class="p-3 bg-orange-600 bg-opacity-75 rounded-full">
                                  <i class="fa-solid fa-money-bill fa-xl"></i>
                                </div>

                                <div class="mx-5">
                                   <div>{{ number_format($TotalPpnTunai, 2, ',', '.') }}</div>
                                    <div class="text-gray-500">Tunai</div>
                                </div>
                            </div>
                        </div>
                        @php
                          $TotalNonTunaiDanTunai = $TotalPpnTunai + $TotalPpnNonTunai
                        @endphp
                        <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0">
                            <div class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm">
                                <div class="p-3 bg-blue-600 bg-opacity-75 rounded-full">
                                  <i class="fa-solid fa-wallet fa-xl"></i>
                                </div>  
                                <div class="mx-5">
                                    <h4 class="semi-bold">{{ number_format($TotalNonTunaiDanTunai,2,',','.') }}</h4>
                                    <div class="text-gray-500">Total</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
      </div> 
   
</main> <!--end::App Main-->
@endsection