@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="row">
    <div class="col-md-3"><div class="info-box bg-success"><span class="info-box-icon"><i class="fas fa-shopping-cart"></i></span>
        <div class="info-box-content"><span class="info-box-text">عدد الفواتير</span>
            <span class="info-box-number">{{ number_format($report['totals']['invoice_count']) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-info"><span class="info-box-icon"><i class="fas fa-coins"></i></span>
        <div class="info-box-content"><span class="info-box-text">إجمالي المبيعات</span>
            <span class="info-box-number">{{ number_format($report['totals']['total'], 2) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-warning"><span class="info-box-icon"><i class="fas fa-percent"></i></span>
        <div class="info-box-content"><span class="info-box-text">الضريبة</span>
            <span class="info-box-number">{{ number_format($report['totals']['tax'], 2) }}</span></div></div></div>
    <div class="col-md-3"><div class="info-box bg-secondary"><span class="info-box-icon"><i class="fas fa-money-bill"></i></span>
        <div class="info-box-content"><span class="info-box-text">المحصّل</span>
            <span class="info-box-number">{{ number_format($report['totals']['paid'], 2) }}</span></div></div></div>
</div>

<div class="card">
    <div class="card-header"><h3 class="card-title">المبيعات لكل فترة</h3></div>
    <div class="card-body">
        <canvas id="salesChart" height="80"></canvas>
        <table class="table table-sm table-bordered mt-3">
            <thead class="bg-light"><tr>
                <th>الفترة</th><th>عدد الفواتير</th><th>إجمالي قبل الخصم</th>
                <th>الخصم</th><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>{{ number_format((float) $r->subtotal, 2) }}</td>
                        <td>{{ number_format((float) $r->discount, 2) }}</td>
                        <td>{{ number_format((float) $r->tax, 2) }}</td>
                        <td>{{ number_format((float) $r->shipping, 2) }}</td>
                        <td><b>{{ number_format((float) $r->total, 2) }}</b></td>
                        <td class="text-success">{{ number_format((float) $r->paid, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-light"><tr>
                <th>المجموع</th>
                <th>{{ $report['totals']['invoice_count'] }}</th>
                <th>{{ number_format($report['totals']['subtotal'], 2) }}</th>
                <th>{{ number_format($report['totals']['discount'], 2) }}</th>
                <th>{{ number_format($report['totals']['tax'], 2) }}</th>
                <th>{{ number_format($report['totals']['shipping'], 2) }}</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>
$(function () {
    new Chart(document.getElementById('salesChart'), {
        type: 'line',
        data: {
            labels: @json($report['rows']->pluck('period')),
            datasets: [{
                label: 'إجمالي المبيعات',
                data: @json($report['rows']->pluck('total')),
                borderColor: '#28a745', backgroundColor: 'rgba(40,167,69,0.15)',
                fill: true, tension: 0.3,
            }]
        },
        options: { responsive: true, maintainAspectRatio: true }
    });
});
</script>
@endpush