<div>
    <x-layouts.app title="{{ __('Daily Sales Report') }}">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Daily Sales Report') }}</h1>
                <p class="text-muted mb-0">{{ __('Sales summary by day') }}</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('pdf.report.daily-sales', ['date_from' => $dateFrom, 'date_to' => $dateTo, 'branch_id' => $branchFilter]) }}" class="btn btn-outline-info">
                    <i class="fas fa-download me-2"></i>{{ __('Download PDF') }}
                </a>
                <a href="{{ route('pdf.report.daily-sales', ['date_from' => $dateFrom, 'date_to' => $dateTo, 'branch_id' => $branchFilter, 'preview' => true]) }}" target="_blank" class="btn btn-outline-secondary">
                    <i class="fas fa-print me-2"></i>{{ __('Print') }}
                </a>
            </div>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">{{ __('From Date') }}</label>
                        <input type="date" class="form-control" wire:model.live="dateFrom">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('To Date') }}</label>
                        <input type="date" class="form-control" wire:model.live="dateTo">
                    </div>
                    @if($branches->count() > 1)
                        <div class="col-md-3">
                            <label class="form-label">{{ __('Branch') }}</label>
                            <select class="form-select" wire:model.live="branchFilter">
                                <option value="">{{ __('All Branches') }}</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="col-md-3">
                        <label class="form-label">{{ __('User') }}</label>
                        <select class="form-select" wire:model.live="userFilter">
                            <option value="">{{ __('All Users') }}</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-2">
                <div class="card bg-primary text-white h-100">
                    <div class="card-body text-center">
                        <h6 class="text-white-50">{{ __('Total Sales') }}</h6>
                        <h3 class="mb-0">{{ number_format($totals['sales_count']) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-success text-white h-100">
                    <div class="card-body text-center">
                        <h6 class="text-white-50">{{ __('Revenue') }}</h6>
                        <h4 class="mb-0">{{ $currency }} {{ number_format($totals['total_amount'], 0) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-info text-white h-100">
                    <div class="card-body text-center">
                        <h6 class="text-white-50">{{ __('Cash') }}</h6>
                        <h4 class="mb-0">{{ $currency }} {{ number_format($totals['cash_sales'], 0) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-secondary text-white h-100">
                    <div class="card-body text-center">
                        <h6 class="text-white-50">{{ __('Card') }}</h6>
                        <h4 class="mb-0">{{ $currency }} {{ number_format($totals['card_sales'], 0) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-warning text-dark h-100">
                    <div class="card-body text-center">
                        <h6>{{ __('Credit') }}</h6>
                        <h4 class="mb-0">{{ $currency }} {{ number_format($totals['credit_sales'], 0) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-danger text-white h-100">
                    <div class="card-body text-center">
                        <h6 class="text-white-50">{{ __('Discounts') }}</h6>
                        <h4 class="mb-0">{{ $currency }} {{ number_format($totals['total_discount'], 0) }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Daily Sales Table -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header"><h5 class="mb-0">{{ __('Daily Breakdown') }}</h5></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('Date') }}</th>
                                        <th class="text-center">{{ __('Sales') }}</th>
                                        <th class="text-end">{{ __('Cash') }}</th>
                                        <th class="text-end">{{ __('Card') }}</th>
                                        <th class="text-end">{{ __('Credit') }}</th>
                                        <th class="text-end">{{ __('Total') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($salesData as $day)
                                        <tr>
                                            <td>
                                                <strong>{{ \Carbon\Carbon::parse($day->date)->format('D, M j') }}</strong>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge bg-primary">{{ $day->total_sales }}</span>
                                            </td>
                                            <td class="text-end">{{ $currency }} {{ number_format($day->cash_sales, 0) }}</td>
                                            <td class="text-end">{{ $currency }} {{ number_format($day->card_sales, 0) }}</td>
                                            <td class="text-end">{{ $currency }} {{ number_format($day->credit_sales, 0) }}</td>
                                            <td class="text-end">
                                                <strong>{{ $currency }} {{ number_format($day->total_amount, 0) }}</strong>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4 text-muted">
                                                {{ __('No sales data for selected period.') }}
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Products -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header"><h5 class="mb-0">{{ __('Top Products') }}</h5></div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('Product') }}</th>
                                        <th class="text-center">{{ __('Qty') }}</th>
                                        <th class="text-end">{{ __('Revenue') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($topProducts as $item)
                                        <tr>
                                            <td>
                                                <small>{{ $item->product?->localized_name }}</small>
                                            </td>
                                            <td class="text-center">{{ number_format($item->qty_sold, 0) }}</td>
                                            <td class="text-end">
                                                <small>{{ $currency }} {{ number_format($item->total_revenue, 0) }}</small>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center py-3 text-muted">
                                                {{ __('No data') }}
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <style>
            @media print {
                .page-header .btn, .card-body form { display: none !important; }
            }
        </style>
    </x-layouts.app>
</div>
