@extends('layouts.app')

@section('title', 'السلف والقروض')

@section('content')
<style>
.stat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.stat-modal-overlay.active{opacity:1;pointer-events:auto}
.stat-modal{background:var(--card-bg,#fff);border-radius:12px;width:92%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.stat-modal-overlay.active .stat-modal{transform:translateY(0)}
.stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#eee)}
.stat-modal-header h3{margin:0;font-size:1.05rem}
.stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary,#666);line-height:1;padding:0 4px}
.stat-modal-close:hover{color:var(--danger,#ef4444)}
.stat-modal-body{padding:20px;overflow-y:auto}
.stat-modal-body table{width:100%;border-collapse:collapse}
.stat-modal-body th,.stat-modal-body td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border,#eee);font-size:.9rem}
.stat-modal-body th{background:var(--bg,#f9fafb);font-weight:600;font-size:.85rem;color:var(--text-secondary,#666)}
.stat-modal-body tr:last-child td{border-bottom:none}
.stat-modal-body .modal-total-row{background:var(--bg,#f9fafb);font-weight:700}
.stat-card[onclick]{transition:transform .15s,box-shadow .15s}
.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.stat-modal-note{margin-top:10px;font-size:.8rem;color:var(--text-secondary,#666)}
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">السلف والقروض</h1>
        <p class="page-subtitle">إدارة سلف وقروض الموظفين وتتبع الأقساط</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('loans.report') }}" class="btn btn-secondary">
            <i class="fas fa-chart-bar"></i> تقرير الأقساط
        </a>
        <a href="{{ route('loans.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> سلفة جديدة
        </a>
    </div>
</div>

@php
    $activeLoansList = $loans->filter(function($l) {
        return in_array($l->status, ['active', 'approved']);
    });
    $remainingLoansList = $loans->filter(function($l) {
        return $l->remaining_amount > 0;
    });
    $pendingLoansList = $loans->filter(function($l) {
        return $l->status === 'pending';
    });
@endphp

<div class="stats-grid cols-4">
    <div class="stat-card" style="cursor:pointer;" onclick="openStatModal('modal-active')">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-hand-holding-usd"></i>
        </div>
        <div class="stat-value">{{ $stats['total_active'] }}</div>
        <div class="stat-label">سلف نشطة</div>
    </div>
    <div class="stat-card" style="cursor:pointer;" onclick="openStatModal('modal-amount')">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);">
            <i class="fas fa-coins"></i>
        </div>
        <div class="stat-value">{{ number_format($stats['total_amount'], 2) }}</div>
        <div class="stat-label">إجمالي المبالغ</div>
    </div>
    <div class="stat-card" style="cursor:pointer;" onclick="openStatModal('modal-remaining')">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);">
            <i class="fas fa-money-bill-wave"></i>
        </div>
        <div class="stat-value">{{ number_format($stats['total_remaining'], 2) }}</div>
        <div class="stat-label">المبالغ المتبقية</div>
    </div>
    <div class="stat-card" style="cursor:pointer;" onclick="openStatModal('modal-pending')">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);">
            <i class="fas fa-clock"></i>
        </div>
        <div class="stat-value">{{ $stats['pending_count'] }}</div>
        <div class="stat-label">بانتظار الاعتماد</div>
    </div>
</div>

{{-- Modal 1: سلف نشطة --}}
<div class="stat-modal-overlay" id="modal-active">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-hand-holding-usd"></i> سلف نشطة</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($activeLoansList->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>النوع</th>
                        <th>المبلغ</th>
                        <th>المتبقي</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($activeLoansList as $loan)
                    <tr>
                        <td>{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }}</td>
                        <td>{{ $loan->type_label }}</td>
                        <td>{{ number_format($loan->amount, 2) }}</td>
                        <td style="color: var(--danger);">{{ number_format($loan->remaining_amount, 2) }}</td>
                        <td><span class="status-badge status-{{ $loan->status_color }}">{{ $loan->status_label }}</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <p class="stat-modal-note">* يعرض بيانات الصفحة الحالية فقط. إجمالي السلف النشطة: {{ $stats['total_active'] }}</p>
            @else
            <div class="empty-state">
                <i class="fas fa-hand-holding-usd"></i>
                <p>لا توجد سلف نشطة في الصفحة الحالية</p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal 2: إجمالي المبالغ --}}
<div class="stat-modal-overlay" id="modal-amount">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-coins"></i> إجمالي المبالغ</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($loans->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>النوع</th>
                        <th>المبلغ</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($loans as $loan)
                    <tr>
                        <td>{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }}</td>
                        <td>{{ $loan->type_label }}</td>
                        <td><strong>{{ number_format($loan->amount, 2) }}</strong></td>
                        <td><span class="status-badge status-{{ $loan->status_color }}">{{ $loan->status_label }}</span></td>
                    </tr>
                    @endforeach
                    <tr class="modal-total-row">
                        <td colspan="2">إجمالي (الصفحة الحالية)</td>
                        <td colspan="2">{{ number_format($loans->sum('amount'), 2) }}</td>
                    </tr>
                </tbody>
            </table>
            <p class="stat-modal-note">* يعرض بيانات الصفحة الحالية. الإجمالي العام لكافة السلف: {{ number_format($stats['total_amount'], 2) }}</p>
            @else
            <div class="empty-state">
                <i class="fas fa-coins"></i>
                <p>لا توجد سلف مسجلة</p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal 3: المبالغ المتبقية --}}
<div class="stat-modal-overlay" id="modal-remaining">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-money-bill-wave"></i> المبالغ المتبقية</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($remainingLoansList->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>النوع</th>
                        <th>المبلغ</th>
                        <th>المدفوع</th>
                        <th>المتبقي</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($remainingLoansList as $loan)
                    <tr>
                        <td>{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }}</td>
                        <td>{{ $loan->type_label }}</td>
                        <td>{{ number_format($loan->amount, 2) }}</td>
                        <td style="color: var(--success);">{{ number_format($loan->paid_amount, 2) }}</td>
                        <td style="color: var(--danger);"><strong>{{ number_format($loan->remaining_amount, 2) }}</strong></td>
                    </tr>
                    @endforeach
                    <tr class="modal-total-row">
                        <td colspan="4">إجمالي المتبقي (الصفحة الحالية)</td>
                        <td>{{ number_format($remainingLoansList->sum('remaining_amount'), 2) }}</td>
                    </tr>
                </tbody>
            </table>
            <p class="stat-modal-note">* يعرض بيانات الصفحة الحالية. الإجمالي العام للمبالغ المتبقية: {{ number_format($stats['total_remaining'], 2) }}</p>
            @else
            <div class="empty-state">
                <i class="fas fa-money-bill-wave"></i>
                <p>لا توجد مبالغ متبقية في الصفحة الحالية</p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal 4: بانتظار الاعتماد --}}
<div class="stat-modal-overlay" id="modal-pending">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-clock"></i> بانتظار الاعتماد</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($pendingLoansList->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>النوع</th>
                        <th>المبلغ</th>
                        <th>الأقساط</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingLoansList as $loan)
                    <tr>
                        <td>{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }}</td>
                        <td>{{ $loan->type_label }}</td>
                        <td>{{ number_format($loan->amount, 2) }}</td>
                        <td>{{ $loan->installments_count }} قسط</td>
                        <td>
                            <a href="{{ route('loans.show', $loan) }}" class="action-btn" title="عرض">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <p class="stat-modal-note">* يعرض بيانات الصفحة الحالية فقط. إجمالي السلف بانتظار الاعتماد: {{ $stats['pending_count'] }}</p>
            @else
            <div class="empty-state">
                <i class="fas fa-clock"></i>
                <p>لا توجد سلف بانتظار الاعتماد في الصفحة الحالية</p>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-filter"></i> تصفية</h3>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('loans.index') }}" class="filter-form">
            <div class="form-grid cols-4">
                <div class="form-group">
                    <label class="form-label">الحالة</label>
                    <select name="status" class="form-select">
                        <option value="">الكل</option>
                        @foreach(\App\Models\Loan::statusLabels() as $key => $label)
                            <option value="{{ $key }}" {{ request('status') == $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">النوع</label>
                    <select name="type" class="form-select">
                        <option value="">الكل</option>
                        @foreach(\App\Models\Loan::typeLabels() as $key => $label)
                            <option value="{{ $key }}" {{ request('type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الموظف</label>
                    <select name="employee_id" class="form-select">
                        <option value="">الكل</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                                {{ $emp->full_name_en ?: $emp->first_name . ' ' . $emp->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="display:flex; align-items:flex-end; gap:8px;">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> بحث</button>
                    <a href="{{ route('loans.index') }}" class="btn btn-secondary"><i class="fas fa-redo"></i></a>
                </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>
                        <th>التقدم</th>
                        <th>الحالة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($loans as $loan)
                    <tr>
                        <td>{{ $loan->id }}</td>
                        <td>
                            <strong>{{ $loan->employee->full_name_en ?: $loan->employee->first_name . ' ' . $loan->employee->last_name }}</strong>
                            <br><small class="code-badge">{{ $loan->employee->employee_code ?? '-' }}</small>
                        </td>
                        <td>{{ $loan->type_label }}</td>
                        <td><strong>{{ number_format($loan->amount, 2) }}</strong></td>
                        <td>{{ $loan->installments_count }} قسط × {{ number_format($loan->installment_amount, 2) }}</td>
                        <td style="color: var(--success);">{{ number_format($loan->paid_amount, 2) }}</td>
                        <td style="color: var(--danger);">{{ number_format($loan->remaining_amount, 2) }}</td>
                        <td>
                            <div style="background: var(--border-light); border-radius: 10px; height: 8px; width: 80px; overflow: hidden;">
                                <div style="background: var(--primary); height: 100%; width: {{ $loan->progress_percent }}%; border-radius: 10px;"></div>
                            </div>
                            <small>{{ $loan->progress_percent }}%</small>
                        </td>
                        <td><span class="status-badge status-{{ $loan->status_color }}">{{ $loan->status_label }}</span></td>
                        <td>
                            <div class="action-btns">
                                <a href="{{ route('loans.show', $loan) }}" class="action-btn" title="عرض">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10">
                            <div class="empty-state">
                                <i class="fas fa-hand-holding-usd"></i>
                                <p>لا توجد سلف مسجلة</p>
                                <a href="{{ route('loans.create') }}" class="btn btn-primary">إنشاء سلفة جديدة</a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($loans->hasPages())
        <div class="pagination-wrap">{{ $loans->links() }}</div>
        @endif
    </div>
</div>

<script>
function openStatModal(id) {
    document.getElementById(id).classList.add('active');
}
function closeStatModal(el) {
    el.closest('.stat-modal-overlay').classList.remove('active');
}
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.stat-modal-overlay.active').forEach(function(m) {
            m.classList.remove('active');
        });
    }
});
document.querySelectorAll('.stat-modal-overlay').forEach(function(overlay) {
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) {
            overlay.classList.remove('active');
        }
    });
});
</script>
@endsection