<div>
    <div class="page-header d-flex justify-content-between align-items-center">
        <div>
            <h1 class="page-title">{{ __('Daily Sales History') }}</h1>
            <p class="text-muted mb-0">{{ __('View and manage daily aggregate sales') }}</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') }}
            </button>
            <a href="{{ route('sales.daily.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i> {{ __('Register Daily Sales') }}
            </a>
        </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">{{ __('Date From') }}</label>
                    <input type="date" class="form-control" wire:model.live="dateFrom">
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ __('Date To') }}</label>
                    <input type="date" class="form-control" wire:model.live="dateTo">
                </div>
            </div>
        </div>
    </div>

    <!-- Sales Table -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th style="width: 40px;">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" wire:model.live="selectAll">
                                </div>
                            </th>
                            <th>{{ __('Reference') }}</th>
                            <th>{{ __('Date') }}</th>
                            <th>{{ __('Payments Breakdown') }}</th>
                            <th class="text-end">{{ __('Total Amount') }}</th>
                            <th>{{ __('Recorded By') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($dailySales as $sale)
                            <tr 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>
                                    <span class="fw-bold text-primary">{{ $sale->reference }}</span>
                                </td>
                                <td>
                                    {{ $sale->sale_date->format('Y-m-d') }}
                                    <small class="d-block text-muted">{{ $sale->created_at->format('H:i') }}</small>
                                </td>
                                <td>
                                    @foreach ($sale->payments as $payment)
                                        <div class="d-flex justify-content-between small mb-1" style="max-width: 200px">
                                            <span class="text-muted">{{ $payment->paymentMethod->localized_name }}:</span>
                                            <span class="fw-semibold">{{ number_format($payment->amount, 2) }}</span>
                                        </div>
                                    @endforeach
                                </td>
                                <td class="text-end">
                                    <span class="fw-bold fs-6">{{ number_format($sale->total, 2) }}</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-xs me-2 bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 24px; height: 24px;">
                                            {{ substr($sale->user->name ?? 'U', 0, 1) }}
                                        </div>
                                        <span>{{ $sale->user->name ?? 'Unknown' }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-success">{{ __('Completed') }}</span>
                                </td>
                                <td class="text-end">
                                    <!-- Add view/edit actions if needed later -->
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div class="text-muted">
                                        <i class="fas fa-receipt fa-3x mb-3 opacity-50"></i>
                                        <p class="mb-0">{{ __('No daily sales found for the selected period.') }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $dailySales->links() }}
            </div>
        </div>
    </div>
</div>
