@extends('admin.layout.index')
@section('title', 'İstatistikler')
@section('content')
    <div class="grid grid-cols-12 gap-6 mb-6">
        <div class="col-span-12">
            <div class="mb-3">
                <h3 class="text-2xl font-semibold flex items-center gap-2">
                    Genel Özet
                    <span class="text-sm bg-gray-100 border border-gray-300 px-3 py-0.5 rounded-lg text-gray-600 inline-flex items-center justify-center gap-2">
                        Geçen aya göre
                    </span>
                </h3>
            </div>
            <div class="grid grid-cols-12 gap-6">
                <div class="border border-zinc-200 rounded-lg p-6 flex flex-col gap-6 col-span-3">
                    <div class="flex items-center justify-between">
                        <h3 class="text-gray-900 font-medium"> Son 1 Aylık Müşteriler </h3>
                    </div>
                    <div class="flex flex-col gap-4">
                        <h3 class="text-gray-900 text-3xl font-semibold leading-[44px]">{{ number_format($metrics["customers"]["value"]) }}</h3>
                        <div class="flex items-center gap-1">
                            <i class="{{ $metrics["customers"]["icon"] }} {{ $metrics["customers"]["color"] }} text-lg -mt-2.5"></i>
                            <span class="{{ $metrics["customers"]["color"] }}">{{ $metrics["customers"]["percentage"] }}%</span>
                            <span class="{{ $metrics["orders"]["color"] }}">son 1 aylık kayıtlar</span>
                        </div>
                    </div>
                </div>
                <div class="border border-zinc-200 rounded-lg p-6 flex flex-col gap-6 col-span-3">
                    <div class="flex items-center justify-between">
                        <h3 class="text-gray-900 font-medium"> Son 1 Aylık Siparişler </h3>
                    </div>
                    <div class="flex flex-col gap-4">
                        <h3 class="text-gray-900 text-3xl font-semibold leading-[44px]">{{ number_format($metrics["orders"]["value"]) }}</h3>
                        <div class="flex items-center gap-1">
                            <i class="{{ $metrics["orders"]["icon"] }} {{ $metrics["orders"]["color"] }} text-lg -mt-2.5"></i>
                            <span class="{{ $metrics["orders"]["color"] }}">{{ $metrics["orders"]["percentage"] }}%</span>
                            <span class="{{ $metrics["orders"]["color"] }}">geçen aya göre</span>
                        </div>
                    </div>
                </div>
                <div class="border border-zinc-200 rounded-lg p-6 flex flex-col gap-6 col-span-3">
                    <div class="flex items-center justify-between">
                        <h3 class="text-gray-900 font-medium"> Son 1 Aylık Gelir </h3>
                    </div>
                    <div class="flex flex-col gap-4">
                        <h3 class="text-gray-900 text-3xl font-semibold leading-[44px]">{{ num_format($metrics["income"]["value"]) . CURRENCY }}</h3>
                        <div class="flex items-center gap-1">
                            <i class="{{ $metrics["income"]["icon"] }} {{ $metrics["income"]["color"] }} text-lg -mt-2.5"></i>
                            <span class="{{ $metrics["orders"]["color"] }}">{{ $metrics["income"]["percentage"] }}%</span>
                            <span class="{{ $metrics["orders"]["color"] }}">son 1 aylık artış</span>
                        </div>
                    </div>
                </div>
                <div class="border border-zinc-200 rounded-lg p-6 flex flex-col gap-6 col-span-3">
                    <div class="flex items-center justify-between">
                        <h3 class="text-gray-900 font-medium"> Aylık Ziyaret </h3>
                    </div>
                    <div class="flex flex-col gap-4">
                        <h3 class="text-gray-900 text-3xl font-semibold leading-[44px]">{{ $metrics["visitor"]["value"] }}</h3>
                        <div class="flex items-center gap-1">
                            <i class="{{ $metrics["visitor"]["icon"] }} {{ $metrics["visitor"]["color"] }} text-lg -mt-2.5"></i>
                            <span class="{{ $metrics["visitor"]["color"] }}">{{ $metrics["visitor"]["percentage"] }}%</span>
                            <span class="{{ $metrics["visitor"]["color"] }}">son 1 aylık artış</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-span-7">
            <h3 class="text-2xl font-semibold flex items-center gap-2 mb-3">
                Satış Grafiği
            </h3>
            <div class="border border-zinc-200 rounded-lg p-6 pb-2">
                <div id="selling-graph"></div>
            </div>
        </div>
        <div class="col-span-5">
            <h3 class="text-2xl font-semibold flex items-center gap-2 mb-3">
                Ziyaret Grafiği
            </h3>
            <div class="border border-zinc-200 rounded-lg p-6 pb-2">
                <div id="visitor-graph"></div>
            </div>
        </div>
        <div class="col-span-7">
            <h3 class="text-2xl font-semibold flex items-center gap-2 mb-3">
                En Çok Satan Ürünler
            </h3>
            <div class="border border-zinc-200 rounded-lg">
                <table class="w-full text-sm text-left text-gray-500">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-200/20">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Sıra
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Satış
                        </th>
                        <th scope="col" class="px-6 py-3">
                            <div class="flex items-center">
                                Ürün
                            </div>
                        </th>
                        <th scope="col" class="px-6 py-3">
                            <div class="flex items-center">
                                Ürün Adı
                            </div>
                        </th>
                        <th scope="col" class="px-6 py-3"></th>
                        <th scope="col" class="px-6 py-3">
                            <span class="sr-only">Edit</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($products as $key => $product)
                        <tr class="bg-white border-b border-b-gray-100 last:border-b-transparent">
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                {{ $key + 1 }}
                            </th>
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                {{ $product->sell }}
                            </th>
                            <td class="px-6 py-4">
                                <img src="{{ upload("products", json_decode($product->images, true)[0]) }}" alt="" class="max-w-[150px] rounded-lg">
                            </td>
                            <td class="px-6 py-4">
                                {{ $product->name }}
                            </td>
                            <td>
                                <div class="flex items-center justify-center">
                                    @if($product->type == "variant")
                                        <span class="bg-blue-100 border border-blue-300 px-3 py-0.5 rounded-full text-blue-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-layers-three-01"></i>
                                            <span>Varyantlı Ürün</span>
                                        </span>
                                    @else
                                        <span class="bg-green-100 border border-green-300 px-3 py-0.5 rounded-full text-green-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-package"></i>
                                            <span>Basit Ürün</span>
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-2">
                                    <div class="text-right gap-2 h-full flex items-center justify-end w-full">
                                        <a target="_blank" href="https://trackonstep.com/product/swift-step-sari-gunluk-ayakkabi" class="font-medium text-green-600 px-3 py-0.5 rounded bg-green-50 border border-green-100">
                                            <i class="icon-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-span-5">
            <h3 class="text-2xl font-semibold flex items-center gap-2 mb-3">
                En Çok Ziyaret Edilen Sayfalar
            </h3>
            <div class="border border-zinc-200 rounded-lg">
                <table class="w-full text-sm text-left text-gray-500">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-200/20">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Sıra
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Sayfa
                        </th>
                        <th scope="col" class="px-6 py-3">
                            <div class="flex items-center">
                                Görüntülenme
                            </div>
                        </th>
                        <th scope="col" class="px-6 py-3">
                            <span class="sr-only">Edit</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                                        @foreach($pages as $key => $page)
                                                <tr class="bg-white border-b border-b-gray-100 last:border-b-transparent">
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                {{ $key + 1 }}
                            </th>
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <span class="inline-flex items-center justify-center rounded-md border border-gray-300 p-1.5 text-gray-500">
                                        <i class="icon-file-06 text-[20px]"></i>
                                    </span>
                                    <span>{{ $page["page"] }}</span>
                                </div>
                            </th>
                            <td class="px-6 py-4">
                                {{ num_translate($page["how"]) }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-2">
                                    <div class="text-right gap-2 h-full flex items-center justify-end w-full">
                                        <a target="_blank" href="{{ $page["page"] }}" class="font-medium text-green-600 px-3 py-0.5 rounded bg-green-50 border border-green-100">
                                            <i class="icon-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        let custom = {
            locales: [
                {
                    "name": "tr",
                    "options": {
                        "months": ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                        "shortMonths": ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                        "days": ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
                        "shortDays": ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
                        "toolbar": {"exportToSVG": "SVG İndir", "exportToPNG": "PNG İndir", "exportToCSV": "CSV İndir", "menu": "Menü", "selection": "Seçim", "selectionZoom": "Seçim Yakınlaştır", "zoomIn": "Yakınlaştır", "zoomOut": "Uzaklaştır", "pan": "Kaydır", "reset": "Yakınlaştırmayı Sıfırla"}
                    }
                }
            ],
            defaultLocale: 'tr',
            toolbar: {
                show: true,
                offsetX: 0,
                offsetY: 0,
                tools: {
                    selection: true,
                    zoom: false,
                    zoomin: `<i class="icon-plus-circle" style="font-size: 27px;display: block; margin-top: -3.5px"></i>`,
                    zoomout: `<i class="icon-minus-circle" style="font-size: 27px;display: block; margin-top: -3.5px"></i>`,
                    pan: `<i class="icon-hand" style="font-size: 30px;display: block; margin-top: -3.5px"></i>`,
                    reset: `<i class="icon-home-02" style="font-size: 22px"></i>`,
                    download: `<i class="icon-menu-01" style="font-size: 24px"></i>`,
                    customIcons: []
                },
            }
        }


        new ApexCharts(document.querySelector("#selling-graph"), {
            series: [
                {
                    name: 'Geçen Ay',
                    data: {{ json_encode($metrics["order_graph"]["former_month"]) }},
                    color: "#f9a63a"
                },
                {
                    name: 'Bu Ay',
                    data: {{ json_encode($metrics["order_graph"]["in_month"]) }},
                    color: "#6b52f6"
                }
            ],
            chart: {
                height: 380, type: 'area',
                ...custom
            },
            dataLabels: {enabled: false},
            stroke: {curve: 'smooth',
                width: 2},
            xaxis: {
                type: 'datetime',
                categories: {!! json_encode($metrics["order_graph"]["days"]) !!}
            }
        }).render();

        new ApexCharts(document.querySelector("#visitor-graph"), {
            series: [
                {
                    name: 'Geçen Ay',
                    data: {{ json_encode($metrics["visitor_graph"]["former_month"]) }},
                    color: "#f9a63a"
                },
                {
                    name: 'Bu Ay',
                    data: {{ json_encode($metrics["visitor_graph"]["in_month"]) }},
                    color: "#6b52f6"
                }
            ],
            chart: {
                height: 380,
                type: 'area',
                ...custom
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 2
            },
            xaxis: {
                type: 'datetime',
                categories: {!! json_encode($metrics["visitor_graph"]["days"]) !!}
            }
        }).render();

    </script>
@endsection