<div>
    @if($showModal)
        <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-shopping-cart me-2"></i>{{ __('Quick Purchase Order') }}
                        </h5>
                        <button type="button" class="btn-close btn-close-white" wire:click="$set('showModal', false)"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Supplier Selection -->
                        <div class="mb-3">
                            <label class="form-label">{{ __('Supplier') }} <span class="text-danger">*</span></label>
                            <select class="form-select" wire:model="supplierId" required>
                                <option value="">{{ __('Select supplier...') }}</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">
                                        {{ $supplier->name }}
                                        @if($supplier->contact_person)
                                            - {{ $supplier->contact_person }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('supplierId') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <!-- Product Selection -->
                        <div class="mb-3">
                            <label class="form-label">{{ __('Add Products') }}</label>
                            <select class="form-select" wire:change="addProduct($event.target.value)">
                                <option value="">{{ __('Select product to add...') }}</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}">
                                        {{ $product->name }} ({{ $product->sku }})
                                        @if($product->category)
                                            - {{ $product->category->name }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Items List -->
                        @if(count($items) > 0)
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <strong>{{ __('Order Items') }}</strong>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th>{{ __('Product') }}</th>
                                                    <th width="120">{{ __('Quantity') }}</th>
                                                    <th width="120">{{ __('Cost') }}</th>
                                                    <th width="120">{{ __('Total') }}</th>
                                                    <th width="50"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($items as $index => $item)
                                                    <tr wire:key="item-{{ $index }}">
                                                        <td>
                                                            <strong>{{ $item['name'] }}</strong>
                                                            <br><small class="text-muted">{{ $item['sku'] }}</small>
                                                        </td>
                                                        <td>
                                                            <input type="number" min="1" class="form-control form-control-sm" 
                                                                   value="{{ $item['quantity'] }}"
                                                                   wire:change="updateQuantity({{ $index }}, $event.target.value)">
                                                        </td>
                                                        <td>
                                                            <input type="number" step="0.01" min="0" class="form-control form-control-sm" 
                                                                   value="{{ $item['cost_price'] }}"
                                                                   wire:change="updateCost({{ $index }}, $event.target.value)">
                                                        </td>
                                                        <td class="align-middle">
                                                            <strong>E£ {{ number_format($item['quantity'] * $item['cost_price'], 2) }}</strong>
                                                        </td>
                                                        <td class="align-middle text-center">
                                                            <button type="button" class="btn btn-sm btn-link text-danger p-0" 
                                                                    wire:click="removeItem({{ $index }})">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot class="table-light">
                                                <tr>
                                                    <td colspan="3" class="text-end"><strong>{{ __('Total') }}:</strong></td>
                                                    <td colspan="2">
                                                        <strong class="text-primary">
                                                            E£ {{ number_format(collect($items)->sum(fn($i) => $i['quantity'] * $i['cost_price']), 2) }}
                                                        </strong>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                {{ __('No items added yet. Select products from the dropdown above.') }}
                            </div>
                        @endif

                        <!-- Notes -->
                        <div class="mb-3">
                            <label class="form-label">{{ __('Notes') }}</label>
                            <textarea class="form-control" wire:model="notes" rows="2" 
                                      placeholder="{{ __('Optional notes...') }}"></textarea>
                        </div>

                        @error('items') <div class="alert alert-danger">{{ $message }}</div> @enderror
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="$set('showModal', false)">
                            {{ __('Cancel') }}
                        </button>
                        <button type="button" class="btn btn-primary" wire:click="createPO" 
                                @if(!$supplierId || count($items) == 0) disabled @endif>
                            <i class="fas fa-check me-2"></i>{{ __('Create Purchase Order') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
