@extends('layouts.app')

@section('content')
<div class="w-full px-4 pt-4 pb-60 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-4xl">
        {{-- 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('stock-transactions.index') }}"
                            class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">STOK HAREKETLERİ</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">DETAY</a>
                    </div>
                </li>
            </ol>
        </nav>

        {{-- SAYFA BAŞLIĞI --}}
        <div class="mt-4 mb-6">
            <h1 class="text-2xl font-bold text-gray-900">Stok Hareketi Detayı</h1>
        </div>

        {{-- HAREKET DETAYI --}}
        <div class="bg-white shadow ring-1 ring-stone-300 rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-lg font-medium text-gray-900">Hareket Bilgileri</h3>
            </div>
            <div class="px-6 py-4">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tarih</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $transaction->created_at->format('d.m.Y H:i:s') }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Stok Kartı</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <a href="{{ route('stocks.show', $transaction->stockItem->id) }}"
                                class="text-indigo-600 hover:text-indigo-900">
                                {{ $transaction->stockItem->name }}
                            </a>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Değişim Miktarı</dt>
                        <dd class="mt-1 text-sm">
                            <span
                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium {{ $transaction->change > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ $transaction->change > 0 ? '+' : '' }}{{ $transaction->change }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Hareket Sonrası Stok</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-semibold">{{ $transaction->running_total }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tedarikçi</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $transaction->supplier->name ?? '-' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tedarikçi Fiyatı</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($transaction->supplier_price)
                            {{ number_format($transaction->supplier_price, 2) }} ₺
                            @else
                            -
                            @endif
                        </dd>
                    </div>
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Açıklama</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $transaction->description ?? 'Açıklama bulunmuyor.' }}
                        </dd>
                    </div>
                </dl>
            </div>

            {{-- İŞLEMLER --}}
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
                <div class="flex justify-between">
                    <a href="{{ route('stock-transactions.index') }}"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        ← Geri Dön
                    </a>
                    <a href="{{ route('stocks.show', $transaction->stockItem->id) }}"
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Stok Kartını Görüntüle →
                    </a>
                </div>
            </div>
        </div>

        {{-- STOK GRAFİĞİ --}}
        <div class="mt-6 bg-white shadow ring-1 ring-stone-300 rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-lg font-medium text-gray-900">Stok Değişim Grafiği</h3>
                <p class="mt-1 text-sm text-gray-500">Son hareketlere göre stok miktarı değişimi</p>
            </div>
            <div class="px-6 py-4">
                <div class="text-center text-gray-500">
                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path
                            d="M9 17a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0116.07 12h15.86a2 2 0 011.664.89l.812 1.22A2 2 0 0036.07 15H37a2 2 0 012 2v17a2 2 0 01-2 2H11a2 2 0 01-2-2V17z" />
                        <path d="M15 12v-1a1 1 0 011-1h16a1 1 0 011 1v1M15 19h18M15 23h10" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <p class="mt-2">Grafik görünümü yakında eklenecek</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection