<div>
    <x-layouts.app title="{{ __('Sales') }}">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Sales History') }}</h1>
                <p class="text-muted mb-0">{{ __('View and manage all sales transactions') }}</p>
            </div>
            <div class="d-flex gap-2">
                <button wire:click="export" class="btn btn-outline-success">
                    <i class="fas fa-file-excel me-2"></i>{{ __('Export to Excel') }}
                    @if(count($selectedRows) > 0)
                        <span class="badge bg-success ms-1">{{ count($selectedRows) }}</span>
                    @endif
                </button>
                <a href="{{ route('sales.create') }}" class="btn btn-outline-primary">
                    <i class="fas fa-plus me-2"></i>{{ __('New Sale') }}
                </a>
                <a href="{{ route('pos.index') }}" class="btn btn-primary">
                    <i class="fas fa-cash-register me-2"></i>{{ __('Open POS') }}
                </a>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 text-white-50">{{ __('Total Sales') }}</h6>
                                <h3 class="mb-0">E£ {{ number_format($this->filteredSales, 2) }}</h3>
                                <small class="text-white-50">{{ __('Based on active filters') }}</small>
                            </div>
                            <i class="fas fa-chart-line fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 text-white-50">{{ __('Transactions') }}</h6>
                                <h3 class="mb-0">{{ $this->filteredCount }}</h3>
                                <small class="text-white-50">{{ __('Count') }}</small>
                            </div>
                            <i class="fas fa-receipt fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 text-white-50">{{ __('Average Sale') }}</h6>
                                <h3 class="mb-0">E£ {{ number_format($this->averageSale, 2) }}</h3>
                                <small class="text-white-50">{{ __('Per transaction') }}</small>
                            </div>
                            <i class="fas fa-calculator fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ __('Search') }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" wire:model.live.debounce.300ms="search" 
                                   placeholder="{{ __('Invoice or customer...') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('From Date') }}</label>
                        <input type="date" class="form-control" wire:model.live="dateFrom">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('To Date') }}</label>
                        <input type="date" class="form-control" wire:model.live="dateTo">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('Payment & Type') }}</label>
                        <select class="form-select" wire:model.live="paymentFilter">
                            <option value="">{{ __('All Transactions') }}</option>
                            <option value="pay_later">{{ __('Pay Later (Credit)') }}</option>
                            <option value="split">{{ __('Split Payments') }}</option>
                            <optgroup label="{{ __('Payment Methods') }}">
                                @foreach($paymentMethods as $method)
                                    <option value="method_{{ $method->id }}">{{ $method->localized_name }}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">{{ __('Show') }}</label>
                        <select class="form-select" wire:model.live="perPage">
                            <option value="15">15</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sales Table -->
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                                <th style="width: 40px;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" wire:model.live="selectAll">
                                    </div>
                                </th>
                                <th class="cursor-pointer" wire:click="sortBy('sale_number')">
                                    {{ __('Invoice #') }}
                                    @if($sortField === 'sale_number')
                                        <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                    @endif
                                </th>
                                <th class="cursor-pointer" wire:click="sortBy('created_at')">
                                    {{ __('Date') }}
                                    @if($sortField === 'created_at')
                                        <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                    @endif
                                </th>
                                <th>{{ __('Customer') }}</th>
                                <th>{{ __('Payment') }}</th>
                                <th class="text-end cursor-pointer" wire:click="sortBy('total')">
                                    {{ __('Total') }}
                                    @if($sortField === 'total')
                                        <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ms-1"></i>
                                    @endif
                                </th>
                                <th>{{ __('Status') }}</th>
                                <th class="text-center">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($sales as $sale)
                                <tr wire:key="sale-{{ $sale->id }}" class="{{ in_array($sale->id, $selectedRows) ? 'table-primary' : '' }}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" wire:model.live="selectedRows" value="{{ $sale->id }}">
                                        </div>
                                    </td>
                                    <td>
                                        <strong class="text-primary">{{ $sale->sale_number }}</strong>
                                    </td>
                                    <td>
                                        <span>{{ $sale->created_at->format('Y-m-d') }}</span>
                                        <small class="text-muted d-block">{{ $sale->created_at->format('H:i') }}</small>
                                    </td>
                                    <td>
                                        @if($sale->customer)
                                            <span>{{ $sale->customer->name }}</span>
                                            <small class="text-muted d-block">{{ $sale->customer->phone }}</small>
                                        @else
                                            <span class="text-muted">{{ __('Walk-in') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($sale->is_credit)
                                            <span class="badge bg-warning text-dark">{{ __('Credit') }}</span>
                                        @else
                                            <span class="badge bg-light text-dark">
                                                {{ $sale->paymentMethod?->localized_name ?? '-' }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <strong>E£ {{ number_format($sale->total, 2) }}</strong>
                                        @if($sale->discount_amount > 0)
                                            <small class="text-danger d-block">
                                                -{{ number_format($sale->discount_amount, 2) }}
                                            </small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($sale->status === 'completed')
                                            @if($sale->returns->count() > 0)
                                                <span class="badge bg-warning text-dark" title="{{ __('Has Returns') }}">
                                                    {{ __('Partial Return') }}
                                                </span>
                                            @else
                                                <span class="badge bg-success">{{ __('Completed') }}</span>
                                            @endif
                                        @elseif($sale->status === 'returned')
                                            <span class="badge bg-danger">{{ __('Returned') }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ ucfirst($sale->status) }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-outline-primary" wire:click="viewReceipt({{ $sale->id }})" title="{{ __('View Receipt') }}">
                                            <i class="fas fa-receipt"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5">
                                        <i class="fas fa-receipt fa-3x text-muted mb-3 d-block"></i>
                                        <p class="text-muted mb-0">{{ __('No sales found.') }}</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($sales->hasPages())
                <div class="card-footer">
                    {{ $sales->links() }}
                </div>
            @endif
        </div>

        <!-- Receipt Modal -->
        @if($showReceiptModal && $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">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Receipt') }} - {{ $selectedSale->sale_number }}</h5>
                            <button type="button" class="btn-close" wire:click="closeReceipt"></button>
                        </div>
                        <div class="modal-body" id="receipt-content">
                            <div class="receipt">
                                <div class="receipt-header text-center mb-3">
                                    <h4>{{ $shopName }}</h4>
                                    @if($shopAddress)<p class="small mb-0">{{ $shopAddress }}</p>@endif
                                    @if($shopPhone)<p class="small mb-0">{{ $shopPhone }}</p>@endif
                                </div>
                                
                                <hr>
                                
                                <div class="receipt-meta small mb-3">
                                    <div class="d-flex justify-content-between">
                                        <span>{{ __('Invoice') }}:</span>
                                        <span>{{ $selectedSale->sale_number }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>{{ __('Date') }}:</span>
                                        <span>{{ $selectedSale->created_at->format('Y-m-d H:i') }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>{{ __('Cashier') }}:</span>
                                        <span>{{ $selectedSale->user?->name ?? '-' }}</span>
                                    </div>
                                    @if($selectedSale->customer)
                                        <div class="d-flex justify-content-between">
                                            <span>{{ __('Customer') }}:</span>
                                            <span>{{ $selectedSale->customer->name }}</span>
                                        </div>
                                    @endif
                                    @if($selectedSale->is_credit)
                                        <div class="d-flex justify-content-between text-danger">
                                            <span>{{ __('Payment') }}:</span>
                                            <span>{{ __('CREDIT SALE') }}</span>
                                        </div>
                                    @endif
                                </div>

                                <hr>

                                <table class="table table-sm mb-3">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Item') }}</th>
                                            <th class="text-center">{{ __('Qty') }}</th>
                                            <th class="text-end">{{ __('Total') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($selectedSale->items as $item)
                                            <tr>
                                                <td>
                                                    {{ $item->product?->localized_name ?? 'Product' }}
                                                    @if($item->warranty_date)
                                                        <br><small class="text-muted">{{ __('Warranty') }}: {{ $item->warranty_date }}</small>
                                                    @endif
                                                </td>
                                                <td class="text-center">{{ $item->quantity }}</td>
                                                <td class="text-end">{{ number_format($item->total, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <hr>

                                <div class="receipt-totals">
                                    <div class="d-flex justify-content-between">
                                        <span>{{ __('Subtotal') }}</span>
                                        <span>E£ {{ number_format($selectedSale->subtotal, 2) }}</span>
                                    </div>
                                    @if($selectedSale->discount > 0)
                                        <div class="d-flex justify-content-between text-danger">
                                            <span>{{ __('Discount') }}</span>
                                            <span>- E£ {{ number_format($selectedSale->discount, 2) }}</span>
                                        </div>
                                    @endif
                                    @if($selectedSale->tax > 0)
                                        <div class="d-flex justify-content-between">
                                            <span>{{ __('Tax') }}</span>
                                            <span>E£ {{ number_format($selectedSale->tax, 2) }}</span>
                                        </div>
                                    @endif
                                    <div class="d-flex justify-content-between fw-bold fs-5 mt-2 border-top pt-2">
                                        <span>{{ __('Total') }}</span>
                                        <span>E£ {{ number_format($selectedSale->total, 2) }}</span>
                                    </div>

                                    <div class="mt-3 border-top pt-2">
                                        <div class="fw-bold small mb-1">{{ __('Payments') }}</div>
                                        @foreach($selectedSale->payments as $payment)
                                            <div class="d-flex justify-content-between small">
                                                <span>{{ $payment->paymentMethod?->localized_name ?? 'Payment' }}</span>
                                                <span>E£ {{ number_format($payment->amount, 2) }}</span>
                                            </div>
                                        @endforeach
                                        
                                        @if($selectedSale->balance_due > 0.01)
                                            <div class="d-flex justify-content-between text-danger fw-bold mt-1">
                                                <span>{{ __('Balance Due') }}</span>
                                                <span>E£ {{ number_format($selectedSale->balance_due, 2) }}</span>
                                            </div>
                                        @endif
                                        
                                        @if($selectedSale->change > 0)
                                            <div class="d-flex justify-content-between small mt-1">
                                                <span>{{ __('Change') }}</span>
                                                <span>E£ {{ number_format($selectedSale->change, 2) }}</span>
                                            </div>
                                        @endif
                                    </div>

                                    @if($selectedSale->returns->count() > 0)
                                        <div class="alert alert-warning p-2 mt-3 mb-0 small">
                                            <div class="fw-bold">{{ __('Returns') }}</div>
                                            @foreach($selectedSale->returns as $return)
                                                <div class="d-flex justify-content-between">
                                                    <span>#{{ $return->return_number }} ({{ $return->status }})</span>
                                                    <span>- E£ {{ number_format($return->total, 2) }}</span>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>

                                @if($selectedSale->status !== 'returned' && $selectedSale->returns->count() === 0)
                                    <div class="text-center mt-3 d-print-none">
                                        <a href="{{ route('pos.returns', ['sale' => $selectedSale->id]) }}" class="btn btn-sm btn-outline-danger w-100">
                                            <i class="fas fa-undo me-1"></i> {{ __('Process Return') }}
                                        </a>
                                    </div>
                                @endif

                                <hr>

                                <div class="text-center small">
                                    <p class="mb-0">{{ __('Thank you for your purchase!') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" wire:click="closeReceipt">
                                {{ __('Close') }}
                            </button>
                            <a href="{{ route('pdf.sale.invoice', ['sale' => $selectedSale->id]) }}" class="btn btn-outline-info">
                                <i class="fas fa-download me-2"></i>{{ __('Download PDF') }}
                            </a>
                            <a href="{{ route('pdf.sale.invoice', ['sale' => $selectedSale->id, 'preview' => true]) }}" target="_blank" class="btn btn-primary">
                                <i class="fas fa-print me-2"></i>{{ __('Print') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <style>
            .cursor-pointer { cursor: pointer; }
            .receipt {
                font-family: 'Courier New', monospace;
                font-size: 12px;
            }
            @media print {
                .modal-header, .modal-footer { display: none !important; }
                .modal-content { border: none !important; box-shadow: none !important; }
            }
        </style>
    </x-layouts.app>
</div>
