@extends('admin.layouts.master')

@section('title', 'التقارير والإحصائيات')

@section('css')
    {{-- ممكن تضيف ستايل بسيط للجراف لو حبيت --}}
    <style>
        .stat-card-number {
            font-size: 1.6rem;
            font-weight: 700;
        }
    </style>
@endsection

@section('content')

    <div class="content-header d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">التقارير والإحصائيات</h5>
    </div>

    {{-- فلتر أعلى الصفحة --}}
    <div class="card mb-3">
        <div class="card-header">
            <h6 class="mb-0">تصفية النتائج</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('reports.index') }}">
                <div class="row g-3 align-items-end">

                    {{-- من تاريخ --}}
                    <div class="col-md-3">
                        <label class="form-label">من تاريخ</label>
                        <input type="date"
                               name="from_date"
                               class="form-control"
                               value="{{ request('from_date', $defaultFromDate) }}">
                    </div>

                    {{-- إلى تاريخ --}}
                    <div class="col-md-3">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date"
                               name="to_date"
                               class="form-control"
                               value="{{ request('to_date', $defaultToDate) }}">
                    </div>

                    {{-- الفرع --}}
                    <div class="col-md-3">
                        <label class="form-label">الفرع</label>
                        <select name="branch_id" class="form-select">
                            <option value="">كل الفروع</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}"
                                    {{ (string)request('branch_id') === (string)$branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- الطبيب --}}
                    <div class="col-md-3">
                        <label class="form-label">الطبيب</label>
                        <select name="doctor_id" class="form-select">
                            <option value="">كل الأطباء</option>
                            @foreach($doctors as $doc)
                                <option value="{{ $doc->id }}"
                                    {{ (string)request('doctor_id') === (string)$doc->id ? 'selected' : '' }}>
                                    {{ $doc->user->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 text-end">
                        <button class="btn btn-primary">
                            تطبيق الفلتر
                        </button>
                        <a href="{{ route('reports.index') }}" class="btn btn-light">
                            إعادة تعيين
                        </a>
                    </div>

                </div>
            </form>
        </div>
    </div>

    {{-- كروت الإحصائيات الأساسية --}}
    <div class="row mb-3">

        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="text-muted mb-1">عدد المرضى الجدد</h6>
                    <div class="stat-card-number">{{ $summary['new_patients'] }}</div>
                    <small class="text-muted">خلال الفترة المحددة</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body">
                    <h6 class="text-muted mb-1">عدد الزيارات</h6>
                    <div class="stat-card-number">{{ $summary['visits_count'] }}</div>
                    <small class="text-muted">زيارات مسجلة للمرضى</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="text-muted mb-1">إجمالي الفواتير</h6>
                    <div class="stat-card-number">
                        {{ number_format($summary['invoices_total'], 2) }}
                        <img src="{{ asset('dash/Saudi_Riyal_Symbol.svg.png') }}" width="18" height="18" alt="">
                    </div>
                    <small class="text-muted">قبل الخصومات والمدفوعات</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <h6 class="text-muted mb-1">المتحصل فعلياً</h6>
                    <div class="stat-card-number">
                        {{ number_format($summary['payments_total'], 2) }}
                        <img src="{{ asset('dash/Saudi_Riyal_Symbol.svg.png') }}" width="18" height="18" alt="">
                    </div>
                    <small class="text-muted">إجمالي المدفوعات المسجلة</small>
                </div>
            </div>
        </div>

    </div>


<div class="row mb-4">

        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted mb-1">المتبقي على المرضى</h6>
                    <div class="stat-card-number text-danger">
                        {{ number_format($summary['outstanding'], 2) }}
                        <img src="{{ asset('dash/Saudi_Riyal_Symbol.svg.png') }}" width="18" height="18" alt="">
                    </div>
                    <small class="text-muted">إجمالي مستحق لم يُسدَّد</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-secondary">
                <div class="card-body">
                    <h6 class="text-muted mb-1">عدد الفواتير</h6>
                    <div class="stat-card-number">{{ $summary['invoices_count'] }}</div>
                    <small class="text-muted">فواتير صادرة في الفترة</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-dark">
                <div class="card-body">
                    <h6 class="text-muted mb-1">متوسط قيمة الفاتورة</h6>
                    <div class="stat-card-number">
                        {{ number_format($summary['avg_invoice'], 2) }}
                        <img src="{{ asset('dash/Saudi_Riyal_Symbol.svg.png') }}" width="18" height="18" alt="">
                    </div>
                    <small class="text-muted">حساب تقريبي</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted mb-1">أصناف أقل من الحد</h6>
                    <div class="stat-card-number text-danger">
                        {{ $summary['low_stock_count'] }}
                    </div>
                    <small class="text-muted">في المخزون والصيدلية</small>
                </div>
            </div>
        </div>

    </div>
 


    {{-- سطر: أهم الخدمات + الفواتير غير المدفوعة --}}
   <div class="row mb-4">
    {{-- جراف أعلى الخدمات إيراداً --}}
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">أعلى الخدمات تحقيقاً للإيراد (رسم بياني)</h6>
            </div>
            <div class="card-body">
                @if($topServices->count())
                    <canvas id="services-chart" height="40"></canvas>
                @else
                    <p class="text-muted mb-0 text-center">
                        لا توجد بيانات خدمات لعرض الرسم البياني.
                    </p>
                @endif
            </div>
        </div>
    </div>


</div>


    {{-- أصناف المخزون المنخفضة --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">أصناف أقل من الحد الأدنى في المخزون</h6>
                    <a href="{{ route('inventory.items.index') }}" class="btn btn-sm btn-outline-secondary">
                        إدارة المخزون
                    </a>
                </div>
                <div class="card-body">
                    @if($lowStockItems->count())
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                <tr>
                                    <th>الصنف</th>
                                    <th>التصنيف</th>
                                    <th>الحد الأدنى</th>
                                    <th>الكمية الحالية</th>
                                    <th>سعر الشراء</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($lowStockItems as $item)
                                    <tr>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->category ?: '-' }}</td>
                                        <td>{{ $item->min_quantity }}</td>
                                        <td class="text-danger fw-bold">{{ $item->current_quantity }}</td>
                                        <td>
                                            {{ number_format($item->purchase_price, 2) }}
                                            <img src="{{ asset('dash/Saudi_Riyal_Symbol.svg.png') }}" width="14" height="14" alt="">
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted mb-0 text-center">
                            لا توجد أصناف أقل من الحد الأدنى حالياً.
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection


@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        (function () {
            // ===== 1) جراف الإيراد اليومي =====
            const revenueData = @json($revenueByDate);

            const revenueLabels = revenueData.map(r => {
                // نحول الـ date لتنسيق بسيط (YYYY-MM-DD) أو تاريخ محلي عربي
                try {
                    const d = new Date(r.date);
                    if (!isNaN(d.getTime())) {
                        return d.toLocaleDateString('ar-EG');
                    }
                } catch (e) {}
                return r.date; // fallback
            });

            const revenueValues = revenueData.map(r => parseFloat(r.total || 0));

            const revenueCanvas = document.getElementById('revenue-chart');
            if (revenueCanvas && revenueLabels.length > 0) {
                new Chart(revenueCanvas, {
                    type: 'line',
                    data: {
                        labels: revenueLabels,
                        datasets: [{
                            label: 'الإيراد اليومي',
                            data: revenueValues,
                            tension: 0.3,
                            borderWidth: 2,
                            pointRadius: 4,
                            fill: false
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: { ticks: { autoSkip: true, maxTicksLimit: 7 } },
                            y: { beginAtZero: true }
                        }
                    }
                });
            }

            // ===== 2) جراف أعلى الخدمات إيراداً (Bar) =====
            const topServices = @json($topServices);

            const servicesLabels = topServices.map(s => s.name || 'خدمة بدون اسم');
            const servicesValues = topServices.map(s => parseFloat(s.total_revenue || 0));

            const servicesCanvas = document.getElementById('services-chart');
            if (servicesCanvas && servicesLabels.length > 0) {
                new Chart(servicesCanvas, {
                    type: 'bar',
                    data: {
                        labels: servicesLabels,
                        datasets: [{
                            label: 'إيراد الخدمة',
                            data: servicesValues,
                            borderWidth: 1
                        }]
                    },
                    options: {
                        indexAxis: 'y', // Bar أفقي علشان الأسماء الطويلة
                        responsive: true,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: { beginAtZero: true }
                        }
                    }
                });
            }

            // ===== 3) جراف حالة الفواتير (Pie / Doughnut) =====
            const statusCounts = @json($invoiceStatusCounts);

            const statusMap = {
                unpaid: 'غير مدفوعة',
                partial: 'مدفوعة جزئياً',
                paid: 'مدفوعة بالكامل',
                refunded: 'مسترجعة'
            };

            const statusLabels = Object.keys(statusCounts).map(k => statusMap[k] || k);
            const statusValues = Object.keys(statusCounts).map(k => statusCounts[k]);

            const statusCanvas = document.getElementById('status-chart');
            if (statusCanvas && statusLabels.length > 0) {
                new Chart(statusCanvas, {
                    type: 'doughnut',
                    data: {
                        labels: statusLabels,
                        datasets: [{
                            data: statusValues
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }

        })();
    </script>
@endsection