@extends('layouts.app')

@section('title', 'لوحة الإدارة')
@section('page_title', 'لوحة الإدارة')

@section('content')

<!-- Alerts Container -->
<div class="alerts-container position-fixed top-0 end-0 p-3" style="z-index: 9999;"></div>

<!-- Quick Actions Row -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">إجراءات سريعة</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <button class="btn btn-primary btn-lg w-100" data-bs-toggle="modal" data-bs-target="#addAppointmentModal">
                            <i class="fas fa-calendar-plus me-2"></i>حجز موعد جديد
                        </button>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.users') }}" class="btn btn-success btn-lg w-100">
                            <i class="fas fa-user-plus me-2"></i>إدارة المستخدمين
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.reports') }}" class="btn btn-info btn-lg w-100">
                            <i class="fas fa-chart-bar me-2"></i>التقارير
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.finances') }}" class="btn btn-warning btn-lg w-100">
                            <i class="fas fa-money-bill me-2"></i>الماليات
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Financial Statistics Row -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        @php
                            $totalRevenue = \App\Models\Appointment::whereNotNull('cost')->sum('cost') ?? 0;
                        @endphp
                        <h4>{{ number_format($totalRevenue) }} ج.م</h4>
                        <p class="mb-0">إجمالي الإيرادات</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-dollar-sign fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        @php
                            $monthlyRevenue = \App\Models\Appointment::whereMonth('appointment_date', now()->month)
                                ->whereYear('appointment_date', now()->year)
                                ->whereNotNull('cost')
                                ->sum('cost') ?? 0;
                        @endphp
                        <h4>{{ number_format($monthlyRevenue) }} ج.م</h4>
                        <p class="mb-0">إيرادات هذا الشهر</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-chart-line fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        @php
                            $dailyRevenue = \App\Models\Appointment::whereDate('appointment_date', today())
                                ->whereNotNull('cost')
                                ->sum('cost') ?? 0;
                        @endphp
                        <h4>{{ number_format($dailyRevenue) }} ج.م</h4>
                        <p class="mb-0">إيرادات اليوم</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-coins fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        @php
                            $avgAppointmentCost = \App\Models\Appointment::whereNotNull('cost')->avg('cost') ?? 0;
                        @endphp
                        <h4>{{ number_format($avgAppointmentCost) }} ج.م</h4>
                        <p class="mb-0">متوسط تكلفة الموعد</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-calculator fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- System Statistics Row -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-secondary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\User::where('role', 'patient')->count() }}</h4>
                        <p class="mb-0">إجمالي المرضى</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-dark text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\User::where('role', 'doctor')->count() }}</h4>
                        <p class="mb-0">إجمالي الأطباء</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-user-md fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card" style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: white;">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\Appointment::count() }}</h4>
                        <p class="mb-0">إجمالي المواعيد</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-calendar-check fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card" style="background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); color: white;">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ \App\Models\MedicalRecord::count() }}</h4>
                        <p class="mb-0">السجلات الطبية</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-file-medical fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Financial Charts and Analysis -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الإيرادات الشهرية</h5>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">طرق الدفع</h5>
            </div>
            <div class="card-body">
                <canvas id="paymentMethodsChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Yearly Comparison Charts -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">مقارنة الإيرادات السنوية</h5>
            </div>
            <div class="card-body">
                <canvas id="yearlyComparisonChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">نمو الإيرادات السنوي</h5>
            </div>
            <div class="card-body">
                @php
                    $currentYearRevenue = \App\Models\Appointment::whereYear('appointment_date', now()->year)->whereNotNull('cost')->sum('cost') ?? 0;
                    $lastYearRevenue = \App\Models\Appointment::whereYear('appointment_date', now()->year - 1)->whereNotNull('cost')->sum('cost') ?? 0;
                    $growthPercentage = $lastYearRevenue > 0 ? (($currentYearRevenue - $lastYearRevenue) / $lastYearRevenue) * 100 : 0;
                @endphp
                <div class="text-center">
                    <h2 class="text-{{ $growthPercentage >= 0 ? 'success' : 'danger' }}">
                        {{ $growthPercentage >= 0 ? '+' : '' }}{{ number_format($growthPercentage, 1) }}%
                    </h2>
                    <p class="mb-3">مقارنة بالعام الماضي</p>
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <h6>{{ now()->year }}</h6>
                            <p class="text-success">{{ number_format($currentYearRevenue) }} ج.م</p>
                        </div>
                        <div class="col-6">
                            <h6>{{ now()->year - 1 }}</h6>
                            <p class="text-muted">{{ number_format($lastYearRevenue) }} ج.م</p>
                        </div>
                    </div>
                </div>
                
                <canvas id="growthChart" height="150"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Financial Details -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">أعلى الأطباء إيراداً</h5>
            </div>
            <div class="card-body">
                @php
                    $topDoctorsByRevenue = \App\Models\User::where('role', 'doctor')
                        ->get()
                        ->map(function($doctor) {
                            $doctor->total_revenue = \App\Models\Appointment::where('doctor_id', $doctor->id)->whereNotNull('cost')->sum('cost') ?? 0;
                            return $doctor;
                        })
                        ->sortByDesc('total_revenue')
                        ->take(5);
                @endphp
                @foreach($topDoctorsByRevenue as $doctor)
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-user-md fa-2x text-success me-3"></i>
                        <div>
                            <strong>د. {{ $doctor->name }}</strong>
                            <br><small class="text-muted">{{ \App\Models\Appointment::where('doctor_id', $doctor->id)->count() }} موعد</small>
                        </div>
                    </div>
                    <div class="text-end">
                        <strong class="text-success">{{ number_format($doctor->total_revenue) }} ج.م</strong>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">المدفوعات المعلقة</h5>
            </div>
            <div class="card-body">
                @php
                    $pendingPayments = \App\Models\Appointment::where('payment_status', 'pending')
                        ->orWhereNull('payment_status')
                        ->latest()
                        ->take(5)
                        ->get();
                @endphp
                @forelse($pendingPayments as $appointment)
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <strong>{{ $appointment->patient->name ?? 'مريض غير محدد' }}</strong>
                        <br><small class="text-muted">{{ $appointment->appointment_date }}</small>
                    </div>
                    <div class="text-end">
                        <span class="badge bg-warning">{{ number_format($appointment->cost ?? 0) }} ج.م</span>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted">
                    <i class="fas fa-check-circle fa-3x mb-3"></i>
                    <p>لا توجد مدفوعات معلقة</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الإجراءات السريعة</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('admin.users') }}" class="btn btn-outline-primary w-100 h-100 d-flex flex-column justify-content-center align-items-center">
                            <i class="fas fa-users fa-2x mb-2"></i>
                            <span>إدارة المستخدمين</span>
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('admin.doctors') }}" class="btn btn-outline-success w-100 h-100 d-flex flex-column justify-content-center align-items-center">
                            <i class="fas fa-user-md fa-2x mb-2"></i>
                            <span>إدارة الأطباء</span>
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('admin.reports') }}" class="btn btn-outline-info w-100 h-100 d-flex flex-column justify-content-center align-items-center">
                            <i class="fas fa-chart-bar fa-2x mb-2"></i>
                            <span>التقارير المالية</span>
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{{ route('admin.settings') }}" class="btn btn-outline-warning w-100 h-100 d-flex flex-column justify-content-center align-items-center">
                            <i class="fas fa-cog fa-2x mb-2"></i>
                            <span>إعدادات النظام</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
        datasets: [{
            label: 'الإيرادات (ج.م)',
            data: [
                @for($i = 1; $i <= 12; $i++)
                    {{ \App\Models\Appointment::whereMonth('appointment_date', $i)->whereYear('appointment_date', now()->year)->whereNotNull('cost')->sum('cost') ?? 0 }},
                @endfor
            ],
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return value.toLocaleString() + ' ج.م';
                    }
                }
            }
        }
    }
});

// Payment Methods Chart
const paymentCtx = document.getElementById('paymentMethodsChart').getContext('2d');
new Chart(paymentCtx, {
    type: 'doughnut',
    data: {
        labels: ['نقدي', 'بطاقة ائتمان', 'تحويل بنكي', 'تأمين'],
        datasets: [{
            data: [60, 25, 10, 5], // Sample data - replace with real data
            backgroundColor: [
                '#28a745',
                '#007bff', 
                '#ffc107',
                '#dc3545'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Yearly Comparison Chart
const yearlyCtx = document.getElementById('yearlyComparisonChart').getContext('2d');
new Chart(yearlyCtx, {
    type: 'line',
    data: {
        labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
        datasets: [
            {
                label: '{{ now()->year }}',
                data: [
                    @for($i = 1; $i <= 12; $i++)
                        {{ \App\Models\Appointment::whereMonth('appointment_date', $i)->whereYear('appointment_date', now()->year)->whereNotNull('cost')->sum('cost') ?? 0 }},
                    @endfor
                ],
                backgroundColor: 'rgba(54, 162, 235, 0.1)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4
            },
            {
                label: '{{ now()->year - 1 }}',
                data: [
                    @for($i = 1; $i <= 12; $i++)
                        {{ \App\Models\Appointment::whereMonth('appointment_date', $i)->whereYear('appointment_date', now()->year - 1)->whereNotNull('cost')->sum('cost') ?? 0 }},
                    @endfor
                ],
                backgroundColor: 'rgba(255, 99, 132, 0.1)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4
            },
            {
                label: '{{ now()->year - 2 }}',
                data: [
                    @for($i = 1; $i <= 12; $i++)
                        {{ \App\Models\Appointment::whereMonth('appointment_date', $i)->whereYear('appointment_date', now()->year - 2)->whereNotNull('cost')->sum('cost') ?? 0 }},
                    @endfor
                ],
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'مقارنة الإيرادات الشهرية عبر السنوات'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return value.toLocaleString() + ' ج.م';
                    }
                }
            }
        },
        interaction: {
            mode: 'index',
            intersect: false
        }
    }
});

// Growth Chart (Mini Bar Chart)
const growthCtx = document.getElementById('growthChart').getContext('2d');
new Chart(growthCtx, {
    type: 'bar',
    data: {
        labels: ['{{ now()->year - 2 }}', '{{ now()->year - 1 }}', '{{ now()->year }}'],
        datasets: [{
            label: 'الإيرادات السنوية',
            data: [
                {{ \App\Models\Appointment::whereYear('appointment_date', now()->year - 2)->whereNotNull('cost')->sum('cost') ?? 0 }},
                {{ \App\Models\Appointment::whereYear('appointment_date', now()->year - 1)->whereNotNull('cost')->sum('cost') ?? 0 }},
                {{ \App\Models\Appointment::whereYear('appointment_date', now()->year)->whereNotNull('cost')->sum('cost') ?? 0 }}
            ],
            backgroundColor: [
                'rgba(75, 192, 192, 0.6)',
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)'
            ],
            borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return (value / 1000).toFixed(0) + 'K';
                    }
                }
            }
        }
    }
});
</script>

<!-- Include reusable appointment modal -->
@include('components.appointment-add-modal')

<!-- Include appointment receipt modal -->
@include('components.appointment-receipt-modal')
@endsection

@section('scripts')
<!-- Include Appointment Manager JS -->
<script src="{{ asset('js/appointment-manager.js') }}"></script>

<script>
// Initialize Appointment Manager for Admin
let appointmentManager;

$(document).ready(function() {
    // Initialize the appointment manager
    appointmentManager = new AppointmentManager({
        baseUrl: '',
        role: 'admin',
        patients: @json($patients),
        doctors: @json($doctors),
        csrfToken: $('meta[name="csrf-token"]').attr('content')
    });

    console.log('🔧 Admin dashboard initialized with AppointmentManager');
    
    // Global print function
    window.printReceipt = function() {
        const receiptContent = document.getElementById('receiptContent').innerHTML;
        
        const printWindow = window.open('', '_blank', 'width=800,height=600');
        printWindow.document.write(`
            <!DOCTYPE html>
            <html dir="rtl" lang="ar">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>إيصال حجز الموعد</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
                <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
                <style>
                    body {
                        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                        background: white;
                        color: black;
                        margin: 20px;
                        direction: rtl;
                    }
                    .receipt-container {
                        background: #fff;
                        border: 1px solid #ddd;
                        border-radius: 10px;
                        padding: 20px;
                        max-width: 800px;
                        margin: 0 auto;
                    }
                    .clinic-header {
                        background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
                        padding: 20px;
                        border-radius: 10px;
                        margin-bottom: 20px;
                        text-align: center;
                    }
                    .clinic-logo {
                        width: 80px;
                        height: 80px;
                        background: white;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 auto 15px;
                        border: 3px solid #007bff;
                    }
                    .clinic-name {
                        font-size: 1.8rem;
                        font-weight: 700;
                        color: #007bff;
                        margin-bottom: 5px;
                    }
                    .clinic-subtitle {
                        color: #6c757d;
                        margin-bottom: 10px;
                    }
                    .receipt-divider {
                        border: none;
                        height: 2px;
                        background: linear-gradient(90deg, transparent, #007bff, transparent);
                        margin: 20px 0;
                    }
                    .section-title {
                        color: #007bff;
                        font-weight: 600;
                        margin-bottom: 10px;
                        padding-bottom: 5px;
                        border-bottom: 2px solid #e9ecef;
                    }
                    .info-card {
                        background: #f8f9fa;
                        padding: 15px;
                        border-radius: 8px;
                        border-left: 4px solid #007bff;
                        margin-bottom: 15px;
                    }
                    .info-item {
                        margin-bottom: 8px;
                        display: flex;
                        align-items: center;
                    }
                    .info-label {
                        font-weight: 600;
                        color: #495057;
                        min-width: 100px;
                        margin-left: 10px;
                    }
                    .fw-bold {
                        font-weight: bold;
                    }
                    .text-primary {
                        color: #007bff;
                    }
                    .text-success {
                        color: #28a745;
                    }
                    .text-muted {
                        color: #6c757d;
                    }
                    .badge {
                        padding: 4px 8px;
                        border-radius: 4px;
                        font-size: 0.75rem;
                        font-weight: 600;
                    }
                    .bg-success {
                        background-color: #28a745;
                        color: white;
                    }
                    .bg-warning {
                        background-color: #ffc107;
                        color: black;
                    }
                    .receipt-footer {
                        background: #f8f9fa;
                        padding: 15px;
                        border-radius: 8px;
                        text-align: center;
                        margin-top: 20px;
                        border-top: 2px solid #e9ecef;
                    }
                    .booking-ref {
                        font-size: 1.2rem;
                        font-weight: bold;
                        color: #007bff;
                        letter-spacing: 1px;
                    }
                    @media print {
                        body { margin: 0; }
                        .receipt-container { 
                            border: none; 
                            box-shadow: none; 
                            margin: 0;
                            max-width: none;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="receipt-container">
                    ${receiptContent}
                </div>
                <script>
                    window.onload = function() {
                        setTimeout(() => {
                            window.print();
                            window.close();
                        }, 500);
                    }
                </script>
            </body>
            </html>
        `);
        printWindow.document.close();
    };
    
    // Global function to close receipt modal
    window.closeReceiptModal = function() {
        window.allowReceiptClose = true;
        $('#appointmentReceiptModal').modal('hide');
    };
});
</script>
@endsection