{{-- Contoh penggunaan DashboardHelper di View --}}

@extends('layout.layout')

@section('content')
<div class="container">
    <h1>Dashboard {{ dashboard_type_label($type ?? 'pertek') }}</h1>

    <div class="row">
        @foreach($statuses as $index => $status)
            <div class="col-md-3">
                <div class="card {{ dashboard_card_background($status['id']) }}">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="badge text-bg-{{ dashboard_badge_color($type ?? 'pertek') }}">
                                    {{ dashboard_type_label($type ?? 'pertek') }}
                                </span>
                                <p class="fw-medium text-primary-light mb-1">{{ $status['label'] }}</p>
                                <h4 class="mb-1 fw-bold text-{{ $status['color'] ?? 'primary' }}-600">
                                    {{ $status['value'] }}
                                </h4>

                                {{-- Menampilkan trend jika bukan total --}}
                                @if($status['id'] !== 'total')
                                    @php
                                        $trend = dashboard_trend($type ?? 'pertek', $status['id']);
                                    @endphp
                                    <span class="badge bg-{{ $trend['color'] }}-subtle text-{{ $trend['color'] }}-main">
                                        {{ $trend['value'] > 0 ? '+' : '' }}{{ $trend['value'] }}%
                                        <i class="fas fa-arrow-{{ $trend['direction'] === 'up' ? 'up' : 'down' }}"></i>
                                    </span>
                                @endif
                            </div>
                            <div class="w-50-px h-50-px {{ dashboard_icon_circle_color($status['id']) }} rounded-circle d-flex justify-content-center align-items-center">
                                <x-lucide-{{ dashboard_status_icon($status['id']) }} class="text-white w-32-px h-32-px mb-0"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Chart menggunakan helper --}}
    @php
        $chartData = dashboard_chart_data($type ?? 'pertek');
    @endphp

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5>Distribusi {{ dashboard_type_label($type ?? 'pertek') }}</h5>
                    <div id="dashboard-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Data dari helper untuk chart
const chartData = @json($chartData);

// Implementasi chart menggunakan ApexCharts atau library lainnya
console.log('Chart Data:', chartData);
</script>
@endpush

@endsection