@props(['ownership'])

<!-- Edit Modal -->
<div 
    id="editModal{{ $ownership->id }}" 
    class="fixed inset-0 z-50 flex items-center justify-center hidden overflow-y-auto bg-black bg-opacity-50"
    onclick="closeEditModal{{ $ownership->id }}(event)"
>
    <div 
        class="relative w-full max-w-md p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800"
        onclick="event.stopPropagation()"
    >
        <!-- Close Button -->
        <button 
            onclick="closeEditModal{{ $ownership->id }}()" 
            class="absolute text-gray-400 top-4 right-4 hover:text-gray-600 dark:hover:text-gray-300"
        >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <!-- Modal Header -->
        <div class="mb-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                Edit Inventory Item
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {{ $ownership->product?->name }}
            </p>
        </div>

        <!-- Edit Form -->
        <form method="POST" action="{{ route('admin.ownership.update', $ownership->id) }}">
            @csrf
            @method('PUT')
            
            <div class="space-y-4">
                <!-- Value Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Unit Value (USDT)
                    </label>
                    <input 
                        type="number" 
                        name="value" 
                        step="0.01" 
                        min="0"
                        value="{{ $ownership->value }}"
                        class="block w-full mt-1 text-sm border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200"
                        required
                    />
                </div>

                <!-- Quantity Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Quantity
                    </label>
                    <input 
                        type="number" 
                        name="quantity" 
                        min="1"
                        value="{{ $ownership->quantity }}"
                        class="block w-full mt-1 text-sm border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200"
                        required
                    />
                </div>

                <!-- Total Display -->
                <div class="p-3 bg-gray-100 rounded-md dark:bg-gray-700">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Current Total Value:</p>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">
                        USDT {{ number_format($ownership->value * $ownership->quantity, 2) }}
                    </p>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-3 mt-6">
                <button 
                    type="button"
                    onclick="closeEditModal{{ $ownership->id }}()"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                >
                    Cancel
                </button>
                <button 
                    type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
                >
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openEditModal{{ $ownership->id }}() {
        document.getElementById('editModal{{ $ownership->id }}').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeEditModal{{ $ownership->id }}(event) {
        if (!event || event.target.id === 'editModal{{ $ownership->id }}') {
            document.getElementById('editModal{{ $ownership->id }}').classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
    }
</script>