@extends('layouts.headatmin')

@section('title', 'Dashboard Admin')

@section('content')
<!-- Begin Page Content -->
<div class="container-fluid">


    <!-- Content Row -->
       <div class="row">

        <!-- Earnings (Monthly) Card Example -->

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2 hover-card p-4">
                <a href="{{ url('/admin/pelanggan') . '?' . http_build_query(['status' => 'tidak aktif', 'search' => '']) }}" class="stretched-link text-decoration-none text-reset">

                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Pelanggan Baru
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pelangganTidakAktif }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>



        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2 hover-card p-4">
                <a href="{{ url('/admin/pelanggan') . '?' . http_build_query(['status' => 'aktif', 'search' => '']) }}" class="stretched-link text-decoration-none text-reset">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Pelanggan Aktif

                                </div>
                                        
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pelangganAktif }}</div>

                                
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>


        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
    <div class="card border-left-success shadow h-100 py-2 hover-card p-4">
        <a href="{{ url('/admin/pelanggan?status=nonaktif') }}"
            class="stretched-link text-decoration-none text-reset">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Belum Bayar</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                            Rp {{ number_format($totalBelumBayar, 0, ',', '.') }}
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>





        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2 hover-card p-4">
                <a href="{{ route('aduanpelanggan.index') }}" class="stretched-link text-decoration-none text-reset">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Aduan Pelanggan</div>

                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalAduan }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-comments fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Content Row -->
  
    <div class="row">

        <!-- Area Chart -->
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div
                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">grafik pendapatan</h6>
                    <div class="dropdown no-arrow">
             
                    </div>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                                    
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        
                        <form method="GET" action="{{ route('dashboard') }}">
                            <select name="tahun" onchange="this.form.submit()" class="form-select form-select-sm">
                                @for($i = date('Y'); $i >= 2024; $i--)
                                    <option value="{{ $i }}" {{ $selectedYear == $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                            </select>
                        </form>
                    </div>

                    <div class="chart-wrapper">
                        <canvas id="earningsChart"></canvas>
                    </div>
                    <br>



                </div>
            </div>
        </div>

        <!-- Pie Chart -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div
                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Masalah Lapangan</h6>
                </div>
                <!-- Card Body -->
                <div class="container mt-5">
                    

                    
                        <!-- Canvas Chart -->
                        <canvas id="myPieChart" style="max-height: 250px;"></canvas>

                        <!-- Legend -->
                        <div id="legend" class="d-flex justify-content-center mt-3 flex-wrap"></div>

                        <!-- PHP: Olah Data Masalah Bulan Ini -->
                        @php
                            use Carbon\Carbon;

                            // Inisialisasi jumlah masalah
                            $masalahCounts = [
                                'router' => 0,
                                'jalur putus' => 0,
                                'sambungan kabel' => 0,
                            ];

                            foreach ($aduanPelanggan as $aduan) {
                                $tanggal = Carbon::parse($aduan->tanggal);
                                $sekarang = Carbon::now();

                                if ($tanggal->month === $sekarang->month && $tanggal->year === $sekarang->year && $aduan->status === 'selesai') {
                                    $masalah = strtolower(trim($aduan->masalah_lapangan));
                                    if (array_key_exists($masalah, $masalahCounts)) {
                                        $masalahCounts[$masalah]++;
                                    }
                                }
                            }

                            $colors = ['#4e73df', '#1cc88a', '#36b9cc'];
                            $totalMasalah = array_sum($masalahCounts);
                        @endphp

                        <!-- Inject data ke div tersembunyi untuk JS -->
                        @if($totalMasalah > 0)
                            <div id="chart-data" style="display: none;">
                                @php $i = 0; @endphp
                                @foreach($masalahCounts as $label => $jumlah)
                                    @if($jumlah > 0)
                                        <div 
                                            data-label="{{ ucfirst($label) }}" 
                                            data-value="{{ $jumlah }}" 
                                            data-color="{{ $colors[$i % count($colors)] }}">
                                        </div>
                                        @php $i++; @endphp
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="text-center my-4">
                                <p class="mt-2 text-muted">Belum ada aduan bulan ini</p>
                            </div>
                        @endif
                 </div>
            
                 
            </div>
        <br></div>


</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById("earningsChart").getContext("2d");

    const earningsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($labels) !!},
            datasets: [{
                label: 'Pendapatan',
                data: {!! json_encode($data) !!},
                borderColor: "#4e73df",
                backgroundColor: "rgba(78, 115, 223, 0.2)", // Area transparan
                tension: 0.4,
                pointBackgroundColor: "#4e73df",
                pointBorderColor: "#4e73df",
                pointRadius: 4,
                pointHoverRadius: 6,
                fill: true,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    grid: {
                        display: false
                    }
                },
                y: {
                    beginAtZero: true,
                    grid: {
                        color: "#f1f1f1"
                    },
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + value.toLocaleString('id-ID');
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
</script>


<!-- Script Donut Chart -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const chartDataDivs = document.querySelectorAll('#chart-data div');
        if (chartDataDivs.length === 0) return;

        const labels = [];
        const data = [];
        const backgroundColors = [];

        chartDataDivs.forEach(div => {
            labels.push(div.dataset.label);
            data.push(parseInt(div.dataset.value));
            backgroundColors.push(div.dataset.color);
        });

        const ctx = document.getElementById('myPieChart').getContext('2d');

        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: backgroundColors,
                    hoverOffset: 10
                }]
            },
            options: {
                responsive: true,
                cutout: '70%',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                return ${context.label}: ${context.parsed};
                            }
                        }
                    }
                }
            }
        });

        // Manual legend
        const legendContainer = document.getElementById('legend');
        labels.forEach((label, index) => {
            const color = backgroundColors[index];
            const value = data[index];
            const item = document.createElement('div');
            item.className = 'd-flex align-items-center mx-2 mb-2';
            item.innerHTML = `
                <span style="width: 12px; height: 12px; background-color: ${color}; display: inline-block; border-radius: 50%; margin-right: 8px;"></span>
                <span>${label}: ${value}</span>
            `;
            legendContainer.appendChild(item);
        });
    });
</script>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  
  <style>
     .chart-wrapper {
        position: relative;
        height: 300px;
        max-width: 100%;
    }
    .legend-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }
    .chart-card {
        max-height: 400px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .chart-container {
        position: relative;
        height: 300px; /* Batasi tinggi canvas di dalam card */
    }
  </style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const dataContainer = document.querySelectorAll('#chart-data > div');
    const labels = [];
    const values = [];
    const colors = [];

    dataContainer.forEach(item => {
        labels.push(item.dataset.label);
        values.push(Number(item.dataset.value));
        colors.push(item.dataset.color);
    });

    const ctx = document.getElementById('myPieChart')?.getContext('2d');
    if (!ctx || labels.length === 0) return;

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: values,
                backgroundColor: colors,
                borderWidth: 1
            }]
        },
        options: {
            cutout: '70%',
            plugins: { legend: { display: false } }
        }
    });

    // Manual Legend
    const legend = document.getElementById('legend');
    labels.forEach((label, i) => {
        const color = colors[i];
        const value = values[i];
        const item = document.createElement('div');
        item.className = "me-3 d-flex align-items-center";
        item.innerHTML = `
            <span class="legend-circle" style="background-color: ${color}; width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 5px;"></span> 
            <span>${label} - ${value}</span>`;
        legend.appendChild(item);
    });
});
</script>

<!-- /.container-fluid -->
<style>
    .hover-card {
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
    }

    .hover-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

</style>

@endsection