@extends('admin.layouts.form')
@section('custom_page_style')
    <style>
        table td {
            vertical-align: middle!important;
        }
        #grossProfitMarginChart, #netProfitMarginChart, #incomeExpenseChart {
            height: 400px; /* Fixed height */
            width: 100%;
        }
        .chart-container {
            position: relative;
            height: 400px; /* Fixed height */
            width: 100%; /* Ensure the chart fits within the container */
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid" id="app">
        <div class="block-header">
            {!! Form::open(['url' => url('admin'), 'class' => 'form']) !!}
            <div class="row">
                <div class="col-xs-3">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="material-icons">calendar_month</i>
                        </span>
                        <div class="form-line">
                            {!! Form::text('from', request()->from, ['class' => 'form-control datepicker', 'placeholder' => 'From date']) !!}
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="material-icons">calendar_month</i>
                        </span>
                        <div class="form-line">
                            {!! Form::text('to', request()->to, ['class' => 'form-control datepicker', 'placeholder' => 'To date']) !!}
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="material-icons">list</i></span>
                        {!! Form::select('restaurant_id[]', $restaurants, request()->restaurant_id, ['class' => 'form-control selectpicker', 'data-width' => '250px', 'multiple' => 'multiple']) !!}
                    </div>
                </div>
                <div class="col-xs-3">
                    {!! Form::submit('SEARCH', ['class' => 'btn btn-md btn-success btn-block']) !!}
                </div>
            </div>
            {!! Form::close() !!}
        </div>
        <div class="row clearfix">
            <div class="col-md-3 col-xs-12">
                <div class="info-box bg-cyan hover-expand-effect">
                    <div class="icon">
                        <i class="material-icons">money</i>
                    </div>
                    <div class="content">
                        <div class="text">Total Revenue</div>
                        <div class="number count-to" data-from="0" data-to="{{ $totalRevenue }}" data-speed="1000" data-fresh-interval="20">{{ $totalRevenue }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="info-box bg-purple hover-expand-effect">
                    <div class="icon">
                        <i class="material-icons">money</i>
                    </div>
                    <div class="content">
                        <div class="text">Total Expense</div>
                        <div class="number count-to" data-from="0" data-to="{{ $totalExpense }}" data-speed="1000" data-fresh-interval="20">{{ $totalExpense }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="info-box bg-green hover-expand-effect">
                    <div class="icon">
                        <i class="material-icons">money</i>
                    </div>
                    <div class="content">
                        <div class="text">No of Transactions</div>
                        <div class="number count-to" data-from="0" data-to="{{ $numberOfTransactions }}" data-speed="1000" data-fresh-interval="20">{{ $numberOfTransactions }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="info-box bg-teal hover-expand-effect">
                    <div class="icon">
                        <i class="material-icons">money</i>
                    </div>
                    <div class="content">
                        <div class="text">Revenue/Transaction</div>
                        <div class="number count-to" data-from="0" data-to="{{ $revenuePerTransaction }}" data-speed="1000" data-fresh-interval="20">{{ $revenuePerTransaction }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-6 col-xs-12">
                <div class="chart-container">
                    <canvas id="grossProfitMarginChart"></canvas>
                </div>
                <p class="text-center">${{ number_format($grossProfitMargin, 2) }}<br>Gross Profit Margin</p>
            </div>
            <div class="col-md-6 col-xs-12">
                <div class="chart-container">
                    <canvas id="netProfitMarginChart"></canvas>
                </div>
                <p class="text-center">${{ number_format($netProfitMargin, 2) }}<br>Net Profit Margin</p>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-xs-12">
                <div class="chart-container">
                    <canvas id="incomeExpenseChart"></canvas>
                </div>
                <p class="text-center">Income and Expenses Comparison</p>
            </div>
        </div>
    </div>
@endsection
@section('custom_page_script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.datepicker').bootstrapMaterialDatePicker({
                format: 'Y-MM-DD',
                clearButton: true,
                weekStart: 1,
                time: false
            });
        })
        document.addEventListener('DOMContentLoaded', function () {
            var grossProfitMargin = {{ $grossProfitMargin }};
            var previousGrossProfitMargin = {{ $previousGrossProfitMargin }};
            var netProfitMargin = {{ $netProfitMargin }};
            var previousNetProfitMargin = {{ $previousNetProfitMargin }};
            var chartData = @json($chartData);

            var ctxGross = document.getElementById('grossProfitMarginChart').getContext('2d');
            var ctxNet = document.getElementById('netProfitMarginChart').getContext('2d');
            var ctxIncomeExpense = document.getElementById('incomeExpenseChart').getContext('2d');

            // Create the gross profit margin chart
            var grossProfitMarginChart = new Chart(ctxGross, {
                type: 'bar',
                data: {
                    labels: ['Previous Period', 'Current Period'],
                    datasets: [{
                        label: 'Gross Profit Margin',
                        data: [previousGrossProfitMargin, grossProfitMargin],
                        backgroundColor: ['#FFA726', '#66BB6A'],
                        borderColor: ['#FFA726', '#66BB6A'],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // Create the net profit margin chart
            var netProfitMarginChart = new Chart(ctxNet, {
                type: 'bar',
                data: {
                    labels: ['Previous Period', 'Current Period'],
                    datasets: [{
                        label: 'Net Profit Margin',
                        data: [previousNetProfitMargin, netProfitMargin],
                        backgroundColor: ['#EF5350', '#42A5F5'],
                        borderColor: ['#EF5350', '#42A5F5'],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // Create the income and expense chart
            var incomeExpenseChart = new Chart(ctxIncomeExpense, {
                type: 'bar',
                data: {
                    labels: chartData.labels,
                    datasets: [
                        {
                            label: 'Income',
                            data: chartData.previousValues.slice(0, 1).concat(chartData.currentValues.slice(0, 1)),
                            backgroundColor: ['#34ff26', '#34ff26'],
                            borderColor: ['#34ff26', '#34ff26'],
                            borderWidth: 1
                        },
                        {
                            label: 'Expenses',
                            data: chartData.previousValues.slice(1, 2).concat(chartData.currentValues.slice(1, 2)),
                            backgroundColor: ['#FF9800', '#FF9800'],
                            borderColor: ['#FF9800', '#FF9800'],
                            borderWidth: 1
                        },
                        {
                            label: 'Profit',
                            data: chartData.previousValues.slice(2, 3).concat(chartData.currentValues.slice(2, 3)),
                            backgroundColor: ['#42A5F5', '#42A5F5'],
                            borderColor: ['#42A5F5', '#42A5F5'],
                            borderWidth: 1,
                            type: 'line',
                            fill: false
                        }
                    ]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        });
    </script>
@endsection