@extends('admin.layout')

@section('title', 'گزارش دوره ای درآمد')

@section('content')
    <div class="block block-rounded rounded-3">
        <div class="block-content fs-sm p-0 rounded-3">

            <table class="table table-bordered table-hover text-center table-vcenter ltr rounded-3">
                <thead>
                <tr>
                    <th width="15%"></th>
                    <th width="10%">today</th>
                    <th width="10%">yesterday</th>
                    <th width="10%">week</th>
                    <th width="10%">last week</th>
                    <th width="10%">month</th>
                    <th width="10%">last month</th>
                    <th width="10%">year</th>
                    <th width="15%" class="bg-gray-lighter">total</th>
                </tr>
                </thead>
                <tbody>
                @foreach($incomes->gateways as $gateway)
                    @php($today = $incomes->today[$gateway] ?? 0)
                    @php($yesterday = $incomes->yesterday[$gateway] ?? 0)
                    @php($week = $incomes->week[$gateway] ?? 0)
                    @php($lastWeek = $incomes->lastWeek[$gateway] ?? 0)
                    @php($month = $incomes->month[$gateway] ?? 0)
                    @php($lastMonth = $incomes->lastMonth[$gateway] ?? 0)
                    @php($year = $incomes->year[$gateway] ?? 0)
                    @php($total = $incomes->total[$gateway] ?? 0)
                    <tr>
                        <th>{{$gateway}}</th>
                        <td class="number-format">{{$today}}</td>
                        <td class="number-format">{{$yesterday}}</td>
                        <td class="number-format">{{$week}}</td>
                        <td class="number-format">{{$lastWeek}}</td>
                        <td class="number-format">{{$month}}</td>
                        <td class="number-format">{{$lastMonth}}</td>
                        <td class="number-format">{{$year}}</td>
                        <th class="bg-gray-lighter number-format">{{$total}}</th>
                    </tr>
                @endforeach
                <tr>
                    @php($totalToday = array_sum(array_values($incomes->today)))
                    @php($totalYesterday = array_sum(array_values($incomes->yesterday)))
                    @php($totalWeek = array_sum(array_values($incomes->week)))
                    @php($totalLastWeek = array_sum(array_values($incomes->lastWeek)))
                    @php($totalMonth = array_sum(array_values($incomes->month)))
                    @php($totalLastMonth = array_sum(array_values($incomes->lastMonth)))
                    @php($totalYear = array_sum(array_values($incomes->year)))
                    @php($totalTotal = array_sum(array_values($incomes->total)))
                    <th class="bg-gray-lighter">TOTAL</th>
                    <th class="bg-gray-lighter number-format">{{$totalToday}}</th>
                    <th class="bg-gray-lighter number-format">{{$totalYesterday}}</th>
                    <th class="bg-gray-lighter number-format">{{$totalWeek}}</th>
                    <th class="bg-gray-lighter number-format">{{$totalLastWeek}}</th>
                    <th class="bg-gray-lighter number-format">{{$totalMonth}}</th>
                    <th class="bg-gray-lighter number-format">{{$totalLastMonth}}</th>
                    <th class="bg-gray-lighter number-format">{{$totalYear}}</th>
                    <th class="bg-success-light text-success number-format">{{$totalTotal}}</th>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="block block-rounded rounded-3">
        <div class="block-content fs-sm rounded-3">
            <form class="row row-cols-lg-auto g-3 align-items-center pb-5">
                <div class="col-12">
                    <label class="form-label" for="date-form">شروع</label>
                    <input type="text" class="form-control ltr text-center" id="date-from" data-name="date_from"
                           value="{{$date->from}}">
                    <input type="hidden" name="date_from" value="{{$date->from}}">
                </div>
                <div class="col-12">
                    <label class="form-label" for="date-to">پایان</label>
                    <input type="text" class="form-control ltr text-center" id="date-to" data-name="date_to"
                           value="{{$date->to}}">
                    <input type="hidden" name="date_to" value="{{$date->to}}">
                </div>
                <div>
                    <button type="submit" class="btn btn-primary mt-4">مشاهده نمودار</button>
                </div>
            </form>

            <div id="charts"></div>
        </div>
    </div>

@endsection

@section('js-footer')
    <link rel="stylesheet"
          href="https://unpkg.com/persian-datepicker@latest/dist/css/persian-datepicker.min.css"/>
    <style>
        .datepicker-container div, .datepicker-container span {
            font-family: Inter, Vazirmatn, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
        }
    </style>

    <script src="https://unpkg.com/persian-date@latest/dist/persian-date.min.js"></script>
    <script src="https://unpkg.com/persian-datepicker@latest/dist/js/persian-datepicker.min.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" type="text/javascript"></script>

    <script>
        $(function () {
            $("#date-from").persianDatepicker({
                format: 'YYYY/MM/DD',
                onSelect: function (unix) {
                    $('[name="date_from"]').val(new Date(unix).toISOString().substring(0, 10));
                }
            });
            $("#date-to").persianDatepicker({
                format: 'YYYY/MM/DD',
                onSelect: function (unix) {
                    $('[name="date_to"]').val(new Date(unix).toISOString().substring(0, 10));
                }
            });

            $('.number-format').each(function () {
                let price = new Intl.NumberFormat('fa-IR').format(Number($(this).text()) / 10);
                $(this).text(price);
            })
        });

        let chart_xAxis = JSON.parse('{!! json_encode($incomes->chart['xAxis']) !!}');
        let chart_series = JSON.parse('{!! json_encode($incomes->chart['series']) !!}');

        jQuery(function () {
            if (!window.isMobile) {
                $("#sidebar_toggle").click();
            }
            setTimeout(function () {
                Highcharts.chart('charts', {

                    title: {
                        text: ''
                    },
                    tooltip: {
                        crosshairs: true,
                        shared: true
                    },
                    yAxis: {
                        title: {
                            text: ''
                        }
                    },
                    xAxis: {
                        categories: chart_xAxis
                    },
                    series: chart_series,
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                }
                            }
                        }]
                    }

                });
            }, 1000);
        });

    </script>

@endsection