@extends('layouts.app')

@section('title', 'تفاصيل السلفة #' . $loan->id)

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تفاصيل السلفة #{{ $loan->id }}</h1>
        <p class="page-subtitle">{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }} — {{ $loan->type_label }}</p>
    </div>
    <div class="page-actions">
        @if($loan->status === 'pending')
            <form method="POST" action="{{ route('loans.approve', $loan) }}" style="display:inline;">
                @csrf
                <button type="submit" class="btn btn-success" onclick="return confirm('هل تريد اعتماد هذه السلفة؟')">
                    <i class="fas fa-check"></i> اعتماد
                </button>
            </form>
            <button type="button" class="btn btn-danger" onclick="document.getElementById('rejectModal').style.display='flex'">
                <i class="fas fa-times"></i> رفض
            </button>
        @endif
        @if(in_array($loan->status, ['pending', 'approved']))
            <form method="POST" action="{{ route('loans.cancel', $loan) }}" style="display:inline;">
                @csrf
                <button type="submit" class="btn btn-secondary" onclick="return confirm('هل تريد إلغاء هذه السلفة؟')">
                    <i class="fas fa-ban"></i> إلغاء
                </button>
            </form>
        @endif
        <a href="{{ route('loans.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right"></i> رجوع
        </a>
    </div>
</div>

@if(session('success'))
<div style="background: var(--success-light); color: var(--success); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div style="background: var(--danger-light); color: var(--danger); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px;">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-money-bill-wave"></i>
        </div>
        <div class="stat-value">{{ number_format($loan->amount, 2) }}</div>
        <div class="stat-label">إجمالي السلفة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="stat-value">{{ number_format($loan->paid_amount, 2) }}</div>
        <div class="stat-label">المدفوع</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);">
            <i class="fas fa-exclamation-circle"></i>
        </div>
        <div class="stat-value">{{ number_format($loan->remaining_amount, 2) }}</div>
        <div class="stat-label">المتبقي</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);">
            <i class="fas fa-chart-pie"></i>
        </div>
        <div class="stat-value">{{ $loan->progress_percent }}%</div>
        <div class="stat-label">نسبة السداد</div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
    <!-- معلومات السلفة -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-info-circle"></i> معلومات السلفة</h3>
        </div>
        <div class="card-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label">الحالة</span>
                    <span class="detail-value"><span class="status-badge status-{{ $loan->status_color }}">{{ $loan->status_label }}</span></span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">النوع</span>
                    <span class="detail-value">{{ $loan->type_label }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">قيمة القسط</span>
                    <span class="detail-value">{{ number_format($loan->installment_amount, 2) }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">عدد الأقساط</span>
                    <span class="detail-value">{{ $loan->installments_count }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">تاريخ الطلب</span>
                    <span class="detail-value">{{ $loan->request_date?->format('Y-m-d') ?? '-' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">بدء الاستقطاع</span>
                    <span class="detail-value">{{ $loan->start_date?->format('Y-m-d') ?? '-' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">نهاية السداد</span>
                    <span class="detail-value">{{ $loan->end_date?->format('Y-m-d') ?? '-' }}</span>
                </div>
                @if($loan->approved_by)
                <div class="detail-item">
                    <span class="detail-label">معتمد بواسطة</span>
                    <span class="detail-value">{{ $loan->approver?->name ?? '-' }} — {{ $loan->approved_at?->format('Y-m-d') }}</span>
                </div>
                @endif
            </div>
            @if($loan->reason)
            <div class="detail-item full" style="margin-top:12px;">
                <span class="detail-label">السبب</span>
                <span class="detail-value">{{ $loan->reason }}</span>
            </div>
            @endif
            @if($loan->rejection_reason)
            <div style="background: var(--danger-light); color: var(--danger); padding: 10px; border-radius: var(--radius-sm); margin-top:12px;">
                <strong>سبب الرفض:</strong> {{ $loan->rejection_reason }}
            </div>
            @endif
        </div>
    </div>

    <!-- معلومات الموظف -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-user"></i> معلومات الموظف</h3>
        </div>
        <div class="card-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label">الاسم</span>
                    <span class="detail-value">{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">الرمز</span>
                    <span class="detail-value"><span class="code-badge">{{ $loan->employee->employee_code ?? '-' }}</span></span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">الراتب الأساسي</span>
                    <span class="detail-value">{{ number_format($loan->employee->basic_salary, 2) }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">إجمالي الراتب</span>
                    <span class="detail-value">{{ number_format($loan->employee->total_salary, 2) }}</span>
                </div>
            </div>
            @php
                $activeLoanCount = \App\Models\Loan::where('employee_id', $loan->employee_id)
                    ->whereIn('status', ['active', 'approved'])
                    ->where('id', '!=', $loan->id)
                    ->count();
                $activeLoanTotal = \App\Models\Loan::where('employee_id', $loan->employee_id)
                    ->whereIn('status', ['active', 'approved'])
                    ->where('id', '!=', $loan->id)
                    ->sum('remaining_amount');
            @endphp
            @if($activeLoanCount > 0)
            <div style="background: var(--warning-light); color: var(--warning); padding: 10px; border-radius: var(--radius-sm); margin-top:12px;">
                <i class="fas fa-exclamation-triangle"></i>
                لدى الموظف {{ $activeLoanCount }} سلفة أخرى نشطة بمبلغ متبقي {{ number_format($activeLoanTotal, 2) }}
            </div>
            @endif
        </div>
    </div>
</div>

<!-- جدول الأقساط -->
<div class="card" style="margin-top:20px;">
    <div class="card-header">
        <h3><i class="fas fa-list-ol"></i> جدول الأقساط</h3>
    </div>
    <div class="card-body">
        <!-- شريط التقدم -->
        <div style="background: var(--border-light); border-radius: 10px; height: 12px; margin-bottom: 20px; overflow: hidden;">
            <div style="background: linear-gradient(90deg, var(--success), var(--primary)); height: 100%; width: {{ $loan->progress_percent }}%; border-radius: 10px; transition: width 0.5s;"></div>
        </div>

        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>رقم القسط</th>
                        <th>الشهر</th>
                        <th>تاريخ الاستحقاق</th>
                        <th>المبلغ</th>
                        <th>المدفوع</th>
                        <th>الحالة</th>
                        @if($loan->status === 'active')
                        <th>إجراء</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($loan->installments as $inst)
                    <tr>
                        <td><strong>{{ $inst->installment_number }}</strong></td>
                        <td>{{ $inst->month }}</td>
                        <td>{{ $inst->due_date?->format('Y-m-d') ?? '-' }}</td>
                        <td>{{ number_format($inst->amount, 2) }}</td>
                        <td style="color: {{ $inst->paid_amount > 0 ? 'var(--success)' : 'var(--text-muted)' }};">
                            {{ 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>
                            @elseif($inst->status === 'skipped')
                                <span class="status-badge status-expired">متخطى</span>
                            @else
                                <span class="status-badge status-draft">معلق</span>
                            @endif
                        </td>
                        @if($loan->status === 'active')
                        <td>
                            @if($inst->status !== 'paid')
                            <form method="POST" action="{{ route('loans.pay-installment', $inst) }}" style="display:flex; gap:4px; align-items:center;">
                                @csrf
                                <input type="number" name="paid_amount" class="form-input" style="width:100px; padding:4px 8px; font-size:12px;"
                                    value="{{ $inst->amount - $inst->paid_amount }}" step="0.01" min="0.01" max="{{ $inst->amount - $inst->paid_amount }}">
                                <button type="submit" class="btn btn-success" style="padding:4px 8px; font-size:12px;" title="تسجيل دفعة">
                                    <i class="fas fa-check"></i>
                                </button>
                            </form>
                            @else
                                <span style="color:var(--text-muted); font-size:12px;">{{ $inst->paid_date?->format('Y-m-d') }}</span>
                            @endif
                        </td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Reject Modal -->
@if($loan->status === 'pending')
<div id="rejectModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; justify-content:center; align-items:center;">
    <div style="background: var(--surface); border-radius: var(--radius-lg); padding: 24px; max-width: 500px; width: 90%;">
        <h3 style="margin-bottom:16px;">رفض السلفة</h3>
        <form method="POST" action="{{ route('loans.reject', $loan) }}">
            @csrf
            <div class="form-group">
                <label class="form-label required">سبب الرفض</label>
                <textarea name="rejection_reason" class="form-textarea" rows="3" required></textarea>
            </div>
            <div style="display:flex; gap:8px; justify-content:flex-end; margin-top:16px;">
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('rejectModal').style.display='none'">إلغاء</button>
                <button type="submit" class="btn btn-danger">تأكيد الرفض</button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection