<div>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h4 mb-0">{{ __('Sales History') }}</h2>
        <div>
            <button wire:click="export" class="btn btn-success btn-sm me-2">
                <i class="fas fa-file-excel me-1"></i>{{ __('Export') }}
            </button>
            <a href="{{ route('pos.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>{{ __('Back to POS') }}
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label small text-muted">{{ __('Date') }}</label>
                    <input type="date" wire:model.live="filterDate" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">{{ __('Status') }}</label>
                    <select wire:model.live="filterStatus" class="form-select">
                        <option value="all">{{ __('All') }}</option>
                        <option value="completed">{{ __('Completed') }}</option>
                        <option value="returned">{{ __('Returned') }}</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label small text-muted">{{ __('Search') }}</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" wire:model.live.debounce.300ms="search" 
                               class="form-control border-start-0" 
                               placeholder="{{ __('Search by invoice number, customer name or phone...') }}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sales Table -->
    <div class="card shadow-sm border-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th style="width: 40px;" class="ps-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" wire:model.live="selectAll">
                            </div>
                        </th>
                        <th>{{ __('Invoice #') }}</th>
                        <th>{{ __('Date & Time') }}</th>
                        <th>{{ __('Customer') }}</th>
                        <th>{{ __('Total') }}</th>
                        <th>{{ __('Payment') }}</th>
                        <th>{{ __('Cashier') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th class="text-end pe-4">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($sales as $sale)
                        <tr class="{{ in_array($sale->id, $selectedRows) ? 'table-primary' : '' }}">
                            <td class="ps-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" wire:model.live="selectedRows" value="{{ $sale->id }}">
                                </div>
                            </td>
                            <td class="fw-bold">{{ $sale->sale_number }}</td>
                            <td>
                                <div>{{ $sale->created_at->format('Y-m-d') }}</div>
                                <small class="text-muted">{{ $sale->created_at->format('H:i') }}</small>
                            </td>
                            <td>
                                @if($sale->customer)
                                    <div>{{ $sale->customer->name }}</div>
                                    <small class="text-muted">{{ $sale->customer->phone }}</small>
                                @else
                                    <span class="text-muted">{{ __('Walk-in Customer') }}</span>
                                @endif
                            </td>
                            <td class="fw-bold fs-6">E£ {{ number_format($sale->total, 2) }}</td>
                            <td>
                                @foreach($sale->payments as $payment)
                                    <span class="badge bg-secondary mb-1">
                                        {{ $payment->paymentMethod->localized_name ?? $payment->paymentMethod->name }}
                                        <span class="opacity-75">({{ number_format($payment->amount, 2) }})</span>
                                    </span>
                                @endforeach
                                @if($sale->is_credit)
                                    <span class="badge bg-warning text-dark">{{ __('Credit') }}</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-xs me-2 bg-light rounded-circle text-center" style="width: 24px; height: 24px; line-height: 24px;">
                                        <small>{{ substr($sale->user->name, 0, 1) }}</small>
                                    </div>
                                    {{ $sale->user->name }}
                                </div>
                            </td>
                            <td>
                                @if($sale->returns->count() > 0)
                                    <span class="badge bg-danger">{{ __('Returned') }}</span>
                                @else
                                    <span class="badge bg-success">{{ __('Completed') }}</span>
                                @endif
                            </td>
                            <td class="text-end pe-4">
                                <button class="btn btn-sm btn-outline-primary" wire:click="viewSale({{ $sale->id }})">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="fas fa-receipt fa-3x mb-3 opacity-50"></i>
                                <p>{{ __('No sales found matching your criteria.') }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-white border-top-0 py-3">
            {{ $sales->links() }}
        </div>
    </div>

    <!-- Sale Detail Modal -->
    @if($showSaleModal && $selectedSale)
        <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 border-0 shadow-lg">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            {{ __('Invoice') }} #{{ $selectedSale->sale_number }}
                            @if($selectedSale->returns->count() > 0)
                                <span class="badge bg-danger ms-2">{{ __('Returned') }}</span>
                            @endif
                        </h5>
                        <button type="button" class="btn-close" wire:click="closeSaleModal"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h6 class="text-muted text-uppercase small fw-bold">{{ __('Customer Details') }}</h6>
                                @if($selectedSale->customer)
                                    <p class="mb-0 fw-bold">{{ $selectedSale->customer->name }}</p>
                                    <p class="mb-0 text-muted">{{ $selectedSale->customer->phone }}</p>
                                @else
                                    <p class="mb-0 text-muted">{{ __('Walk-in Customer') }}</p>
                                @endif
                            </div>
                            <div class="col-md-6 text-md-end">
                                <h6 class="text-muted text-uppercase small fw-bold">{{ __('Sale Details') }}</h6>
                                <p class="mb-0">{{ $selectedSale->created_at->format('d M Y, h:i A') }}</p>
                                <p class="mb-0 text-muted">{{ __('Cashier') }}: {{ $selectedSale->user->name }}</p>
                            </div>
                        </div>

                        <div class="table-responsive mb-4">
                            <table class="table table-bordered">
                                <thead class="bg-light">
                                    <tr>
                                        <th>{{ __('Item') }}</th>
                                        <th class="text-center">{{ __('Qty') }}</th>
                                        <th class="text-end">{{ __('Price') }}</th>
                                        <th class="text-end">{{ __('Total') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($selectedSale->items as $item)
                                        <tr>
                                            <td>
                                                {{ $item->product->localized_name }}
                                                @if($item->repair_notes)
                                                    <br><small class="text-muted">{{ $item->repair_notes }}</small>
                                                @endif
                                            </td>
                                            <td class="text-center">{{ $item->quantity }}</td>
                                            <td class="text-end">{{ number_format($item->price, 2) }}</td>
                                            <td class="text-end">{{ number_format($item->total, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" class="text-end fw-bold">{{ __('Subtotal') }}</td>
                                        <td class="text-end fw-bold">{{ number_format($selectedSale->subtotal, 2) }}</td>
                                    </tr>
                                    @if($selectedSale->discount > 0)
                                        <tr>
                                            <td colspan="3" class="text-end text-danger">{{ __('Discount') }}</td>
                                            <td class="text-end text-danger">- {{ number_format($selectedSale->discount, 2) }}</td>
                                        </tr>
                                    @endif
                                    <tr class="bg-light">
                                        <td colspan="3" class="text-end fw-bold fs-5">{{ __('Total') }}</td>
                                        <td class="text-end fw-bold fs-5 text-primary">E£ {{ number_format($selectedSale->total, 2) }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded">
                            <div>
                                <h6 class="mb-1">{{ __('Payment Info') }}</h6>
                                @foreach($selectedSale->payments as $payment)
                                    <div class="small">
                                        {{ $payment->paymentMethod->localized_name }}: 
                                        <strong>E£ {{ number_format($payment->amount, 2) }}</strong>
                                    </div>
                                @endforeach
                            </div>
                            <!-- Return Button -->
                            @if($selectedSale->returns->count() == 0)
                                <a href="{{ route('pos.returns', ['sale' => $selectedSale->id]) }}" class="btn btn-outline-danger">
                                    <i class="fas fa-undo me-2"></i>{{ __('Process Return') }}
                                </a>
                            @else
                                <button class="btn btn-secondary" disabled>
                                    <i class="fas fa-check me-2"></i>{{ __('Already Returned') }}
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="closeSaleModal">{{ __('Close') }}</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
