@extends('admin.layouts.master')
@section('title', 'تقرير المشتريات بالفترة')
@section('page_title', 'تقرير المشتريات بالفترة')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.reports.index') }}">{{ __('admin.reports') }}</a></li>
    <li class="breadcrumb-item active">المشتريات بالفترة</li>
@endsection

@section('content')
@include('admin.reports._filter', ['title' => 'تقرير المشتريات', 'showGranularity' => true])

<div class="card"><div class="card-body">
    <canvas id="purchasesChart" height="70"></canvas>
    <table class="table table-sm table-bordered mt-3">
        <thead class="bg-light"><tr>
            <th>الفترة</th><th>عدد الفواتير</th><th>الإجمالي</th><th>المدفوع</th>
        </tr></thead>
        <tbody>
            @foreach($report['rows'] as $r)
                <tr>
                    <td>{{ $r->period }}</td>
                    <td>{{ $r->invoice_count }}</td>
                    <td><b>{{ number_format((float) $r->total, 2) }}</b></td>
                    <td>{{ number_format((float) $r->paid, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
        <tfoot class="bg-light"><tr>
            <th>الإجمالي</th>
            <th>{{ $report['totals']['invoice_count'] }}</th>
            <th><b>{{ number_format($report['totals']['total'], 2) }}</b></th>
            <th>{{ number_format($report['totals']['paid'], 2) }}</th>
        </tr></tfoot>
    </table>
</div></div>
@endsection

@push('scripts')
<script>
new Chart(document.getElementById('purchasesChart'), {
    type: 'line',
    data: {
        labels: @json($report['rows']->pluck('period')),
        datasets: [{
            label: 'إجمالي المشتريات',
            data: @json($report['rows']->pluck('total')),
            borderColor: '#17a2b8', backgroundColor: 'rgba(23,162,184,0.15)', fill: true, tension: 0.3,
        }]
    },
});
</script>
@endpush