@extends('layouts.banking')

@section('title', 'لوحة التحكم')

@section('content')
<div class="container-fluid">
    <!-- ترحيب وملخص سريع -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">مرحباً، {{ auth()->user()->name }}</h5>
                    <p class="card-text">{{ \Carbon\Carbon::now()->format('l d F Y') }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-0">آخر تسجيل دخول: {{ auth()->user()->last_login ? \Carbon\Carbon::parse(auth()->user()->last_login)->format('Y-m-d H:i') : 'غير متوفر' }}</p>
                        </div>
                        <div>
                            <a href="{{ route('transactions.create.exchange') }}" class="btn btn-primary me-2">
                                <i class="fas fa-exchange-alt me-1"></i> معاملة جديدة
                            </a>
                            <a href="{{ route('customers.create') }}" class="btn btn-success">
                                <i class="fas fa-user-plus me-1"></i> عميل جديد
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">أسعار الصرف اليوم</h6>
                            <p class="mb-0 small">تم التحديث: {{ \Carbon\Carbon::now()->format('H:i') }}</p>
                        </div>
                        <a href="{{ route('exchange-rates.index') }}" class="btn btn-sm btn-light">
                            <i class="fas fa-sync-alt me-1"></i> تحديث
                        </a>
                    </div>
                    <hr class="my-2">
                    <div class="row">
                        @foreach($mainCurrencies as $currency)
                        <div class="col-6 mb-2">
                            <div class="d-flex justify-content-between">
                                <span>{{ $currency->code }}</span>
                                <span>{{ number_format($currency->rate, 2) }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ملخص الأرقام -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <div class="display-4">{{ $summary['transactions_today'] }}</div>
                    <p class="mb-0">معاملات اليوم</p>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center">
                    <span>إجمالي: {{ number_format($summary['transactions_amount_today'], 2) }}</span>
                    <a href="{{ route('transactions.index') }}" class="text-white">
                        <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <div class="display-4">{{ $summary['customers_count'] }}</div>
                    <p class="mb-0">إجمالي العملاء</p>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center">
                    <span>جديد: {{ $summary['new_customers_today'] }}</span>
                    <a href="{{ route('customers.index') }}" class="text-white">
                        <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-dark">
                <div class="card-body text-center">
                    <div class="display-4">{{ $summary['branches_count'] }}</div>
                    <p class="mb-0">الفروع</p>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center">
                    <span>نشط: {{ $summary['active_branches'] }}</span>
                    <a href="{{ route('branches.index') }}" class="text-dark">
                        <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body text-center">
                    <div class="display-4">{{ number_format($summary['profit_today'], 2) }}</div>
                    <p class="mb-0">أرباح اليوم</p>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center">
                    <span>الشهر: {{ number_format($summary['profit_month'], 2) }}</span>
                    <a href="{{ route('reports.profit-loss') }}" class="text-white">
                        <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- المعاملات الأخيرة والرسم البياني -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">المعاملات الأخيرة</h5>
                    <a href="{{ route('transactions.index') }}" class="btn btn-sm btn-primary">
                        عرض الكل
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>الرقم المرجعي</th>
                                    <th>النوع</th>
                                    <th>العميل</th>
                                    <th>المبلغ</th>
                                    <th>العملة</th>
                                    <th>الحالة</th>
                                    <th>التاريخ</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentTransactions as $transaction)
                                <tr>
                                    <td>{{ $transaction->reference_number }}</td>
                                    <td>
                                        @if($transaction->type == 'exchange')
                                            <span class="badge bg-info">تحويل عملات</span>
                                        @elseif($transaction->type == 'remittance_send')
                                            <span class="badge bg-primary">إرسال حوالة</span>
                                        @elseif($transaction->type == 'remittance_receive')
                                            <span class="badge bg-success">استلام حوالة</span>
                                        @else
                                            <span class="badge bg-secondary">{{ $transaction->type }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $transaction->customer ? $transaction->customer->name : 'غير محدد' }}</td>
                                    <td>{{ number_format($transaction->amount, 2) }}</td>
                                    <td>{{ $transaction->sourceCurrency->code }}</td>
                                    <td>
                                        @if($transaction->status == 'completed')
                                            <span class="badge bg-success">مكتملة</span>
                                        @elseif($transaction->status == 'pending')
                                            <span class="badge bg-warning">معلقة</span>
                                        @else
                                            <span class="badge bg-danger">ملغاة</span>
                                        @endif
                                    </td>
                                    <td>{{ $transaction->transaction_date->format('Y-m-d H:i') }}</td>
                                    <td>
                                        <a href="{{ route('transactions.show', $transaction->id) }}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('transactions.receipt', $transaction->id) }}" class="btn btn-sm btn-secondary">
                                            <i class="fas fa-print"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">لا توجد معاملات حديثة</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">إحصائيات المعاملات</h5>
                </div>
                <div class="card-body">
                    <canvas id="transactionsChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- أرصدة الصناديق والحسابات -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">أرصدة الصناديق</h5>
                    <a href="{{ route('cashboxes.index') }}" class="btn btn-sm btn-primary">
                        عرض الكل
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>اسم الصندوق</th>
                                    <th>الفرع</th>
                                    <th>العملة</th>
                                    <th>الرصيد الحالي</th>
                                    <th>الحالة</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($cashboxes as $cashbox)
                                <tr>
                                    <td>{{ $cashbox->name }}</td>
                                    <td>{{ $cashbox->branch->name }}</td>
                                    <td>{{ $cashbox->currency->code }}</td>
                                    <td>{{ number_format($cashbox->current_balance, 2) }}</td>
                                    <td>
                                        @if($cashbox->status == 'active')
                                            <span class="badge bg-success">نشط</span>
                                        @else
                                            <span class="badge bg-danger">غير نشط</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center">لا توجد صناديق</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">أرصدة الحسابات</h5>
                    <a href="{{ route('accounts.index') }}" class="btn btn-sm btn-primary">
                        عرض الكل
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>اسم الحساب</th>
                                    <th>البنك</th>
                                    <th>العملة</th>
                                    <th>الرصيد الحالي</th>
                                    <th>الحالة</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($accounts as $account)
                                <tr>
                                    <td>{{ $account->name }}</td>
                                    <td>{{ $account->bank_name }}</td>
                                    <td>{{ $account->currency->code }}</td>
                                    <td>{{ number_format($account->current_balance, 2) }}</td>
                                    <td>
                                        @if($account->status == 'active')
                                            <span class="badge bg-success">نشط</span>
                                        @else
                                            <span class="badge bg-danger">غير نشط</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center">لا توجد حسابات</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- الإشعارات والتنبيهات -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">آخر الإشعارات</h5>
                    <a href="#" class="btn btn-sm btn-primary">
                        عرض الكل
                    </a>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        @forelse($notifications as $notification)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="{{ $notification->icon }} me-2 text-{{ $notification->type }}"></i>
                                {{ $notification->message }}
                                <small class="d-block text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                            </div>
                            <a href="{{ $notification->link }}" class="btn btn-sm btn-outline-primary">
                                عرض
                            </a>
                        </li>
                        @empty
                        <li class="list-group-item text-center">لا توجد إشعارات جديدة</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">تنبيهات النظام</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        @forelse($alerts as $alert)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="{{ $alert->icon }} me-2 text-{{ $alert->type }}"></i>
                                {{ $alert->message }}
                                <small class="d-block text-muted">{{ $alert->created_at->diffForHumans() }}</small>
                            </div>
                            <a href="{{ $alert->link }}" class="btn btn-sm btn-outline-{{ $alert->type }}">
                                معالجة
                            </a>
                        </li>
                        @empty
                        <li class="list-group-item text-center">لا توجد تنبيهات حالية</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // رسم بياني للمعاملات
        const ctx = document.getElementById('transactionsChart').getContext('2d');
        const transactionsChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['تحويل عملات', 'إرسال حوالة', 'استلام حوالة'],
                datasets: [{
                    data: [
                        {{ $transactionStats['exchange'] ?? 0 }},
                        {{ $transactionStats['remittance_send'] ?? 0 }},
                        {{ $transactionStats['remittance_receive'] ?? 0 }}
                    ],
                    backgroundColor: [
                        'rgba(23, 162, 184, 0.7)',
                        'rgba(0, 123, 255, 0.7)',
                        'rgba(40, 167, 69, 0.7)'
                    ],
                    borderColor: [
                        'rgba(23, 162, 184, 1)',
                        'rgba(0, 123, 255, 1)',
                        'rgba(40, 167, 69, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    title: {
                        display: true,
                        text: 'توزيع المعاملات حسب النوع'
                    }
                }
            }
        });
    });
</script>
@endsection