<?php include '../inc/header.php'; ?>
<style>
    .card {
        min-height: 300px; /* 필요에 따라 220~320 조절 */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
    <div class="container">
        <div class="row g-3 align-items-stretch">
            <!-- 1줄 -->
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Revenue BY MONTH</h6>
                    <div id="revenueByMonthChart" style="height: 220px;"></div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6">
                <div class="card p-3">
                    <h6>Revenue BY REGION</h6>
                    <div id="revenueByRegionChart" style="height: 220px;"></div>
                </div>
            </div>

            <!-- 2줄 -->
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Debt to Equity</h6>
                    <div id="debtEquityChart" style="height: 220px;"></div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Working Capital</h6>
                    <div id="workingCapitalChart" style="height: 220px;"></div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Return on Equity</h6>
                    <div id="returnOnEquityChart" style="height: 220px;"></div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card p-3 text-center">
                    <h6>Average Purchase Value YTD</h6>
                    <div style="font-size: 1.5rem; font-weight: bold;">$8,301</div>
                </div>
            </div>

            <!-- 3줄 -->
            <div class="col-md-6 col-lg-3">
                <div class="card p-3 text-center">
                    <h6>Leads (Last 30 Days)</h6>
                    <div style="font-size: 1.5rem; font-weight: bold; color: red;">768</div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Top Customers</h6>
                    <table class="table table-sm mb-0">
                        <thead>
                        <tr><th>Client</th><th>Revenue</th></tr>
                        </thead>
                        <tbody>
                        <tr><td>Alfreds </td><td>$330,221</td></tr>
                        <tr><td>Berglunds </td><td>$299,112</td></tr>
                        <tr><td>Centro  </td><td>$200,349</td></tr>
                        <tr><td>Ernst </td><td>$199,312</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Sales by Product Category</h6>
                    <div id="salesPieChart" style="height: 220px;"></div>
                </div>
            </div>

            <!-- 4줄 -->
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Budget</h6>
                    <div id="budgetRadarChart" style="height: 260px;"></div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card p-3">
                    <h6>Website Conversion Funnel</h6>
                    <div id="conversionFunnelChart" style="height: 260px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mb-4">
        <div class="card p-3" style="min-height:540px;">
            <h6>일정 관리 (Calendar)</h6>
            <div id="calendar"></div>
        </div>
    </div>

    <script>
        $(function() {
            // 1. Revenue By Month (Column)
            Highcharts.chart('revenueByMonthChart', {
                chart: { type: 'column' },
                title: { text: null },
                xAxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] },
                yAxis: { title: { text: 'Revenue ($M)' } },
                series: [
                    { name: 'Last Year', data: [10,12,14,16,18,20,21,19,17,14,12,8], color:'#2c4a85' },
                    { name: 'Current Year', data: [11,13,15,18,20,22,23,20,18,16,13,10], color:'#517fc4' }
                ]
            });

            // 2. Revenue By Region (Map)
            Highcharts.mapChart('revenueByRegionChart', {
                chart: { map: 'custom/world' },
                title: { text: null },
                series: [{
                    data: [
                        ['kr', 45], ['us', 28], ['de', 15], ['jp', 12], ['cn', 20], ['fr', 14], ['gb', 13]
                    ],
                    name: 'Revenue',
                    states: { hover: { color: '#BADA55' } },
                    dataLabels: { enabled: true, format: '{point.name}' }
                }]
            });

            // 3. Debt to Equity (Column)
            Highcharts.chart('debtEquityChart', {
                chart: { type: 'column' },
                title: { text: null },
                xAxis: { categories: ['Y-4','Y-3','Y-2','Y-1','Y0'] },
                yAxis: { title: { text: 'Debt to Equity Ratio' } },
                series: [
                    { name: 'Debt', data: [20,30,40,35,25], color:'#2c4a85' },
                    { name: 'Equity', data: [40,45,50,55,60], color:'#517fc4' },
                    { name: 'Debt-to-Equity', data: [50,60,70,65,55], color:'#7a99d9' }
                ]
            });

            // 4. Working Capital (Column)
            Highcharts.chart('workingCapitalChart', {
                chart: { type: 'column' },
                title: { text: null },
                xAxis: { categories: ['Mar','Apr','May','Jun','Jul','Aug','Sep'] },
                yAxis: { title: { text: 'Working Capital' } },
                series: [
                    { name: 'Cash', data: [10,9,11,12,10,8,9], color:'#2c4a85' },
                    { name: 'Investments', data: [7,8,6,7,6,7,8], color:'#517fc4' },
                    { name: 'A/R', data: [4,3,4,5,4,5,6], color:'#7a99d9' }
                ]
            });

            // 5. Return on Equity (Line)
            Highcharts.chart('returnOnEquityChart', {
                chart: { type: 'line' },
                title: { text: null },
                xAxis: { categories: ['Y-4','Y-3','Y-2','Y-1','Y0'] },
                yAxis: { title: { text: 'Return on Equity (%)' } },
                series: [
                    { name: 'ROE', data: [10,12,13,15,14], color:'#2c4a85' }
                ]
            });

            // 6. Sales Pie Chart
            Highcharts.chart('salesPieChart', {
                chart: { type: 'pie' },
                title: { text: null },
                series: [{
                    name: 'Sales',
                    colorByPoint: true,
                    data: [
                        { name: 'Scientific Equipment', y: 45 },
                        { name: 'IT Services', y: 15 },
                        { name: 'Financial Services', y: 10 },
                        { name: 'Consumer Electronics', y: 10 },
                        { name: 'Workwear', y: 10 },
                        { name: 'Cosmetics', y: 10 }
                    ]
                }]
            });

            // 7. Budget Radar (Polar Area)
            Highcharts.chart('budgetRadarChart', {
                chart: { polar: true, type: 'area' },
                title: { text: null },
                pane: { size: '80%' },
                xAxis: {
                    categories: ['Admin','Marketing','Develop','Customer','IT'],
                    tickmarkPlacement: 'on',
                    lineWidth: 0
                },
                yAxis: {
                    gridLineInterpolation: 'polygon',
                    lineWidth: 0,
                    min: 0
                },
                series: [
                    { name: 'Allocated Budget', data: [43000,19000,60000,35000,17000], color:'#2c4a85' },
                    { name: 'Actual Spending', data: [50000,39000,42000,31000,26000], color:'#517fc4' }
                ]
            });

            // 8. Website Conversion Funnel
            Highcharts.chart('conversionFunnelChart', {
                chart: { type: 'funnel' },
                title: { text: null },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b> ({point.y:,.0f})',
                            color: 'black',
                            softConnector: true
                        },
                        center: ['40%', '50%'],
                        neckWidth: '30%',
                        neckHeight: '25%'
                    }
                },
                series: [{
                    name: 'Website Conversion',
                    data: [
                        ['Visit', 313000],
                        ['Product Page', 230000],
                        ['Add to Cart', 146000],
                        ['Checkout', 110000],
                        ['Sale', 63000]
                    ]
                }]
            });

        });
    </script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            height: 500,
            initialView: 'dayGridMonth',
            locale: 'ko',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            selectable: true,
            editable: true,
            events: [
                // 샘플 일정
                { title: '회의', start: '2026-08-14', end: '2026-08-15' },
                { title: '업무 마감', start: '2026-08-17' }
            ],
            select: function(info) {
                var title = prompt('새 일정을 입력하세요:');
                if (title) {
                    calendar.addEvent({
                        title: title,
                        start: info.startStr,
                        end: info.endStr
                    });
                }
                calendar.unselect();
            },
            eventClick: function(info) {
                if (confirm("'" + info.event.title + "' 일정을 삭제할까요?")) {
                    info.event.remove();
                }
            }
        });
        calendar.render();
    });
</script>
<?php include '../inc/footer.php'; ?>
