@php
    $totalDeposits = (float) ($partner->deposits->sum('amount') ?? 0);
    $totalWithdraws = (float) ($partner->withdrawals->sum('amount') ?? 0);
    $openingBalance = (float) ($partner->initial_capital ?? 0);
    $closingBalance = $openingBalance + $totalDeposits - $totalWithdraws;
@endphp

<div id="partner-report-modal" dir="rtl">
    <style>
        #partner-report-modal {
            font-family: Tahoma, Arial, sans-serif;
            color: #111827
        }

        #partner-report-modal .wrap {
            max-width: 860px;
            margin: 0 auto
        }

        #partner-report-modal .card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
            padding: 20px;
            margin-bottom: 16px
        }

        #partner-report-modal .header {
            text-align: center;
            margin-bottom: 16px
        }

        #partner-report-modal .header h2 {
            font-size: 22px;
            margin: 0;
            color: #111827
        }

        #partner-report-modal .sub {
            color: #6b7280;
            font-size: 13px;
            margin-top: 6px
        }

        #partner-report-modal .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px
        }

        @media (min-width:768px) {
            #partner-report-modal .grid {
                grid-template-columns: 1fr 1fr
            }
        }

        #partner-report-modal .kv p {
            margin: 6px 0;
            font-size: 14px
        }

        #partner-report-modal .kv .key {
            color: #6b7280
        }

        #partner-report-modal .kv .val {
            font-weight: 700
        }

        #partner-report-modal .badges {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px
        }

        #partner-report-modal .badge {
            background: #f3f4f6;
            border-radius: 10px;
            padding: 8px 12px;
            font-weight: 600;
            font-size: 14px
        }

        #partner-report-modal .badge.green {
            color: #065f46;
            background: #ecfdf5
        }

        #partner-report-modal .badge.blue {
            color: #1e40af;
            background: #eff6ff
        }

        #partner-report-modal .badge.purple {
            color: #5b21b6;
            background: #f5f3ff
        }

        #partner-report-modal .section-title {
            font-weight: 700;
            margin: 14px 0 8px
        }

        #partner-report-modal table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            overflow: hidden;
            background: #fff
        }

        #partner-report-modal thead {
            background: #f9fafb;
            color: #374151
        }

        #partner-report-modal th,
        #partner-report-modal td {
            padding: 10px 12px;
            text-align: right;
            font-size: 14px
        }

        #partner-report-modal tbody tr+tr td {
            border-top: 1px solid #f1f5f9
        }

        #partner-report-modal .money.pos {
            color: #065f46;
            font-weight: 700
        }

        #partner-report-modal .money.neg {
            color: #b91c1c;
            font-weight: 700
        }

        #partner-report-modal .empty {
            color: #9ca3af;
            text-align: center;
            padding: 12px
        }
    </style>

    <div class="wrap">
        <div class="header">
            <h2>تقرير الشريك: {{ $partner->name }}</h2>
            <div class="sub">ملخص بيانات الشريك وحركة الرصيد</div>
            {{-- <a href="{{ route('partner.pdf', $partner->id) }}" target="_blank" class="btn btn-sm btn-primary">
                تحميل PDF
            </a> --}}
            <button type="button" onclick="window.print()" class="px-3 py-2 rounded bg-indigo-600 text-white text-sm">
                طباعة
            </button>
        </div>

        <!-- بطاقة البيانات -->
        <div class="card">
            <div class="grid">
                <div class="kv">
                    <p><span class="key">العنوان:</span> <span class="val">{{ $partner->address }}</span></p>
                    <p><span class="key">رقم الهاتف:</span> <span class="val">{{ $partner->phone }}</span></p>
                    <p><span class="key">الوظيفة:</span> <span class="val">{{ $partner->job }}</span></p>
                    <p><span class="key">رقم البطاقة:</span> <span class="val">{{ $partner->national_id }}</span>
                    </p>
                </div>
                <div class="kv">
                    <p><span class="key">رأس المال الابتدائي:</span> <span
                            class="val">{{ number_format($openingBalance, 2) }}</span></p>
                    <div class="badges">
                        <div class="badge blue">الرصيد الافتتاحي: {{ number_format($openingBalance, 2) }}</div>
                        <div class="badge green">إجمالي الإيداعات: {{ number_format($totalDeposits, 2) }}</div>
                        <div class="badge" style="background:#fef2f2;color:#991b1b">إجمالي السحوبات:
                            {{ number_format($totalWithdraws, 2) }}</div>
                        <div class="badge purple">الرصيد الختامي: {{ number_format($closingBalance, 2) }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- جدول الإيداعات -->
        <div class="card">
            <div class="section-title">جدول عمليات الإيداع</div>
            <table>
                <thead>
                    <tr>
                        <th>التاريخ</th>
                        <th>المبلغ</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($partner->deposits as $deposit)
                        <tr>
                            <td>{{ $deposit->deposit_date }}</td>
                            <td class="money pos">{{ number_format($deposit->amount, 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" class="empty">لا توجد عمليات إيداع</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- جدول السحوبات -->
        <div class="card">
            <div class="section-title">جدول عمليات السحب</div>
            <table>
                <thead>
                    <tr>
                        <th>التاريخ</th>
                        <th>المبلغ</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($partner->withdrawals as $withdrawal)
                        <tr>
                            <td>{{ $withdrawal->withdrawal_date }}</td>
                            <td class="money neg">{{ number_format($withdrawal->amount, 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" class="empty">لا توجد عمليات سحب</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>