@extends('layouts.user_type.auth')

@section('content')
  <div class="container-fluid py-4">
    <!-- Welcome Card -->
    <div class="row mb-4">
      <div class="col-12">
        <div class="card mb-4">
          <div class="card-body">
            <h5>Selamat datang, {{ $user->name }}</h5>
            <p>
              <strong>Jabatan:</strong> 
              @if($user->roles->count())
                  {{ $user->roles->pluck('display_name')->join(', ') }}
              @else
                  -
              @endif
              <br>
              <strong>Kementerian/Lembaga:</strong> {{ $user->departement->nm_dpt ?? '-' }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Pagu per Departement -->
    <div class="row mb-4">
      <div class="col-12">
        <div class="card mb-4">
          <div class="card-header pb-0">
            <h6 class="mb-0">Pagu Kementerian / Lembaga</h6>
          </div>
          <div class="card-body">
            <table class="table table-bordered table-sm text-center">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Departement</th>
                  <th>Total Pagu</th>
                  <th>Realisasi</th>
                  <th>Sisa Pagu</th>
                </tr>
              </thead>
              <tbody>
                @forelse($paguPerDepartement as $idx => $dept)
                  @php
                    $totalPagu = $dept->paguUsulan->sum('total_pagu');
                    $totalRealisasi = $dept->usulanPermohonan->sum('total_realisasi');
                    $sisaPagu = $totalPagu - $totalRealisasi;
                  @endphp
                  <tr>
                    <td>{{ $idx + 1 }}</td>
                    <td>{{ $dept->nm_dpt ?? '-' }}</td>
                    <td>Rp {{ number_format($totalPagu, 0, ',', '.') }}</td>
                    <td>Rp {{ number_format($totalRealisasi, 0, ',', '.') }}</td>
                    <td>Rp {{ number_format($sisaPagu, 0, ',', '.') }}</td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="5" class="text-center text-muted">Belum ada data pagu departement</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Overview Cards -->
    <div class="row mb-4">
      <div class="col-md-3">
        <div class="card bg-gradient-primary">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <p class="text-sm text-white mb-0">Total Usulan</p>
                <h3 class="text-white mb-0">{{ $totalUsulan }}</h3>
              </div>
              <div class="icon icon-shape icon-lg bg-white bg-opacity-20 text-white rounded-circle">
                <i class="ni ni-folder-17"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card bg-gradient-info">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <p class="text-sm text-white mb-0">Draft (Review)</p>
                <h3 class="text-white mb-0">{{ $totalDraft }}</h3>
              </div>
              <div class="icon icon-shape icon-lg bg-white bg-opacity-20 text-white rounded-circle">
                <i class="ni ni-clipboard-smooth"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <p class="text-sm text-white mb-0">Approved (SPRINT)</p>
                <h3 class="text-white mb-0">{{ $totalApproved }}</h3>
              </div>
              <div class="icon icon-shape icon-lg bg-white bg-opacity-20 text-white rounded-circle">
                <i class="ni ni-check-bold"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card bg-gradient-success">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <p class="text-sm text-white mb-0">Total Nominal</p>
                <h3 class="text-white mb-0">Rp {{ number_format($totalNominal, 0, ',', '.') }}</h3>
              </div>
              <div class="icon icon-shape icon-lg bg-white bg-opacity-20 text-white rounded-circle">
                <i class="ni ni-money-coins"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
      <!-- Status Distribution Chart -->
      <div class="col-lg-6">
        <div class="card z-index-2">
          <div class="card-header pb-0">
            <h6 class="mb-0">Distribusi Status Usulan</h6>
            <p class="text-sm text-muted mb-0">Total usulan berdasarkan status</p>
          </div>
          <div class="card-body p-4">
            <div class="chart" style="height: 300px;">
              <canvas id="chart-status"></canvas>
            </div>
          </div>
        </div>
      </div>

      <!-- Kategori Distribution Chart -->
      <div class="col-lg-6">
        <div class="card z-index-2">
          <div class="card-header pb-0">
            <h6 class="mb-0">Distribusi Per Kategori</h6>
            <p class="text-sm text-muted mb-0">Jumlah usulan per kategori</p>
          </div>
          <div class="card-body p-4">
            <div class="chart" style="height: 300px;">
              <canvas id="chart-kategori"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
@endsection

@push('dashboard')
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Status Chart
      var ctxStatus = document.getElementById('chart-status').getContext('2d');
      new Chart(ctxStatus, {
        type: 'doughnut',
        data: {
          labels: {!! json_encode($statusChart['labels']) !!},
          datasets: [{
            label: 'Jumlah Usulan',
            data: {!! json_encode($statusChart['data']) !!},
            backgroundColor: {!! json_encode($statusChart['colors']) !!},
            borderColor: '#fff',
            borderWidth: 2,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                padding: 15,
                font: {
                  size: 12,
                  family: "'Open Sans', sans-serif",
                }
              }
            }
          }
        }
      });

      // Kategori Chart
      var ctxKategori = document.getElementById('chart-kategori').getContext('2d');
      var colors = ['#51cbce', '#6bd098', '#fbc658', '#fb6340', '#45b7d1', '#f7b731'];
      new Chart(ctxKategori, {
        type: 'bar',
        data: {
          labels: {!! json_encode($kategoriChart['labels']) !!},
          datasets: [{
            label: 'Jumlah Usulan',
            data: {!! json_encode($kategoriChart['data']) !!},
            backgroundColor: colors.slice(0, {!! json_encode($kategoriChart['data']) !!}.length),
            borderRadius: 4,
            borderSkipped: false,
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          indexAxis: 'y',
          plugins: {
            legend: {
              display: false,
            }
          },
          scales: {
            x: {
              ticks: {
                beginAtZero: true,
              },
              grid: {
                drawBorder: false,
              }
            },
            y: {
              grid: {
                display: false,
                drawBorder: false,
              }
            }
          }
        }
      });
    });
  </script>
  @push('dashboard')
    <script>
      window.onload = function() {
        var ctx = document.getElementById("chart-bars").getContext("2d");

        new Chart(ctx, {
          type: "bar",
          data: {
            labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
              label: "Sales",
              tension: 0.4,
              borderWidth: 0,
              borderRadius: 4,
              borderSkipped: false,
              backgroundColor: "#fff",
              data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
              maxBarThickness: 6
            }, ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              }
            },
            interaction: {
              intersect: false,
              mode: 'index',
            },
            scales: {
              y: {
                grid: {
                  drawBorder: false,
                  display: false,
                  drawOnChartArea: false,
                  drawTicks: false,
                },
                ticks: {
                  suggestedMin: 0,
                  suggestedMax: 500,
                  beginAtZero: true,
                  padding: 15,
                  font: {
                    size: 14,
                    family: "Open Sans",
                    style: 'normal',
                    lineHeight: 2
                  },
                  color: "#fff"
                },
              },
              x: {
                grid: {
                  drawBorder: false,
                  display: false,
                  drawOnChartArea: false,
                  drawTicks: false
                },
                ticks: {
                  display: false
                },
              },
            },
          },
        });


        var ctx2 = document.getElementById("chart-line").getContext("2d");

        var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(203,12,159,0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(72,72,176,0.0)');
        gradientStroke1.addColorStop(0, 'rgba(203,12,159,0)'); //purple colors

        var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);

        gradientStroke2.addColorStop(1, 'rgba(20,23,39,0.2)');
        gradientStroke2.addColorStop(0.2, 'rgba(72,72,176,0.0)');
        gradientStroke2.addColorStop(0, 'rgba(20,23,39,0)'); //purple colors

        new Chart(ctx2, {
          type: "line",
          data: {
            labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                label: "Mobile apps",
                tension: 0.4,
                borderWidth: 0,
                pointRadius: 0,
                borderColor: "#cb0c9f",
                borderWidth: 3,
                backgroundColor: gradientStroke1,
                fill: true,
                data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                maxBarThickness: 6

              },
              {
                label: "Websites",
                tension: 0.4,
                borderWidth: 0,
                pointRadius: 0,
                borderColor: "#3A416F",
                borderWidth: 3,
                backgroundColor: gradientStroke2,
                fill: true,
                data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
                maxBarThickness: 6
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              }
            },
            interaction: {
              intersect: false,
              mode: 'index',
            },
            scales: {
              y: {
                grid: {
                  drawBorder: false,
                  display: true,
                  drawOnChartArea: true,
                  drawTicks: false,
                  borderDash: [5, 5]
                },
                ticks: {
                  display: true,
                  padding: 10,
                  color: '#b2b9bf',
                  font: {
                    size: 11,
                    family: "Open Sans",
                    style: 'normal',
                    lineHeight: 2
                  },
                }
              },
              x: {
                grid: {
                  drawBorder: false,
                  display: false,
                  drawOnChartArea: false,
                  drawTicks: false,
                  borderDash: [5, 5]
                },
                ticks: {
                  display: true,
                  color: '#b2b9bf',
                  padding: 20,
                  font: {
                    size: 11,
                    family: "Open Sans",
                    style: 'normal',
                    lineHeight: 2
                  },
                }
              },
            },
          },
        });
      }
    </script>
  @endpush