@extends('admin.layout.index')
@section('title', 'Anasayfa')
@section('content')
    <div class="grid grid-cols-3 gap-6 mb-6">
        <div class="border border-zinc-200 rounded-lg p-6 flex flex-col gap-6">
            <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-4xl 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">
            <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-4xl 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">
            <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-4xl 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>
    <h3 class="mb-3 text-2xl font-semibold"> Son 10 Sipariş </h3>
    <section class="relative overflow-x-auto border border-gray-100 sm: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">
                    <div class="flex items-center">
                        Ad Soyad
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Sipariş Tarihi
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Sipariş Tutarı
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Durum
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <div class="flex items-center">
                        Ödeme Türü
                    </div>
                </th>
                <th scope="col" class="px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
            </thead>
            <tbody>
            @foreach($orders as $key => $order)
                <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">
                        {{ '#' . $order->uniq   }}
                    </th>
                    <td class="px-6 py-4">
                        {{ $order->contact_info->name }} {{ $order->contact_info->surname }}
                    </td>
                    <td class="px-6 py-4">
                        {{ carbon()::parse($order->created_at)->format('H:i / d.m.Y') }}
                    </td>
                    <td class="px-6 py-4">
                        {{ CURRENCY . num_format($order->fees->total_sale ?? $order->fees->general_total) }}
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-x-3">
                            <div>
                                @switch($order->status)
                                    @case("1")
                                        <span class="h-10 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">
                                            <i class="icon-navigation-pointer-01 -rotate-90"></i>
                                            Sipariş Oluşturuldu
                                        </span>
                                        @break
                                    @case("2")
                                        <span class="w-10 h-10 bg-yellow-100 border border-yellow-300 px-3 py-0.5 rounded-lg text-yellow-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-check-circle-broken"></i>
                                            Sipariş Onaylandı
                                        </span>
                                        @break
                                    @case("3")
                                        <span class="w-10 h-10 bg-orange-100 border border-orange-300 px-3 py-0.5 rounded-lg text-orange-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-clock"></i>
                                            Sipariş Hazırlanıyor
                                        </span>
                                        @break
                                    @case("4")
                                        <span class="w-10 h-10 bg-blue-100 border border-blue-300 px-3 py-0.5 rounded-lg text-blue-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-truck-02"></i>
                                            Kargoya Verildi
                                        </span>
                                        @break
                                    @case("5")
                                        <span class="w-10 h-10 bg-green-100 border border-green-300 px-3 py-0.5 rounded-lg text-green-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-check-verified-02"></i>
                                            Teslim Edildi
                                        </span>
                                        @break
                                    @case("0")
                                        <span class="w-10 h-10 bg-green-100 border border-green-300 px-3 py-0.5 rounded-lg text-green-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-alert-triangle"></i>
                                            Sipariş İptali
                                        </span>
                                        @break
                                    @default()
                                        <span class="w-10 h-10 bg-red-100 border border-red-300 px-3 py-0.5 rounded-lg text-red-600 inline-flex items-center justify-center gap-2">
                                            <i class="icon-alert-triangle"></i>
                                            Hata
                                        </span>
                                        @break
                                @endswitch
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        @if($order->payment_type == 'pay_at_the_door')
                            <span class="bg-green-100 border border-green-300 px-3 py-0.5 rounded-lg text-green-600 inline-flex items-center justify-center gap-2">
                                Kapıda Ödeme
                            </span>
                        @endif
                        @if($order->payment_type == 'pos')
                            <span class="bg-violet-100 border border-violet-300 px-3 py-0.5 rounded-lg text-violet-600 inline-flex items-center justify-center gap-2">
                                Kredi / Banka Kartı
                            </span>
                        @endif
                        @if($order->payment_type == 'eft')
                            <span class="bg-yellow-100 border border-yellow-300 px-3 py-0.5 rounded-lg text-yellow-600 inline-flex items-center justify-center gap-2">
                                EFT/Havale
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right gap-2 h-full">
                        <div class="flex items-center justify-end h-full">
                            <a href="{{ site('admin/orders/view/' . $order->uniq) }}"
                               class="font-medium text-blue-600 hover:underline px-3 py-0.5 rounded bg-blue-50 border border-blue-100">
                                Sipariş Detayı
                            </a>
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </section>
@endsection
@section('scripts')
    <script>
        $('[data-role="order_status"]').select2().on('change', function (event) {
            let selectedValue = $(this).val();
            let id = $(this).data('id');
            let uniq = $(this).data('uniq')
            $.ajax({
                method: "GET",
                url: "/api/v2/change-status/" + id + "/" + selectedValue,
                data: {},
                success: function (response) {
                    if(selectedValue === "0"){
                        if (!response.error) {
                            document.location = "{{ site('admin/cancellation-and-refund') }}"
                            return false;
                        }
                    }
                    if(selectedValue === "4"){
                        if (!response.error) {
                            document.location = "{{ site('admin/orders/view/') }}" + uniq
                            return false;
                        }
                    }
                    if(selectedValue === "1" || selectedValue === "2" || selectedValue === "3" || selectedValue === "5"){
                        if (!response.error) {
                            document.location = document.location
                            return false;
                        }
                    }
                }
            }, 'json');
        });
    </script>
@endsection