@extends('admin.layouts.master')
@section('title', 'تقرير المبيعات')

@section('page-header')
@include('admin.reports._header', [
    'title' => 'تقرير المبيعات',
    'subtitle' => 'تحليل شامل للمبيعات والتحصيل من '.$from.' إلى '.$to,
    'icon' => 'ti-chart-bar',
    'color' => 'primary',
])
@endsection

@section('content')
@include('admin.reports._filters', ['from'=>$from, 'to'=>$to, 'showCompare'=>true])

{{-- Insights --}}
@if(!empty($insights))
<div class="insights-box">
    <h4 class="mb-2"><i class="ti ti-bulb ms-1 text-warning"></i> الرؤى التحليلية الذكية</h4>
    @foreach($insights as $insight)
    <div class="insight-item {{ $insight['type'] }}">
        <i class="ti ti-{{ $insight['type'] === 'positive' ? 'circle-check' : ($insight['type'] === 'negative' ? 'alert-triangle' : 'info-circle') }} ms-1"></i>
        <div>{!! $insight['text'] !!}</div>
    </div>
    @endforeach
</div>
@endif

{{-- KPIs --}}
<div class="row row-cards mb-3">
    <div class="col-md-6 col-lg-3">
        <div class="kpi-pro featured" style="border-color:#0d6efd">
            <i class="ti ti-cash kpi-icon-bg text-primary"></i>
            <div class="kpi-label">إجمالي المبيعات</div>
            <div class="kpi-value text-primary">{{ number_format($totalSales, 0) }} <span class="kpi-unit">ج.م</span></div>
            @if($prev)
                @php $growth = $prev['totalSales'] > 0 ? round(($totalSales-$prev['totalSales'])/$prev['totalSales']*100, 1) : 0; @endphp
                <div class="kpi-trend {{ $growth > 0 ? 'up' : ($growth < 0 ? 'down' : 'flat') }}">
                    <i class="ti ti-{{ $growth > 0 ? 'trending-up' : ($growth < 0 ? 'trending-down' : 'minus') }}"></i>
                    {{ $growth > 0 ? '+' : '' }}{{ $growth }}% vs الفترة السابقة
                </div>
                <small class="text-muted d-block">السابق: {{ number_format($prev['totalSales'], 0) }}</small>
            @else
                <div class="kpi-trend flat"><i class="ti ti-receipt"></i> {{ $invoiceCount }} فاتورة</div>
            @endif
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="kpi-pro featured" style="border-color:#198754">
            <i class="ti ti-check kpi-icon-bg text-success"></i>
            <div class="kpi-label">المُحصَّل</div>
            <div class="kpi-value text-success">{{ number_format($totalPaid, 0) }} <span class="kpi-unit">ج.م</span></div>
            <div class="kpi-trend {{ $collectionRate >= 80 ? 'up' : ($collectionRate >= 50 ? 'flat' : 'down') }}">
                <i class="ti ti-percentage"></i> معدل التحصيل {{ $collectionRate }}%
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="kpi-pro featured" style="border-color:#dc3545">
            <i class="ti ti-clock kpi-icon-bg text-danger"></i>
            <div class="kpi-label">المتبقي</div>
            <div class="kpi-value text-danger">{{ number_format($totalRemaining, 0) }} <span class="kpi-unit">ج.م</span></div>
            <div class="kpi-trend flat">
                @if($totalRemaining > 0)
                    <i class="ti ti-alert-circle text-warning"></i> يحتاج متابعة
                @else
                    <i class="ti ti-check text-success"></i> لا مديونيات
                @endif
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="kpi-pro featured" style="border-color:#ffc107">
            <i class="ti ti-cash-register kpi-icon-bg text-warning"></i>
            <div class="kpi-label">مبيعات نقطة البيع</div>
            <div class="kpi-value text-warning">{{ number_format($posSales, 0) }} <span class="kpi-unit">ج.م</span></div>
            <div class="kpi-trend flat">
                <i class="ti ti-info-circle"></i> متوسط الفاتورة: {{ number_format($avgInvoice, 0) }}
            </div>
        </div>
    </div>
</div>

{{-- Charts --}}
<div class="row row-cards mb-3">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-chart-line ms-1"></i> اتجاه المبيعات اليومي</h3></div>
            <div class="card-body"><div id="dailyChart"></div></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header"><h3 class="card-title"><i class="ti ti-crown ms-1 text-warning"></i> أعلى 10 عملاء</h3></div>
            <div class="list-group list-group-flush" style="max-height:380px;overflow-y:auto">
                @forelse($byCustomer as $i => $c)
                <div class="list-group-item">
                    <div class="d-flex align-items-center">
                        <div class="me-2 fw-bold text-{{ $i < 3 ? 'warning' : 'muted' }}" style="font-size:1.1rem">#{{ $i + 1 }}</div>
                        <div class="flex-grow-1">
                            <div class="fw-bold">{{ $c['customer'] }}</div>
                            <small class="text-muted">{{ $c['count'] }} فاتورة</small>
                        </div>
                        <div class="text-success fw-bold">{{ number_format($c['total'], 0) }}</div>
                    </div>
                </div>
                @empty
                <div class="list-group-item text-center text-muted py-4">لا توجد بيانات</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- Comparison Table --}}
@if($prev)
<div class="card mb-3">
    <div class="card-header"><h3 class="card-title"><i class="ti ti-versions ms-1"></i> مقارنة بالفترة السابقة ({{ $prev['from'] }} - {{ $prev['to'] }})</h3></div>
    <div class="table-responsive">
        <table class="table card-table table-vcenter">
            <thead><tr>
                <th>المؤشر</th>
                <th class="text-center"><span class="period-tag current">الفترة الحالية</span></th>
                <th class="text-center"><span class="period-tag previous">الفترة السابقة</span></th>
                <th class="text-center">الفرق</th>
                <th class="text-center">% التغير</th>
            </tr></thead>
            <tbody>
                @php
                    $rows = [
                        ['label'=>'إجمالي المبيعات', 'cur'=>$totalSales, 'prev'=>$prev['totalSales']],
                        ['label'=>'المُحصَّل', 'cur'=>$totalPaid, 'prev'=>$prev['totalPaid']],
                        ['label'=>'عدد الفواتير', 'cur'=>$invoiceCount, 'prev'=>$prev['invoiceCount'], 'int'=>true],
                        ['label'=>'متوسط الفاتورة', 'cur'=>$avgInvoice, 'prev'=>$prev['avgInvoice']],
                    ];
                @endphp
                @foreach($rows as $r)
                @php
                    $diff = $r['cur'] - $r['prev'];
                    $pct = $r['prev'] > 0 ? round($diff / $r['prev'] * 100, 1) : ($r['cur'] > 0 ? 100 : 0);
                    $cls = $diff > 0 ? 'cmp-up' : ($diff < 0 ? 'cmp-down' : 'cmp-flat');
                @endphp
                <tr>
                    <td><strong>{{ $r['label'] }}</strong></td>
                    <td class="text-center fw-bold">{{ number_format($r['cur'], $r['int'] ?? false ? 0 : 0) }}</td>
                    <td class="text-center text-muted">{{ number_format($r['prev'], $r['int'] ?? false ? 0 : 0) }}</td>
                    <td class="text-center {{ $cls }}">{{ $diff >= 0 ? '+' : '' }}{{ number_format($diff, 0) }}</td>
                    <td class="text-center {{ $cls }}">
                        <i class="ti ti-{{ $diff > 0 ? 'arrow-up' : ($diff < 0 ? 'arrow-down' : 'minus') }}"></i>
                        {{ $diff >= 0 ? '+' : '' }}{{ $pct }}%
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- Full Invoices Table --}}
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="ti ti-list ms-1"></i> قائمة الفواتير التفصيلية ({{ $invoiceCount }})</h3>
    </div>
    <div class="table-responsive">
        <table class="table card-table table-vcenter">
            <thead><tr>
                <th>الرقم</th><th>التاريخ</th><th>العميل</th><th>الفرع</th>
                <th class="text-end">الإجمالي</th><th class="text-end">المدفوع</th><th class="text-end">المتبقي</th><th>الحالة</th>
            </tr></thead>
            <tbody>
                @foreach($invoices as $inv)
                <tr>
                    <td><strong>{{ $inv->invoice_no }}</strong></td>
                    <td>{{ $inv->invoice_date->format('Y-m-d') }}</td>
                    <td>{{ $inv->customer?->name ?? '-' }}</td>
                    <td>{{ $inv->branch?->name ?? '-' }}</td>
                    <td class="text-end fw-bold">{{ number_format($inv->total_amount, 2) }}</td>
                    <td class="text-end text-success">{{ number_format($inv->paid_amount, 2) }}</td>
                    <td class="text-end text-{{ $inv->remaining_amount > 0 ? 'danger' : 'success' }}">{{ number_format($inv->remaining_amount, 2) }}</td>
                    <td><span class="badge bg-{{ $inv->status_color }}">{{ $inv->status_label }}</span></td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-light fw-bold">
                <tr>
                    <td colspan="4" class="text-end">الإجمالي:</td>
                    <td class="text-end">{{ number_format($totalSales, 2) }}</td>
                    <td class="text-end text-success">{{ number_format($totalPaid, 2) }}</td>
                    <td class="text-end text-danger">{{ number_format($totalRemaining, 2) }}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="print-footer print-only">
    تقرير المبيعات | {{ \App\Models\Setting::get('company_name') }} | {{ now()->format('Y-m-d H:i') }} | الفترة: {{ $from }} - {{ $to }}
</div>
@endsection

@push('scripts')
<script>
const dailyData = @json($byDay);
new ApexCharts(document.querySelector('#dailyChart'), {
    chart: { type: 'area', height: 320, fontFamily: 'Cairo', toolbar: { show: true } },
    series: [{ name: 'المبيعات', data: dailyData.map(d => d.total) }],
    xaxis: { categories: dailyData.map(d => d.date), labels: { rotate: -45 } },
    colors: ['#0d6efd'],
    stroke: { curve: 'smooth', width: 2 },
    fill: { type: 'gradient', gradient: { shadeIntensity: 0.6, opacityFrom: 0.4, opacityTo: 0.05 } },
    dataLabels: { enabled: false },
    tooltip: { y: { formatter: v => new Intl.NumberFormat('ar-EG').format(v) + ' ج.م' } },
}).render();
</script>
@endpush