@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-7xl">
        {{-- 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="#" class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700"
                            aria-current="page">STOK HAREKETLERİ</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 Hareketleri</h1>
            <p class="mt-2 text-sm text-gray-700">Tüm stok giriş-çıkış hareketleri ve hareket sonrası stok miktarları
            </p>
        </div>

        {{-- FİLTRELEME --}}
        <div class="p-4 mb-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <form method="GET" action="{{ route('stock-transactions.index') }}"
                class="flex flex-col gap-4 sm:flex-row sm:items-end">
                <div class="flex-1">
                    <label for="stock_item_id" class="block text-sm font-medium text-gray-700">Stok Kartı</label>
                    <select name="stock_item_id" id="stock_item_id"
                        class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <option value="">Tüm Stok Kartları</option>
                        @foreach($stockItems as $item)
                        <option value="{{ $item->id }}" {{ $stockItemId==$item->id ? 'selected' : '' }}>
                            {{ $item->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="submit"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Filtrele
                    </button>
                    <a href="{{ route('stock-transactions.index') }}"
                        class="inline-flex items-center px-4 py-2 ml-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Temizle
                    </a>
                </div>
            </form>
        </div>

        {{-- STOK HAREKETLERİ LİSTESİ --}}
        <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-300">
            @if($transactions->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Tarih
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Stok Kartı
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Değişim
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Hareket Sonrası Stok
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Tedarikçi
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Fiyat
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Açıklama
                            </th>
                            <th class="relative px-6 py-3">
                                <span class="sr-only">İşlemler</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($transactions as $transaction)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">
                                {{ $transaction->created_at->format('d.m.Y H:i') }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">
                                <a href="{{ route('stocks.show', $transaction->stock_item_id) }}"
                                    class="text-indigo-600 hover:text-indigo-900">
                                    {{ $transaction->stockItem->name }}
                                </a>
                            </td>
                            <td class="px-6 py-4 text-sm whitespace-nowrap">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $transaction->change > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                    {{ $transaction->change > 0 ? '+' : '' }}{{ $transaction->change }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm font-semibold text-gray-900 whitespace-nowrap">
                                {{ $transaction->running_total ?? 'N/A' }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                                {{ $transaction->supplier->name ?? '-' }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                                @if($transaction->supplier_price)
                                {{ number_format($transaction->supplier_price, 2) }} ₺
                                @else
                                -
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">
                                {{ $transaction->description ?? '-' }}
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
                                <a href="{{ route('stock-transactions.show', $transaction->id) }}"
                                    class="text-indigo-600 hover:text-indigo-900">
                                    Detay
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- SAYFALANDIRMA --}}
            <div class="px-6 py-4 bg-gray-50">
                {{ $transactions->appends(request()->query())->links() }}
            </div>
            @else
            <div class="p-6">
                <div class="text-center">
                    <svg class="w-12 h-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path
                            d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">Stok hareketi bulunamadı</h3>
                    <p class="mt-1 text-sm text-gray-500">Henüz stok hareketi kaydedilmemiş.</p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection