<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="wrapper-dashboard">
	<div class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/10</p>
	            <i class="svg-cctv-fixed w-px-30 d-block" title="고정형CCTV"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-crackdown-road w-px-30 d-block" title="도보단속"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-cctv-drive w-px-30 d-block" title="이동형CCTV"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1">10/10</p>
	            <i class="svg-crackdown-minwon w-px-30 d-block" title="민원(즉시단속)"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">
	        단속관리 바로가기 >
	    </div>
	</div>
	
	<div class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/10</p>
	            <i class="svg-target-lvy w-px-30 d-block" title="등록대상"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-target-transfer w-px-30 d-block" title="이첩대상"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">
	        부과관리 바로가기 >
	    </div>
	</div>
	
	<div class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/10</p>
	            <i class="svg-sendstat-guide w-px-30 d-block" title="계도장 발송현황"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-sendstat-before w-px-30 d-block" title="사전통보 발송현황"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-sendstat-nop w-px-30 d-block" title="고지서 발송현황"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">
	        발송관리 바로가기 >
	    </div>
	</div>
	
	<div class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/10</p>
	            <i class="svg-opn-rcp w-px-30 d-block" title="접수"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-opn-decision w-px-30 d-block" title="수용/미수용"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1">2/3</p>
	            <i class="svg-opn-selfdrop w-px-30 d-block" title="자진취하"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">
	        의견진술관리 바로가기 >
	    </div>
	</div>
</div>
<div class="wrapper-dashboard">
	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">단속 자료 통계(유형별)</h5>
	        <div>건수(최근 n일)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="lineChartCardBody">
	        <canvas id="lineChart" class="chartjs" data-height="500" style="max-height: 300px;"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>
	
	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">단속통계</h5>
	        <div>처리유형별(일별)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="doughnutChart1CardBody">
	        <canvas id="doughnutChart1" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>
	
	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">발송통계</h5>
	        <div>발송유형별(일별)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="doughnutChart2CardBody">
	        <canvas id="doughnutChart2" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>
	
	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">의견진술통계</h5>
	        <div>처리유형별(일별)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="doughnutChart3CardBody">
	        <canvas id="doughnutChart3" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>
</div>

<c:set var="dashboardScript" scope="request">

var falseLineChart = `<svg xmlns="http://www.w3.org/2000/svg" 
height="250" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
<path class="skeleton" d="M3 3v17a1 1 0 0 0 1 1h17v-2H5V3H3z"></path>
<path class="skeleton" d="M15.293 14.707a.999.999 0 0 0 1.414 0l5-5-1.414-1.414L16 12.586l-2.293-2.293a.999.999 0 0 0-1.414 0l-5 5 1.414 1.414L13 12.414l2.293 2.293z"></path>
</svg>`;

var falseDoughnutChart = `<svg xmlns="http://www.w3.org/2000/svg" 
height="250" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
<path class="skeleton" d="M13 6c2.507.423 4.577 2.493 5 5h4c-.471-4.717-4.283-8.529-9-9v4z"></path>
<path class="skeleton" d="M18 13c-.478 2.833-2.982 4.949-5.949 4.949-3.309 0-6-2.691-6-6C6.051 8.982 8.167 6.478 11 6V2c-5.046.504-8.949 4.773-8.949 9.949 0 5.514 4.486 10 10 10 5.176 0 9.445-3.903 9.949-8.949h-4z"></path>
</svg>`;

fnMakeSkeleton();
sleep(3000).then(() => fnLoadStatisticsData());


//지연
function sleep(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

//데이터 로딩 전 이미지 표시
function fnMakeSkeleton(){

	$("#lineChart").hide();
	$("#doughnutChart1").hide();
	$("#doughnutChart2").hide();
	$("#doughnutChart3").hide();
	
	$("#lineChartCardBody").append(falseLineChart);
	$("#doughnutChart1CardBody").append(falseDoughnutChart);
	$("#doughnutChart2CardBody").append(falseDoughnutChart);
	$("#doughnutChart3CardBody").append(falseDoughnutChart);
}

//통계 데이터 조회
function fnLoadStatisticsData(){

	//TODO : ajax

	var data = {};
	fnRenderDashboardContents(data);
}

//콘텐츠(차트) 표시
function fnRenderDashboardContents(data){
		$("#lineChartCardBody svg").remove();
		$("#doughnutChart1CardBody svg").remove();
		$("#doughnutChart2CardBody svg").remove();
		$("#doughnutChart3CardBody svg").remove();
	
		$("#lineChart").show();
		$("#doughnutChart1").show();
		$("#doughnutChart2").show();
		$("#doughnutChart3").show();
		
		// Color Variables
	    const yellowColor = '#ffe800';
	    let borderColor, gridColor, tickColor;

	    borderColor = '#f0f0f0';
	    gridColor = '#f0f0f0';
	    tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color

	    const lineChart = document.getElementById('lineChart');
	    if (lineChart) {
	        const lineChartVar = new Chart(lineChart, {
	            type: 'line',
	            data: {
	                labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
	                datasets: [
	                    {
	                        data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
	                        label: '고정형',
	                        borderColor: config.colors.danger,
	                        tension: 0.5,
	                        pointStyle: 'circle',
	                        backgroundColor: config.colors.danger,
	                        fill: false,
	                        pointRadius: 1,
	                        pointHoverRadius: 5,
	                        pointHoverBorderWidth: 5,
	                        pointBorderColor: 'transparent',
	                        pointHoverBorderColor: config.colors.cardColor,
	                        pointHoverBackgroundColor: config.colors.danger
	                    },
	                    {
	                        data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
	                        label: '도보',
	                        borderColor: config.colors.primary,
	                        tension: 0.5,
	                        pointStyle: 'circle',
	                        backgroundColor: config.colors.primary,
	                        fill: false,
	                        pointRadius: 1,
	                        pointHoverRadius: 5,
	                        pointHoverBorderWidth: 5,
	                        pointBorderColor: 'transparent',
	                        pointHoverBorderColor: config.colors.cardColor,
	                        pointHoverBackgroundColor: config.colors.primary
	                    },
	                    {
	                        data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
	                        label: '민원',
	                        borderColor: yellowColor,
	                        tension: 0.5,
	                        pointStyle: 'circle',
	                        backgroundColor: yellowColor,
	                        fill: false,
	                        pointRadius: 1,
	                        pointHoverRadius: 5,
	                        pointHoverBorderWidth: 5,
	                        pointBorderColor: 'transparent',
	                        pointHoverBorderColor: config.colors.cardColor,
	                        pointHoverBackgroundColor: yellowColor
	                    }
	                ]
	            },
	            options: {
	                responsive: true,
	                maintainAspectRatio: false,
	                scales: {
	                    x: {
	                        grid: {
	                            color: borderColor,
	                            drawBorder: false,
	                            borderColor: borderColor
	                        },
	                        ticks: {
	                            color: "black"
	                        }
	                    },
	                    y: {
	                        scaleLabel: {
	                            display: true
	                        },
	                        min: 0,
	                        max: 400,
	                        ticks: {
	                            color: "black",
	                            stepSize: 100
	                        },
	                        grid: {
	                            color: borderColor,
	                            drawBorder: false,
	                            borderColor: borderColor
	                        }
	                    }
	                },
	                plugins: {
	                    tooltip: {
	                        rtl: true,
	                        backgroundColor: config.colors.cardColor,
	                        titleColor: config.colors.headingColor,
	                        bodyColor: config.colors.bodyColor,
	                        borderWidth: 1,
	                        borderColor: borderColor
	                    },
	                    legend: {
	                        position: 'left',
	                        align: 'stretch',
	                        rtl: true,
	                        labels: {
	                            usePointStyle: true,
	                            padding: 6,
	                            boxWidth: 12,
	                            boxHeight: 30,
	                            color: "black"
	                        }
	                    }
	                }
	            }
	        });
	    }


	    // Color Variables
	    const cyanColor = '#28dac6',
	        orangeLightColor = '#FDAC34';
	    let cardColor, headingColor, labelColor, legendColor;

	    cardColor = config.colors.cardColor;
	    headingColor = config.colors.headingColor;
	    labelColor = config.colors.textMuted;
	    legendColor = config.colors.bodyColor;

	    const doughnutChart1 = document.getElementById('doughnutChart1');
	    if (doughnutChart1) {
	        const doughnutChartVar = new Chart(doughnutChart1, {
	            type: 'doughnut',
	            data: {
	                labels: ['단속', '계고', '서손'],
	                datasets: [
	                    {
	                        data: [10, 10, 80],
	                        backgroundColor: [cyanColor, orangeLightColor, config.colors.primary],
	                        borderWidth: 0,
	                        pointStyle: 'rectRounded'
	                    }
	                ]
	            },
	            options: {
	                responsive: true,
	                animation: {
	                    duration: 500
	                },
	                cutout: '68%',
	                plugins: {
	                    legend: {
	                        display: true,
	                        position : 'left'
	                    },
	                    tooltip: {
	                        callbacks: {
	                            label: function (context) {
	                                const label = context.label || '';
	                                const value = context.parsed;
	                                const output = ' ' + label + ' : ' + value + ' %';
	                                return output;
	                            }
	                        },
	                        // Updated default tooltip UI
	                        rtl: true,
	                        backgroundColor: cardColor,
	                        titleColor: headingColor,
	                        bodyColor: legendColor,
	                        borderWidth: 1,
	                        borderColor: borderColor
	                    }
	                }
	            }
	        });
	    }

	    const doughnutChart2 = document.getElementById('doughnutChart2');
	    if (doughnutChart2) {
	        const doughnutChartVar = new Chart(doughnutChart2, {
	            type: 'doughnut',
	            data: {
	                labels: ['계고장', '사전통보', '고지서'],
	                datasets: [
	                    {
	                        data: [10, 10, 80],
	                        backgroundColor: [cyanColor, orangeLightColor, config.colors.primary],
	                        borderWidth: 0,
	                        pointStyle: 'rectRounded'
	                    }
	                ]
	            },
	            options: {
	                responsive: true,
	                animation: {
	                    duration: 500
	                },
	                cutout: '68%',
	                plugins: {
	                    legend: {
	                        display: true,
	                        position : 'left'
	                    },
	                    tooltip: {
	                        callbacks: {
	                            label: function (context) {
	                                const label = context.label || '';
	                                const value = context.parsed;
	                                const output = ' ' + label + ' : ' + value + ' %';
	                                return output;
	                            }
	                        },
	                        // Updated default tooltip UI
	                        rtl: true,
	                        backgroundColor: cardColor,
	                        titleColor: headingColor,
	                        bodyColor: legendColor,
	                        borderWidth: 1,
	                        borderColor: borderColor
	                    }
	                }
	            }
	        });
	    }

	    const doughnutChart3 = document.getElementById('doughnutChart3');
	    if (doughnutChart3) {
	        const doughnutChartVar = new Chart(doughnutChart3, {
	            type: 'doughnut',
	            data: {
	                labels: ['수용', '미수용', '자진취하'],
	                datasets: [
	                    {
	                        data: [10, 10, 80],
	                        backgroundColor: [cyanColor, orangeLightColor, config.colors.primary],
	                        borderWidth: 0,
	                        pointStyle: 'rectRounded'
	                    }
	                ]
	            },
	            options: {
	                responsive: true,
	                animation: {
	                    duration: 500
	                },
	                cutout: '68%',
	                plugins: {
	                    legend: {
	                        display: true,
	                        position : 'left'
	                    },
	                    tooltip: {
	                        callbacks: {
	                            label: function (context) {
	                                const label = context.label || '';
	                                const value = context.parsed;
	                                const output = ' ' + label + ' : ' + value + ' %';
	                                return output;
	                            }
	                        },
	                        // Updated default tooltip UI
	                        rtl: true,
	                        backgroundColor: cardColor,
	                        titleColor: headingColor,
	                        bodyColor: legendColor,
	                        borderWidth: 1,
	                        borderColor: borderColor
	                    }
	                }
	            }
	        });
	    }
}


</c:set>