@extends('layouts.app')

@section('content')
<div class="px-4 pb-60">

    <!-- Create PosProduct Modal -->
    <div id="createPosProductModal"
        class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
        <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-stone-900">Yeni Ürün</h3>
                <button onclick="closeCreatePosProductModal()" class="text-stone-400 hover:text-stone-600">
                    <span class="text-2xl material-symbols-rounded">close</span>
                </button>
            </div>

            <!-- Modal Body -->
            <form action="{{ route('pos-products.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label for="productName" class="block mb-1 text-sm font-medium text-stone-700">Ürün Adı</label>
                    <input type="text" id="productName" name="name" required
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                </div>

                <div>
                    <label for="productBarcode" class="block mb-1 text-sm font-medium text-stone-700">Barkod
                        (Opsiyonel)</label>
                    <input type="text" id="productBarcode" name="barcode"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                </div>

                <div>
                    <label for="productCategory" class="block mb-1 text-sm font-medium text-stone-700">Kategori</label>
                    <select id="productCategory" name="category_id"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500">
                        <option value="">Seçiniz (Opsiyonel)</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="productVat" class="block mb-1 text-sm font-medium text-stone-700">KDV (%)</label>
                        <input type="number" id="productVat" name="vat_pct" required min="0" max="100" value="20"
                            class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                    </div>
                    <div>
                        <label for="productUom" class="block mb-1 text-sm font-medium text-stone-700">Birim</label>
                        <select id="productUom" name="uom" required
                            class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500">
                            <option value="piece">Adet</option>
                            <option value="kilogram">Kg</option>
                            <option value="gram">Gram</option>
                            <option value="liter">Litre</option>
                            <option value="centiliter">Santilitre</option>
                            <option value="milliliter">Millilitre</option>
                            <option value="minute">Dakika</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label for="productSalePrice" class="block mb-1 text-sm font-medium text-stone-700">Satış
                        Fiyatı</label>
                    <input type="number" id="productSalePrice" name="sale_price" step="0.01" min="0"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" onclick="closeCreatePosProductModal()"
                        class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                        VAZGEÇ
                    </button>
                    <button type="submit" id="submitCreateProductBtn"
                        class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                        OLUŞTUR
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- BREADCRUMB --}}
    <nav class="flex py-2" aria-label="Breadcrumb">
        <ol role="list" class="flex items-center space-x-4 uppercase">
            <li>
                <div>
                    <a href="{{ route('dashboard') }}" class="text-stone-400 hover:text-stone-500">
                        <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                clip-rule="evenodd" />
                        </svg>
                        <span class="sr-only">Home</span>
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                        aria-hidden="true">
                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                    </svg>
                    <a href="{{ route('pos-categories.index') }}"
                        class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">SATIŞ KATEGORİLERİ</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="flex-shrink-0 w-5 h-5 text-stone-300" fill="currentColor" viewBox="0 0 20 20"
                        aria-hidden="true">
                        <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                    </svg>
                    <a href="#" class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700"
                        aria-current="page">{{ $categoryName ?? 'Tüm Ürünler' }}</a>
                </div>
            </li>
        </ol>
    </nav>

    <div class="mt-4 sm:flex sm:items-center gap-x-2">
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <div
                        class="bg-gradient-to-b from-stone-600 uppercase to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                        @if(isset($categoryName))
                        {{ $categoryName }}
                        @else
                        SATIŞ ÜRÜNLERİ
                        @endif
                    </div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Ürün adına göre arama yap..."
                            class="w-full px-3.5 py-2 text-sm rounded-r-md border-none" />
                    </div>
                </nav>
            </div>
        </header>
        <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
            <div class="lg:divide-y lg:divide-stone-200">
                <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                    <a href="#" onclick="printTable(); return false;" type="button"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                        <span class="material-symbols-rounded text-stone-400">print</span>
                    </a>
                    <a href="#" onclick="exportTable(); return false;" type="button"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                        <span class="material-symbols-rounded text-stone-400">file_export</span>
                    </a>
                    <a href="#" onclick="createPosProductModal(); return false;" type="button"
                        class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                        <span class="material-symbols-rounded text-stone-400">add</span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    <div id="pos-product-list" class="max-w-4xl mt-4 pb-60">
        <div class="p-2 bg-white rounded-lg shadow">
            @if(session()->has('message'))
            <div class="px-4 py-2 mb-4 text-teal-700 bg-teal-100 rounded">
                {{ session('message') }}
            </div>
            @endif

            @if(session()->has('error'))
            <div class="px-4 py-2 mb-4 rounded text-rose-700 bg-rose-100">
                {{ session('error') }}
            </div>
            @endif

            <ul id="sortableList" class="space-y-1">
                @foreach($products as $product)
                <li class="flex items-center px-4 py-1 border rounded cursor-move gap-x-2 text-stone-500 bg-stone-50 hover:bg-stone-100 sortable-item"
                    data-id="{{ $product->id }}">
                    <span class="cursor-move text-stone-400 sortable-handle">
                        <span class="mt-1 material-symbols-rounded">
                            drag_indicator
                        </span>
                    </span>
                    <span class="text-xs">{{ $product->id }}</span>
                    <a href="{{ route('pos-products.show', $product->id) }}"
                        class="font-medium text-stone-800 hover:text-stone-600 hover:underline">{{ $product->name }}</a>
                    @if ($product->image)
                    <span class="material-symbols-rounded text-base text-stone-400">image</span>
                    @endif
                    @if ($product->translations && $product->translations->count() > 0)
                    <div class="flex items-center gap-x-1">
                        <span class="material-symbols-rounded text-base text-stone-400">translate</span>
                        <span class="text-base text-stone-400">{{ $product->translations->count() }}</span>
                    </div>
                    @endif
                    @if(!isset($categoryName))
                    <span class="ml-auto flex gap-x-1 text-stone-600">
                        @if($product->categories->count() > 0)
                        @foreach($product->categories as $category)
                        <span
                            class="rounded-md bg-stone-100 px-2 py-1 text-xs font-medium text-stone-500 ring-1 ring-inset ring-stone-300">
                            {{ $category->name }}
                        </span>
                        @endforeach
                        @else
                        Kategorisiz
                        @endif
                    </span>
                    @else
                    <span class="ml-auto flex gap-x-1 text-stone-600">
                        @if($product->categories->count() > 0)
                        @foreach($product->categories as $category)
                        <span
                            class="rounded-md bg-stone-100 px-2 py-1 text-xs font-medium text-stone-500 ring-1 ring-inset ring-stone-300">
                            {{ $category->name }}
                        </span>
                        @endforeach
                        @else
                        Kategorisiz
                        @endif
                    </span>
                    @endif
                    <div class="flex items-center gap-x-1 text-stone-600 font-medium text-sm ml-2">
                        {{ number_format($product->gross_price, 2, ',', '.') }}
                        <span class="material-symbols-rounded text-xs text-stone-400">sell</span>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>


<script>
    // Modal functions
    function createPosProductModal() {
        document.getElementById('createPosProductModal').classList.remove('hidden');
    }

    function closeCreatePosProductModal() {
        document.getElementById('createPosProductModal').classList.add('hidden');
    }

    // Keep track of the sortable instance
    let sortableInstance = null;

    // Function to initialize Sortable (can be called multiple times)
    function initSortable() {
        // Destroy existing instance if it exists
        if (sortableInstance) {
            sortableInstance.destroy();
        }

        // Initialize SortableJS
        sortableInstance = new window.Sortable.create(document.getElementById('sortableList'), {
            handle: '.sortable-handle',
            animation: 150,
            onEnd: function (evt) {
                // Get the new order of items
                const items = Array.from(document.getElementById('sortableList').children).map((el) => {
                    return parseInt(el.dataset.id);
                });

                console.log('Sürükleme işlemi tamamlandı. Yeni sıralama: ', items);

                // Send the new order to the server
                updateOrderOnServer(items);
            }
        });
    }

    // Initialize on DOM load
    document.addEventListener('DOMContentLoaded', function() {
        initSortable();

        // Watch for Livewire updates and reinitialize Sortable if needed
        document.addEventListener('livewire:navigated', function() {
            setTimeout(() => {
                initSortable();
            }, 100);
        });
    });

    // Listen for Livewire updates using MutationObserver in case DOM changes
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                const sortableContainer = document.getElementById('sortableList');
                if (sortableContainer && sortableContainer.querySelector('li[data-id]')) {
                    // Check if the sortable instance is still connected to the DOM
                    const isInstanceConnected = sortableInstance && sortableInstance.el && document.contains(sortableInstance.el);

                    if (!isInstanceConnected) {
                        setTimeout(() => {
                            initSortable();
                        }, 100);
                    }
                }
            }
        });
    });

    // Start observing
    if (document.getElementById('sortableList')) {
        observer.observe(document.getElementById('sortableList'), {
            childList: true,
            subtree: true
        });
    }

    async function updateOrderOnServer(orderedItems) {
        try {
            const response = await fetch('{{ route("pos-products.update-order") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    items: orderedItems
                })
            });

            const result = await response.json();

            if (response.ok) {
                showMessage(result.message, 'success');
            } else {
                showMessage(result.error || 'Sıralama güncellenirken bir hata oluştu', 'error');
            }
        } catch (error) {
            console.error('Error updating order:', error);
            showMessage('Sunucuya bağlanırken bir hata oluştu', 'error');
        }
    }

    function showMessage(message, type) {
        // Remove any existing messages
        const existingMessage = document.querySelector('.message-container');
        if (existingMessage) {
            existingMessage.remove();
        }

        // Create new message container
        const messageDiv = document.createElement('div');
        messageDiv.className = `message-container px-4 py-2 mb-4 rounded ${type === 'success' ? 'text-green-700 bg-green-100' : 'text-red-700 bg-red-100'}`;
        messageDiv.textContent = message;

        // Insert after the heading or at the beginning of the container
        const container = document.querySelector('#pos-product-list .p-2');
        const heading = document.querySelector('h3');

        if (heading && heading.parentNode && container.contains(heading)) {
            // If heading exists and is in the container, insert after it
            heading.parentNode.insertBefore(messageDiv, heading.nextSibling);
        } else {
            // If no heading, insert at the beginning of the container
            container.insertBefore(messageDiv, container.firstChild);
        }

        // Auto-remove after 5 seconds
        setTimeout(() => {
            if (messageDiv.parentNode) {
                messageDiv.remove();
            }
        }, 5000);
    }

    function printTable() {
        window.print();
    }

    function exportTable() {
        // Get all the product elements
        const productElements = document.querySelectorAll('#sortableList li');

        // Create CSV content
        let csvContent = 'ID,Ürün Adı,Kategoriler\n';

        productElements.forEach(element => {
            const id = element.getAttribute('data-id');
            const name = element.querySelector('.font-medium').textContent.trim();
            let categories = '';

            // Check if we're viewing a specific category (then all items will have the same category)
            if (document.querySelector('div[style*="KATEGORİSİNE AİT ÜRÜNLER"]')) {
                // Extract category name from header
                const headerText = document.querySelector('div[style*="KATEGORİSİNE AİT ÜRÜNLER"]').textContent;
                categories = headerText.replace(' KATEGORİSİNE AİT ÜRÜNLER', '');
            } else {
                // Get multiple categories from product
                const categoryText = element.querySelector('.text-stone-600').textContent.trim();
                categories = categoryText.replace('Kategoriler: ', '');
            }

            csvContent += `"${id}","${name}","${categories}"\n`;
        });

        // Create a Blob and download
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);

        link.setAttribute('href', url);
        link.setAttribute('download', 'urun_listesi_' + new Date().toISOString().slice(0,10) + '.csv');
        link.style.visibility = 'hidden';

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // Vanilla JS search functionality
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');
        const productList = document.getElementById('sortableList');
        const productItems = productList.querySelectorAll('li');

        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();

            productItems.forEach(function(item) {
                const productName = item.querySelector('.font-medium').textContent.toLowerCase();
                const productId = item.querySelector('.text-xs').textContent.toLowerCase();

                // Also search in categories
                const categoryElement = item.querySelector('.text-stone-600');
                const categoryText = categoryElement ? categoryElement.textContent.toLowerCase() : '';

                if (productName.includes(searchTerm) || productId.includes(searchTerm) || categoryText.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection