@extends('master')
@section('content')
<main class="p-6 flex-1 overflow-hidden">
    <header>
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Inventory') }}
            </h2>
            <a href="{{ route('borrows.index') }}" class="bg-main-dark text-main-light active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded">Borrow Requests</a>
        </div>
        <p class="mt-1 text-md text-gray-600">
            {{ __('View and manage inventory') }}
        </p>
    </header>

    <section class="mt-2 mb-6">
        <button
            class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded  w-full text-left font-semibold"
            onclick="toggleAccordion(event)">
            Add/Update New Inventory Item
        </button>

        <form class="bg-white p-4 rounded-lg shadow-md mt-2 hidden transition duration-300 ease-in-out text-xs"
            action="{{ route('inventory.store') }}" method="POST">
            @csrf
            <label for="item" class="block font-semibold text-xs">Name:</label>
            <input type="text" id="item" name="item" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter item name" required>

            <label for="quantity" class="block font-semibold text-xs">Quantity:</label>
            <input id="number" name="quantity" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter item quantity" required>

            <label for="donator" class="block font-semibold text-xs">Donator:</label>
            <input type="text" id="donator" name="donator" class="w-full p-2 border rounded mb-4 text-xs" placeholder="Enter item donator" required>

            <button type="submit" class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded align-right">
                Add Item
            </button>
        </form>
    </section>

    <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
        <h2 class="text-lg font-semibold mb-4">Inventory Items</h2>
        <div class="overflow-y-auto max-h-60  rounded-lg">
            <table class="w-full border-collapse rounded bg-main-light">
                <thead class="bg-main-dark text-main-light">
                    <tr>
                        <th class="py-2 px-4 text-left whitespace-nowrap">Item Name</th>
                        <th class="py-2 px-4 text-left whitespace-nowrap">Quantity Remaining</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($items as $item)
                        <tr>
                            <td class="border p-1 px-3">{{ $item->name }}</td>
                            <td class="border p-1 px-3">{{ $item->quantity }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td class="border p-2" colspan="2">No items found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
        <h2 class="text-lg font-semibold mb-4">Inventory History</h2>
        <div class="bg-white shadow overflow-x-auto rounded-lg">
            <table class="w-full border-collapse rounded bg-main-light">
                <thead class="bg-main-dark text-main-light text-sm">
                    <tr>
                        <th class="py-2 px-4 text-left whitespace-nowrap">Name</th>
                        <th class="py-2 px-4 text-left whitespace-nowrap">Quantity</th>
                        <th class="py-2 px-4 text-left whitespace-nowrap">Donator / Supplier</th>
                        <th class="py-2 px-4 text-left whitespace-nowrap">Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ( $inventories as $inventory )
                        <tr>
                            <td class="border p-1 px-3">{{ $inventory->item }}</td>
                            <td class="border p-1 px-3">{{ $inventory->quantity }}</td>
                            <td class="border p-1 px-3">{{ $inventory->donator }}</td>
                            <td class="border p-1 px-3">{{ $inventory->created_at }}</td>
                    @empty
                        <tr>
                            <td class="border p-2" colspan="4">No items found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $inventories->links('pagination::tailwind') }}
        </div>
    </section>
</main>
@endsection

@section('scripts')
    <script>
        function toggleAccordion(e) {
            const form = e.currentTarget.nextElementSibling;
            form.classList.toggle("hidden");
        }
    </script>
@endsection