<x-app-layout>

<div class="row mt-2">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h3 class="page-title">{{ __('Reports') }}</h3>
            </div>
            <div class="card-body">
                <form method="get">
                    <div class="row">
                        <div class="col-3 form-group">
                            <label class="control-label" for="from">{{ __('From') }}</label>
                            <input type="date"  name="from" for="from" class="form-control" value={{ old('from', Request::get('from', date('Y-m-d')))}}>
                        </div>
                        <div class="col-3 form-group">
                            <label class="control-label" for="to">{{ __('To') }}</label>
                            <input type="date"  name="to" for="to" class="form-control" value={{ old('to', Request::get('to', date('Y-m-d')))}}>
                        </div>

                        <div class="col-3">
                            <label class="control-label">&nbsp;</label><br>
                            <button class="btn btn-primary" type="submit">{{ __('filter by date') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<div class="card">
    <div class="card-header">
        {{ __('Incomes report') }}
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>{{ __('Income') }}</th>
                        <td>{{ formatPrice($incomesTotal) }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('Expense') }}</th>
                        <td>{{ formatPrice($expensesTotal) }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('Profit') }}</th>
                        <td>{{ formatPrice($profit) }}</td>
                    </tr>
                </table>
            </div>
            <div class="col">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>{{ __('Income by category') }}</th>
                        <th>{{ formatPrice($incomesTotal) }}</th>
                    </tr>
                    @foreach($incomesSummary as $inc)
                        <tr>
                            <th>{{ $inc['name'] }}</th>
                            <td>{{ formatPrice($inc['amount']) }}</td>
                        </tr>
                    @endforeach
                </table>
            </div>
            <div class="col">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>{{ __('Expense by category') }}</th>
                        <th>{{ formatPrice($expensesTotal) }}</th>
                    </tr>
                    @foreach($expensesSummary as $inc)
                        <tr>
                            <th>{{ $inc['name'] }}</th>
                            <td>{{ formatPrice($inc['amount']) }}</td>
                        </tr>
                    @endforeach
                </table>
            </div>
        </div>



    </div>
</div>

<x-slot name="after_script">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script>
                    var app = new Vue({
                    el: '#app',
                    mounted:function(){
                       this.$root.load = false;
                    }
                })
    $('.date').datepicker({
        autoclose: true,
        dateFormat: "{{ config('panel.date_format_js') }}"
      })
</script>
</x-slot>
</x-app-layout>