@extends('layouts.app')

@section('headScripts')
@endsection

@section('content')

{{-- İŞLEV ÇUBUĞU --}}
<header class="tracking-tight shadow bg-gradient-to-b from-stone-100 to-white">
    <div class="lg:divide-y lg:divide-stone-200">
        <nav class="hidden divide-x lg:flex" aria-label="Global">
            <div
                class="bg-gradient-to-b from-stone-600 to-stone-500 ps-2.5 pe-4 py-1.5 text-sm text-stone-50 shadow-sm rounded-e-2xl">
                {{ $product->name }}</div>
            <a href="{{ route('pos-products.export-excel', $product->id) }}" id="exportBtn" type="button"
                class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Dışa Aktar</a>
            <a href="#" id="printBtn" type="button"
                class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Yazdır</a>
        </nav>
    </div>
</header>

<div class="">
    <main>
        <div class="w-full px-4 pt-4 pb-60 sm:px-6 lg:px-8">
            <div
                class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-3">

                {{-- BREADCRUMB --}}
                <nav class="flex py-2" aria-label="Breadcrumb">
                    <ol role="list" class="flex items-center space-x-3 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>
                                </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-nowrap 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="{{ route('pos-products.index', ['category_id' => $product->categories->first()->id ?? '']) }}"
                                    class="ml-4 text-sm font-medium text-nowrap text-stone-500 hover:text-stone-700">{{
                                    $product->categories->first()->name ?? '' }}</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-nowrap text-stone-500 hover:text-stone-700"
                                    aria-current="page">{{ $product->name }}</a>
                            </div>
                        </li>
                    </ol>
                </nav>

                <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                    {{-- SAYFA BAŞLIĞI --}}
                    <div class="overflow-hidden rounded-lg shadow bg-teal-50 ring-1 ring-teal-300">
                        <div class="p-6">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-x-4">
                                    <div class="flex items-center">
                                        <span class="text-5xl text-teal-500 material-symbols-rounded">
                                            fork_spoon
                                        </span>
                                    </div>
                                    <div class="w-full">
                                        <p class="text-xl font-bold text-teal-900 uppercase truncate sm:text-3xl">
                                            {{ $product->name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ÇEVİRİLER -->
                    <div class="grid gap-4">
                        @livewire('product-translation-manager', ['productId' => $product->id])
                    </div>
                </div>

                {{-- SAĞ PANEL --}}
                <div class="grid grid-cols-1 gap-4 sm:mx-0 lg:col-start-3">

                    {{-- ÜRÜN BİLGİLERİ --}}
                    <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                        <span class="mr-1 material-symbols-rounded">
                            info
                        </span>
                        Ürün Bilgileri
                    </h2>

                    <livewire:pos-product-edit :product-id="$product->id" />

                    <!-- ÜRÜN GÖRSELİ -->
                    <div class="p-4 bg-white rounded-lg shadow-sm ring-1 ring-stone-300">
                        @livewire('image-upload', [
                        'relationId' => $product->id,
                        'imageType' => 'product',
                        'service' => 'menu',
                        'label' => 'ÜRÜN GÖRSELİ',
                        'height' => 'h-48',
                        'allowDelete' => true
                        ])
                    </div>

                    {{-- DEĞİŞİKLİK GEÇMİŞİ --}}
                    <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                        <span class="mr-1 material-symbols-rounded">
                            history
                        </span>
                        Değişiklik Geçmişi
                    </h2>

                    <livewire:product-logs :product-id="$product->id" product-type="PosProduct" />

                </div>

            </div>
        </div>
    </main>
</div>

@endsection

@section('scripts')
<script>
    (function() {
    // Prevent multiple initializations
    if (window.printButtonSetupDone) return;
    window.printButtonSetupDone = true;

    document.addEventListener('DOMContentLoaded', function() {
        console.log('Setting up print button');

        const printBtn = document.getElementById('printBtn');
        if (!printBtn) {
            console.error('Print button not found');
            return;
        }

        // Handle print click
        function handlePrint(e) {
            e.preventDefault();
            console.log('Print clicked');

            try {
                const printWindow = window.open('', '_blank', 'width=1000,height=800');
                if (!printWindow) {
                    alert('Popup blocker detected! Please allow popups.');
                    return;
                }

                let html = `
<!DOCTYPE html>
<html>
<head>
    <title>{{ $product->name }} - ÜRÜN KARTI</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.4; color: #333; }
        h1 { text-align: center; margin-bottom: 30px; color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; }
        h2 { color: #444; margin: 25px 0 15px 0; font-size: 18px; padding: 8px 0; border-bottom: 1px solid #eee; }
        .section { margin-bottom: 30px; padding: 15px; border: 1px solid #eee; border-radius: 5px; }
        table { border-collapse: collapse; width: 100%; margin: 15px 0; font-size: 14px; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background-color: #f8f9fa; font-weight: bold; }
        .text-right { text-align: right; }
        .flex { display: flex; }
        .justify-between { justify-content: space-between; }
        .info-row { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
        .info-label { font-weight: 600; color: #555; width: 30%; }
        .info-value { width: 70%; text-align: right; }
        /* Recipe section styling */
        .recipe-item { display: flex; justify-content: space-between; padding: 4px 0; }
        .recipe-item-name { flex: 3; text-align: left; }
        .recipe-item-quantity { flex: 1; text-align: right; }
        .recipe-item-cost { flex: 1; text-align: right; }
        @media print { body { margin: 0; } }
    </style>
</head>
<body>
    <h1>{{ $product->name }} - ÜRÜN KARTI</h1>
    <div style="text-align: center; margin-bottom: 20px; color: #666; font-size: 14px;">
        Yazdırma Tarihi: ${new Date().toLocaleDateString('tr-TR')} ${new Date().toLocaleTimeString('tr-TR')}
    </div>

    <div class="section">
        <h2>ÜRÜN BİLGİLERİ</h2>
        <div class="flex justify-between info-row">
            <div class="info-label">Ürün Adı:</div>
            <div class="info-value">{{ $product->name }}</div>
        </div>
        <div class="flex justify-between info-row">
            <div class="info-label">Birim:</div>
            <div class="info-value">{{ $product->uom ? uom_localized($product->uom) : '-' }}</div>
        </div>
        <div class="flex justify-between info-row">
            <div class="info-label">Açıklama:</div>
            <div class="info-value">{{ $product->description ?? '-' }}</div>
        </div>
        <div class="flex justify-between info-row">
            <div class="info-label">Stok Takibi:</div>
            <div class="info-value">{{ $product->is_stock_enabled ? 'Etkin' : 'Devre Dışı' }}</div>
        </div>
        <div class="flex justify-between info-row">
            <div class="info-label">Maliyet:</div>
            <div class="info-value">{{ number_format($totalBaseCost, 2, ',', '.') }} ₺</div>
        </div>
        <div class="flex justify-between info-row">
            <div class="info-label">Satış Fiyatı:</div>
            <div class="info-value">{{ number_format($product->gross_price, 2) }} ₺</div>
        </div>
        <div class="flex justify-between info-row">
            <div class="info-label">KDV Oranı:</div>
            <div class="info-value">%{{ number_format($product->vat_pct, 0) }}</div>
        </div>
    </div>`;

                // Add sales table
                const salesTable = document.querySelector('table');
                if (salesTable) {
                    html += `
    <div class="section">
        <h2>SATIŞ HAREKETLERİ</h2>`;
                    html += salesTable.outerHTML;
                    html += `</div>`;
                }

                // Add recipe section with proper styling
                const recipeHeaders = document.querySelectorAll('h2');
                for (let h2 of recipeHeaders) {
                    if (h2.textContent.includes('Ürün Reçetesi')) {
                        const container = h2.nextElementSibling;
                        if (container) {
                            // Extract recipe items using safer DOM traversal
                            const recipeItems = [];

                            // Get all direct child divs that contain recipe items
                            const childDivs = Array.from(container.children).filter(el => el.tagName === 'DIV');

                            childDivs.forEach(div => {
                                // Skip header and total rows
                                if (div.classList.contains('mb-1') || div.classList.contains('flex') && div.classList.contains('justify-between') && div.classList.contains('text-base')) {
                                    return;
                                }

                                // Try to extract data from the div structure
                                const children = Array.from(div.children);
                                let name = '';
                                let quantity = '';
                                let cost = '';

                                // Look for name (first child or anchor)
                                if (children.length > 0) {
                                    const firstChild = children[0];
                                    if (firstChild.tagName === 'A') {
                                        name = firstChild.textContent.trim();
                                    } else if (firstChild.classList.contains('text-sm')) {
                                        name = firstChild.textContent.trim();
                                    }
                                }

                                // Look for quantity (second child or specific pattern)
                                if (children.length > 1) {
                                    const secondChild = children[1];
                                    if (secondChild.classList.contains('text-sm') && secondChild.classList.contains('text-right')) {
                                        quantity = secondChild.textContent.trim();
                                    }
                                }

                                // Look for cost (third child or specific pattern)
                                if (children.length > 2) {
                                    const thirdChild = children[2];
                                    if (thirdChild.classList.contains('text-sm') && thirdChild.classList.contains('text-right')) {
                                        cost = thirdChild.textContent.trim();
                                    }
                                }

                                // Fallback: try to parse from innerHTML if above fails
                                if (!name && !quantity && !cost) {
                                    const textContent = div.textContent.trim();
                                    // Simple parsing for common patterns
                                    if (textContent.includes('Kg') || textContent.includes('gr') || textContent.includes('Ad') || textContent.includes('L')) {
                                        // This is likely a recipe item, try to split
                                        const parts = textContent.split(/\s+/).filter(p => p);
                                        if (parts.length >= 2) {
                                            name = parts[0];
                                            quantity = parts.slice(1).join(' ');
                                        }
                                    }
                                }

                                if (name || quantity || cost) {
                                    recipeItems.push({name, quantity, cost});
                                }
                            });

                            html += `
    <div class="section">
        <h2>ÜRÜN REÇETESİ</h2>
        <div class="mb-2 text-lg font-semibold text-stone-800">{{ $product->name }}</div>`;

                            recipeItems.forEach(item => {
                                html += `
        <div class="recipe-item">
            <div class="recipe-item-name">${item.name}</div>
            <div class="recipe-item-quantity">${item.quantity}</div>
            <div class="recipe-item-cost">${item.cost}</div>
        </div>`;
                            });

                            // Add total cost
                            html += `
        <div class="flex justify-between mt-4 text-base font-semibold text-stone-800">
            <div>TOPLAM MALİYET:</div>
            <div>{{ number_format($totalBaseCost, 2, ',', '.') }} ₺</div>
        </div>`;

                            html += `</div>`;
                        }
                        break;
                    }
                }

                // Add history section
                for (let h2 of recipeHeaders) {
                    if (h2.textContent.includes('Değişiklik Geçmişi')) {
                        const container = h2.nextElementSibling;
                        if (container) {
                            html += `
    <div class="section">
        <h2>DEĞİŞİKLİK GEÇMİŞİ</h2>`;
                            html += container.innerHTML;
                            html += `</div>`;
                        }
                        break;
                    }
                }

                html += `</body></html>`;

                printWindow.document.write(html);
                printWindow.document.close();

                printWindow.onload = function() {
                    printWindow.focus();
                    setTimeout(() => printWindow.print(), 1000);
                };

            } catch (err) {
                console.error('Print error:', err);
                alert('Yazdırma hatası: ' + err.message);
            }
        }

        printBtn.addEventListener('click', handlePrint);
    });
})();
</script>
@endsection