@extends('layout.app')

@section('content')

<div class="py-5">
    <div class="grid lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-1 gap-4">
        <div class="w-full bg-white p-3 rounded-lg flex justify-between items-center">
            <div class="p-2 bg-gray-800 rounded-lg text-white">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-20 h-20">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                </svg>  
            </div>
            <div class="items-center mb-3 pr-5">
                <h3 class="text-2xl font-base">Total barang terjual</h3>
                <p class="text-2xl my-5 font-bold">{{ $data['totalBarangTerjual'] }}</p>
            </div>
        </div>
        <div class="w-full bg-white p-3 rounded-lg flex justify-between items-center">
            <div class="p-2 bg-[#ee69b1] rounded-lg text-white">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-20 h-20">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                </svg>
            </div>
            <div class="items-center mb-3 pr-5">
                <h3 class="text-2xl font-base">Total pendapatan</h3>
                <p class="text-2xl my-5 font-bold">IDR {{ number_format($data['totalPendapatan'], 0, ',', '.') }}</p>
            </div>
        </div>
        <div class="w-full bg-white p-3 rounded-lg flex justify-between items-center">
            <div class="p-2 bg-green-500 rounded-lg text-white">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-20 h-20">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
                </svg>
            </div>
            <div class="items-center mb-3 pr-5">
                <h3 class="text-2xl font-base">Total penjualan</h3>
                <p class="text-2xl my-5 font-bold">IDR {{ number_format($data['totalPenjualan'], 0, ',', '.') }}</p>
            </div>
        </div>
    </div>
</div>
<div class="w-full h-full bg-white rounded-lg shadow-lg p-5">
    <div class="py-5">
        Hari Ini : {{ date("d-m-Y")}}  
        <div id='calendar'></div>
    </div>
</div>

@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            events: [
                @foreach($data['dailyTotals'] as $date => $total)
                    {
                        title: 'IDR {{ number_format($total, 0, ',', '.') }} ',
                        start: '{{ $date }}',
                        allDay: true
                    },
                @endforeach
            ]
        });
        calendar.render();
    });
</script>
@endsection