@extends('layouts.app')
@section('title', 'تقرير المتأخرات')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0 fw-bold">تقرير المتأخرات والمطالبات</h4>
    <button class="btn btn-outline-danger rounded-pill shadow-sm" onclick="window.print()">
        <i class="fa-solid fa-print me-2"></i>طباعة التقرير
    </button>
</div>

<!-- Summary Card -->
<div class="row mb-4">
    <div class="col-md-12">
        @php
            $totalOverdueAmount = 0;
            foreach($overdueInstallments as $inst) {
                $totalOverdueAmount += ($inst->amount - $inst->paid_amount);
            }
        @endphp
        <div class="card bg-danger text-white border-0 shadow-sm" style="border-radius: 16px;">
            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="text-white-50 mb-1">إجمالي المبالغ المتأخرة للتحصيل</h5>
                    <h2 class="mb-0 fw-bold">{{ number_format($totalOverdueAmount, 2) }} <small class="fs-6 fw-normal">درهم</small></h2>
                </div>
                <div class="display-4 text-white-50">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Details Table -->
<div class="card border-0 shadow-sm" style="border-radius: 16px;">
    <div class="card-header bg-white border-bottom pt-4 pb-3 px-4">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-clock text-danger me-2"></i>الأقساط المتأخرة</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-muted">
                    <tr>
                        <th class="px-4">رقم القسط</th>
                        <th>تاريخ الاستحقاق</th>
                        <th>أيام التأخير</th>
                        <th>المحل</th>
                        <th>المستأجر والتواصل</th>
                        <th>المبلغ المطلوب</th>
                        <th>المدفوع</th>
                        <th>المتبقي (المديونية)</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($overdueInstallments as $installment)
                    @php
                        $daysOverdue = \Carbon\Carbon::parse($installment->due_date)->diffInDays(now());
                        $remaining = $installment->amount - $installment->paid_amount;
                    @endphp
                    <tr>
                        <td class="px-4 fw-bold">#{{ $installment->id }}</td>
                        <td class="text-danger fw-bold">{{ $installment->due_date }}</td>
                        <td>
                            <span class="badge bg-danger bg-opacity-10 text-danger border border-danger rounded-pill px-2">
                                {{ $daysOverdue }} يوم
                            </span>
                        </td>
                        <td class="fw-bold">{{ $installment->contract->shop->shop_name ?? '-' }}</td>
                        <td>
                            <div class="text-primary fw-bold"><i class="fa-solid fa-user me-1"></i> {{ $installment->contract->tenant_name ?? '-' }}</div>
                            <div class="small text-muted mt-1" dir="ltr"><i class="fa-solid fa-phone me-1"></i> {{ $installment->contract->tenant_phone ?? '-' }}</div>
                        </td>
                        <td class="fw-bold">{{ number_format($installment->amount, 2) }}</td>
                        <td class="text-success fw-bold">{{ number_format($installment->paid_amount, 2) }}</td>
                        <td class="text-danger fw-bold fs-6">{{ number_format($remaining, 2) }}</td>
                        <td>
                            <a href="{{ route('installments.index', ['contract_id' => $installment->contract_id]) }}" class="btn btn-sm btn-success rounded-pill px-3 shadow-sm">
                                <i class="fa-solid fa-money-bill-wave ms-1"></i>سداد
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="fa-regular fa-face-smile fa-3x mb-3 text-success opacity-50"></i>
                            <h5>لا توجد أي أقساط متأخرة حالياً!</h5>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection