@section('title', __('filament.device_sales_report.title'))
<div id="device-sales-report" dir="rtl">
    <style>
        #device-sales-report {
            font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #e0e7ff, #f0f9ff);
            padding: 24px;
            border-radius: 16px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
        }

        /* Dark Mode Support */
        .dark #device-sales-report {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #e2e8f0;
        }

        #device-sales-report .title {
            font-size: 24px;
            font-weight: 800;
            color: #312e81;
            text-align: center;
            margin-bottom: 20px;
        }

        .dark #device-sales-report .title {
            color: #38bdf8;
        }

        #device-sales-report .toolbar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 12px;
        }
        #device-sales-report .btn {
            background: #3730a3;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 13px;
            cursor: pointer;
        }

        .dark #device-sales-report .btn {
            background: #1e40af;
            color: #f1f5f9;
        }

        #device-sales-report .btn:hover {
            opacity: 0.9;
        }
        #device-sales-report table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .dark #device-sales-report table {
            background: #1f2937;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }

        #device-sales-report thead th {
            background: #e0e7ff;
            color: #3730a3;
            font-size: 13px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            padding: 12px 14px;
            text-align: right;
        }

        .dark #device-sales-report thead th {
            background: #374151;
            color: #38bdf8;
        }

        #device-sales-report tbody td {
            padding: 12px 14px;
            border-top: 1px solid #e2e8f0;
            font-size: 14px;
            color: #1e293b;
        }

        .dark #device-sales-report tbody td {
            border-top: 1px solid #4b5563;
            color: #e5e7eb;
        }

        #device-sales-report tbody tr:hover {
            background: #eef2ff;
        }

        .dark #device-sales-report tbody tr:hover {
            background: #374151;
        }

        #device-sales-report .amount {
            color: #3730a3;
            font-weight: 800;
        }

        .dark #device-sales-report .amount {
            color: #10b981;
        }

        #device-sales-report .empty {
            padding: 18px;
            text-align: center;
            color: #64748b;
            font-style: italic;
        }

        .dark #device-sales-report .empty {
            color: #9ca3af;
        }
        }
        @media print {
            body * {
                visibility: hidden !important;
            }
            #device-sales-report, #device-sales-report * {
                visibility: visible !important;
            }
            #device-sales-report {
                position: absolute !important;
                inset: 0 !important;
                margin: 0 !important;
                background: #fff !important;
                box-shadow: none !important;
            }
            #device-sales-report .toolbar {
                display: none;
            }
            @page {
                size: A4;
                margin: 12mm;
            }
        }
    </style>
    <div class="toolbar">
        <button class="btn" onclick="window.print()">🖨️ طباعة</button>
    </div>
        @include('filament.partials.company-header')
        <h1 class="report-title" style="text-align:center;font-size:28px;font-weight:900;color:#1e3a8a;margin-bottom:18px">
            {{ __('filament.device_sales_report.title') }}
        </h1>
    <form method="GET" class="filters" style="margin-bottom:18px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
    <label>{{ __('filament.device_sales_report.date_from') }}</label>
    <input type="date" name="date_from" value="{{ request('date_from', $date_from) }}" onchange="this.form.submit()">
    <label>{{ __('filament.device_sales_report.date_to') }}</label>
    <input type="date" name="date_to" value="{{ request('date_to', $date_to) }}" onchange="this.form.submit()">
            <label>{{ __('filament.device_sales_report.customer') }}</label>
            <select name="customer" id="customer-select" style="min-width:180px;" onchange="this.form.submit()">
                <option value="">{{ __('filament.device_sales_report.search_customer') }}</option>
                @foreach($customers as $id => $name)
                    <option value="{{ $id }}" {{ request('customer') == $id ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
            <label>{{ __('filament.device_sales_report.device') }}</label>
            <select name="device" id="device-select" style="min-width:180px;" onchange="this.form.submit()">
                <option value="">{{ __('filament.device_sales_report.search_device') }}</option>
                @foreach($devices as $id => $name)
                    <option value="{{ $id }}" {{ request('device') == $id ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
            <label>{{ __('filament.device_sales_report.brand') }}</label>
            <select name="brand" id="brand-select" style="min-width:180px;" onchange="this.form.submit()">
                <option value="">{{ __('filament.device_sales_report.search_brand') }}</option>
                @foreach($brands as $id => $name)
                    <option value="{{ $id }}" {{ request('brand') == $id ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
        <button type="submit" class="btn">{{ __('filament.device_sales_report.search') }}</button>
    </form>
    <div class="card">
        <table>
            <thead>
                <tr>
                    <th>{{ __('filament.device_sales_report.device') }}</th>
                    <th>{{ __('filament.device_sales_report.brand') }}</th>
                    <th>{{ __('filament.device_sales_report.customer') }}</th>
                    <th>{{ __('filament.device_sales_report.price') }}</th>
                    <th>{{ __('filament.device_sales_report.sale_date') }}</th>
                </tr>
            </thead>
            <tbody>
                @php $totalInstallmentPrice = 0; @endphp
                @forelse($sales as $sale)
                    @php
                        $productNames = $sale->products->pluck('name')->filter()->toArray();
                        $brandNames = $sale->products->pluck('brand.name')->filter()->unique()->toArray();
                    @endphp
                    <tr>
                        <td>{{ count($productNames) ? implode(' - ', $productNames) : '-' }}</td>
                        <td>{{ count($brandNames) ? implode(' - ', $brandNames) : '-' }}</td>
                        <td>{{ $sale->customer->name ?? '-' }}</td>
                        <td class="amount">{{ number_format($sale->installment_price, 2) }}</td>
                        <td>{{ $sale->created_at->format('Y-m-d') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="empty">{{ __('filament.device_sales_report.no_sales') }}</td></tr>
                @endforelse
            </tbody>
        </table>
        <div style="margin-top:12px;font-weight:bold;color:#312e81;">
            {{ __('filament.device_sales_report.totals') }}: {{ number_format($totalInstallmentPrice, 2) }}
        </div>
            </tbody>
        </table>
    </div>
</div>