@extends('layouts.app')

@section('content')
<!-- Create Category Modal -->
<div id="createCategoryModal" 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 max-h-[90vh] overflow-y-auto">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-stone-900">Yeni Kategori</h3>
            <button onclick="closeCreateCategoryModal()" 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-categories.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label for="categoryName" class="block mb-1 text-sm font-medium text-stone-700">Kategori Adı</label>
                <input type="text" id="categoryName" 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="categoryInvoiceTitle" class="block mb-1 text-sm font-medium text-stone-700">Fatura
                    Başlığı</label>
                <input type="text" id="categoryInvoiceTitle" name="invoice_title"
                    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 class="flex flex-wrap gap-1 mt-2">
                    <span onclick="document.getElementById('categoryInvoiceTitle').value = 'YİYECEK & İÇECEK %10'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        YİYECEK & İÇECEK %10
                    </span>
                    <span onclick="document.getElementById('categoryInvoiceTitle').value = 'HİZMET & ALKOLLÜ İÇC %20'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        HİZMET & ALKOLLÜ İÇC %20
                    </span>
                    <span onclick="document.getElementById('categoryInvoiceTitle').value = 'OTEL HİZMETLERİ %10'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        OTEL HİZMETLERİ %10
                    </span>
                    <span onclick="document.getElementById('categoryInvoiceTitle').value = 'OTEL HİZMETLERİ %20'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        OTEL HİZMETLERİ %20
                    </span>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" id="categoryAppEnabled" name="app_enabled" value="1"
                    class="w-4 h-4 rounded text-stone-600 border-stone-300 focus:ring-stone-500">
                <label for="categoryAppEnabled" class="text-sm font-medium text-stone-700">
                    Uygulamada Görünsün
                </label>
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" id="categoryMenuEnabled" name="menu_enabled" value="1"
                    class="w-4 h-4 rounded text-stone-600 border-stone-300 focus:ring-stone-500">
                <label for="categoryMenuEnabled" class="text-sm font-medium text-stone-700">
                    Menüde Görünsün
                </label>
            </div>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeCreateCategoryModal()"
                    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="submitCreateCategoryBtn"
                    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>

<!-- Edit Category Modal -->
<div id="editCategoryModal" 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 max-h-[90vh] overflow-y-auto">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-stone-900">Kategori Düzenle</h3>
            <button onclick="closeEditCategoryModal()" class="text-stone-400 hover:text-stone-600">
                <span class="text-2xl material-symbols-rounded">close</span>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="editCategoryForm" class="space-y-4">
            @csrf
            @method('PUT')
            <input type="hidden" id="editCategoryId" name="id" />
            <div>
                <label for="editCategoryName" class="block mb-1 text-sm font-medium text-stone-700">Kategori Adı</label>
                <input type="text" id="editCategoryName" 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="editCategoryInvoiceTitle" class="block mb-1 text-sm font-medium text-stone-700">Fatura
                    Başlığı</label>
                <input type="text" id="editCategoryInvoiceTitle" name="invoice_title"
                    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 class="flex flex-wrap gap-1 mt-2">
                    <span onclick="document.getElementById('editCategoryInvoiceTitle').value = 'YYCEK/İÇC %10'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        YYCEK/İÇC %10
                    </span>
                    <span onclick="document.getElementById('editCategoryInvoiceTitle').value = 'HZMET/ALKOL.İÇC %20'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        HZMET/ALKOL.İÇC %20
                    </span>
                    <span onclick="document.getElementById('editCategoryInvoiceTitle').value = 'OTEL HİZM. %10'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        OTEL HİZM. %10
                    </span>
                    <span onclick="document.getElementById('editCategoryInvoiceTitle').value = 'OTEL HİZM. %20'"
                        class="inline-flex items-center px-2 py-1 text-xs font-medium text-stone-600 bg-stone-100 rounded-md cursor-pointer hover:bg-stone-200 transition-colors">
                        OTEL HİZM. %20
                    </span>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" id="editCategoryAppEnabled" name="app_enabled" value="1"
                    class="w-4 h-4 rounded text-stone-600 border-stone-300 focus:ring-stone-500">
                <label for="editCategoryAppEnabled" class="text-sm font-medium text-stone-700">
                    Uygulamada Görünsün
                </label>
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" id="editCategoryMenuEnabled" name="menu_enabled" value="1"
                    class="w-4 h-4 rounded text-stone-600 border-stone-300 focus:ring-stone-500">
                <label for="editCategoryMenuEnabled" class="text-sm font-medium text-stone-700">
                    Menüde Görünsün
                </label>
            </div>

            <div class="flex justify-end gap-2">
                <button type="button" id="archiveCategoryBtn" onclick="archiveCategory()"
                    class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-rose-700 border-rose-300 hover:bg-rose-50 disabled:opacity-50 disabled:cursor-not-allowed">
                    ARŞİVLE
                </button>
                <button type="button" onclick="closeEditCategoryModal()"
                    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="submitEditCategoryBtn"
                    class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                    KAYDET
                </button>
            </div>
        </form>
    </div>
</div>

<div class="px-4 mx-auto pb-60">

    <div class="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 to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                        SATIŞ KATEGORİLERİ</div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Kategori 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="{{ route('pos-categories.archived') }}" 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">archive</span>
                    </a>
                    <a href="#" onclick="openCreateCategoryModal(); 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-category-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 ($categories as $category)
                <li class="flex items-center px-4 py-1 transition-all border rounded cursor-move gap-x-2 text-stone-500 bg-stone-50 hover:bg-stone-100 sortable-item"
                    data-id="{{ $category->id }}">
                    <span class="cursor-move text-stone-400 sortable-handle">
                        <span class="mt-1 material-symbols-rounded">
                            drag_indicator
                        </span>
                    </span>
                    <div class="flex items-center font-medium gap-x-3 text-stone-800">
                        <a href="{{ route('pos-products.index', ['category_id' => $category->id]) }}"
                            class="hover:underline">
                            {{ $category->name }}
                        </a>
                        <div class="flex items-center text-sm gap-x-1 text-stone-400">
                            <span class="text-base material-symbols-rounded">fastfood</span>
                            {{ $category->products_count }}
                        </div>
                        <div class="flex items-center text-sm gap-x-1 text-stone-300">
                            <span class="text-base material-symbols-rounded">receipt</span>
                            {{ $category->invoice_title }}
                        </div>
                    </div>
                    <div
                        class="flex items-center ml-auto text-sm transition-all gap-x-3 text-stone-400 hover:text-stone-600">
                        <span class="text-xs">{{ $category->id }}</span>
                        <a href="#"
                            onclick="openEditCategoryModal({{ $category->id }}, '{{ addslashes($category->name) }}', '{{ addslashes($category->invoice_title ?? '') }}', {{ $category->app_enabled ? 'true' : 'false' }}, {{ $category->menu_enabled ? 'true' : 'false' }}, {{ $category->products_count }}); return false;"
                            class="flex items-center gap-x-1">
                            <span class="material-symbols-rounded">edit</span>
                            Düzenle
                        </a>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>


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

    function closeCreateCategoryModal() {
        document.getElementById('createCategoryModal').classList.add('hidden');
    }

    // Edit Category Modal functions
    function openEditCategoryModal(categoryId, categoryName, invoiceTitle, appEnabled, menuEnabled, productsCount) {
        document.getElementById('editCategoryId').value = categoryId;
        document.getElementById('editCategoryName').value = categoryName;
        document.getElementById('editCategoryInvoiceTitle').value = invoiceTitle || '';
        document.getElementById('editCategoryAppEnabled').checked = appEnabled || false;
        document.getElementById('editCategoryMenuEnabled').checked = menuEnabled || false;

        // Arşiv butonu durumu
        const archiveBtn = document.getElementById('archiveCategoryBtn');
        if (productsCount > 0) {
            archiveBtn.disabled = true;
            archiveBtn.title = `Bu kategoriye ${productsCount} ürün atanmış. Önce ürünleri taşıyın.`;
        } else {
            archiveBtn.disabled = false;
            archiveBtn.title = 'Bu kategoriyi arşivle';
        }

        document.getElementById('editCategoryModal').classList.remove('hidden');
    }

    function closeEditCategoryModal() {
        document.getElementById('editCategoryModal').classList.add('hidden');
    }

    // Archive Category via AJAX
    async function archiveCategory() {
        const categoryId = document.getElementById('editCategoryId').value;
        if (!categoryId) return;

        const categoryName = document.getElementById('editCategoryName').value;
        if (!confirm(`"${categoryName}" kategorisini arşivlemek istediğinize emin misiniz?`)) return;

        try {
            const response = await fetch('{{ route("pos-categories.archive", ["id" => "__ID__"]) }}'.replace('__ID__', categoryId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });

            const result = await response.json();

            if (response.ok) {
                closeEditCategoryModal();
                // Kategori satırını DOM'dan kaldır
                const listItem = document.querySelector(`li[data-id="${categoryId}"]`);
                if (listItem) {
                    listItem.remove();
                }
                showMessage(result.message, 'success');
            } else {
                showMessage(result.error || 'Kategori arşivlenirken bir hata oluştu', 'error');
            }
        } catch (error) {
            console.error('Error archiving category:', error);
            showMessage('Sunucuya bağlanırken bir hata oluştu', 'error');
        }
    }

    // Edit Category Form Submit
    document.addEventListener('DOMContentLoaded', function () {
        const editForm = document.getElementById('editCategoryForm');
        editForm.addEventListener('submit', async function (e) {
            e.preventDefault();
            const categoryId = document.getElementById('editCategoryId').value;
            const categoryName = document.getElementById('editCategoryName').value;
            const invoiceTitle = document.getElementById('editCategoryInvoiceTitle').value;
            const appEnabled = document.getElementById('editCategoryAppEnabled').checked ? 1 : 0;
            const menuEnabled = document.getElementById('editCategoryMenuEnabled').checked ? 1 : 0;

            try {
                const response = await fetch('{{ route("pos-categories.update", ["id" => "__ID__"]) }}'.replace('__ID__', categoryId), {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        name: categoryName,
                        invoice_title: invoiceTitle,
                        app_enabled: appEnabled,
                        menu_enabled: menuEnabled
                    })
                });

                const result = await response.json();

                if (response.ok) {
                    closeEditCategoryModal();
                    showMessage(result.message, 'success');
                    // Sayfayı yenile ki kategori listesi güncellensin
                    setTimeout(() => window.location.reload(), 800);
                } else {
                    showMessage(result.error || 'Kategori güncellenirken bir hata oluştu', 'error');
                }
            } catch (error) {
                console.error('Error updating category:', error);
                showMessage('Sunucuya bağlanırken bir hata oluştu', 'error');
            }
        });
    });

    // 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-categories.reorder') }}', {
                    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-category-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 category elements
            const categoryElements = document.querySelectorAll('#sortableList li');

            // Create CSV content
            let csvContent = 'ID,Kategori Adı,Ürün Sayısı\n'; // Removed Sıra Numarası since it's not applicable here

            categoryElements.forEach(element => {
                const id = element.getAttribute('data-id');
                const name = element.querySelector('.font-medium a').textContent.trim();
                const productCountText = element.querySelector('.text-stone-500').textContent.trim();
                // Extract just the number from "Ürün Sayısı: XX"
                const productCount = productCountText.replace('Ürün Sayısı: ', '');

                csvContent += `"${id}","${name}","${productCount}"\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', 'kategori_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 categoryList = document.getElementById('sortableList');
            const categoryItems = categoryList.querySelectorAll('li');

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

                categoryItems.forEach(function(item) {
                    const categoryName = item.querySelector('.font-medium a').textContent
                        .toLowerCase();
                    const categoryId = item.querySelector('.text-xs').textContent.toLowerCase();

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