@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Borrow Requests') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('List of all items that are available for borrowing') }}
            </p>
        </header>

        <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 text-sm">
                        <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>

        <form action="{{ route('borrows.store') }}" method="POST" class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            @csrf
            <h2 class="text-lg font-semibold mb-2">Request to Borrow Items</h2>
            <div class="mb-8">
                <label class="block font-medium mb-2">Select items</label>
                <div id="field-container" class="mb-4">
                </div>
                <button type="button" class="bg-main-dark text-main-light active:bg-main-dark active:text-main-light px-3 py-1 rounded-md shadow-lg cursor-pointer" onclick="addField()">Add Field</button>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm">Date of Borrowed</label>
                <input type="date" name="reserve_date" class="text-sm w-full px-3 py-2 border rounded-lg" required>
            </div>
            <div class="mb-8">
                <label class="block text-gray-700 text-sm">Date of Returned</label>
                <input type="date" name="return_date" class="w-full px-3 text-sm py-2 border rounded-lg" required>
            </div>
            <button type="submit" class="bg-main-dark text-main-light active:bg-main-dark active:text-main-light px-6 py-3 rounded-md shadow-lg cursor-pointer">Submit
                Request</button>
        </form>


        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            <h2 class="text-lg font-semibold mb-4">Borrow request history</h2>
            <div class="overflow-x-auto  rounded-lg">
                <table class=" min-w-full 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">
                                Id
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Items
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Borrow Date
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Return Date
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Status
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Filed Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($borrows as $borrow)
                            <tr>
                                <td class="border p-1 px-3 w-10">{{ $borrow->id }}</td>
                                <td class="border p-1 px-3">
                                    @foreach (json_decode($borrow->items) as $key => $item)
                                        {{ $key }} -> {{ $item }}<br>
                                    @endforeach
                                </td>
                                <td class="border p-1 px-3">{{ date('M. d, Y', strtotime($borrow->reserve_date))}}</td>
                                <td class="border p-1 px-3">{{ date('M. d, Y', strtotime($borrow->return_date)) }}</td>
                                <td class="border p-1 px-3">
                                    @if($borrow->rejected_at)
                                        <p class="text-red-600 font-bold">Rejected</p>
                                    @elseif($borrow->approved_at)
                                        <p class="text-green-600 font-bold">Approved</p>
                                    @else
                                        <p class="text-yellow-600 font-bold">Pending</p>
                                    @endif
                                </td>
                                <td class="border p-1 px-3">{{ $borrow->created_at->diffForHumans() . ' | ' . $borrow->created_at->format('M. d, Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td class="border p-2" colspan="5">No items found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $borrows->links('pagination::tailwind') }}
            </div>
        </section>
    </main>
@endsection

@section('scripts')
    <script>
        let fieldCount = 0;

function addField() {
    fieldCount++;
    const container = document.getElementById('field-container');

    const fieldGroup = document.createElement('div');
    fieldGroup.classList.add('field-group', 'flex', 'items-center', 'space-x-2');

    const selectedValues = getSelectedValues(); // Get already selected values

    const input = `
        <div class="w-full flex flex-row gap-4 mb-2">
            <select name="field_${fieldCount}[]" class="item-select flex-1 mt-1 block text-sm p-2 border border-gray-300 rounded-md"
                onchange="updateAvailableItems()" required>
                <option value="" selected>Select item</option>
                @foreach ($items as $item)
                    ${selectedValues.includes("{{ $item->name }}") ? '' : `
                        <option class="text-sm" value="{{ $item->name }}" data-quantity="{{ $item->quantity }}">
                            {{ $item->name }} (max: {{ $item->quantity }})
                        </option>
                    `}
                @endforeach
            </select>
            <input type="number" name="field_${fieldCount}[]" class="quantity-input mt-1 flex-1 block p-2 border border-gray-300 rounded-md text-sm"
                placeholder="Quantity" min="1" oninput="validateQuantity(this)" required>
        </div>
    `;

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.classList.add('text-red-500', 'text-xs', 'font-bold', 'px-2');
    removeBtn.textContent = '✕';
    removeBtn.onclick = function () {
        removeField(removeBtn);
    };

    fieldGroup.innerHTML += input;
    fieldGroup.appendChild(removeBtn);
    container.appendChild(fieldGroup);
}

function removeField(button) {
    const fieldGroup = button.parentNode;
    fieldGroup.remove();
    updateAvailableItems();
}

function getSelectedValues() {
    const selects = document.querySelectorAll('.item-select');
    return Array.from(selects)
        .map(select => select.value)
        .filter(value => value); // Exclude empty selections
}

function updateAvailableItems() {
    const selects = document.querySelectorAll('.item-select');
    const selectedValues = getSelectedValues(); // Get all selected values

    selects.forEach(select => {
        const currentValue = select.value;
        const options = select.querySelectorAll('option');
        options.forEach(option => {
            if (selectedValues.includes(option.value) && option.value !== currentValue) {
                option.disabled = true; // Disable already selected items
            } else {
                option.disabled = false; // Enable non-selected items
            }
        });
    });
}

function validateQuantity(input) {
    const select = input.parentNode.querySelector('.item-select');
    const selectedOption = select.options[select.selectedIndex];
    const maxQuantity = parseInt(selectedOption.getAttribute('data-quantity'), 10);

    if (input.value > maxQuantity) {
        alert(`Quantity cannot exceed ${maxQuantity}.`);
        input.value = maxQuantity;
    }
}

    </script>
@endsection