@extends('layouts.app')

@section('headScripts')
@endsection

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <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">

                <div class="sm:flex sm:items-center gap-x-2">
                    <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">
                                    STOK HAREKETLERİ</div>
                                {{-- <a href="{{ route('offers.index', ['filter' => 'all']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Tümü</a>
                                <a href="{{ route('offers.index', ['filter' => 'new']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('offers.index') && request()->query('filter') == 'new' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Taslak</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">
                                <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 {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        print
                                    </span>
                                </a>
                                <a href="#" type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        file_export
                                    </span>
                                </a>
                                {{-- <a href="#" onclick="openCreateCategoryModal(); 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">add_circle</span>
                                </a>
                                --}}
                            </nav>
                        </div>
                    </header>
                </div>

                <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                    {{-- 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($movements->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">
                                                Stok Kartı</th>
                                            <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">
                                                Yeni Miktar</th>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Birim Fiyat</th>
                                            <th
                                                class="px-3 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Tarih</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @foreach ($movements as $movement)
                                        <tr class="hover:bg-stone-50">
                                            <td class="px-3 py-2 text-sm font-medium text-stone-900">
                                                <a href="{{ route('stocks.show', $movement->stock_item_id) }}"
                                                    class="hover:underline">
                                                    {{ $movement->stockItem->name ?? '...' }}
                                                </a>
                                            </td>
                                            <td class="px-3 py-2 text-xs italic text-stone-500">
                                                @php
                                                    $notes = $movement->notes ?? '-';
                                                    $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>
                                            <td class="px-3 py-2 text-sm text-right">
                                                <span
                                                    class="@if($movement->change > 0) text-teal-600 @else text-rose-600 @endif font-semibold">
                                                    @if($movement->change > 0)+@endif{{ number_format($movement->change,
                                                    2, ',', '.') }}
                                                </span>
                                            </td>
                                            <td class="px-3 py-2 text-sm font-semibold text-right text-stone-900">
                                                {{ number_format($movement->new_quantity, 2, ',', '.') }}
                                            </td>
                                            <td class="px-3 py-2 text-sm text-right text-stone-500">
                                                @if($movement->base_price)
                                                {{ number_format($movement->base_price, 2, ',', '.') }}₺
                                                @else
                                                -
                                                @endif
                                            </td>
                                            <td class="px-3 py-2 text-xs text-right text-stone-500">
                                                {{ $movement->created_at->format('d.m.Y H:i') }}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <x-alert-standard color="stone">
                                Stok hareketi bulunmuyor.
                            </x-alert-standard>
                            @endif
                        </div>
                    </div>
                </div>

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

                </div>

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

@endsection

@section('scripts')
@endsection