<?php $__env->startSection('title', 'پنل مدیریت | نمودارهای فروش'); ?>
<?php $__env->startSection('content'); ?>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">نمودارهای فروش</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <?php echo e(Breadcrumbs::render('report-charts')); ?>

                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid bg-white py-3">
                <div class="mb-4 row">
                    <div class="col-lg-2 col-12">
                        <label for="from">از تاریخ</label>
                        <input type="text" id="from" name="from" class="form-control" autocomplete="off">
                        <input type="hidden" id="from_alt" name="from_alt">
                    </div>
                    <div class="col-lg-2 col-12">
                        <label for="until">تا تاریخ</label>
                        <input type="text" id="until" name="until" class="form-control" autocomplete="off">
                        <input type="hidden" id="until_alt" name="until_alt">
                    </div>
                    <div class="col-lg-2 col-12">
                        <br>
                        <button type="button" id="send-button" class="btn btn-info btn-block mt-lg-2">
                            <span class="fa fa-filter"></span> فیلتر
                        </button>
                    </div>
                </div>
                <div>
                    <div class="col-lg-10 offset-lg-1 mb-4 border p-3 col-12" id="orders_reports_count_chart"
                         style="height: 400px;"></div>

                    <div class="col-lg-10 offset-lg-1 mb-4 border p-3 col-12" id="orders_reports_price_chart"
                         style="height: 400px;"></div>
                </div>
            </div>
        </section>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('footer'); ?>
    <script>
        const ordersReportsCountChart = new Chartisan({
            el: '#orders_reports_count_chart',
            url: "<?php echo route('charts.'.'orders_reports_count_chart'); ?>",
            hooks: new ChartisanHooks()
                .colors(['#dc3545', '#17a2b8', '#007bff', '#ffc107', '#28a745'])
                .responsive()
                .options({
                    options: setDefaultChartJsOptions('تعداد سفارشات', true)
                })
        });

        const ordersReportsPriceChart = new Chartisan({
            el: '#orders_reports_price_chart',
            url: "<?php echo route('charts.'.'orders_reports_price_chart'); ?>",
            hooks: new ChartisanHooks()
                .colors(['#dc3545', '#17a2b8', '#007bff', '#ffc107', '#28a745'])
                .responsive()
                .options({
                    options: setDefaultChartJsOptions('میزان فروش', true, true, true)
                })
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#from').MdPersianDateTimePicker({
                targetTextSelector: '#from',
                targetDateSelector: '#from_alt',
                disableAfterToday: true,
                dateFormat: 'yyyy/MM/dd'
            });
            $('#until').MdPersianDateTimePicker({
                targetTextSelector: '#until',
                targetDateSelector: '#until_alt',
                disableAfterToday: true,
                dateFormat: 'yyyy/MM/dd'
            });

            $('#send-button').on('click', function (e) {
                var from = $('#from_alt').val();
                var until = $('#until_alt').val();

                ordersReportsCountChart.update({
                    url: "<?php echo route('charts.'.'orders_reports_count_chart'); ?>" + `?from=${from}&until=${until}`,
                });

                ordersReportsPriceChart.update({
                    url: "<?php echo route('charts.'.'orders_reports_price_chart'); ?>" + `?from=${from}&until=${until}`,
                });
            });
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/masomi/armshop/resources/views/admin/reports/charts.blade.php ENDPATH**/ ?>