@extends('layouts.app')

@section('headScripts')
@endsection

@section('content')

<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 pb-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>

                {{-- SOL PANEL --}}
                <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                    {{-- SAYFA BAŞLIĞI --}}
                    <div class="overflow-hidden bg-amber-50 rounded-lg shadow ring-1 ring-amber-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="material-symbols-rounded text-5xl text-amber-500">
                                            shelves
                                        </span>
                                    </div>
                                    <div class="w-full">
                                        <p class="text-base font-medium text-amber-600">STOK KARTI</p>
                                        <p class="text-xl font-bold uppercase truncate text-amber-900 sm:text-3xl">
                                            {{ $stockItem->name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <livewire:stock-warehouse-view :stock-item-id="$stockItem->id" />

                </div>

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

                    {{-- ÜRÜN SENKRONİZASYONU --}}
                    {{-- <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                        <span class="mr-1 material-symbols-rounded">
                            sync
                        </span>
                        Ürün Senkronizasyonu
                    </h2>

                    <livewire:product-sync :stock-item-id="$stockItem->id" />
                    --}}

                    {{-- STOK KARTINI İÇERTEN SATIŞ ÜRÜNLERİ --}}
                    <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                        <span class="mr-1 material-symbols-rounded">
                            merge_type
                        </span>
                        Stok Kartını İçeren Satış Ürünleri
                    </h2>
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        @if($stockMixins->count() > 0)
                        <div class="flex flex-wrap gap-2">
                            @foreach($stockMixins as $mixin)
                            @if($mixin->product && !$mixin->product->deleted_at)
                            <a href="{{ route('pos-products.show', $mixin->product->id) }}"
                                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-teal-200 font-medium text-teal-700 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors">
                                <span class="text-sm material-symbols-rounded">fork_spoon</span>
                                <span class="">{{ $mixin->product->name }}</span>-
                                <span class="text-teal-500">{{ number_format($mixin->quantity, 4, ',', '.') }}</span>
                                <span class="text-teal-500">{{ uom_localized($stockItem->uom) }}</span>
                            </a>
                            @elseif($mixin->product && $mixin->product->deleted_at)
                            <div
                                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-red-200 opacity-60 font-medium text-red-700 bg-red-50 rounded-lg">
                                <span class="text-sm material-symbols-rounded">fork_spoon</span>
                                <span class="">Silinmiş</span> -
                                <span class="font-medium">{{ $mixin->product->name }}</span> -
                                <span class="text-red-500">{{ number_format($mixin->quantity, 4, ',', '.') }}</span>
                                <span class="text-red-500">{{ uom_localized($stockItem->uom) }}</span>
                            </div>
                            @else
                            <div
                                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-gray-200 font-medium text-gray-500 bg-gray-50 rounded-lg">
                                <span class="text-sm material-symbols-rounded">fork_spoon</span>
                                <span class="">Ürün Bulunamadı</span> -
                                <span class="text-gray-500">{{ number_format($mixin->quantity, 4, ',', '.') }}</span>
                                <span class="text-gray-500">{{ uom_localized($stockItem->uom) }}</span>
                            </div>
                            @endif
                            @endforeach
                        </div>
                        @else
                        <div class="text-sm italic text-stone-500">
                            Bu stok kalemini içeren satış ürünü bulunmamaktadır.
                        </div>
                        @endif
                    </div>

                    {{-- 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 :stock-item-id="$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:product-logs :product-id="$stockItem->id" product-type="StockItem" />

                </div>

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

@endsection

@section('scripts')
@endsection