@extends('admin.layout.index')
@section('title', 'Ürünler')
@section('content')
    <div class="flex items-center justify-end mb-4 gap-4">
        <button type="button" data-role="open-confirm" class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md">Ekle</button>
    </div>
    <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">
                        Ü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">
                    <div class="flex items-center">
                        Envanter
                    </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>
                        <td class="px-6 py-4">
                            <img src="{{ site('public/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 class="px-6 py-4">
                            @if($product->type === 'variant')
                                0 varyant için stokta 0 adet mevcut                            @else
                                @if($product->stock_qty == "0")
                                    <span class="bg-orange-100 border border-orange-300 px-3 py-0.5 rounded-full text-orange-600 inline-flex items-center justify-center gap-2">
                                        <i class="icon-alert-circle"></i>
                                        <span>Tükendi</span>
                                    </span>
                                @else
                                    Stokta {{ $product->stock_qty }} adet mevcut
                                @endif
                            @endif
                        </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 href="{{ site('admin/products/edit/' . $product->id) }}"
                                       class="font-medium text-blue-600 hover:underline px-3 py-0.5 rounded bg-blue-50 border border-blue-100">
                                        Düzenle
                                    </a>
                                    <a data-href="{{ site('admin/products/delete/' . $product->id) }}"
                                       class="font-medium text-rose-600 hover:underline px-3 py-0.5 rounded bg-rose-50 border border-rose-100">
                                        Sil
                                    </a>
                                    <a target="_blank" href="{{ site('product/' . $product->slug) }}"
                                       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>
    </section>
    <section class="w-full h-full mt-5 flex items-center justify-center gap-4">
        <a href="{{ ($page == 1) ? 'javascript: void(0);' : site('admin/products?page=' . $page - 1) }}" class="flex items-center gap-2 border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md {{ ($page == 1) ? 'pointer-events-none opacity-50 select-none' : ''}}">
            <i class="icon-arrow-left"></i>
            Geri
        </a>
        <div class="form-item">
            <select name="paging" id="paging" class="text-center">
                @for($i = 1; $i < $pages+1; $i++)
                    <option value="{{ $i }}"{{ ($page == $i) ? ' selected' : '' }}>Sayfa {{ $i }}</option>
                @endfor
            </select>
        </div>
        <a href="{{ ($page >= $pages) ? 'javascript: void(0);' : site('admin/products?page=' . $page + 1) }}" class="flex items-center gap-2 border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md {{ ($page >= $pages) ? 'pointer-events-none opacity-50 select-none' : ''}}">
            İleri
            <i class="icon-arrow-right"></i>
        </a>
    </section>
    <script>
        document.querySelector('select[name="paging"]#paging').addEventListener('change', event => {
            document.location = document.location.protocol + '//' + document.location.host + document.location.pathname + '?page=' + event.target.value;
        })
    </script>
    <div class="w-screen h-screen fixed inset-0 z-[999] items-center justify-center transition duration-300 opacity-0 hidden" data-role="confirm" data-state="close">
        <div class="w-full h-full bg-black/10 absolute" style="z-index: 60" data-role="close"></div>
        <div class="w-[400px] p-6 bg-white rounded-xl shadow flex-col justify-start items-center gap-8 inline-flex" style="z-index: 61">
            <div class="self-stretch flex-col justify-start items-center gap-5 flex">
                <div class="self-stretch flex-col justify-start items-center gap-2 flex">
                    <div class="self-stretch text-center text-gray-900 text-lg font-medium">
                        Ürün Ekle
                    </div>
                </div>
            </div>
            <div class="self-stretch justify-start items-start gap-3 inline-flex">
                <div class="grow shrink basis-0 rounded-lg justify-center items-center flex flex-col gap-3">
                    <a href="{{ site('admin/products/normal-new') }}" class="flex gap-3 items-center text-slate-700 w-full font-medium cursor-pointer grow shrink basis-0 px-[18px] py-2.5 bg-white rounded-lg border border-gray-100 hover:bg-gray-50 transition duration-300"
                            data-role="close">
                        <i class="w-12 h-12 rounded-full bg-[#f8fafc] border border-[#eef2f6] flex items-center justify-center">
                            <i class="icon-package text-2xl mb-1.5"></i>
                        </i>
                        <span class="text-left">
                            <span>Basit Ürün</span>
                            <p class="text-sm">Tek parça olarak bir ürün ekleyin</p>
                        </span>
                    </a>
                    <a href="{{ site('admin/products/variant-new') }}" class="flex gap-3 items-center text-slate-700 w-full font-medium cursor-pointer grow shrink basis-0 px-[18px] py-2.5 bg-white rounded-lg border border-gray-100 hover:bg-gray-50 transition duration-300"
                            data-role="close">
                        <i class="w-12 h-12 rounded-full bg-[#f8fafc] border border-[#eef2f6] flex items-center justify-center">
                            <i class="icon-layers-three-01 text-2xl mb-1.5"></i>
                        </i>
                        <span class="text-left">
                            <span>Varyantlı Ürün</span>
                            <p class="text-sm">Farklı özelliklere sahip ürün ekleyin</p>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script>

        let open_confirm = document.querySelectorAll('[data-role="open-confirm"]');
        let confirm = document.querySelector('[data-role="confirm"]');
        let confirmClose = confirm.querySelectorAll('[data-role="close"]');
        let confirmConfirm = confirm.querySelector('[data-role="confirm"]');

        document.addEventListener('keydown', e => {
            if (e.key === 'Escape') {
                if (confirm.dataset.state === 'open') {
                    confirmToggle()
                }
            }
        })

        confirmClose.forEach((closeElement) => {
            closeElement.addEventListener('click', event => {
                confirmToggle()
            });
        })

        open_confirm.forEach((open_confirmElement) => {
            open_confirmElement.addEventListener('click', event => {
                confirmToggle()
                let link = open_confirmElement.dataset.href;
                confirmConfirm.addEventListener('click', event2 => {
                    if (confirm.dataset.state === 'open') {
                        fetch(link).then(res => {
                            document.location = document.location;
                        });
                    }
                });

                document.addEventListener('keydown', event2 => {
                    if (confirm.dataset.state === 'open') {
                        if (event2.key === 'Enter') {
                            fetch(link).then(res => {
                                document.location = document.location;
                            });
                        }
                    }
                });
            })
        })

        const confirmToggle = () => {
            if (confirm.dataset.state === 'open') {
                confirm.classList.add('opacity-0')
                confirm.classList.remove('opacity-1')

                setTimeout(() => {
                    confirm.classList.add('hidden')
                    confirm.classList.remove('flex')
                }, 350)
                confirm.setAttribute('data-state', 'close');
            } else {
                confirm.classList.add('flex')
                confirm.classList.remove('hidden')

                setTimeout(() => {
                    confirm.classList.add('opacity-1')
                    confirm.classList.remove('opacity-0')
                }, 20)
                confirm.setAttribute('data-state', 'open');
            }
        }
    </script>
@endsection