@extends('layouts.admin')

@section('title', 'Inventory')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Inventory</h1>
    <div class="space-x-2">
        <a href="/admin/inventory/export" class="bg-green-600 text-white px-4 py-2 rounded">Export</a>
        <button onclick="showImportModal()" class="bg-blue-600 text-white px-4 py-2 rounded">Import</button>
        <button onclick="showCreateModal()" class="bg-blue-600 text-white px-4 py-2 rounded">Add Item</button>
    </div>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="table-responsive">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left">ID</th>
                <th class="px-6 py-3 text-left">Product</th>
                <th class="px-6 py-3 text-left">Item Code</th>
                <th class="px-6 py-3 text-left">Bot Account</th>
                <th class="px-6 py-3 text-left">Status</th>
                <th class="px-6 py-3 text-left">Created</th>
                <th class="px-6 py-3"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($inventory as $item)
            <tr class="border-t">
                <td class="px-6 py-4">{{ $item->id }}</td>
                <td class="px-6 py-4">{{ $item->product->name }}</td>
                <td class="px-6 py-4">{{ $item->item_code }}</td>
                <td class="px-6 py-4">{{ $item->bot_account }}</td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs rounded {{ $item->status == 'available' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $item->status }}
                    </span>
                </td>
                <td class="px-6 py-4">{{ $item->created_at }}</td>
                <td class="px-6 py-4">
                    <button onclick="editItem({{ $item }})" class="text-blue-600 mr-2">Edit</button>
                    <form action="/admin/inventory/{{ $item->id }}/delete" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600" onclick="return confirm('Delete?')">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    <div class="p-4">
        {{ $inventory->links() }}
    </div>
</div>

<!-- Create Modal -->
<div id="createModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-96">
        <h2 class="text-lg font-semibold mb-4">Add Inventory Item</h2>
        <form action="/admin/inventory/store" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block mb-2">Product</label>
                <select name="product_id" class="w-full px-3 py-2 border rounded">
                    @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block mb-2">Item Code</label>
                <input type="text" name="item_code" class="w-full px-3 py-2 border rounded" required>
            </div>
            <div class="mb-4">
                <label class="block mb-2">Bot Account</label>
                <input type="text" name="bot_account" class="w-full px-3 py-2 border rounded">
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="hideCreateModal()" class="px-4 py-2 border rounded">Cancel</button>
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
            </div>
        </form>
    </div>
</div>

<!-- Import Modal -->
<div id="importModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-96">
        <h2 class="text-lg font-semibold mb-4">Import Inventory</h2>
        <form action="/admin/inventory/import" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block mb-2">Product</label>
                <select name="product_id" class="w-full px-3 py-2 border rounded">
                    @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block mb-2">Items (one per line, format: code,bot)</label>
                <textarea name="items" rows="10" class="w-full px-3 py-2 border rounded" required></textarea>
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="hideImportModal()" class="px-4 py-2 border rounded">Cancel</button>
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Import</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-96">
        <h2 class="text-lg font-semibold mb-4">Edit Inventory Item</h2>
        <form id="editForm" method="POST">
            @csrf
            <div class="mb-4">
                <label class="block mb-2">Item Code</label>
                <input type="text" name="item_code" id="editItemCode" class="w-full px-3 py-2 border rounded" required>
            </div>
            <div class="mb-4">
                <label class="block mb-2">Bot Account</label>
                <input type="text" name="bot_account" id="editBotAccount" class="w-full px-3 py-2 border rounded">
            </div>
            <div class="mb-4">
                <label class="block mb-2">Status</label>
                <select name="status" id="editStatus" class="w-full px-3 py-2 border rounded">
                    <option value="available">Available</option>
                    <option value="sold">Sold</option>
                </select>
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="hideEditModal()" class="px-4 py-2 border rounded">Cancel</button>
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Update</button>
            </div>
        </form>
    </div>
</div>

<script>
function showCreateModal() {
    document.getElementById('createModal').classList.remove('hidden');
    document.getElementById('createModal').classList.add('flex');
}

function hideCreateModal() {
    document.getElementById('createModal').classList.add('hidden');
    document.getElementById('createModal').classList.remove('flex');
}

function showImportModal() {
    document.getElementById('importModal').classList.remove('hidden');
    document.getElementById('importModal').classList.add('flex');
}

function hideImportModal() {
    document.getElementById('importModal').classList.add('hidden');
    document.getElementById('importModal').classList.remove('flex');
}

function editItem(item) {
    document.getElementById('editItemCode').value = item.item_code;
    document.getElementById('editBotAccount').value = item.bot_account;
    document.getElementById('editStatus').value = item.status;
    document.getElementById('editForm').action = '/admin/inventory/' + item.id + '/update';
    
    document.getElementById('editModal').classList.remove('hidden');
    document.getElementById('editModal').classList.add('flex');
}

function hideEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    document.getElementById('editModal').classList.remove('flex');
}
</script>
@endsection