<?php
require_once 'config.php';
require_once 'includes/Database.php';
require_once 'includes/Auth.php';

Auth::requireLogin();

$pageTitle = 'Grafik Demo - Tüm Türler';
include 'includes/header.php';

$db = new Database();

// Demo verileri - Günlük trendler
$startDate = date('Y-m-d', strtotime('-6 days'));
$endDate = date('Y-m-d');

$dailyTrends = $db->fetchAll("
    SELECT
        call_date,
        SUM(call_count) as total_calls,
        SUM(answered_count) as total_answered,
        SUM(unanswered_count) as total_unanswered,
        SUM(TIME_TO_SEC(total_duration)) / 3600.0 as total_duration_hours
    FROM incoming_calls
    WHERE call_date BETWEEN ? AND ?
    GROUP BY call_date
    ORDER BY call_date ASC
", [$startDate, $endDate]);

// Demo verileri - Top 6 personel
$topPerformers = $db->fetchAll("
    SELECT
        u.full_name,
        SUM(ic.call_count) as total_calls,
        SUM(ic.answered_count) as total_answered,
        SUM(ic.unanswered_count) as total_unanswered,
        SUM(TIME_TO_SEC(ic.total_duration)) / 3600.0 as total_duration_hours
    FROM users u
    JOIN incoming_calls ic ON u.id = ic.user_id
    WHERE ic.call_date BETWEEN ? AND ?
    GROUP BY u.id
    ORDER BY total_calls DESC
    LIMIT 6
", [$startDate, $endDate]);

?>

<style>
    .demo-section {
        margin-bottom: 50px;
    }

    .demo-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px 30px;
        border-radius: 15px;
        margin-bottom: 30px;
        text-align: center;
    }

    .demo-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .demo-subtitle {
        font-size: 16px;
        opacity: 0.9;
    }

    .area-title {
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 25px;
        padding: 15px 20px;
        background: #f8f9fa;
        border-left: 5px solid #667eea;
        border-radius: 8px;
    }

    .charts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 25px;
        margin-bottom: 40px;
    }

    .chart-box {
        background: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .chart-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .chart-type-label {
        font-size: 16px;
        font-weight: 700;
        color: #667eea;
        margin-bottom: 15px;
        text-align: center;
        padding: 10px;
        background: #f0f2ff;
        border-radius: 8px;
    }

    .chart-canvas {
        height: 300px;
        position: relative;
    }

    .back-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 700;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        z-index: 1000;
        transition: all 0.3s;
    }

    .back-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        color: white;
    }

    @media (max-width: 768px) {
        .charts-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="demo-header">
    <h1 class="demo-title">📊 Grafik Demo Sayfası</h1>
    <p class="demo-subtitle">Tüm grafik türlerini görün ve beğendiğinizi seçin</p>
</div>

<!-- ALAN 1: Günlük Arama Trendi -->
<div class="demo-section">
    <h2 class="area-title">📈 ALAN 1: Günlük Arama Trendi</h2>
    <div class="charts-grid">
        <div class="chart-box">
            <div class="chart-type-label">1. Line Chart (Çizgi)</div>
            <div class="chart-canvas"><canvas id="area1_line"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">2. Bar Chart (Çubuk)</div>
            <div class="chart-canvas"><canvas id="area1_bar"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">3. Area Chart (Alan)</div>
            <div class="chart-canvas"><canvas id="area1_area"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">4. Stacked Bar (Üst Üste Çubuk)</div>
            <div class="chart-canvas"><canvas id="area1_stacked"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">5. Mixed Chart (Bar + Line)</div>
            <div class="chart-canvas"><canvas id="area1_mixed"></canvas></div>
        </div>
    </div>
</div>

<!-- ALAN 2: Günlük Konuşma Süresi -->
<div class="demo-section">
    <h2 class="area-title">⏱️ ALAN 2: Günlük Konuşma Süresi (Saat)</h2>
    <div class="charts-grid">
        <div class="chart-box">
            <div class="chart-type-label">1. Line Chart (Gradient)</div>
            <div class="chart-canvas"><canvas id="area2_line"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">2. Bar Chart</div>
            <div class="chart-canvas"><canvas id="area2_bar"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">3. Area Chart (Dolu)</div>
            <div class="chart-canvas"><canvas id="area2_area"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">4. Stepped Line</div>
            <div class="chart-canvas"><canvas id="area2_stepped"></canvas></div>
        </div>
    </div>
</div>

<!-- ALAN 3: En Çok Aranan Personeller -->
<div class="demo-section">
    <h2 class="area-title">👥 ALAN 3: En Çok Aranan Personeller (6 Personel, 2-3 Data)</h2>
    <div class="charts-grid">
        <div class="chart-box">
            <div class="chart-type-label">1. Grouped Bar (Yan Yana)</div>
            <div class="chart-canvas"><canvas id="area3_grouped"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">2. Stacked Bar (Üst Üste)</div>
            <div class="chart-canvas"><canvas id="area3_stacked"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">3. Horizontal Bar</div>
            <div class="chart-canvas"><canvas id="area3_horizontal"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">4. Radar Chart (Altıgen)</div>
            <div class="chart-canvas"><canvas id="area3_radar"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">5. Polar Area</div>
            <div class="chart-canvas"><canvas id="area3_polar"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">6. Doughnut (İki Halka)</div>
            <div class="chart-canvas"><canvas id="area3_doughnut"></canvas></div>
        </div>
    </div>
</div>

<!-- ALAN 4: Personel Konuşma Süreleri -->
<div class="demo-section">
    <h2 class="area-title">🕐 ALAN 4: Personel Konuşma Süreleri (Saat)</h2>
    <div class="charts-grid">
        <div class="chart-box">
            <div class="chart-type-label">1. Horizontal Bar</div>
            <div class="chart-canvas"><canvas id="area4_horizontal"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">2. Bar Chart</div>
            <div class="chart-canvas"><canvas id="area4_bar"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">3. Doughnut Chart</div>
            <div class="chart-canvas"><canvas id="area4_doughnut"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">4. Polar Area</div>
            <div class="chart-canvas"><canvas id="area4_polar"></canvas></div>
        </div>
        <div class="chart-box">
            <div class="chart-type-label">5. Pie Chart</div>
            <div class="chart-canvas"><canvas id="area4_pie"></canvas></div>
        </div>
    </div>
</div>

<a href="incoming_calls.php" class="back-btn">← Ana Sayfaya Dön</a>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
// Veri hazırlama
const dailyData = <?php echo json_encode($dailyTrends); ?>;
const performersData = <?php echo json_encode($topPerformers); ?>;

// Tarih formatı
function formatDate(dateString) {
    if (!dateString) return '';
    const parts = dateString.split('-');
    if (parts.length === 3) {
        return `${parts[2]}.${parts[1]}`;
    }
    return dateString;
}

// Renkler
const colors = {
    blue: 'rgba(102, 126, 234, 1)',
    blueLight: 'rgba(102, 126, 234, 0.2)',
    green: 'rgba(39, 174, 96, 1)',
    greenLight: 'rgba(39, 174, 96, 0.2)',
    red: 'rgba(231, 76, 60, 1)',
    redLight: 'rgba(231, 76, 60, 0.2)',
    purple: 'rgba(155, 89, 182, 1)',
    purpleLight: 'rgba(155, 89, 182, 0.2)',
    orange: 'rgba(243, 156, 18, 1)',
    orangeLight: 'rgba(243, 156, 18, 0.2)',
    cyan: 'rgba(26, 188, 156, 1)',
    cyanLight: 'rgba(26, 188, 156, 0.2)'
};

const colorArray = [colors.blue, colors.green, colors.red, colors.purple, colors.orange, colors.cyan];
const colorArrayLight = [colors.blueLight, colors.greenLight, colors.redLight, colors.purpleLight, colors.orangeLight, colors.cyanLight];

// ==================== ALAN 1: Günlük Arama Trendi ====================

// 1. Line Chart
new Chart(document.getElementById('area1_line'), {
    type: 'line',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Toplam Arama',
            data: dailyData.map(d => d.total_calls),
            borderColor: colors.blue,
            backgroundColor: colors.blueLight,
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Cevaplanan',
            data: dailyData.map(d => d.total_answered),
            borderColor: colors.green,
            backgroundColor: colors.greenLight,
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }, {
            label: 'Cevaplanmayan',
            data: dailyData.map(d => d.total_unanswered),
            borderColor: colors.red,
            backgroundColor: colors.redLight,
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 2. Bar Chart
new Chart(document.getElementById('area1_bar'), {
    type: 'bar',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Toplam Arama',
            data: dailyData.map(d => d.total_calls),
            backgroundColor: colors.blue,
            borderRadius: 6
        }, {
            label: 'Cevaplanan',
            data: dailyData.map(d => d.total_answered),
            backgroundColor: colors.green,
            borderRadius: 6
        }, {
            label: 'Cevaplanmayan',
            data: dailyData.map(d => d.total_unanswered),
            backgroundColor: colors.red,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 3. Area Chart
new Chart(document.getElementById('area1_area'), {
    type: 'line',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Toplam Arama',
            data: dailyData.map(d => d.total_calls),
            borderColor: colors.purple,
            backgroundColor: colors.purpleLight,
            borderWidth: 4,
            fill: true,
            tension: 0.4,
            pointRadius: 6,
            pointBackgroundColor: '#fff',
            pointBorderColor: colors.purple,
            pointBorderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 4. Stacked Bar
new Chart(document.getElementById('area1_stacked'), {
    type: 'bar',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Cevaplanan',
            data: dailyData.map(d => d.total_answered),
            backgroundColor: colors.green,
            borderRadius: 6
        }, {
            label: 'Cevaplanmayan',
            data: dailyData.map(d => d.total_unanswered),
            backgroundColor: colors.red,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } },
        scales: { x: { stacked: true }, y: { stacked: true } }
    }
});

// 5. Mixed Chart
new Chart(document.getElementById('area1_mixed'), {
    type: 'bar',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Cevaplanan',
            data: dailyData.map(d => d.total_answered),
            backgroundColor: colors.green,
            borderRadius: 6,
            type: 'bar'
        }, {
            label: 'Cevaplanmayan',
            data: dailyData.map(d => d.total_unanswered),
            backgroundColor: colors.red,
            borderRadius: 6,
            type: 'bar'
        }, {
            label: 'Toplam (Trend)',
            data: dailyData.map(d => d.total_calls),
            borderColor: colors.blue,
            backgroundColor: colors.blueLight,
            borderWidth: 3,
            type: 'line',
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// ==================== ALAN 2: Günlük Konuşma Süresi ====================

// 1. Line with Gradient
const ctx2_1 = document.getElementById('area2_line').getContext('2d');
const gradient2_1 = ctx2_1.createLinearGradient(0, 0, 0, 300);
gradient2_1.addColorStop(0, colors.purpleLight);
gradient2_1.addColorStop(1, 'rgba(155, 89, 182, 0.05)');

new Chart(document.getElementById('area2_line'), {
    type: 'line',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Konuşma Süresi (Saat)',
            data: dailyData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            borderColor: colors.purple,
            backgroundColor: gradient2_1,
            borderWidth: 4,
            fill: true,
            tension: 0.4,
            pointRadius: 6,
            pointBackgroundColor: '#fff',
            pointBorderColor: colors.purple,
            pointBorderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
    }
});

// 2. Bar Chart
new Chart(document.getElementById('area2_bar'), {
    type: 'bar',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Konuşma Süresi (Saat)',
            data: dailyData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            backgroundColor: colors.purple,
            borderRadius: 8
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
    }
});

// 3. Area Chart
new Chart(document.getElementById('area2_area'), {
    type: 'line',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Konuşma Süresi (Saat)',
            data: dailyData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            borderColor: colors.orange,
            backgroundColor: colors.orangeLight,
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
    }
});

// 4. Stepped Line
new Chart(document.getElementById('area2_stepped'), {
    type: 'line',
    data: {
        labels: dailyData.map(d => formatDate(d.call_date)),
        datasets: [{
            label: 'Konuşma Süresi (Saat)',
            data: dailyData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            borderColor: colors.cyan,
            backgroundColor: colors.cyanLight,
            borderWidth: 3,
            fill: true,
            stepped: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
    }
});

// ==================== ALAN 3: En Çok Aranan Personeller ====================

// 1. Grouped Bar
new Chart(document.getElementById('area3_grouped'), {
    type: 'bar',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Toplam Arama',
            data: performersData.map(d => d.total_calls),
            backgroundColor: colors.blue,
            borderRadius: 6
        }, {
            label: 'Cevaplanan',
            data: performersData.map(d => d.total_answered),
            backgroundColor: colors.green,
            borderRadius: 6
        }, {
            label: 'Cevaplanmayan',
            data: performersData.map(d => d.total_unanswered),
            backgroundColor: colors.red,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 2. Stacked Bar
new Chart(document.getElementById('area3_stacked'), {
    type: 'bar',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Cevaplanan',
            data: performersData.map(d => d.total_answered),
            backgroundColor: colors.green,
            borderRadius: 6
        }, {
            label: 'Cevaplanmayan',
            data: performersData.map(d => d.total_unanswered),
            backgroundColor: colors.red,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } },
        scales: { x: { stacked: true }, y: { stacked: true } }
    }
});

// 3. Horizontal Bar
new Chart(document.getElementById('area3_horizontal'), {
    type: 'bar',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Toplam Arama',
            data: performersData.map(d => d.total_calls),
            backgroundColor: colors.blue,
            borderRadius: 6
        }, {
            label: 'Cevaplanan',
            data: performersData.map(d => d.total_answered),
            backgroundColor: colors.green,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 4. Radar Chart
new Chart(document.getElementById('area3_radar'), {
    type: 'radar',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Toplam Arama',
            data: performersData.map(d => d.total_calls),
            backgroundColor: colors.blueLight,
            borderColor: colors.blue,
            borderWidth: 2
        }, {
            label: 'Cevaplanan',
            data: performersData.map(d => d.total_answered),
            backgroundColor: colors.greenLight,
            borderColor: colors.green,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 5. Polar Area
new Chart(document.getElementById('area3_polar'), {
    type: 'polarArea',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Toplam Arama',
            data: performersData.map(d => d.total_calls),
            backgroundColor: colorArrayLight
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 6. Doughnut (İki Halka)
new Chart(document.getElementById('area3_doughnut'), {
    type: 'doughnut',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Toplam Arama',
            data: performersData.map(d => d.total_calls),
            backgroundColor: colorArray,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true, position: 'right' },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.label + ': ' + context.parsed + ' arama';
                    }
                }
            }
        }
    }
});

// ==================== ALAN 4: Personel Konuşma Süreleri ====================

// 1. Horizontal Bar
new Chart(document.getElementById('area4_horizontal'), {
    type: 'bar',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Konuşma Süresi (Saat)',
            data: performersData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            backgroundColor: colors.orange,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        plugins: { legend: { display: false } }
    }
});

// 2. Bar Chart
new Chart(document.getElementById('area4_bar'), {
    type: 'bar',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Konuşma Süresi (Saat)',
            data: performersData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            backgroundColor: colors.purple,
            borderRadius: 8
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } }
    }
});

// 3. Doughnut
new Chart(document.getElementById('area4_doughnut'), {
    type: 'doughnut',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Konuşma Süresi',
            data: performersData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            backgroundColor: colorArray,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true, position: 'right' },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.label + ': ' + context.parsed + ' saat';
                    }
                }
            }
        }
    }
});

// 4. Polar Area
new Chart(document.getElementById('area4_polar'), {
    type: 'polarArea',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Konuşma Süresi',
            data: performersData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            backgroundColor: colorArrayLight
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: true, position: 'top' } }
    }
});

// 5. Pie Chart
new Chart(document.getElementById('area4_pie'), {
    type: 'pie',
    data: {
        labels: performersData.map(d => d.full_name),
        datasets: [{
            label: 'Konuşma Süresi',
            data: performersData.map(d => parseFloat(d.total_duration_hours).toFixed(2)),
            backgroundColor: colorArray,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: true, position: 'right' },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.label + ': ' + context.parsed + ' saat';
                    }
                }
            }
        }
    }
});
</script>

<?php include 'includes/footer.php'; ?>
