@extends('layouts.app')

@section('breadcrumbs')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb my-0 ms-2">
            <li class="breadcrumb-item">
                <a href="/">
                    <svg class="nav-icon">
                        <use xlink:href="/images/sprites/free.svg#cil-home"></use>
                    </svg>
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="/reports">
                    <span>Reports</span>
                </a>
            </li>
            <li class="breadcrumb-item active"><span>Product Sales by Month</span></li>
        </ol>
    </nav>
@endsection

@section('content')
	<div class="card mb-4">
		<div class="card-body">

			@include('reports.product-sales-by-month.filter', $filter_parameters)

			@if ($range_limited)
			<p class="text-muted small mb-0 mt-3">Showing the latest 24 months of this range.</p>
			@endif

		</div>
	</div>

	@include('partials.messages')

	<div class="card mb-4">
		<div class="card-header">Product Sales by Month</div>

		<div class="card-body">
			<!--<div class="pb-2 mb-3 border-bottom">
				<div class="form-group text-end">
					<a class="btn btn-primary" href="/queries/create" role="button">Export</a>
				</div>
			</div>-->

			@if (count($items) > 0)
			<div class="table-responsive font-monospace">
				<table class="table table-striped align-middle">
					<thead>
						<tr>
							<th>Product</th>
							@foreach ($months as $label)
							<th class="text-end">{{ $label }}</th>
							@endforeach
							<th class="text-end">Total</th>
						</tr>
					</thead>
					<tbody>
					@foreach ($items as $item)
						<tr>
							<td>{{ $item->description }}</td>
							@foreach ($item->monthly as $quantity)
							<td class="text-end">{{ number_format($quantity) }}</td>
							@endforeach
							<td class="text-end">{{ number_format($item->total) }}</td>
						</tr>
					@endforeach
					</tbody>
				</table>
			</div>
			{!! $items->links() !!}
			@else
			<p>No items found.</p>
			@endif
		</div>
	</div>
@endsection('content')