@extends('layouts.app')

@section('content')
<div class="w-full px-4 pb-60">
    <!-- Report Header -->
    <div class="pb-4 sm:flex sm:items-center gap-x-4">
        <!-- Back Link -->
        <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="{{ route('reports.inventory.index') }}"
                        class="flex items-center content-center px-3.5 py-1 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-600 hover:text-stone-900">
                        <span class="text-lg material-symbols-rounded">
                            arrow_back
                        </span>
                    </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">
                    <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 uppercase">
                        {{ $monthName }} {{ $year }} ENVANTER RAPORU</div>
                </nav>
            </div>
        </header>

        <!-- Action Buttons -->
        <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="{{ route('reports.inventory.export', [$year, $month]) }}" 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 hover:text-stone-700">
                        <span class="material-symbols-rounded">
                            file_export
                        </span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    {{-- SAYFA HAKKINDA BİLGİLENDİRME --}}
    <div class="max-w-5xl p-4 mb-4 rounded-md bg-stone-50">
        <div class="flex">
            <div class="shrink-0">
                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                    class="text-stone-400 size-5">
                    <path
                        d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                        clip-rule="evenodd" fill-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-1 ml-3 md:flex md:justify-between">
                <p class="text-sm text-stone-700">Stok miktarı sıfır olan ve ay içinde hareketi bulunmayan stok kartları
                    listelenmiyor.
                </p>
                <p class="mt-3 text-sm md:ml-6 md:mt-0">
                </p>
            </div>
        </div>
    </div>

    {{-- KATEGORİ GRUPLAMA SEÇENEĞİ --}}
    <div class="flex items-center justify-between p-4 mb-4 bg-white rounded-lg shadow">
        <div class="flex items-center gap-3">
            <span class="text-sm font-medium text-stone-700">Gruplama:</span>
            <div class="flex rounded-lg bg-stone-100" x-data="{ grouping: '{{ $grouping }}' }">
                <button
                    @click="window.location.href = '{{ route('reports.inventory.show', [$year, $month]) }}?grouping=main'"
                    :class="grouping === 'main' ? 'bg-stone-600 text-white' : 'text-stone-600 hover:bg-stone-200'"
                    class="px-4 py-2 text-sm font-medium transition-colors rounded-l-lg">
                    3 Ana Kategori
                </button>
                <button
                    @click="window.location.href = '{{ route('reports.inventory.show', [$year, $month]) }}?grouping=detailed'"
                    :class="grouping === 'detailed' ? 'bg-stone-600 text-white' : 'text-stone-600 hover:bg-stone-200'"
                    class="px-4 py-2 text-sm font-medium transition-colors rounded-r-lg">
                    Tüm Kategoriler
                </button>
            </div>
        </div>
    </div>

    <!-- Report Table -->
    <div class="overflow-hidden bg-white shadow sm:rounded-lg">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-stone-200" id="inventoryTable">
                <thead class="bg-stone-50">
                    <tr>
                        <th scope="col"
                            class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                            Ürün Adı
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                            Birim
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Dönem Başı Stok
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Alışlar
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Satışlar
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Fark
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Dönem Sonu Stok
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            FIFO Maliyet
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Stok Değeri
                        </th>
                        <th scope="col"
                            class="px-2 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                            Son Hareket
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-stone-200">
                    @forelse($inventoryData as $category)
                    <!-- Category Header Row -->
                    <tr class="bg-stone-200 text-stone-800">
                        <td colspan="6" class="px-6 pt-3 pb-1.5 text-sm font-bold whitespace-nowrap">
                            {{ $category['name'] }} ({{ $category['total_items'] }} ürün)
                        </td>
                        <td colspan="6" class="px-2 pt-3 pb-1.5 text-sm font-bold text-right">
                            Toplam Değer: {{ number_format($category['total_value'], 2, ',', '.') }} ₺
                        </td>
                    </tr>

                    <!-- Category Items -->
                    @foreach ($category['items'] as $item)
                    <tr class="hover:bg-stone-100">
                        <td class="px-6 py-1.5 text-sm whitespace-nowrap">
                            <a href="{{ route('stocks.show', $item['id']) }}"
                                class="font-medium text-stone-900 hover:text-stone-600">
                                {{ $item['name'] }}
                            </a>
                        </td>
                        <td class="px-2 py-1.5 text-sm text-stone-500 whitespace-nowrap">
                            {{ $item['uom'] }}
                        </td>
                        <td
                            class="px-2 py-1.5 text-sm text-right whitespace-nowrap {{ $item['opening_stock'] < 0 ? 'text-red-600 font-semibold' : 'text-stone-900' }}">
                            {{ number_format($item['opening_stock'], 2, ',', '.') }}<span
                                class="text-xs font-normal text-stone-400 pl-0.5">{{ $item['uom'] }}</span>
                        </td>
                        <td
                            class="px-2 py-1.5 bg-stone-100/50 text-sm text-right whitespace-nowrap {{ $item['period_purchases'] > 0 ? 'text-sky-600 font-semibold' : 'text-stone-900' }}">
                            +{{ number_format($item['period_purchases'], 1, ',', '.') }}<span
                                class="text-xs font-normal text-stone-400 pl-0.5">{{ $item['uom'] }}</span>
                        </td>
                        <td
                            class="px-2 py-1.5 bg-stone-100/50 text-sm text-right whitespace-nowrap {{ $item['period_sales'] < 0 ? 'text-amber-600 font-semibold' : 'text-stone-900' }}">
                            {{ number_format($item['period_sales'], 1, ',', '.') }}<span
                                class="text-xs font-normal text-stone-400 pl-0.5">{{ $item['uom'] }}</span>
                        </td>
                        <td
                            class="px-2 py-1.5 bg-stone-100/50 text-sm text-right whitespace-nowrap {{ $item['period_movement'] < 0 ? 'text-red-600' : ($item['period_movement'] > 0 ? 'text-green-600' : 'text-stone-500') }}">
                            {{ $item['period_movement'] > 0 ? '+' : '' }}{{ number_format($item['period_movement'], 1,
                            ',', '.') }}<span class="text-xs font-normal text-stone-400 pl-0.5">{{ $item['uom']
                                }}</span>
                        </td>
                        <td
                            class="px-2 py-1.5 text-sm text-right whitespace-nowrap font-semibold {{ $item['closing_stock'] < 0 ? 'text-red-600' : 'text-stone-900' }}">
                            {{ number_format($item['closing_stock'], 2, ',', '.') }}<span
                                class="text-xs font-normal text-stone-400 pl-0.5">{{ $item['uom'] }}</span>
                        </td>
                        <td class="px-2 py-1.5 text-sm text-right text-stone-900 whitespace-nowrap">
                            {{ number_format($item['fifo_cost'], 2, ',', '.') }} ₺
                        </td>
                        <td class="px-2 py-1.5 text-sm font-medium text-right text-stone-900 whitespace-nowrap">
                            {{ number_format($item['stock_value'], 2, ',', '.') }} ₺
                        </td>
                        <td class="px-2 py-1.5 text-sm text-right text-stone-500 whitespace-nowrap">
                            {{ $item['last_transaction_date'] ? $item['last_transaction_date']->format('d.m.Y H:i') :
                            '-' }}
                        </td>
                    </tr>
                    @endforeach
                    @empty
                    <tr>
                        <td colspan="10" class="px-6 py-4 text-sm text-center text-stone-500">
                            Envanter verisi bulunamadı
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // Direct print function - make it globally accessible
    window.printTable = function() {
        const table = document.getElementById('inventoryTable').cloneNode(true);
        const printWindow = window.open('', '', 'width=800,height=600');

        // Wait for the document to be ready before writing content
        printWindow.document.write(`
        <!DOCTYPE html>
        <html lang="tr">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>{{ $monthName }} {{ $year }} Envanter Raporu</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    margin: 20px;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 20px;
                }
                th, td {
                    border: 1px solid #ddd;
                    padding: 8px;
                    text-align: left;
                }
                th {
                    background-color: #f2f2f2;
                    font-weight: bold;
                }
                .bg-stone-600 {
                    background-color: #57534e !important;
                    color: white !important;
                }
                .bg-stone-200 {
                    background-color: #e7e5e4 !important;
                    color: #1f2937 !important;
                }
                .header {
                    text-align: center;
                    margin-bottom: 20px;
                }
            </style>
        </head>
        <body>
            <div class="header">
                <h1>{{ $monthName }} {{ $year }} Envanter Raporu</h1>
                <p>Tarih: ${new Date().toLocaleDateString('tr-TR')}</p>
            </div>
            ${table.outerHTML.replace(/<a[^>]*>|<\/a>/g, '')}  // Remove links for print
        </body>
        </html>
    `);

        printWindow.document.close();
        printWindow.focus();

        // Add a small delay to ensure content is loaded before printing
        setTimeout(() => {
            printWindow.print();
            printWindow.close();
        }, 500);
    }
</script>
@endsection