<div>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h4 mb-0">{{ __('Process Return') }}</h2>
        <a href="{{ route('pos.sales-history') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>{{ __('Back to History') }}
        </a>
    </div>

    <!-- Search Invoice -->
    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body">
            <label class="form-label">{{ __('Search Invoice') }}</label>
            <div class="input-group">
                <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                <input type="text" wire:model.live.debounce.500ms="search" 
                       class="form-control" placeholder="{{ __('Enter invoice number (e.g. INV-2024...)') }}">
            </div>
        </div>
    </div>

    @if($sale)
        <div class="row">
            <div class="col-md-8">
                <!-- Sale Items -->
                <div class="card shadow-sm mb-4 border-0">
                    <div class="card-header bg-light">
                        <h5 class="mb-0 fw-bold">{{ __('Invoice Items') }} <small class="text-muted fw-normal">#{{ $sale->sale_number }}</small></h5>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th style="width: 50px;">{{ __('Return') }}</th>
                                    <th>{{ __('Product') }}</th>
                                    <th class="text-center">{{ __('Sold Qty') }}</th>
                                    <th class="text-center" style="width: 150px;">{{ __('Return Qty') }}</th>
                                    <th class="text-end">{{ __('Unit Price') }}</th>
                                    <th class="text-end">{{ __('Refund Amount') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $item)
                                    @if(isset($returnItems[$item->id]))
                                        <tr class="{{ $returnItems[$item->id]['selected'] ? 'bg-danger bg-opacity-10' : '' }}">
                                            <td class="text-center">
                                                <input type="checkbox" class="form-check-input" 
                                                       wire:model.live="returnItems.{{ $item->id }}.selected"
                                                       style="width: 20px; height: 20px;">
                                            </td>
                                            <td>
                                                <div class="fw-bold">{{ $item->product->localized_name }}</div>
                                            </td>
                                            <td class="text-center">{{ $item->quantity }}</td>
                                            <td>
                                                <input type="number" 
                                                       wire:model.live="returnItems.{{ $item->id }}.quantity"
                                                       min="0" max="{{ $returnItems[$item->id]['max'] }}"
                                                       class="form-control text-center"
                                                       {{ !$returnItems[$item->id]['selected'] ? 'disabled' : '' }}>
                                                <div class="form-text text-center small text-muted">
                                                    {{ __('Max') }}: {{ $returnItems[$item->id]['max'] }}
                                                </div>
                                            </td>
                                            <td class="text-end">{{ number_format($item->unit_price, 2) }}</td>
                                            <td class="text-end fw-bold">
                                                @if($returnItems[$item->id]['selected'])
                                                    E£ {{ number_format($returnItems[$item->id]['quantity'] * $returnItems[$item->id]['price'], 2) }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!-- Refund Summary -->
                <div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">{{ __('Refund Details') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-3 border-bottom pb-2">
                            <span>{{ __('Total Refund') }}</span>
                            <span class="fs-4 fw-bold text-danger">E£ {{ number_format($this->totalRefundAmount, 2) }}</span>
                        </div>


                        <div class="mb-3">
                            <label class="form-label required">{{ __('Refund Payment Methods') }}</label>
                            
                            <div class="table-responsive">
                                <table class="table table-sm align-middle">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>{{ __('Method') }}</th>
                                            <th class="text-end">{{ __('Amount') }}</th>
                                            <th style="width: 50px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($refundPayments as $index => $payment)
                                            <tr>
                                                <td>
                                                    <select wire:model="refundPayments.{{ $index }}.payment_method_id" 
                                                            class="form-select form-select-sm @error('refundPayments.'.$index.'.payment_method_id') is-invalid @enderror">
                                                        @foreach($paymentMethods as $method)
                                                            <option value="{{ $method->id }}">{{ $method->localized_name }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('refundPayments.'.$index.'.payment_method_id') 
                                                        <div class="invalid-feedback">{{ $message }}</div> 
                                                    @enderror
                                                </td>
                                                <td>
                                                    <input type="number" step="0.01" min="0"
                                                           wire:model.live="refundPayments.{{ $index }}.amount"
                                                           class="form-control form-control-sm text-end @error('refundPayments.'.$index.'.amount') is-invalid @enderror"
                                                           placeholder="0.00">
                                                    @error('refundPayments.'.$index.'.amount') 
                                                        <div class="invalid-feedback">{{ $message }}</div> 
                                                    @enderror
                                                </td>
                                                <td class="text-center">
                                                    @if(count($refundPayments) > 1)
                                                        <button type="button" wire:click="removeRefundPayment({{ $index }})" 
                                                                class="btn btn-sm btn-outline-danger">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="3">
                                                <button type="button" wire:click="addRefundPayment" class="btn btn-sm btn-outline-primary w-100">
                                                    <i class="fas fa-plus me-1"></i>{{ __('Add Payment Method') }}
                                                </button>
                                            </td>
                                        </tr>
                                        <tr class="border-top border-2">
                                            <td class="fw-bold">{{ __('Total Payments') }}</td>
                                            <td class="text-end fw-bold">
                                                <span class="{{ abs($this->totalRefundPayments - $this->totalRefundAmount) > 0.01 ? 'text-danger' : 'text-success' }}">
                                                    E£ {{ number_format($this->totalRefundPayments, 2) }}
                                                </span>
                                            </td>
                                            <td></td>
                                        </tr>
                                        @if(abs($this->totalRefundPayments - $this->totalRefundAmount) > 0.01)
                                            <tr>
                                                <td colspan="3">
                                                    <div class="alert alert-danger alert-sm mb-0 py-1">
                                                        <small>
                                                            <i class="fas fa-exclamation-triangle me-1"></i>
                                                            {{ __('Payment total must equal refund amount') }}
                                                        </small>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endif
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Reason') }}</label>
                            <textarea wire:model="refundReason" class="form-control" rows="2" placeholder="{{ __('Reason for return...') }}"></textarea>
                        </div>

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

                        <div class="alert alert-warning small">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            {{ __('This action will create a credit note, update inventory, and reverse revenue.') }}
                        </div>

                        <button class="btn btn-danger w-100 py-2 fs-5" wire:click="processReturn"
                                wire:loading.attr="disabled"
                                @if($this->totalRefundAmount <= 0) disabled @endif>
                            <span wire:loading.remove><i class="fas fa-check-circle me-2"></i>{{ __('Confirm Refund') }}</span>
                            <span wire:loading><i class="fas fa-spinner fa-spin me-2"></i>{{ __('Processing...') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="text-center py-5">
            <div class="text-muted opacity-50 mb-3">
                <i class="fas fa-search fa-4x"></i>
            </div>
            <h4>{{ __('Search for an invoice to start a return') }}</h4>
            <p class="text-muted">{{ __('Enter the full invoice number or select from Sales History') }}</p>
        </div>
    @endif
</div>
