@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('stocks.movements', ['filter' => 'all']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ ($filter ?? 'all') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        Tümü</a>
                                    <a href="{{ route('stocks.movements', ['filter' => 'orders']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ ($filter ?? '') == 'orders' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        Sipariş</a>
                                    <a href="{{ route('stocks.movements', ['filter' => 'purchase']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ ($filter ?? '') == 'purchase' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        Giriş</a>
                                    <a href="{{ route('stocks.movements', ['filter' => 'wasted']) }}" type="button"
                                        class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ ($filter ?? '') == 'wasted' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                        Zayi</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
                                @if (isset($filter))
                                    <span class="ml-2 text-sm font-normal text-stone-500">
                                        (@switch($filter)
                                            @case('orders')
                                                Sipariş (Satış) -
                                            @break

                                            @case('purchase')
                                                Giriş (Alış) -
                                            @break

                                            @case('wasted')
                                                Zayi -
                                            @break

                                            @default
                                                Tümü -
                                        @endswitch
                                        {{ $movements->count() }} kayıt)
                                    </span>
                                @endif
                            </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