order_gizi/resources/views/dashboard/survey/index.blade.php

@extends('dashboard.layouts.main')
@section('body_main')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Dashboard /</span> Survei
    </h4>

    <div class="row mb-4">
        <div class="col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100" style="border-left: 5px solid #00a99d !important;">
                <div class="card-header pb-0">
                    <h6 class=" fw-normal mb-0">Statistik Pengguna Baru Total <b id="confirm_pb_total"></b></h6>
                </div>
                <div class="card-body">
                    <canvas id="barChartBaru" style="max-height: 150px;"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100" style="border-left: 5px solid #005eb8 !important;">
                <div class="card-header pb-0">
                    <h6 class=" fw-normal mb-0">Statistik Pelanggan Setia Total <b id="confirm_ps_total"></b></h6>
                </div>
                <div class="card-body">
                    <canvas id="barChartLama" style="max-height: 150px;"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Data Detail Survei <strong id="confirm_date_survey"></strong></h5>
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="exportSurvei()">
                    <i class="fa fa-download me-1"></i> Export
                </button>
                <div class="input-group input-group-sm" style="width: 240px;">
                    <span class="input-group-text bg-white"><i class="fa fa-calendar-alt"></i></span>
                    <input type="text" class="form-control tanggal-input" id="tanggal" placeholder="Pilih tanggal" readonly>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table class="table" id="datatableSurvey"></table>
        </div>
    </div>
</div>
@include('dashboard.survey.modal.export')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const datatable = $("#datatableSurvey");
    const modalExport = document.getElementById('modalExportSurvei');
    // Inisialisasi variabel Chart agar bisa di-destroy saat update
    let chartBaruObj, chartLamaObj;

    function initDt(selectDate = []) {
        datatable.bootstrapTable('destroy');
        datatable.bootstrapTable({
            url: "/dashboard/datatable/survey",
            method: 'get',
            queryParams: function(params) {
                params.tanggal = selectDate;
                return params;
            },
            showColumns: true,
            pagination: true,
            serverSide: true,
            pageSize: 10,
            columns: [
                { title: "Nama Pelanggan", field: 'order.nama_pemesan' },
                {
                    title: "Type Survei",
                    field: 'type',
                    formatter: (v, row) => row?.type === "pengguna_baru" ? "Pengguna Baru" : "Pelanggan Setia"
                },
                { title: "Kepuasan", field: 'kepuasan' },
                { title: "Kritik dan Saran", field: 'keterangan' },
            ],
        });
    }

    // Fungsi perbaikan untuk Bar Chart Horizontal
    function updateBarChart(chartId, puas, tidakPuas) {
        const ctx = document.getElementById(chartId).getContext('2d');

        // Hancurkan instance lama agar tidak tumpang tindih saat hover
        if (chartId === 'barChartBaru' && chartBaruObj) chartBaruObj.destroy();
        if (chartId === 'barChartLama' && chartLamaObj) chartLamaObj.destroy();

        const config = {
            type: 'bar',
            data: {
                labels: ['Puas', 'Tidak Puas'],
                datasets: [{
                    data: [puas, tidakPuas],
                    backgroundColor: [
                        chartId === 'barChartBaru' ? '#00a99d' : '#005eb8',
                        '#dc3545'
                    ],
                    borderRadius: 5,
                    barThickness: 20
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { enabled: true }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: { display: false },
                        ticks: { stepSize: 1, precision: 0 }
                    },
                    y: { grid: { display: false } }
                }
            }
        };

        if (chartId === 'barChartBaru') chartBaruObj = new Chart(ctx, config);
        else chartLamaObj = new Chart(ctx, config);
    }

    async function loadCharts(selectDate = []) {
        try {
            const dateParam = encodeURIComponent(JSON.stringify(selectDate));
            const response = await fetch(`/dashboard/chart/survey?tanggal=${dateParam}`);
            const data = await response.json();
            console.log(data);

            // 1. Update Statistik Bar Chart Pengguna Baru
            if(data.kepuasan_baru) {
                updateBarChart('barChartBaru', data.kepuasan_baru.puas, data.kepuasan_baru.tidak_puas);
                $("#confirm_pb_total").text(data.kepuasan_baru.total);
            }

            // 2. Update Statistik Bar Chart Pelanggan Setia
            if(data.kepuasan_lama) {
                updateBarChart('barChartLama', data.kepuasan_lama.puas, data.kepuasan_lama.tidak_puas);
                $("#confirm_ps_total").text(data.kepuasan_lama.total);
            }

        } catch (error) {
            console.error("Error load chart:", error);
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        flatpickr('#tanggal', {
            dateFormat: "Y-m-d",
            mode: "multiple",
            locale: "id",
            onValueUpdate: function(selectedDates) {
                const formatted = selectedDates.map(d => {
                    const year = d.getFullYear();
                    const month = String(d.getMonth() + 1).padStart(2, '0');
                    const day = String(d.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                });

                initDt(formatted);
                loadCharts(formatted);

                let text = formatted.length > 0 ? ': ' + formatted.join(', ') : 'Hari Ini';
                $("#confirm_date_survey").text(text);
            }
        });

        $("#confirm_date_survey").text('Hari Ini');
        initDt();
        loadCharts();
    });

    function exportSurvei(){
        new bootstrap.Modal(modalExport).show()
    }
</script>
@endsection