@extends('layouts.app')

@section('title', 'تقرير الأقساط')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقرير الأقساط الشهرية</h1>
        <p class="page-subtitle">متابعة أقساط السلف المستحقة لكل شهر</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('loans.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right"></i> رجوع
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-calendar"></i> اختيار الشهر</h3>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('loans.report') }}" class="filter-form">
            <div class="form-grid cols-3">
                <div class="form-group">
                    <label class="form-label">الشهر</label>
                    <input type="month" name="month" class="form-input" value="{{ $month }}" onchange="this.form.submit()">
                </div>
                <div class="form-group" style="display:flex; align-items:flex-end;">
                    <div>
                        <strong style="color: var(--primary);">{{ number_format($totalDue, 2) }}</strong> مستحق |
                        <strong style="color: var(--success);">{{ number_format($totalPaid, 2) }}</strong> مدفوع
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>رقم السلفة</th>
                        <th>النوع</th>
                        <th>رقم القسط</th>
                        <th>المبلغ</th>
                        <th>المدفوع</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($installments as $inst)
                    <tr>
                        <td>
                            <strong>{{ $inst->loan->employee->full_name_en ?: $inst->loan->employee->first_name . ' ' . $inst->loan->employee->last_name }}</strong>
                            <br><small class="code-badge">{{ $inst->loan->employee->employee_code ?? '-' }}</small>
                        </td>
                        <td><a href="{{ route('loans.show', $inst->loan) }}">#{{ $inst->loan->id }}</a></td>
                        <td>{{ $inst->loan->type_label }}</td>
                        <td>{{ $inst->installment_number }} / {{ $inst->loan->installments_count }}</td>
                        <td>{{ number_format($inst->amount, 2) }}</td>
                        <td style="color: var(--success);">{{ number_format($inst->paid_amount, 2) }}</td>
                        <td>
                            @if($inst->status === 'paid')
                                <span class="status-badge status-active">مدفوع</span>
                            @elseif($inst->status === 'partial')
                                <span class="status-badge status-pending">جزئي</span>
                            @else
                                <span class="status-badge status-draft">معلق</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                <i class="fas fa-calendar-check"></i>
                                <p>لا توجد أقساط مستحقة لهذا الشهر</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection