@extends('Core.Sidebar')

@section('content')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>

<style>
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}
</style>

<div class="max-w-full bg-gradient-to-br from-indigo-50 to-blue-50 rounded-lg shadow-md dark:bg-gray-800 p-6">
  <!-- Filter Section -->
  <div class="flex flex-wrap items-center gap-4 mb-6">
    <h2 class="text-xl font-bold text-indigo-700 dark:text-white">Dashboard Keuangan</h2>
    <form action="{{ route('home.filter') }}" method="GET" class="flex flex-wrap items-center gap-4 sm:ml-auto">
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-600">Tanggal Awal</span>
        <input type="date" name="start_date" class="form-input box bg-white border border-indigo-200 rounded-lg text-gray-600" value="{{ $startDate }}">
      </div>
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-600">Tanggal Akhir</span>
        <input type="date" name="end_date" class="form-input box bg-white border border-indigo-200 rounded-lg text-gray-600" value="{{ $endDate }}">
      </div>
      <button type="submit" class="btn bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600">
        Filter
      </button>
    </form>
  </div>

  <!-- Main Metrics -->
  <div class="grid grid-cols-2 gap-4 mb-6">
    <!-- Total Pendapatan Card -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <div class="flex items-center">
        <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center me-3">
          <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">Total Pendapatan</p>
          <h3 class="text-2xl font-bold text-gray-800">
            @if($totalPendapatan < 0)
              -Rp {{ number_format(abs($totalPendapatan), 0, ',', '.') }}
            @else
              Rp {{ number_format($totalPendapatan, 0, ',', '.') }}
            @endif
          </h3>
          <p class="text-sm text-gray-500">Periode: {{ date('d/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}</p>
        </div>
      </div>
    </div>

    <!-- Total Beban Card -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <div class="flex items-center">
        <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center me-3">
          <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
          </svg>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">Total Beban</p>
          <h3 class="text-2xl font-bold text-gray-800">
            @if($totalBeban < 0)
              -Rp {{ number_format(abs($totalBeban), 0, ',', '.') }}
            @else
              Rp {{ number_format($totalBeban, 0, ',', '.') }}
            @endif
          </h3>
          <p class="text-sm text-gray-500">Periode: {{ date('d/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Detail Section -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <!-- Rincian Pendapatan -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <h4 class="text-lg font-semibold text-gray-700 mb-4">Rincian Pendapatan</h4>
      @foreach($pendapatan as $item)
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center">
          <span class="text-sm text-gray-600">{{ ucwords($item['kategori']) }}</span>
          <span class="text-xs text-gray-400 ml-2">({{ $item['kode_akun'] }})</span>
        </div>
        <span class="text-sm font-medium {{ $item['nominal'] < 0 ? 'text-red-600' : 'text-green-600' }}">
          @if($item['nominal'] < 0)
            -Rp {{ number_format(abs($item['nominal']), 0, ',', '.') }}
          @else
            Rp {{ number_format($item['nominal'], 0, ',', '.') }}
          @endif
        </span>
      </div>
      @endforeach
      <div class="mt-4 pt-4 border-t">
        <div class="flex justify-between items-center">
          <span class="font-semibold">Total Pendapatan</span>
          <span class="font-semibold {{ $totalPendapatan < 0 ? 'text-red-600' : 'text-green-600' }}">
            @if($totalPendapatan < 0)
              -Rp {{ number_format(abs($totalPendapatan), 0, ',', '.') }}
            @else
              Rp {{ number_format($totalPendapatan, 0, ',', '.') }}
            @endif
          </span>
        </div>
      </div>
    </div>

    <!-- Rincian Beban -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <h4 class="text-lg font-semibold text-gray-700 mb-4">Rincian Beban</h4>
      @foreach($beban as $item)
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center">
          <span class="text-sm text-gray-600">{{ ucwords($item['kategori']) }}</span>
          <span class="text-xs text-gray-400 ml-2">({{ $item['kode_akun'] }})</span>
        </div>
        <span class="text-sm font-medium {{ $item['nominal'] < 0 ? 'text-green-600' : 'text-red-600' }}">
          @if($item['nominal'] < 0)
            -Rp {{ number_format(abs($item['nominal']), 0, ',', '.') }}
          @else
            Rp {{ number_format($item['nominal'], 0, ',', '.') }}
          @endif
        </span>
      </div>
      @endforeach
      <div class="mt-4 pt-4 border-t">
        <div class="flex justify-between items-center">
          <span class="font-semibold">Total Beban</span>
          <span class="font-semibold {{ $totalBeban < 0 ? 'text-green-600' : 'text-red-600' }}">
            @if($totalBeban < 0)
              -Rp {{ number_format(abs($totalBeban), 0, ',', '.') }}
            @else
              Rp {{ number_format($totalBeban, 0, ',', '.') }}
            @endif
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- Profit/Loss Section -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <!-- Total Laba/Rugi Card -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <h4 class="text-lg font-semibold text-gray-700 mb-4">Laba/Rugi Total</h4>
      <div class="flex items-center">
        <div class="w-12 h-12 rounded-lg {{ $labaRugiTotal >= 0 ? 'bg-green-100' : 'bg-red-100' }} flex items-center justify-center me-3">
          <svg class="w-6 h-6 {{ $labaRugiTotal >= 0 ? 'text-green-600' : 'text-red-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $labaRugiTotal >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3' }}"></path>
          </svg>
        </div>
        <div>
          <h3 class="text-2xl font-bold {{ $labaRugiTotal >= 0 ? 'text-green-600' : 'text-red-600' }}">
            @if($labaRugiTotal < 0)
              -Rp {{ number_format(abs($labaRugiTotal), 0, ',', '.') }}
            @else
              Rp {{ number_format($labaRugiTotal, 0, ',', '.') }}
            @endif
          </h3>
          <p class="text-sm text-gray-500">{{ $labaRugiTotal >= 0 ? 'Laba' : 'Rugi' }}</p>
        </div>
      </div>
    </div>

    <!-- Laba/Rugi Bulan Ini Card -->
    <div class="bg-white rounded-xl p-6 shadow-sm">
      <h4 class="text-lg font-semibold text-gray-700 mb-4">Laba/Rugi Periode Ini</h4>
      <div class="flex items-center">
        <div class="w-12 h-12 rounded-lg {{ $labaRugiBulanIni >= 0 ? 'bg-green-100' : 'bg-red-100' }} flex items-center justify-center me-3">
          <svg class="w-6 h-6 {{ $labaRugiBulanIni >= 0 ? 'text-green-600' : 'text-red-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $labaRugiBulanIni >= 0 ? 'M5 10l7-7m0 0l7 7m-7-7v18' : 'M19 14l-7 7m0 0l-7-7m7 7V3' }}"></path>
          </svg>
        </div>
        <div>
          <h3 class="text-2xl font-bold {{ $labaRugiBulanIni >= 0 ? 'text-green-600' : 'text-red-600' }}">
            @if($labaRugiBulanIni < 0)
              -Rp {{ number_format(abs($labaRugiBulanIni), 0, ',', '.') }}
            @else
              Rp {{ number_format($labaRugiBulanIni, 0, ',', '.') }}
            @endif
          </h3>
          <p class="text-sm text-gray-500">{{ $labaRugiBulanIni >= 0 ? 'Laba' : 'Rugi' }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Bar Chart -->
    <div class="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
      <div class="flex justify-between">
        <div>
          <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
            @if($labaRugiTotal < 0)
              -Rp {{ number_format(abs($labaRugiTotal), 0, ',', '.') }}
            @else
              Rp {{ number_format($labaRugiTotal, 0, ',', '.') }}
            @endif
          </h5>
          <p class="text-base font-normal text-gray-500 dark:text-gray-400">Laba/Rugi Total</p>
        </div>
        <div class="flex items-center px-2.5 py-0.5 text-base font-semibold {{ $growthPercentage >= 0 ? 'text-green-500' : 'text-red-500' }} dark:text-green-500 text-center">
          {{ number_format($growthPercentage, 1) }}%
          <svg class="w-3 h-3 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4"/>
          </svg>
        </div>
      </div>
      <div class="chart-container">
        <canvas id="financial-trend-chart"></canvas>
      </div>
      <div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
        <div class="flex justify-between items-center pt-5">
          <!-- Button -->
          <button
            id="dropdownDefaultButton"
            data-dropdown-toggle="lastDaysdropdown"
            data-dropdown-placement="bottom"
            class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white"
            type="button">
            {{ date('d/m/Y', strtotime($startDate)) }} - {{ date('d/m/Y', strtotime($endDate)) }}
            <svg class="w-2.5 m-2.5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
            </svg>
          </button>
          <!-- Dropdown menu -->
          <div id="lastDaysdropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
              <li>
                <a href="{{ route('home.filter', ['start_date' => Carbon\Carbon::yesterday()->format('Y-m-d'), 'end_date' => Carbon\Carbon::yesterday()->format('Y-m-d')]) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Kemarin</a>
              </li>
              <li>
                <a href="{{ route('home.filter', ['start_date' => Carbon\Carbon::today()->format('Y-m-d'), 'end_date' => Carbon\Carbon::today()->format('Y-m-d')]) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Hari Ini</a>
              </li>
              <li>
                <a href="{{ route('home.filter', ['start_date' => Carbon\Carbon::now()->subDays(7)->format('Y-m-d'), 'end_date' => Carbon\Carbon::now()->format('Y-m-d')]) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">7 Hari Terakhir</a>
              </li>
              <li>
                <a href="{{ route('home.filter', ['start_date' => Carbon\Carbon::now()->subDays(30)->format('Y-m-d'), 'end_date' => Carbon\Carbon::now()->format('Y-m-d')]) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">30 Hari Terakhir</a>
              </li>
              <li>
                <a href="{{ route('home.filter', ['start_date' => Carbon\Carbon::now()->subDays(90)->format('Y-m-d'), 'end_date' => Carbon\Carbon::now()->format('Y-m-d')]) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">90 Hari Terakhir</a>
              </li>
            </ul>
          </div>
          <div class="flex items-center space-x-2">
            <button onclick="updateChartType('line')" class="text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700">Garis</button>
            <button onclick="updateChartType('bar')" class="text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white px-3 py-1 rounded-lg">Bar</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Category Chart -->
    <div class="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
      <div class="flex flex-col w-full">
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center">
            <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white">Distribusi Neraca Saldo</h5>
            <svg data-popover-target="chart-info" data-popover-placement="bottom" class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-pointer ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm0 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5.034V12a1 1 0 0 1-2 0v-1.418a1 1 0 0 1 1.038-.999 1.436 1.436 0 0 0 1.488-1.441 1.501 1.501 0 1 0-3-.116.986.986 0 0 1-1.037.961 1 1 0 0 1-.96-1.037A3.5 3.5 0 1 1 11 11.466Z"/>
            </svg>
          </div>
          <button id="dateRangeButton" data-dropdown-toggle="dateRangeDropdown" data-dropdown-ignore-click-outside-class="datepicker" type="button" class="inline-flex items-center text-blue-700 dark:text-blue-600 font-medium hover:underline">
            {{ date('d M', strtotime($startDate)) }} - {{ date('d M', strtotime($endDate)) }}
            <svg class="w-3 h-3 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
            </svg>
          </button>
        </div>
        <div class="flex flex-col items-center justify-center py-4">
          <div class="chart-container" style="height: 260px; width: 260px;">
            <canvas id="category-distribution-chart"></canvas>
          </div>
        </div>
        <div class="flex flex-wrap justify-center gap-4 mt-4">
          @php
            $pieColors = ['#FF5733','#33FF57','#3357FF','#FF33A1','#FFBD33','#10b981','#f472b6','#6366f1','#f59e42','#e11d48'];
          @endphp
          @foreach($pieLabels as $i => $label)
            <div class="flex items-center space-x-2">
              <span class="w-3 h-3 rounded-full" style="background: {{ $pieColors[$i % count($pieColors)] }}"></span>
              <span class="text-sm">{{ $label }}</span>
            </div>
          @endforeach
        </div>
        <div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-700 mt-6 pt-4">
          <div class="flex items-center">
            <button id="dropdownDefaultButton" data-dropdown-toggle="lastDaysdropdown" data-dropdown-placement="bottom" class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white" type="button">
              Last 7 days
              <svg class="w-2.5 m-2.5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <div id="lastDaysdropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
              <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
                <li><a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Kemarin</a></li>
                <li><a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Hari Ini</a></li>
                <li><a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">7 Hari Terakhir</a></li>
                <li><a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">30 Hari Terakhir</a></li>
                <li><a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">90 Hari Terakhir</a></li>
              </ul>
            </div>
          </div>
          <a href="#" class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2">
            LAPORAN KATEGORI
            <svg class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Transactions Table -->
  <div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <div class="p-6 border-b border-gray-100">
      <h4 class="text-lg font-semibold text-gray-700">Transaksi Terbaru</h4>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kode</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategori</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Keterangan</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pendapatan</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beban</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          @foreach($recentTransactions as $transaction)
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ date('d/m/Y', strtotime($transaction->Tanggal)) }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ $transaction->kode }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ $transaction->kategori }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ $transaction->keterangan }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">
              {{ $transaction->uang_masuk > 0 ? 'Rp ' . number_format($transaction->uang_masuk, 0, ',', '.') : '-' }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">
              {{ $transaction->uang_keluar > 0 ? 'Rp ' . number_format($transaction->uang_keluar, 0, ',', '.') : '-' }}
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
// Debugging untuk memastikan script berjalan
console.log('Script started');

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded');
    
    // Format number to Rupiah
    function formatRupiah(number) {
        return 'Rp ' + number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    try {
        // Financial Trend Chart
        const trendCtx = document.getElementById('financial-trend-chart');
        if (trendCtx) {
            const monthlyData = @json($monthlyTotals);
            const labels = monthlyData.map(item => {
                const date = new Date(item.periode);
                return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
            });
            const pendapatanData = monthlyData.map(item => parseFloat(item.total_debit) || 0);
            const bebanData = monthlyData.map(item => parseFloat(item.total_kredit) || 0);

            // Create gradient for area fill
            const gradientFill = trendCtx.getContext('2d').createLinearGradient(0, 0, 0, 400);
            gradientFill.addColorStop(0, 'rgba(34, 197, 94, 0.2)');
            gradientFill.addColorStop(1, 'rgba(34, 197, 94, 0)');

            window.trendChart = new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Pendapatan',
                        data: pendapatanData,
                        borderColor: 'rgb(34, 197, 94)',
                        backgroundColor: gradientFill,
                        fill: true,
                        tension: 0.4,
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgb(34, 197, 94)',
                        pointHoverBorderColor: '#fff',
                        pointHoverBorderWidth: 2,
                        cubicInterpolationMode: 'monotone',
                        stepped: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const value = context.parsed.y;
                                    return formatRupiah(value);
                                },
                                title: function(context) {
                                    return `Tanggal: ${context[0].label}`;
                                }
                            },
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            titleFont: {
                                size: 14,
                                weight: 'bold'
                            },
                            bodyFont: {
                                size: 13
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: 11
                                },
                                maxRotation: 0,
                                autoSkip: true,
                                maxTicksLimit: 7
                            }
                        }
                    },
                    elements: {
                        line: {
                            tension: 0.4
                        }
                    }
                }
            });

            // Debug untuk memastikan data terisi
            console.log('Chart Data:', {
                labels: labels,
                data: pendapatanData
            });
        }

        // Pie Chart Neraca Saldo
        var ctx = document.getElementById('category-distribution-chart').getContext('2d');
        var pieLabels = @json($pieLabels);
        var pieData = @json($pieData);
        var pieColors = [
            '#FF5733','#33FF57','#3357FF','#FF33A1','#FFBD33','#10b981','#f472b6','#6366f1','#f59e42','#e11d48'
        ];
        var total = pieData.reduce((a, b) => a + b, 0);
        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: pieLabels,
                datasets: [{
                    data: pieData,
                    backgroundColor: pieColors,
                    borderColor: '#fff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    datalabels: {
                        color: '#fff',
                        font: { weight: 'bold', size: 16 },
                        formatter: function(value) {
                            var percent = total ? (value / total * 100) : 0;
                            return percent.toFixed(1) + '%';
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                var label = context.label || '';
                                var value = context.parsed || 0;
                                var percent = total ? (value / total * 100) : 0;
                                return label + ': ' + value.toLocaleString('id-ID', {style:'currency', currency:'IDR'}) + ' (' + percent.toFixed(1) + '%)';
                            }
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
    } catch (error) {
        console.error('Error creating charts:', error);
    }
});

// Function to update chart type
function updateChartType(type) {
    if (window.trendChart) {
        window.trendChart.config.type = type;
        window.trendChart.update();
    }
}
</script>

@endsection