@extends('layouts.app')

@section('title', 'Ana Sayfa')

@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Ana Sayfa</h6>
        <div class="d-flex align-items-center gap-2">
            <div class="position-relative">
                <input type="text" class="form-control radius-8 h-40-px ps-40 bg-base w-250-px" placeholder="Ara...">
                <iconify-icon icon="solar:magnifer-outline"
                    class="position-absolute start-12 top-50 translate-middle-y text-secondary-light"></iconify-icon>
            </div>
            <button class="btn btn-sm btn-outline-primary-600 radius-8 d-flex align-items-center gap-1">
                <iconify-icon icon="solar:file-download-outline"></iconify-icon>
                Excel
            </button>
            <button class="btn btn-sm btn-outline-danger-600 radius-8 d-flex align-items-center gap-1">
                <iconify-icon icon="solar:file-download-outline"></iconify-icon>
                PDF
            </button>
        </div>
    </div>

    <div class="row gy-4 mb-24">
        <!-- Kurumsal Özet -->
        <div class="col-xxl-3 col-xl-4">
            <div class="card h-100 radius-12 border-0 shadow-sm">
                <div class="card-body p-24">
                    <h6 class="text-md fw-bold text-secondary-light mb-20">GENEL İLERLEME</h6>
                    <div class="d-flex flex-column align-items-center">
                        <div id="genelIlerlemeChart"></div>
                        <div class="text-center mt-12">
                            <p class="text-sm text-secondary-light mb-4">Planlanan Hedef</p>
                            <h5 class="fw-bold mb-16">
                                ₺{{ number_format($kurumsalPerformans['toplam_hedef'] / 1000000, 1) }}M</h5>
                            <p class="text-sm text-secondary-light mb-4">Gerçekleşen Satış</p>
                            <h5 class="fw-bold text-success-600 mb-0">
                                ₺{{ number_format($kurumsalPerformans['toplam_gerceklesen'] / 1000000, 1) }}M</h5>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-top p-20">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-xs text-secondary-light d-block">Toplam Satıcı</span>
                            <span class="fw-bold">{{ $kurumsalPerformans['toplam_satisci'] }}</span>
                        </div>
                        <div>
                            <span class="text-xs text-secondary-light d-block">Hedef Gerçekleşme</span>
                            <span class="fw-bold text-success-600">%{{ $kurumsalPerformans['hedef_yuzde'] }}</span>
                        </div>
                        <div>
                            <span class="text-xs text-secondary-light d-block">Tahsilat Oranı</span>
                            <span class="fw-bold text-info-600">%81.3</span>
                        </div>
                    </div>
                    <div class="alert alert-warning mt-16 p-12 radius-8 border-0 d-flex align-items-start gap-2 mb-0">
                        <iconify-icon icon="solar:info-circle-outline" class="text-xl text-warning-600 mt-1"></iconify-icon>
                        <span class="text-xs text-warning-main fw-medium">Kurumsal ekipte dikkat edilmesi gereken noktalar
                            var.</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hedef İlerleme Bar Chart -->
        <div class="col-xxl-9 col-xl-8">
            <div class="card h-100 radius-12 border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom p-24">
                    <h6 class="text-md fw-bold mb-0">Hedef İlerleme</h6>
                </div>
                <div class="card-body p-24">
                    <div id="hedefIlerlemeChart"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row gy-4">
        <!-- AI Puan Dağılımı -->
        <div class="col-xxl-7">
            <div class="card h-100 radius-12 border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom p-24 text-uppercase">
                    <h6 class="text-md fw-bold mb-0">AI Puan Dağılımı</h6>
                </div>
                <div class="card-body p-24">
                    <div id="aiPuanDagilimiChart"></div>
                </div>
            </div>
        </div>

        <!-- Yıllık Branş Dağılımı -->
        <div class="col-xxl-5">
            <div class="card h-100 radius-12 border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom p-24 text-uppercase">
                    <h6 class="text-md fw-bold mb-0">Yıllık Branş Dağılımı</h6>
                </div>
                <div class="card-body p-24 d-flex align-items-center justify-content-center">
                    <div id="bransDagilimiChart"></div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            // Dark mode detection
            const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
            const textColor = isDarkMode ? '#a0aec0' : '#64748b';
            const gridColor = isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';

            // Format number to K/M
            function formatNumber(val) {
                if (val >= 1000000) return (val / 1000000).toFixed(1) + 'M';
                if (val >= 1000) return (val / 1000).toFixed(0) + 'K';
                return val;
            }

            // Genel İlerleme Radial Bar
            var genelIlerlemeOptions = {
                series: [{{ $kurumsalPerformans['hedef_yuzde'] }}],
                chart: {
                    type: 'radialBar',
                    height: 250,
                    background: 'transparent'
                },
                plotOptions: {
                    radialBar: {
                        hollow: { size: '70%' },
                        track: {
                            background: isDarkMode ? 'rgba(255,255,255,0.1)' : '#e2e8f0'
                        },
                        dataLabels: {
                            name: { show: false },
                            value: {
                                fontSize: '32px',
                                fontWeight: '700',
                                color: isDarkMode ? '#ffffff' : '#1a1f4e',
                                formatter: function (val) { return val + '%' }
                            }
                        }
                    }
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'dark',
                        type: 'horizontal',
                        colorStops: [
                            { offset: 0, color: '#487FFF', opacity: 1 },
                            { offset: 100, color: '#00cfd5', opacity: 1 }
                        ]
                    }
                },
                stroke: { lineCap: 'round' }
            };
            new ApexCharts(document.querySelector("#genelIlerlemeChart"), genelIlerlemeOptions).render();

            // Hedef İlerleme Chart (Dinamik)
            var hedefOptions = {
                series: [{
                    name: 'Gerçekleşen',
                    data: {!! json_encode(array_column($hedefGrafik, 'gerceklesen')) !!}
                }, {
                    name: 'Hedef',
                    data: {!! json_encode(array_column($hedefGrafik, 'hedef')) !!}
                }],
                chart: {
                    type: 'bar',
                    height: 320,
                    toolbar: { show: false },
                    background: 'transparent'
                },
                colors: ['#10b981', '#487FFF'],
                plotOptions: {
                    bar: {
                        columnWidth: '60%',
                        borderRadius: 6,
                        dataLabels: { position: 'top' }
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: { show: false },
                xaxis: {
                    categories: {!! json_encode(array_column($hedefGrafik, 'ay')) !!},
                    labels: {
                        style: { colors: textColor, fontSize: '12px' }
                    },
                    axisBorder: { show: false },
                    axisTicks: { show: false }
                },
                yaxis: {
                    labels: {
                        style: { colors: textColor, fontSize: '12px' },
                        formatter: function(val) { return formatNumber(val); }
                    }
                },
                grid: {
                    borderColor: gridColor,
                    strokeDashArray: 4
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    labels: { colors: textColor }
                },
                tooltip: {
                    theme: isDarkMode ? 'dark' : 'light',
                    y: {
                        formatter: function(val) {
                            return '₺' + val.toLocaleString('tr-TR');
                        }
                    }
                }
            };
            new ApexCharts(document.querySelector("#hedefIlerlemeChart"), hedefOptions).render();

            // AI Puan Dağılımı Chart (Dinamik)
            var aiDagilimiOptions = {
                series: [{
                    name: 'Puan',
                    data: {!! json_encode($satisciPerformanslari->pluck('ai_skoru')) !!}
                }],
                chart: {
                    type: 'bar',
                    height: 320,
                    toolbar: { show: false },
                    background: 'transparent'
                },
                colors: ['#487FFF'],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 6,
                        distributed: true
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) { return val; },
                    offsetY: -20,
                    style: {
                        fontSize: '11px',
                        fontWeight: 600,
                        colors: [textColor]
                    }
                },
                xaxis: {
                    categories: {!! json_encode($satisciPerformanslari->pluck('ad_soyad')) !!},
                    labels: {
                        rotate: -45,
                        rotateAlways: true,
                        style: { colors: textColor, fontSize: '11px' }
                    },
                    axisBorder: { show: false },
                    axisTicks: { show: false }
                },
                yaxis: {
                    max: 100,
                    labels: {
                        style: { colors: textColor, fontSize: '12px' }
                    }
                },
                grid: {
                    borderColor: gridColor,
                    strokeDashArray: 4
                },
                legend: { show: false },
                tooltip: {
                    theme: isDarkMode ? 'dark' : 'light'
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'light',
                        type: 'vertical',
                        shadeIntensity: 0.3,
                        opacityFrom: 1,
                        opacityTo: 0.8
                    }
                }
            };
            new ApexCharts(document.querySelector("#aiPuanDagilimiChart"), aiDagilimiOptions).render();

            // Branş Dağılımı Donut (Dinamik)
            var bransOptions = {
                series: {!! json_encode(array_column($enCokSatanUrunler, 'toplam_prim')) !!},
                labels: {!! json_encode(array_column($enCokSatanUrunler, 'brans_adi')) !!},
                chart: {
                    type: 'donut',
                    height: 380,
                    background: 'transparent',
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 800,
                        animateGradually: {
                            enabled: true,
                            delay: 150
                        },
                        dynamicAnimation: {
                            enabled: true,
                            speed: 350
                        }
                    }
                },
                colors: ['#487FFF', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'dark',
                        type: 'vertical',
                        shadeIntensity: 0.3,
                        gradientToColors: ['#60a5fa', '#34d399', '#fbbf24', '#f87171', '#a78bfa'],
                        opacityFrom: 1,
                        opacityTo: 0.85,
                        stops: [0, 100]
                    }
                },
                plotOptions: {
                    pie: {
                        startAngle: -90,
                        endAngle: 270,
                        expandOnClick: true,
                        donut: {
                            size: '75%',
                            labels: {
                                show: true,
                                name: {
                                    show: true,
                                    fontSize: '15px',
                                    fontWeight: 600,
                                    color: textColor,
                                    offsetY: -10
                                },
                                value: {
                                    show: true,
                                    fontSize: '28px',
                                    fontWeight: 700,
                                    color: isDarkMode ? '#ffffff' : '#1e293b',
                                    offsetY: 5,
                                    formatter: function(val) {
                                        return '₺' + formatNumber(parseFloat(val));
                                    }
                                },
                                total: {
                                    show: true,
                                    showAlways: true,
                                    label: 'Toplam Prim',
                                    fontSize: '13px',
                                    fontWeight: 500,
                                    color: textColor,
                                    formatter: function(w) {
                                        var total = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                        return '₺' + formatNumber(total);
                                    }
                                }
                            }
                        }
                    }
                },
                stroke: {
                    show: true,
                    width: 3,
                    colors: [isDarkMode ? '#1a1f2e' : '#ffffff']
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    horizontalAlign: 'center',
                    floating: false,
                    fontSize: '13px',
                    fontWeight: 500,
                    labels: { colors: textColor },
                    markers: {
                        width: 12,
                        height: 12,
                        radius: 6
                    },
                    itemMargin: {
                        horizontal: 12,
                        vertical: 8
                    },
                    formatter: function(seriesName, opts) {
                        var percent = opts.w.globals.seriesPercent[opts.seriesIndex][0].toFixed(1);
                        return seriesName + ' <span style="font-weight:700;color:' + opts.w.globals.colors[opts.seriesIndex] + '">' + percent + '%</span>';
                    }
                },
                tooltip: {
                    enabled: true,
                    theme: isDarkMode ? 'dark' : 'light',
                    fillSeriesColor: false,
                    style: { fontSize: '13px' },
                    y: {
                        formatter: function(val, opts) {
                            var percent = opts.w.globals.seriesPercent[opts.seriesIndex][0].toFixed(1);
                            return '₺' + val.toLocaleString('tr-TR') + ' (' + percent + '%)';
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    formatter: function(val) {
                        return val.toFixed(1) + '%';
                    },
                    style: {
                        fontSize: '11px',
                        fontWeight: 600,
                        colors: ['#fff']
                    },
                    dropShadow: {
                        enabled: true,
                        top: 1,
                        left: 1,
                        blur: 2,
                        opacity: 0.3
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: { height: 300 },
                        legend: { position: 'bottom' }
                    }
                }]
            };
            new ApexCharts(document.querySelector("#bransDagilimiChart"), bransOptions).render();
        </script>
    @endpush
@endsection