@php use Illuminate\Support\Str; @endphp
<div id="contract-modal" class="contract-modal" dir="rtl" x-data x-on:triggerPrint.window="window.print()">
    <style>
        #contract-modal {
            font-family: 'Tajawal','Segoe UI',Arial,sans-serif;
        }

        #contract-modal .modal-header,
        #contract-modal .modal-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        #contract-modal .title {
            font-size: 20px;
            font-weight: 800;
            color: #1e3a8a;
            margin: 0;
        }

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

        #contract-modal .btn:hover {
            opacity: .9;
        }

        /* Info grid */
        #contract-modal .section-title {
            font-size: 16px;
            font-weight: 800;
            color: #1e3a8a;
            margin: 12px 0;
        }

        #contract-modal .info-card {
            background: #f8fafc;
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 1px 6px rgba(30,58,138,.08);
        }

        #contract-modal .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
            gap: 10px;
        }

        #contract-modal .info-item {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px 12px;
        }

        #contract-modal .info-item .label {
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        #contract-modal .info-item .value {
            color: #0f172a;
            font-size: 14px;
            font-weight: 800;
        }

        /* Badges */
        #contract-modal .badge {
            display: inline-block;
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }

        #contract-modal .badge-status {
            background: #e0e7ff;
            color: #1e3a8a;
        }

        #contract-modal .badge-success {
            background: #dcfce7;
            color: #166534;
        }

        #contract-modal .badge-warning {
            background: #fef3c7;
            color: #92400e;
        }

        /* Table */
        #contract-modal .table-wrap {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 8px rgba(30,58,138,.08);
            overflow: auto;
        }

        #contract-modal table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

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

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

        #contract-modal tbody tr:hover {
            background: #eef2ff;
        }

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

        /* Badges */
        #contract-modal .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
            border: 1px solid transparent;
        }

        #contract-modal .badge-paid {
            color: #fff;
            background: #22c55e;
            border-color: #16a34a;
            font-weight: bold;
            padding: 6px 12px;
        }

        #contract-modal .badge-unpaid {
            color: #fff;
            background: #ef4444;
            border-color: #dc2626;
            font-weight: bold;
            padding: 6px 12px;
        }

        #contract-modal .badge-overdue {
            color: #fff;
            background: #dc2626;
            border-color: #b91c1c;
            font-weight: bold;
            padding: 6px 12px;
            animation: pulse 2s infinite;
        }

        /* Payment badges */
        #contract-modal .badge-completed {
            color: #fff;
            background: #059669;
            border-color: #047857;
            font-weight: bold;
            padding: 6px 12px;
        }

        #contract-modal .badge-pending {
            color: #fff;
            background: #d97706;
            border-color: #b45309;
            font-weight: bold;
            padding: 6px 12px;
        }

        #contract-modal .badge-cancelled {
            color: #fff;
            background: #dc2626;
            border-color: #b91c1c;
            font-weight: bold;
            padding: 6px 12px;
        }

        /* Summary cards */
        #contract-modal .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        #contract-modal .summary-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 16px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #contract-modal .summary-card.success {
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
        }

        #contract-modal .summary-card.warning {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        }

        #contract-modal .summary-card.info {
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        }

        #contract-modal .summary-card h4 {
            margin: 0 0 8px 0;
            font-size: 14px;
            opacity: 0.9;
        }

        #contract-modal .summary-card .amount {
            font-size: 20px;
            font-weight: bold;
            margin: 0;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        /* ✅ طباعة */
        @media print {
            body * {
                visibility: hidden !important;
            }
            #contract-modal, #contract-modal * {
                visibility: visible !important;
            }
            #contract-modal .btn:hover {
            display: none !important;
        }
            #contract-modal {
                /* position: initial !important; */
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                background: #fff !important;
                box-shadow: none !important;
            }
            #contract-modal .modal-footer,
            #contract-modal .modal-header {
                /* display: none !important; */
            }
            @page {
                size: A4;
                /* margin: 8mm; */
            }
        }
    </style>

    {{-- Header --}}
    <div class="modal-header">
        <h4 class="title">{{ __('contracts.field.contract_info') }}</h4>
        <button type="button" class="btn" onclick="window.print()">🖨️ {{ __('common.print') }}</button>
    </div>

    {{-- Contract info --}}
    <div class="info-card">
        <div class="info-grid" style="grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:6px;">
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.contract_date') }}</div>
                <div class="value">{{ $contract->contract_date instanceof \Carbon\Carbon ? $contract->contract_date->format('Y-m-d') : (string) $contract->contract_date }}</div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.customer') }}</div>
                <div class="value">{{ $contract->customer->name ?? '-' }}</div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.guarantor') }}</div>
                <div class="value">{{ $contract->guarantor->name ?? '-' }}</div>
            </div>
            <div class="info-item" style="grid-column: span 2; min-width:220px; padding:7px 8px;">
                <div class="label">{{ __('contracts.field.products') }}</div>
                <div class="value" style="white-space:normal;max-width:350px;">
                    @if($contract->products && $contract->products->count())
                        <ul style="margin:0;padding:0;list-style:none;">
                            @foreach($contract->products as $product)
                                <li style="margin-bottom:2px;font-weight:700;color:#1e3a8a;font-size:14px">{{ $product->name }}</li>
                            @endforeach
                        </ul>
                    @else
                        -
                    @endif
                </div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.original_price') }}</div>
                <div class="value amount">{{ number_format((float)($contract->original_price ?? 0), 2) }}</div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.installment_price') }}</div>
                <div class="value amount">{{ number_format((float)($contract->installment_price ?? 0), 2) }}</div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.installment_count') }}</div>
                <div class="value">{{ (int)($contract->installment_count ?? 0) }}</div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.installment_value') }}</div>
                <div class="value amount">{{ number_format((float)($contract->installment_value ?? 0), 2) }}</div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.first_installment_date') }}</div>
                <div class="value">
                    @php
                        $firstDate = $contract->first_installment_date;
                        if (empty($firstDate)) {
                            $firstDate = \Carbon\Carbon::now()->addMonth();
                        }
                    @endphp
                    {{ $firstDate instanceof \Carbon\Carbon ? $firstDate->format('Y-m-d') : (string) $firstDate }}
                </div>
            </div>
            <div class="info-item" style="padding:7px 8px;">
                <div class="label">{{ __('contracts.field.status') }}</div>
                <div class="value"><span class="badge badge-status">{{ __('contracts.statuses.' . $contract->status) }}</span></div>
            </div>
            <div class="info-item" style="grid-column: 1 / -1; padding:7px 8px;">
                <div class="label">{{ __('contracts.field.notes') }}</div>
                <div class="value">{!! $contract->notes ?: '-' !!}</div>
            </div>
        </div>
    </div>

    {{-- Installments --}}
    <div class="section-title">{{ __('contracts.field.installments') }}</div>

    @php
        $total = $contract->installments->count();
        $paidCount = $contract->installments->where('is_paid', true)->count();
        $sumTotal = $contract->installments->sum('value');
        $sumPaid = $contract->installments->where('is_paid', true)->whereNotNull('paid_amount')->sum('paid_amount');
        $sumUnpaid = $contract->installments->where('is_paid', false)->sum('value');
    @endphp

    <div class="install-toolbar" style="margin-bottom:12px">
        <span class="stat">عدد الأقساط: {{ $total }}</span>
        <span class="stat">المسدّد: {{ $paidCount }}</span>
        {{-- <span class="stat" style="margin-inline-start:auto">إجمالي: {{ number_format($sumTotal, 2) }} | مسدّد: {{ number_format($sumPaid, 2) }} | متبقّي: {{ number_format($sumUnpaid, 2) }}</span> --}}
    </div>

    <div class="table-wrap">
        <table class="table table-bordered align-middle">
            <thead>
                <tr>
                    <th>{{ __('contracts.field.due_date') }}</th>
                    <th>{{ __('contracts.field.installment_value') }}</th>
                    <th>المبلغ المدفوع</th>
                    <th>تاريخ السداد</th>
                    <th>{{ __('contracts.field.status') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($contract->installments as $installment)
                    @php
                        $isOverdue = !$installment->is_paid && $installment->due_date && \Carbon\Carbon::parse($installment->due_date)->isPast();
                    @endphp
                    <tr>
                        <td>
                            {{ $installment->due_date instanceof \Carbon\Carbon ? $installment->due_date->format('d/m/Y') : (string) $installment->due_date }}
                        </td>
                        <td class="amount">{{ number_format((float)($installment->value ?? 0), 2) }} جنيه</td>
                        <td style="color: #00796b; font-weight: bold;">
                            {{ $installment->paid_amount ? number_format($installment->paid_amount, 2) . ' جنيه' : '-' }}
                        </td>
                        <td>{{ $installment->payment_date ? \Carbon\Carbon::parse($installment->payment_date)->format('d/m/Y') : '-' }}</td>
                        <td style="text-align: center;">
                            @if ($installment->is_paid)
                                <span class="badge badge-paid">✅ مدفوع</span>
                            @else
                                <span class="badge {{ $isOverdue ? 'badge-overdue' : 'badge-unpaid' }}">
                                    {{ $isOverdue ? '⚠️ متأخر' : '❌ غير مدفوع' }}
                                </span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="empty">{{ __('common.no_records') }}</td>
                    </tr>
                @endforelse
            </tbody>
            <tfoot>
                <tr>
                    <td>الإجمالي</td>
                    <td>{{ number_format($sumTotal, 2) }} جنيه</td>
                    <td>{{ number_format($sumPaid, 2) }} جنيه</td>
                    <td colspan="2">المتبقّي: {{ number_format($sumUnpaid, 2) }} جنيه</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div style="margin-top:10px;text-align:center;color:#888;font-size:13px">
        عرض {{ $contract->installments->count() }} من {{ $contract->installments->count() }} قسط
    </div>

    {{-- قسم المدفوعات --}}
    @php
        $payments = $contract->payments;
        $completedPayments = $payments->where('status', 'completed');
        $pendingPayments = $payments->where('status', 'pending');
        $cancelledPayments = $payments->where('status', 'cancelled');
        
        $totalCompleted = $completedPayments->sum('amount');
        $totalPending = $pendingPayments->sum('amount');
        $totalPayments = $payments->sum('amount');
        
        $lastPayment = $completedPayments->sortByDesc('payment_date')->first();
    @endphp

    <div class="section-title" style="margin-top: 24px;">مدفوعات العملاء المباشرة</div>

    {{-- ملخص المدفوعات --}}
    <div class="summary-grid">
        <div class="summary-card success">
            <h4>إجمالي مدفوعات العملاء المكتملة</h4>
            <p class="amount">{{ number_format($totalCompleted, 2) }} جنيه</p>
            <small>({{ $completedPayments->count() }} دفعة)</small>
        </div>
        
        @if($pendingPayments->count() > 0)
        <div class="summary-card warning">
            <h4>مدفوعات العملاء المعلقة</h4>
            <p class="amount">{{ number_format($totalPending, 2) }} جنيه</p>
            <small>({{ $pendingPayments->count() }} دفعة)</small>
        </div>
        @endif
        
        @if($lastPayment)
        <div class="summary-card info">
            <h4>آخر مدفوعة</h4>
            <p class="amount">{{ number_format($lastPayment->amount, 2) }} جنيه</p>
            <small>{{ $lastPayment->payment_date->format('d/m/Y') }}</small>
        </div>
        @endif
        
        <div class="summary-card">
            <h4>إجمالي عدد مدفوعات العملاء</h4>
            <p class="amount">{{ $payments->count() }}</p>
            <small>مدفوعة</small>
        </div>
    </div>

    @if($payments->count() > 0)
    <div class="table-wrap">
        <table class="table table-bordered align-middle">
            <thead>
                <tr>
                    <th>تاريخ الدفع</th>
                    <th>المبلغ</th>
                    <th>طريقة الدفع</th>
                    <th>رقم الإيصال</th>
                    <th>الحالة</th>
                    <th>ملاحظات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($payments->sortByDesc('payment_date') as $payment)
                <tr>
                    <td>{{ $payment->payment_date ? $payment->payment_date->format('d/m/Y') : '-' }}</td>
                    <td class="amount">{{ number_format($payment->amount, 2) }} جنيه</td>
                    <td>
                        @php
                            $methodLabels = [
                                'cash' => '💵 نقداً',
                                'bank_transfer' => '🏦 حوالة بنكية',
                                'check' => '📋 شيك',
                                'card' => '💳 بطاقة'
                            ];
                        @endphp
                        {{ $methodLabels[$payment->payment_method] ?? $payment->payment_method }}
                    </td>
                    <td>{{ $payment->receipt_number ?: '-' }}</td>
                    <td style="text-align: center;">
                        @if($payment->status === 'completed')
                            <span class="badge badge-completed">✅ مكتملة</span>
                        @elseif($payment->status === 'pending')
                            <span class="badge badge-pending">⏳ معلقة</span>
                        @else
                            <span class="badge badge-cancelled">❌ ملغاة</span>
                        @endif
                    </td>
                    <td>{{ Str::limit($payment->notes, 30) ?: '-' }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background-color: #f8fafc; font-weight: bold;">
                    <td>الإجمالي</td>
                    <td class="amount">{{ number_format($totalPayments, 2) }} جنيه</td>
                    <td colspan="2">مكتمل: {{ number_format($totalCompleted, 2) }} جنيه</td>
                    <td colspan="2">معلق: {{ number_format($totalPending, 2) }} جنيه</td>
                </tr>
            </tfoot>
        </table>
    </div>
    
    <div style="margin-top:10px;text-align:center;color:#888;font-size:13px">
        عرض {{ $payments->count() }} من {{ $payments->count() }} مدفوعة
    </div>
    @else
    <div class="info-card" style="text-align: center; color: #666; padding: 32px;">
        <h4>لا توجد مدفوعات عملاء مسجلة</h4>
        <p>لم يتم تسجيل أي مدفوعات عملاء مباشرة لهذا العقد بعد</p>
    </div>
    @endif

    {{-- الإجماليات الشاملة --}}
    @php
        $grandTotalPaid = $sumPaid + $totalCompleted; // الأقساط المدفوعة + المدفوعات المباشرة
        $contractTotal = $contract->installment_price; // إجمالي قيمة العقد
        $remaining = $contractTotal - $grandTotalPaid; // المتبقي
        $paymentPercentage = $contractTotal > 0 ? ($grandTotalPaid / $contractTotal) * 100 : 0;
    @endphp

    <div class="section-title" style="margin-top: 24px;">الإجماليات الشاملة</div>
    <div class="info-card">
        <div class="summary-grid">
        <div class="summary-card success">
            <h4>إجمالي المحصل</h4>
            <p class="amount">{{ number_format($grandTotalPaid, 2) }} جنيه</p>
            <small>أقساط + مدفوعات عملاء</small>
        </div>            <div class="summary-card info">
                <h4>قيمة العقد</h4>
                <p class="amount">{{ number_format($contractTotal, 2) }} جنيه</p>
                <small>إجمالي المطلوب</small>
            </div>
            
            <div class="summary-card {{ $remaining <= 0 ? 'success' : 'warning' }}">
                <h4>المتبقي</h4>
                <p class="amount">{{ number_format($remaining, 2) }} جنيه</p>
                <small>{{ number_format($paymentPercentage, 1) }}% مكتمل</small>
            </div>
        </div>
        
        {{-- شريط التقدم --}}
        <div style="background: #e5e7eb; border-radius: 10px; height: 20px; overflow: hidden; margin-top: 16px;">
            <div style="background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); height: 100%; width: {{ min($paymentPercentage, 100) }}%; transition: width 0.3s ease;"></div>
        </div>
        <div style="text-align: center; margin-top: 8px; font-size: 14px; color: #666;">
            نسبة الإنجاز: {{ number_format($paymentPercentage, 1) }}%
        </div>
    </div>
    </div>

    {{-- Footer --}}
    <div class="modal-footer">
        <button type="button" class="btn" onclick="window.print()">🖨️ {{ __('common.print') }}</button>
    </div>
</div>