{{-- resources/views/filament/pages/profit-report.blade.php --}}
<div id="profit-report" dir="rtl" x-data x-on:triggerPrint.window="window.print()">
    <style>
        #profit-report {
            font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #eef2ff, #f0f9ff);
            padding: 24px;
            border-radius: 16px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .06)
        }

        #profit-report .toolbar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 12px
        }

        #profit-report .btn {
            background: #1e3a8a;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 13px;
            cursor: pointer
        }

        #profit-report .btn:hover {
            opacity: .9
        }

        /* عنوان وترويسة */
        #profit-report .report-title {
            text-align: center;
            font-size: 28px;
            font-weight: 900;
            color: #1e3a8a;
            margin: 8px 0 18px
        }

        /* الفلاتر */
        #profit-report .filters {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 14px;
            margin-bottom: 18px
        }

        #profit-report label {
            display: block;
            font-weight: 700;
            color: #1e3a8a;
            margin: 0 0 6px
        }

        #profit-report select,
        #profit-report input[type="date"] {
            width: 100%;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid #c7d2fe;
            background: #fff;
            font-size: 14px
        }

        #profit-report .apply-wrap {
            display: flex;
            align-items: end
        }

        /* KPIs */
        #profit-report .kpis {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-bottom: 18px
        }

        #profit-report .card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 10px rgba(30, 58, 138, .08);
            padding: 16px 18px
        }

        #profit-report .kpi-title {
            color: #475569;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 6px
        }

        #profit-report .kpi-value {
            font-size: 22px;
            font-weight: 900;
            color: #1e3a8a
        }

        #profit-report .badge {
            display: inline-block;
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700
        }

        #profit-report .badge-info {
            background: #e0f2fe;
            color: #075985
        }

        #profit-report .badge-success {
            background: #dcfce7;
            color: #166534
        }

        /* جدول التفاصيل */
        #profit-report .table-wrap {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 10px rgba(30, 58, 138, .08);
            overflow: auto;
            margin-bottom: 18px
        }

        #profit-report table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0
        }

        #profit-report thead th {
            background: #e0e7ff;
            color: #1e3a8a;
            font-size: 13px;
            letter-spacing: .4px;
            text-transform: uppercase;
            padding: 12px 14px;
            text-align: right;
            position: sticky;
            top: 0;
            z-index: 1
        }

        #profit-report tbody td {
            padding: 12px 14px;
            border-top: 1px solid #e2e8f0;
            font-size: 14px;
            color: #0f172a;
            vertical-align: middle
        }

        #profit-report tbody tr:nth-child(even) {
            background: #f8fafc
        }

        #profit-report tbody tr:hover {
            background: #eef2ff
        }

        #profit-report .amount {
            font-weight: 800;
            color: #1e3a8a;
            white-space: nowrap
        }

        #profit-report .amount.neg {
            color: #9f1239
        }

        #profit-report tfoot td {
            background: #eef2ff;
            font-weight: 800;
            color: #1e3a8a;
            padding: 12px 14px;
            border-top: 1px solid #c7d2fe
        }

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

        /* توزيع أرباح الشركاء */
        #profit-report .partners {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px
        }

        #profit-report .partner-card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 10px rgba(30, 58, 138, .08);
            padding: 14px 16px
        }

        #profit-report .partner-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px
        }

        #profit-report .partner-name {
            font-size: 13px;
            color: #334155;
            font-weight: 700
        }

        #profit-report .partner-pct {
            font-size: 12px;
            background: #dbeafe;
            color: #1e3a8a;
            border-radius: 999px;
            padding: 2px 8px
        }

        #profit-report .partner-sum {
            font-size: 18px;
            font-weight: 900;
            color: #1e3a8a
        }

        #profit-report .bar {
            height: 8px;
            background: #e5e7eb;
            border-radius: 999px;
            overflow: hidden;
            margin-top: 8px
        }

        #profit-report .bar>span {
            display: block;
            height: 100%;
            background: #3b82f6
        }

        @media print {
            body * {
                visibility: hidden !important
            }

            #profit-report,
            #profit-report * {
                visibility: visible !important
            }

            #profit-report {
                position: absolute !important;
                inset: 0 !important;
                margin: 0 !important;
                background: #fff !important;
                box-shadow: none !important
            }

            #profit-report .toolbar,
            #profit-report .filters {
                display: none
            }

            @page {
                size: A4;
                margin: 12mm
            }
        }
    </style>

    {{-- شريط الأدوات --}}
    <div class="toolbar">
        <button class="btn" type="button" onclick="window.print()">🖨️ {{ __('common.print') ?? 'طباعة' }}</button>
    </div>

    {{-- ترويسة الشركة (اختياري) --}}
    @includeIf('filament.partials.company-header')

    {{-- العنوان --}}
    <h1 class="report-title">{{ __('profit_report.title') }}</h1>

    {{-- الفلاتر --}}
    <form wire:submit.prevent="generateReport" class="filters">
        <div>
            <label>{{ __('profit_report.date_from') }}</label>
            <input type="date" wire:model.lazy="date_from">
        </div>
        <div>
            <label>{{ __('profit_report.date_to') }}</label>
            <input type="date" wire:model.lazy="date_to">
        </div>
        <div>
            <label>{{ __('profit_report.customer') }}</label>
            <select class="select" wire:model.lazy="customer_id" multiple>
                <option value="">{{ __('common.all') }}</option>
                @foreach ($allCustomers as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label>{{ __('profit_report.product') }}</label>
            <select wire:model.lazy="product_id">
                <option value="">{{ __('common.all') }}</option>
                @foreach ($allProducts as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label>{{ __('profit_report.brand') }}</label>
            <select wire:model.lazy="brand_id">
                <option value="">{{ __('common.all') }}</option>
                @foreach ($allBrands as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label>{{ __('profit_report.category') }}</label>
            <select wire:model.lazy="category_id">
                <option value="">{{ __('common.all') }}</option>
                @foreach ($allCategories as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="apply-wrap">
            <button class="btn" type="submit">{{ __('profit_report.apply_filters') }}</button>
        </div>
    </form>

    {{-- KPIs --}}
    <div class="kpis">
        <div class="card">
            <div class="kpi-title">{{ __('profit_report.total_buy') }}</div>
            <div class="kpi-value"><span class="badge badge-info">{{ number_format($total_buy ?? 0, 2) }}</span></div>
        </div>
        <div class="card">
            <div class="kpi-title">{{ __('profit_report.total_installment') }}</div>
            <div class="kpi-value"><span
                    class="badge badge-success">{{ number_format($total_installment ?? 0, 2) }}</span></div>
        </div>
        <div class="card">
            <div class="kpi-title">{{ __('profit_report.total_profit') }}</div>
            <div class="kpi-value"><span class="badge badge-info">{{ number_format($total_profit ?? 0, 2) }}</span>
            </div>
        </div>
    </div>

    {{-- توزيع أرباح الشركاء --}}
    @php
        $partnersTotals = [];
        foreach ($partnerProfits ?? [] as $chunk) {
            foreach ($chunk['shares'] ?? [] as $pid => $value) {
                $partnersTotals[$pid] = ($partnersTotals[$pid] ?? 0) + (float) $value;
            }
        }
        ksort($partnersTotals);
        $grandTotal = array_sum($partnersTotals) ?: 0;
    @endphp


    <h2 class="report-title" style="font-size:22px;margin-top:6px">{{ __('profit_report.partner_totals') }}</h2>
    @if (!empty($partnersTotals))
        <div class="partners">
            @foreach ($partnersTotals as $pid => $sum)
                @php $pct = $grandTotal > 0 ? round(($sum / $grandTotal) * 100, 1) : 0; @endphp
                <div class="partner-card">
                    <div class="partner-head">
                        <div class="partner-name">{{ $partnersNames[$pid] ?? '#' . $pid }}</div>
                        <div class="partner-pct">{{ $pct }}%</div>
                    </div>
                    <div class="partner-sum">{{ number_format($sum, 2) }}</div>
                    <div class="bar"><span style="width: {{ $pct }}%"></span></div>
                </div>
            @endforeach
        </div>
    @else
        <div class="empty">{{ __('profit_report.no_records') }}</div>
    @endif

    <x-filament::section
        class="mt-8 border border-gray-200 dark:border-gray-800 rounded-2xl shadow bg-white/90 dark:bg-gray-900/80">
        <x-slot name="heading">{{ __('profit_report.partner_profits_timeline') }}</x-slot>
        <div class="overflow-x-auto rounded-xl">
            <table class="w-full text-start text-sm table-sticky">
                <thead>
                    <tr class="border-b bg-gray-50/90 dark:bg-gray-800/70 text-gray-700 dark:text-gray-200">
                        <th class="px-3 py-2">{{ __('profit_report.start') }}</th>
                        <th class="px-3 py-2">{{ __('profit_report.end') }}</th>
                        <th class="px-3 py-2 text-right">{{ __('profit_report.period_profit') }}</th>
                        <th class="px-3 py-2">{{ __('profit_report.shares_by_partner') }}</th>
                    </tr>
                </thead>
                <tbody
                    class="[&_tr:nth-child(odd)]:bg-white [&_tr:nth-child(even)]:bg-gray-50/60 dark:[&_tr:nth-child(even)]:bg-gray-900/40">
                    @forelse($partnerProfits as $chunk)
                        <tr
                            class="border-b last:border-0 hover:bg-primary-50/40 dark:hover:bg-gray-800/60 transition align-top">
                            <td class="px-3 py-2">{{ $chunk['start'] }}</td>
                            <td class="px-3 py-2">{{ $chunk['end'] }}</td>
                            <td class="px-3 py-2 text-right font-semibold tabular-nums">
                                {{ number_format($chunk['profit'], 2) }}</td>
                            <td class="px-3 py-2">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1">
                                    @foreach ($chunk['shares'] ?? [] as $pid => $val)
                                        <div class="flex justify-between items-center">
                                            <span
                                                class="text-gray-600 dark:text-gray-300">{{ $partnersNames[$pid] ?? '#' . $pid }}</span>
                                            <span
                                                class="inline-flex items-center rounded-lg px-2 py-0.5 text-xs font-semibold bg-primary-50 text-primary-700 ring-1 ring-primary-600/20 tabular-nums">
                                                {{ number_format($val, 2) }}
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">
                                {{ __('profit_report.no_records') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-filament::section>

    {{-- جدول التفاصيل --}}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>{{ __('profit_report.date') }}</th>
                    <th>{{ __('profit_report.customer') }}</th>
                    <th>{{ __('profit_report.product') }}</th>
                    <th>{{ __('profit_report.brand') }}</th>
                    <th>{{ __('profit_report.category') }}</th>
                    <th>{{ __('profit_report.buy_price') }}</th>
                    <th>{{ __('profit_report.installment_price') }}</th>
                    <th>{{ __('profit_report.profit') }}</th>
                </tr>
            </thead>

            @if (!empty($details) && count($details))
                <tbody>
                    @foreach ($details as $row)
                        @php $isPos = (float)($row['profit'] ?? 0) >= 0; @endphp
                        <tr>
                            <td>{{ \Illuminate\Support\Carbon::parse($row['contract_date'])->toDateString() }}</td>
                            <td>{{ $row['customer'] }}</td>
                            <td>{{ $row['device'] }}</td>
                            <td>{{ $row['brand'] }}</td>
                            <td>{{ $row['category'] }}</td>
                            <td class="amount">{{ number_format($row['buy_price'], 2) }}</td>
                            <td class="amount">{{ number_format($row['installment_price'], 2) }}</td>
                            <td class="amount {{ $isPos ? '' : 'neg' }}">{{ number_format($row['profit'], 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" style="text-align:left">{{ __('profit_report.totals') }}</td>
                        <td class="amount">{{ number_format($total_buy, 2) }}</td>
                        <td class="amount">{{ number_format($total_installment, 2) }}</td>
                        <td class="amount">{{ number_format($total_profit, 2) }}</td>
                    </tr>
                </tfoot>
            @else
                <tbody>
                    <tr>
                        <td colspan="8" class="empty">{{ __('profit_report.no_records') }}</td>
                    </tr>
                </tbody>
            @endif
        </table>
    </div>


    {{-- ذيل الصفحة (اختياري) --}}
    @includeIf('filament.partials.company-footer')

    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
        <script>
            function activateSelect2() {
                $('select').select2({
                    width: '100%',
                    dir: 'rtl',
                    placeholder: '{{ __('common.all') }}',
                    allowClear: true
                });
            }
            $(document).ready(function() {
                activateSelect2();
                if (window.Livewire) {
                    window.Livewire.hook('message.processed', () => {
                        activateSelect2();
                    });
                }
            });
        </script>
    @endpush
</div>