@extends('layouts.app')

@section('title', 'الإيراد اليومي')

@php
    $methodMeta = [
        'cash' => ['label' => 'نقدي', 'color' => 'success', 'icon' => 'cash'],
        'card' => ['label' => 'بطاقة', 'color' => 'info', 'icon' => 'credit-card'],
        'bank_transfer' => ['label' => 'تحويل', 'color' => 'primary', 'icon' => 'building-bank'],
        'wallet' => ['label' => 'محفظة', 'color' => 'purple', 'icon' => 'wallet'],
        'cheque' => ['label' => 'شيك', 'color' => 'warning', 'icon' => 'file-invoice'],
    ];
@endphp

@section('content')
<x-clinic-hero
    title="الإيراد اليومي"
    subtitle="إيرادات العيادة موزّعة حسب اليوم وطريقة الدفع"
    icon="ti-cash"
    tone="payments"
    :stats="[
        ['icon' => 'ti-coins', 'value' => \App\Support\Currency::format($kpis['total'], 0), 'label' => 'إجمالي الفترة'],
        ['icon' => 'ti-receipt', 'value' => number_format($kpis['count']), 'label' => 'عملية دفع'],
        ['icon' => 'ti-chart-line', 'value' => \App\Support\Currency::format($kpis['avg_per_day'], 0), 'label' => 'متوسط يومي'],
        ['icon' => 'ti-calendar', 'value' => $kpis['days'], 'label' => 'يوم في الفترة'],
    ]"
>
    <x-slot:actions>
        <button class="btn btn-light" onclick="window.print()">
            <i class="ti ti-printer me-1"></i> طباعة
        </button>
        <a href="{{ route('reports.index') }}" class="btn btn-outline-light">
            <i class="ti ti-arrow-right me-1"></i> كل التقارير
        </a>
    </x-slot:actions>
</x-clinic-hero>

<div class="card clinic-section mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small">من تاريخ</label>
                <input type="date" name="from" value="{{ $from }}" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label small">إلى تاريخ</label>
                <input type="date" name="to" value="{{ $to }}" class="form-control">
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary w-100">
                    <i class="ti ti-filter me-1"></i> تطبيق الفترة
                </button>
            </div>
            <div class="col-md-3 text-md-end small text-muted">
                {{ \Carbon\Carbon::parse($from)->translatedFormat('j M Y') }}
                ← {{ \Carbon\Carbon::parse($to)->translatedFormat('j M Y') }}
            </div>
        </form>
    </div>
</div>

<div class="row row-cards g-3">
    <div class="col-xl-8">
        <div class="card clinic-section">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-chart-area-line me-1"></i> الإيرادات اليومية</h3>
            </div>
            <div class="card-body">
                @if(empty(array_filter($totals)))
                    <div class="empty-card-rich">
                        <i class="ti ti-chart-bar-off"></i>
                        <h3>لا توجد مدفوعات في هذه الفترة</h3>
                        <p>غيّر النطاق الزمني أو ابدأ بتسجيل دفعات.</p>
                    </div>
                @else
                    <div id="dailyTrend" style="min-height: 320px"></div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card clinic-section">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-credit-card me-1"></i> طرق الدفع</h3>
            </div>
            <div class="card-body">
                @if($byMethod->isEmpty())
                    <div class="text-muted text-center py-4">
                        <i class="ti ti-credit-card-off fs-2 d-block mb-2"></i>
                        لا توجد بيانات.
                    </div>
                @else
                    <div id="methodChart" style="min-height: 200px"></div>
                    <div class="mt-3">
                        @foreach($byMethod as $m)
                            @php $mm = $methodMeta[$m->payment_method] ?? ['label' => $m->payment_method, 'color' => 'secondary', 'icon' => 'circle']; @endphp
                            <div class="d-flex justify-content-between align-items-center py-2"
                                 style="border-bottom: 1px dashed #f1f5f9;">
                                <span class="status-pill bg-{{ $mm['color'] }}-lt text-{{ $mm['color'] }}">
                                    <i class="ti ti-{{ $mm['icon'] }}"></i>{{ $mm['label'] }}
                                </span>
                                <div class="text-end">
                                    <strong class="text-mono-en">{{ number_format($m->total, 0) }}</strong>
                                    <x-sar class="text-muted" />
                                    <div class="text-muted small">{{ $m->count }} عملية</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="card clinic-section mt-3">
    <div class="card-header">
        <h3 class="card-title"><i class="ti ti-list me-1"></i> تفصيل يومي</h3>
    </div>
    @if($daily->isEmpty())
        <div class="card-body">
            <div class="empty-card-rich">
                <i class="ti ti-calendar-off"></i>
                <h3>لا توجد بيانات تفصيلية</h3>
            </div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-vcenter clinic-table mb-0">
                <thead>
                    <tr>
                        <th>التاريخ</th>
                        <th>اليوم</th>
                        <th class="text-center">عدد العمليات</th>
                        <th class="text-end">إجمالي اليوم</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($daily as $d)
                        @php $date = \Carbon\Carbon::parse($d->date); @endphp
                        <tr>
                            <td class="text-mono-en">{{ $date->format('Y-m-d') }}</td>
                            <td class="text-muted">{{ $date->translatedFormat('l') }}</td>
                            <td class="text-center">{{ $d->count }}</td>
                            <td class="text-end fw-bold text-success text-mono-en">
                                {{ number_format($d->total, 2) }}
                                <x-sar class="text-muted" />
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr style="background:#f8fafc;">
                        <th colspan="2" class="text-end">الإجمالي</th>
                        <th class="text-center">{{ number_format($kpis['count']) }}</th>
                        <th class="text-end fw-bold text-success text-mono-en">
                            {{ number_format($kpis['total'], 2) }} <x-sar class="text-muted" />
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const cairoFont = { fontFamily: 'Cairo, sans-serif' };
    const CURRENCY_CODE = @json(\App\Support\Currency::current());

    @if(! empty(array_filter($totals)))
    new ApexCharts(document.querySelector('#dailyTrend'), {
        chart: { type: 'area', height: 320, toolbar: { show: false }, ...cairoFont },
        series: [
            { name: `إيرادات (${CURRENCY_CODE})`, type: 'area', data: @json($totals) },
            { name: 'عمليات', type: 'line', data: @json($counts) },
        ],
        colors: ['#16a34a', '#0ea5e9'],
        stroke: { curve: 'smooth', width: [3, 2] },
        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: .4, opacityTo: 0 } },
        xaxis: { categories: @json($labels), labels: { style: cairoFont } },
        yaxis: [
            { title: { text: `إيرادات (${CURRENCY_CODE})`, style: cairoFont },
              labels: { style: cairoFont, formatter: v => v.toLocaleString('ar-EG') } },
            { opposite: true, title: { text: 'عمليات', style: cairoFont },
              labels: { style: cairoFont } },
        ],
        legend: { position: 'top', fontFamily: 'Cairo' },
        grid: { borderColor: '#f1f5f9' },
        dataLabels: { enabled: false },
        tooltip: { style: cairoFont },
    }).render();
    @endif

    @if($byMethod->isNotEmpty())
    new ApexCharts(document.querySelector('#methodChart'), {
        chart: { type: 'donut', height: 200, ...cairoFont },
        series: @json($byMethod->pluck('total')->map(fn ($v) => (float) $v)->all()),
        labels: @json($byMethod->pluck('payment_method')->map(fn ($k) => $methodMeta[$k]['label'] ?? $k)->all()),
        colors: ['#16a34a', '#0ea5e9', '#3b82f6', '#8b5cf6', '#f59e0b'],
        legend: { show: false },
        dataLabels: { style: cairoFont, formatter: v => Math.round(v) + '%' },
        plotOptions: { pie: { donut: { size: '60%' } } },
    }).render();
    @endif
});
</script>
@endpush