@extends('admin.layout')

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

@section('content')
    <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($sales->chart['xAxis']) !!}');
        let chart_series = JSON.parse('{!! json_encode($sales->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