@extends('layouts.admin-layout')
@section('title', 'All Footer Pages')
@section('content')

    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <h2 class="mb-4">Monthly Product Profit Report</h2>

                <div class="card card-primary card-box-shadow">
                    <div class="card-body">
                        <table id="example" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th>Product Name</th>
                                <th>Actual Cost</th>
                                <th>Selling Price</th>
                                <th>Quantity Sold</th>
                                <th>Total Profit</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($data as $item)
                                <tr>
                                    <td>{{ $item['product_name'] }}</td>
                                    <td>$ {{ number_format($item['actual_cost'], 2) }}</td>
                                    <td>$ {{ number_format($item['selling_price'], 2) }}</td>
                                    <td>{{ $item['quantity'] }}</td>
                                    <td>$ {{ number_format($item['profit'], 2) }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                            <tfoot>
                            <tr class="bg-success text-white">
                                <th colspan="4" class="text-right">Total Profit:</th>
                                <th>$ {{ number_format($totalProfit, 2) }}</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

            </div>
    </section>
    </div>
@endsection
@section('script')

    <script>

        $(document).ready(function () {
            $("table").DataTable({
                order: [0, 'dec']
            });
        });
    </script>

@endsection