@extends('layouts.app')

@section('headScripts')
@endsection

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <div class="">

                <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-lg">
                                    STOK KATEGORİLERİ</div>
                                {{-- <a href="{{ route('offers.index', ['filter' => 'all']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Tümü</a>
                                <a href="{{ route('offers.index', ['filter' => 'new']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'new' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Taslak</a>
                                --}}
                            </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 {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        print
                                    </span>
                                </a>
                                <a href="#" type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        file_export
                                    </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_circle</span>
                                </a>
                                --}}
                            </nav>
                        </div>
                    </header>
                </div>

                <div class="p-4 mt-4 border rounded-lg bg-sky-100 border-sky-300">
                    <p class="font-medium text-sky-800">
                        <span class="mr-1 align-middle material-symbols-rounded">info</span>
                        Stok kategorileri sabittir. Ekleme/silme ve düzenleme işlemleri yapılamaz.
                    </p>
                </div>

                <div class="flow-root mt-2">
                    <div class="-my-2 overflow-x-auto">
                        <div class="inline-block min-w-full py-2 align-middle">
                            <div x-data="{
                                    sortField: 'date',
                                    sortDirection: 'desc',
                                    sortedInvoices: [],
                                    init() {
                                        this.sortedInvoices = [...this.parseInvoices()];
                                        this.sort();
                                    },
                                    parseInvoices() {
                                        return Array.from(document.querySelectorAll('tbody tr')).map((row) => row);
                                    },
                                    toggleSort(field) {
                                        if (this.sortField === field) {
                                            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                                        } else {
                                            this.sortField = field;
                                            this.sortDirection = 'asc';
                                        }
                                        this.sort();
                                    },
                                    sort() {
                                        const tbody = document.querySelector('tbody');
                                        this.sortedInvoices.sort((a, b) => {
                                            let aValue, bValue;
                                            const cellIndex = Array.from(document.querySelectorAll('th')).findIndex(
                                                th => th.getAttribute('data-field') === this.sortField
                                            );

                                            if (cellIndex !== -1) {
                                                aValue = a.children[cellIndex].textContent.trim();
                                                bValue = b.children[cellIndex].textContent.trim();
                                            }

                                            if (this.sortField === 'date') {
                                                const dateA = this.parseDate(aValue);
                                                const dateB = this.parseDate(bValue);
                                                return this.sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
                                            }

                                            if (['total_sub', 'total_vat', 'total_amount'].includes(this.sortField)) {
                                                const numA = parseFloat(aValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                                const numB = parseFloat(bValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                                return this.sortDirection === 'asc' ? numA - numB : numB - numA;
                                            }

                                            return this.sortDirection === 'asc' ?
                                                aValue.localeCompare(bValue) :
                                                bValue.localeCompare(aValue);
                                        });

                                        // Clear and refill tbody
                                        while (tbody.firstChild) {
                                            tbody.removeChild(tbody.firstChild);
                                        }

                                        this.sortedInvoices.forEach(row => {
                                            tbody.appendChild(row);
                                        });
                                    },
                                    sortIcon(field) {
                                        if (this.sortField !== field) return '↕';
                                        return this.sortDirection === 'asc' ? '↑' : '↓';
                                    },
                                    parseDate(dateString) {
                                        // Parse date from format DD.MM.YYYY
                                        const parts = dateString.split('.');
                                        return new Date(parts[2], parts[1] - 1, parts[0]);
                                    }
                                }">
                                <table class="min-w-full divide-y divide-stone-300">
                                    <thead>
                                        <tr class="p-2 text-sm font-light text-right whitespace-nowrap text-stone-500">
                                            <th scope="col" data-field="name" @click="toggleSort('name')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Kategori Adı <span x-text="sortIcon('name')"></span></th>
                                            <th scope="col" data-field="slug" @click="toggleSort('slug')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Slug <span x-text="sortIcon('slug')"></span></th>
                                            <th scope="col" data-field="count" @click="toggleSort('count')"
                                                class="p-2 text-center cursor-pointer hover:bg-stone-100">
                                                Ürün Sayısı <span x-text="sortIcon('count')"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @if (count($categories) > 0)
                                        @foreach ($categories as $item)
                                        <tr class="transition-all hover:bg-stone-100">
                                            <td
                                                class="px-2 py-2 text-base font-medium text-stone-900 whitespace-nowrap">
                                                {{ $item->name }}
                                            </td>
                                            <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                {{ $item->slug }}
                                            </td>
                                            <td
                                                class="px-2 py-2 text-base font-bold text-center text-stone-600 whitespace-nowrap">
                                                {{ $item->stock_items_count }}
                                            </td>
                                        </tr>
                                        @endforeach
                                        @else
                                        <tr>
                                            <td colspan="3" class="px-2 py-8 text-center">
                                                <x-alert-standard color="stone">
                                                    Kategori bulunmuyor.
                                                </x-alert-standard>
                                            </td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pagination -->
                <div class="flex items-center justify-between mt-6">
                    <div class="text-sm text-stone-600">
                        {{ $categories->firstItem() ?? 0 }} - {{ $categories->lastItem() ?? 0 }} / {{
                        $categories->total() }} kayıt
                        gösteriliyor
                    </div>
                    <div class="flex space-x-2">
                        {{ $categories->links() }}
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- Create Category Modal -->
<div id="createCategoryModal" class="fixed inset-0 z-50 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 Kategori</h3>
            <button onclick="closeCategoryModal()" class="text-stone-400 hover:text-stone-600">
                <span class="text-2xl material-symbols-rounded">close</span>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="createCategoryForm" class="space-y-4">
            <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>

            <input type="hidden" name="type" value="pos_stock">

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

@endsection

@section('scripts')
<script>
    // Category Modal Functions
    function openCreateCategoryModal() {
        const modal = document.getElementById('createCategoryModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.getElementById('categoryName').focus();
    }

    function closeCategoryModal() {
        const modal = document.getElementById('createCategoryModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.getElementById('createCategoryForm').reset();
    }

    // Category Form Submit
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('createCategoryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const btn = document.getElementById('submitCategoryBtn');
            btn.disabled = true;
            btn.textContent = 'OLUŞTURULUYOR...';

            const payload = {
                name: document.getElementById('categoryName').value.trim(),
                type: 'pos_stock'
            };

            fetch('{{ route("stocks.categories.store") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('Hata: ' + (data.message || 'Kayıt başarısız.'));
                    btn.disabled = false;
                    btn.textContent = 'OLUŞTUR';
                }
            })
            .catch(err => {
                console.error(err);
                alert('Bir hata oluştu.');
                btn.disabled = false;
                btn.textContent = 'OLUŞTUR';
            });
        });
    });

    function printTable() {
            // Create a new window for printing
            let printWindow = window.open('', '_blank');

            // Get the table content
            let table = document.querySelector('table').cloneNode(true);

            // Create HTML for the print window
            let html = `
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Teklifler Raporu</title>
                    <meta charset="utf-8">
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        table { width: 100%; border-collapse: collapse; }
                        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                        th { background-color: #f2f2f2; }
                        .text-right { text-align: right; }
                        .print-header { margin-bottom: 20px; }
                        .print-footer { margin-top: 30px; font-size: 12px; text-align: center; color: #666; }
                        @media print {
                            button { display: none; }
                        }
                    </style>
                </head>
                <body>
                    <div class="print-header">
                        <h1>Teklifler</h1>
                        <p>Yazdırma Tarihi: ${new Date().toLocaleDateString('tr-TR')}</p>
                    </div>

                    <button onclick="window.print(); return false;" style="padding: 8px 16px; margin-bottom: 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Yazdır</button>

                    <div id="table-container"></div>

                    <div class="print-footer">
                        <p>Bu rapor Apper {{ $tool_name }} ile {{ date('d.m.Y') }} tarihinde oluşturulmuştur.</p>
                    </div>
                </body>
                </html>
                `;

            // Write to the new window
            printWindow.document.write(html);

            // Insert the table into the container
            printWindow.document.getElementById('table-container').appendChild(table);

            // Make all columns visible and properly formatted for print
            let rows = printWindow.document.querySelectorAll('table tr');
            rows.forEach(row => {
                let cells = row.querySelectorAll('th, td');
                cells.forEach(cell => {
                    if (cell.classList.contains('text-right')) {
                        cell.style.textAlign = 'right';
                    }
                });
            });

            // Finish loading the document
            printWindow.document.close();
        }
</script>
@endsection