@extends('layouts.app')

@section('content')

<!-- Create Warehouse Modal -->
<div id="createWarehouseModal"
    class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-stone-900">Yeni Depo</h3>
            <button onclick="closeCreateWarehouseModal()" class="text-stone-400 hover:text-stone-600">
                <span class="text-2xl material-symbols-rounded">close</span>
            </button>
        </div>

        <!-- Modal Body -->
        <form action="{{ route('warehouses.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label for="warehouseName" class="block mb-1 text-sm font-medium text-stone-700">Depo Adı</label>
                <input type="text" id="warehouseName" name="name" required
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                    placeholder="Örn: Ana Depo" />
            </div>

            <div>
                <label for="warehouseCode" class="block mb-1 text-sm font-medium text-stone-700">Depo Kodu</label>
                <input type="text" id="warehouseCode" name="code"
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                    placeholder="Örn: DEPO-001" />
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" id="warehouseDefault" name="is_default" value="1"
                    class="w-4 h-4 text-stone-600 border-stone-300 rounded focus:ring-stone-500" />
                <label for="warehouseDefault" class="text-sm font-medium text-stone-700">Varsayılan Depo</label>
            </div>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeCreateWarehouseModal()"
                    class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                    VAZGEÇ
                </button>
                <button type="submit" id="submitCreateWarehouseBtn"
                    class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                    OLUŞTUR
                </button>
            </div>
        </form>
    </div>
</div>

<div class="px-4 mx-auto pb-60">
    <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-s-lg">
                        DEPOLAR</div>
                    <div class="flex-1">
                        <input type="text" id="searchInput" placeholder="Depolar arasında arama yap..."
                            class="w-full px-3.5 py-2 text-sm rounded-r-md border-none" />
                    </div>
                </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 text-stone-400">
                        <span class="material-symbols-rounded text-stone-400">print</span>
                    </a>
                    <a href="#" onclick="exportTable(); 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">file_export</span>
                    </a>
                    <a href="#" onclick="openCreateWarehouseModal(); 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</span>
                    </a>
                </nav>
            </div>
        </header>
    </div>

    <!-- WAREHOUSES -->
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-6 mt-4">
        <div
            class="relative flex items-center space-x-3 rounded-lg border border-stone-300 bg-white px-4 py-3 shadow-sm focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-stone-600 hover:border-stone-400">
            <div class="min-w-0 flex-1">
                <a href="#" class="focus:outline-none">
                    <span aria-hidden="true" class="absolute inset-0"></span>
                    <p class="text-lg font-medium text-stone-900">ANA DEPO</p>
                    <p class="truncate text-xs text-stone-500 mt-1">ANA</p>
                    <p class="truncate text-xs text-stone-500 mt-1">95</p>
                </a>
            </div>
        </div>
        @foreach ($warehouses as $warehouse)
        <div
            class="relative flex items-center space-x-3 rounded-lg border border-stone-300 bg-white px-4 py-3 shadow-sm focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-stone-600 hover:border-stone-400">
            <div class="min-w-0 flex-1">
                <a href="{{ route('warehouses.show', $warehouse->id) }}" class="focus:outline-none">
                    <span aria-hidden="true" class="absolute inset-0"></span>
                    <p class="text-lg font-medium text-stone-900">{{ $warehouse->name }}</p>
                    <p class="truncate text-xs text-stone-500 mt-1">{{ $warehouse->code }}</p>
                    <p class="truncate text-xs text-stone-500 mt-1">{{ $warehouse->totalStockTransactionCount() }}</p>
                </a>
            </div>
        </div>
        @endforeach
    </div>
</div>

@endsection

@push('scripts')
<script>
    function openCreateWarehouseModal() {
        document.getElementById('createWarehouseModal').classList.remove('hidden');
    }

    function closeCreateWarehouseModal() {
        document.getElementById('createWarehouseModal').classList.add('hidden');
    }

    // Close modal when clicking outside
    document.getElementById('createWarehouseModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeCreateWarehouseModal();
        }
    });
</script>
@endpush