@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">
                {{ $stockItem->name }}</div>
            <div x-data="{ purchaseMenu: false }" @mouseenter="purchaseMenu = true" @mouseleave="purchaseMenu = false"
                class="relative">
                <button type="button"
                    class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Yeni Hareket Oluştur
                </button>
                <div class="absolute grid py-2 shadow-md bg-stone-50 min-w-44" x-show="purchaseMenu" x-transition
                    x-cloak="">
                    <a href="#" type="button"
                        class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Giriş</a>
                    <a href="#" type="button"
                        class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Çıkış</a>
                </div>
            </div>
            <a href="#" 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="#" 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-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('stocks.index') }}"
                                    class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">STOK
                                    KARTLARI</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">{{ $stockItem->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 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="p-6 bg-white">
                            <div class="sm:flex sm:items-center sm:justify-between">
                                <div class="sm:flex sm:space-x-5">
                                    <div class="flex-shrink-0 rounded-full pattern-charlie-brown">
                                        <span
                                            class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-b from-stone-100/80 to-stone-100/30">
                                            <span class="text-2xl font-medium leading-none text-stone-600">{{
                                                $stockItem->shortname ?? mb_substr($stockItem->name, 0, 3, 'UTF-8')
                                                }}</span>
                                        </span>
                                    </div>
                                    <div class="w-full mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                                        <p class="text-base font-medium text-stone-600">STOK KARTI</p>
                                        <p class="text-xl font-bold uppercase truncate text-stone-900 sm:text-3xl">
                                            {{ $stockItem->name }}</p>
                                    </div>
                                </div>
                                <div class="flex justify-center gap-3 mt-5 sm:mt-0">
                                    {{--
                                    <a href="{{ route('companies.print', $stockItem->id) }}"
                                        class="flex items-center justify-center px-3 py-2 text-sm font-semibold bg-white rounded-md shadow-sm text-stone-900 ring-1 ring-inset ring-stone-300 hover:bg-stone-50">Cari
                                        Döküm</a>
                                    <a href="#"
                                        class="flex items-center justify-center px-3 py-2 text-sm font-semibold bg-white rounded-md shadow-sm text-stone-900 ring-1 ring-inset ring-stone-300 hover:bg-stone-50">Düzenle</a>
                                    --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- GRAFİKLER --}}
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <dl
                            class="grid grid-cols-1 overflow-hidden tracking-tighter divide-y divide-stone-200 md:grid-cols-3 md:divide-x md:divide-y-0">
                            <div class="grid content-center py-3">
                                <dt class="text-base font-normal text-stone-900">Stok Değeri</dt>
                                <dd class="grid items-baseline justify-items-start">
                                    <div class="flex items-baseline text-2xl font-bold gap-x-1 text-stone-600">
                                        <span class="text-xs italic font-medium text-stone-500">Güncel değer</span>
                                        {{ number_format($stockItem->getLastSupplierPriceAttribute() *
                                        $stockItem->stock_quantity, 2) }}<span>₺</span>
                                    </div>
                                    <div class="flex items-baseline text-base font-semibold gap-x-1 text-stone-600">
                                        <span class="text-xs italic font-medium text-stone-500">Ortalama değer</span>
                                        {{ number_format($stockItem->stock_quantity *
                                        $stockItem->getAverageCostAttribute(), 2) }}<span>₺</span>
                                    </div>
                                    <div class="flex items-baseline text-base font-semibold text-teal-600 gap-x-1">
                                        <span class="text-xs italic font-medium text-stone-500">FIFO değer</span>
                                        {{ number_format($stockItem->stock_quantity *
                                        $stockItem->getFifoCostAttribute(), 2) }}<span>₺</span>
                                    </div>
                                </dd>
                            </div>
                            <div class="grid content-center py-3">
                                <dt class="text-base font-normal text-center text-stone-900">
                                    Stok Miktarı
                                </dt>
                                <dd class="grid items-baseline justify-center mt-1 gap-x-1">
                                    <div class="flex items-baseline text-3xl font-bold gap-x-1 text-stone-600">
                                        {{ number_format($stockItem->stock_quantity, 2) }}
                                    </div>
                                    <div class="text-center">
                                        <span class="text-sm font-medium text-stone-500">{{
                                            uom_localized($stockItem->uom) }}</span>
                                    </div>
                                </dd>
                            </div>
                            <div class="py-3">
                                <dt class="text-base font-normal text-right text-stone-900">Birim Maliyeti</dt>
                                <dd class="grid items-baseline justify-items-end">
                                    <div class="flex items-baseline text-2xl font-bold gap-x-1 text-stone-600">
                                        <span class="text-xs italic font-medium text-stone-500">Son maliyet</span>
                                        {{ number_format($stockItem->getLastSupplierPriceAttribute(), 2)
                                        }}<span>₺</span>
                                    </div>
                                    <div class="flex items-baseline text-base font-semibold gap-x-1 text-stone-600">
                                        <span class="text-xs italic font-medium text-stone-500">Ortalama maliyet</span>
                                        {{ number_format($stockItem->getAverageCostAttribute(), 2) }}<span>₺</span>
                                    </div>
                                    <div class="flex items-baseline text-base font-semibold text-teal-600 gap-x-1">
                                        <span class="text-xs italic font-medium text-stone-500">FIFO maliyet</span>
                                        {{ number_format($stockItem->getFifoCostAttribute(), 2) }}<span>₺</span>
                                    </div>
                                </dd>
                            </div>
                        </dl>
                    </div>
                    {{-- STOK HAREKETLERİ --}}
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                inventory
                            </span>
                            Stok Hareketleri
                        </h2>
                        <div class="grid grid-cols-1">
                            @if($stockTransactions->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-stone-200">
                                    <thead class="bg-stone-50">
                                        <tr>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                                Açıklama</th>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Değişim</th>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Kalan Stok</th>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Birim Maliyeti</th>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Tarih ve Saat</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @foreach ($stockTransactions as $transaction)
                                        <tr class="hover:bg-stone-50">

                                            {{-- İşlem türüne göre farklı açıklamalar gösterebilirsiniz --}}
                                            @if ($transaction->action_type == "stock_delivery" &&
                                            $transaction->delivery)
                                            <td class="px-3 py-2 text-sm underline text-stone-800">
                                                <a href="#">Fatura
                                                    - {{ $transaction->delivery->title }} - {{
                                                    $transaction->delivery->total_price
                                                    }}₺</a>
                                            </td>
                                            @else
                                            <td class="px-3 py-2 text-xs italic text-stone-500">
                                                @php
                                                    $notes = $transaction->notes ?? 'Stok hareketi';
                                                    $decoded_notes = json_decode($notes, true);

                                                    if($decoded_notes && isset($decoded_notes['invoice_id'])) {
                                                        $external_ref = 'STOK DAĞITIMI - ' . $decoded_notes['external_ref'] ?? 'Fatura';
                                                        $invoice_id = $decoded_notes['invoice_id'];
                                                        $url = 'https://finance.apper.com.tr/invoices/show/' . $invoice_id;
                                                        echo '<a href="' . $url . '" target="_blank" class="text-stone-700 underline">' . $external_ref . '</a>';
                                                    } else {
                                                        echo e($notes);
                                                    }
                                                @endphp
                                            </td>
                                            @endif
                                            </td>
                                            <td class="px-3 py-2 text-sm text-right">
                                                <span
                                                    class="@if($transaction->change > 0) text-teal-600 @else text-rose-600 @endif font-semibold">
                                                    @if($transaction->change > 0) +{{
                                                    number_format($transaction->change, 2, ',', '.') }}
                                                    @else {{
                                                    number_format($transaction->change, 2, ',', '.') }}
                                                    @endif
                                                </span>
                                            </td>
                                            <td class="px-3 py-2 text-sm font-semibold text-right text-stone-900">
                                                {{ number_format($transaction->running_total, 2, ',', '.') }}
                                            </td>
                                            <td class="px-3 py-2 text-sm text-right text-stone-500">
                                                {{ number_format($transaction->base_price ?? '-', 2, ',', '.') }}₺
                                            </td>
                                            <td class="px-3 py-2 text-xs text-right text-stone-500">
                                                {{ $transaction->created_at->format('d.m.Y H:i') }}
                                            </td>

                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <x-alert-standard color="stone">
                                Bu ürün için henüz stok hareketi bulunmuyor.
                            </x-alert-standard>
                            @endif
                        </div>
                    </div>
                </div>

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

                    {{-- STOK KARTI 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>
                        Stok Kartı Bilgileri
                    </h2>

                    @livewire('stock-item-edit', ['stockItemId' => $stockItem->id])

                    {{-- 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('stock-item-logs', ['stockItemId' => $stockItem->id])

                </div>

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

@endsection

@section('scripts')
@endsection