@section('css')
@if( $dir == 'ltr')
	 <link rel="stylesheet" type="text/css"  href="{{ asset('Front/assets/css/styleLink-ltr.css') }}">
 @else
    <link rel="stylesheet" type="text/css"  href="{{ asset('Front/assets/css/styleLink.css') }}">
<style>
.font-weight-bold{color: #c2c6dc;}
</style>
@endif
@endsection
@section('breadcrumb')
     <div class="content-header-left col-md-9 col-12 mb-2">
         <div class="row breadcrumbs-top">
             <div class="col-12">
                 <div class="breadcrumb-wrapper col-12">
                     <ol class="breadcrumb">
                         <li class="breadcrumb-item"><a href="#">{{__('Home')}}</a></li>
                         <li class="breadcrumb-item"><a href="#">{{__('Stats')}}</a> </li>
                         <li class="breadcrumb-item active"><a href="#">{{ config('app.url') }}</a></li>
                     </ol>
                 </div>
             </div>
         </div>
     </div>
@endsection
            @php
                $utcOffset = \Carbon\Carbon::parse(\Carbon\Carbon::now());
                $today=\Carbon\Carbon::parse(\Carbon\Carbon::now())->format('Y-m-d');
                $yesterday=\Carbon\Carbon::parse(\Carbon\Carbon::now())->sub(1,'day') ->format('Y-m-d');
                $seven=\Carbon\Carbon::parse(\Carbon\Carbon::now())->sub(6,'day') ->format('Y-m-d');
                $TwentyNinth=\Carbon\Carbon::parse(\Carbon\Carbon::now())->sub(29,'day') ->format('Y-m-d');
                $months=\Carbon\Carbon::parse(\Carbon\Carbon::now())->sub(1,'months') ->format('Y-m-d');
                $start=\Carbon\Carbon::parse(\Carbon\Carbon::now())->startOf('months')->format('Y-m-d');
                $end=\Carbon\Carbon::parse(\Carbon\Carbon::now())->endOf('months')->format('Y-m-d');
            @endphp

            <div class="content-body">
            <section id="blockquotes" class="row">
                    <div class="col-md-12 mt-1">
                        <div class="group-area" style="    text-align: left;">
                  @if(Route::currentRouteName() == 'Admin.stats.realtime')
 
                    @else
                        <a href="#" class="btn border text-secondary" id="date-range-selector">
                            <div class="d-flex align-items-center cursor-pointer">
                                <i class="feather icon-calendar"></i>&#8203;

                                <span class="ml-2 d-none d-lg-block text-nowrap" id="date-range-value">
                                    @if($range['from'] == $range['to'])
                                        @if(\Carbon\Carbon::createFromFormat('Y-m-d', $range['from'])->isToday())
                                            {{ __('Today') }}
                                        @elseif(\Carbon\Carbon::createFromFormat('Y-m-d', $range['from'])->isYesterday())
                                            {{ __('Yesterday') }}
                                        @else
                                            {{ timestampDateFormat($range['from'],true)['date'] }} - {{timestampDateFormat($range['to'],true)['date']}}

                                        @endif
                                    @else
                                        @if(\Carbon\Carbon::createFromFormat('Y-m-d', $range['from'])->format('Y-m-d') == \Carbon\Carbon::now()->subDays(6)->format('Y-m-d') && \Carbon\Carbon::createFromFormat('Y-m-d', $range['to'])->format('Y-m-d') == \Carbon\Carbon::now()->format('Y-m-d'))
                                            {{ __('The Last 7 Days') }} 
                                        @elseif(\Carbon\Carbon::createFromFormat('Y-m-d', $range['from'])->format('Y-m-d') == \Carbon\Carbon::now()->subDays(29)->format('Y-m-d') && \Carbon\Carbon::createFromFormat('Y-m-d', $range['to'])->format('Y-m-d') == \Carbon\Carbon::now()->format('Y-m-d'))
                                             {{ __('The Last 30 Days') }}  
                                        @elseif(\Carbon\Carbon::createFromFormat('Y-m-d', $range['from'])->format('Y-m-d') == \Carbon\Carbon::now()->startOfMonth()->format('Y-m-d') && \Carbon\Carbon::createFromFormat('Y-m-d', $range['to'])->format('Y-m-d') == \Carbon\Carbon::now()->endOfMonth()->format('Y-m-d'))
                                            {{ __('This month') }}
                                        @elseif(\Carbon\Carbon::createFromFormat('Y-m-d', $range['from'])->format('Y-m-d') == \Carbon\Carbon::now()->subMonthNoOverflow()->startOfMonth()->format('Y-m-d') && \Carbon\Carbon::createFromFormat('Y-m-d', $range['to'])->format('Y-m-d') == \Carbon\Carbon::now()->subMonthNoOverflow()->endOfMonth()->format('Y-m-d'))
                                            {{ __('Last month') }}
                                        @else
                                        {{ timestampDateFormat($range['from'],true)['date'] }} - {{timestampDateFormat($range['to'],true)['date']}}

                                        @endif
                                    @endif
                                </span>

                               <i class="feather icon-chevron-down"></i>
                            </div>
                        </a>
                    @endif
                <div id="date-range" class="border-0 shadow p-0 mt-3">
                    <form action="" method="GET">
                        <div class="d-flex align-items-center">
                            <div class="ranges h-100">
                                <ul class="list-unstyled py-4 px-0 border-left m-0">
                                    <li class="active">
                                        <a href="?from={{timestampDateFormat($today,true)['date']}}&to={{timestampDateFormat($today,true)['date']}}"> {{ __('Today') }}</a>
                                    </li>
                                    <li class="">
                                          <a href="?from={{timestampDateFormat($yesterday,true)['date']}}&to={{timestampDateFormat($today,true)['date']}}">{{ __('Yesterday') }} </a>
                                    </li>
                                    <li class="">
                                     <a href="?from={{timestampDateFormat($seven,true)['date']}}&to={{timestampDateFormat($today,true)['date']}}">{{ __('The Last 7 Days') }} </a>
                                    </li>
                                    <li class="">
                                     <a href="?from={{timestampDateFormat($TwentyNinth,true)['date']}}&to={{timestampDateFormat($today,true)['date']}}">{{ __('The Last 30 Days') }}  </a>
                                    </li>
                                    <li class="">
                                      <a href="?from={{timestampDateFormat($start,true)['date']}}&to={{timestampDateFormat($end,true)['date']}}">{{ __('This month') }} </a>
                                    </li>
                                    <li class="">
                                          <a href="?from={{timestampDateFormat($months,true)['date']}}&to={{timestampDateFormat($today,true)['date']}}">{{ __('Last month') }} </a>
                                    </li>
 
                                    <li class="">
                                        <a class="custom" href="#">{{ __('Custom') }}</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="start-range-container p-3 text-center">
                                    <div class="start-range" data-date="{{\Carbon\Carbon::now()->format('Y-m-d')}}"></div>
                                </div>
                                <div class="end-range-container py-1 pl-3 text-center">
                                    <div class="end-range" data-date="{{\Carbon\Carbon::now()->format('Y-m-d')}}"></div>
                                </div>
                            </div>
                        </div>
                        <div class="foot w-100 p-3 d-flex border-top">
                            <div class="">
                                <span class="start">{{ __('From') }} : <input type="text" name="from" id="start-range" value="" /></span>
                                <span class="separated">-</span>
                                <span class="end mr-2">{{ __('To') }} : <input type="text" name="to" id="end-range" value="" /></span>
                            </div>
                            <div class="mr-auto">
                                <button type="submit" class="btn btn-primary btn-sm">{{ __('Apply') }}</button>
                            </div>
                        </div>
                    </form>
                </div>

                            <hr>
                        </div>
                    </div>
                </section>
                <section id="global-settings" class="card">

                    <div class="card-content">
                        <div class="card-body">
                          @include('Admin.Stats.menu')
                        </div>
                    </div>
                </section>

    @section('script')
<script src="{{ asset('Admin/assets/js/app.js') }}" defer></script>
<script src="{{ asset('Admin/assets/js/app.extras.js') }}" defer></script>
@if( $dir == 'ltr')
	<script type="application/javascript">
        (function ($) {

            $(document).ready(function () {

                $('.start-range').persianDatepicker({
                    inline: true,
                    altField: '#start-range',
                    altFormat: 'YYYY-MM-DD',
                    toolbox: {
                        calendarSwitch: {
                            enabled: true
                        }
                    },
                    navigator: {
                        text: {
                            btnPrevText: ">",
                            btnNextText: "<"
                        },
                        scroll: {
                            enabled: false
                        }
                    },
                    format: 'YYYY-MM-DD',
                    calendarType: 'gregorian',
                    observer: true,
                    initialValue: true,
                    initialValueType: 'gregorian',
                    //calendar:{ persian: {locale: 'en' } },
                    onSelect: function () {
                        $('form .ranges li').removeClass('active');
                        $('form .ranges li:last-child').addClass('active');
                    }
                });

                $('.end-range').persianDatepicker({
                    inline: true,
                    altField: '#end-range',
                    altFormat: 'YYYY-MM-DD',
                    toolbox: {
                        calendarSwitch: {
                            enabled: true
                        }
                    },
                    navigator: {
                        text: {
                            btnPrevText: ">",
                            btnNextText: "<"
                        },
                        scroll: {
                            enabled: false
                        }
                    },
                    format: 'YYYY-MM-DD',
                    calendarType: 'gregorian',
                    observer: true,
                    initialValue: true,
                    initialValueType: 'gregorian',
                    //calendar:{ persian: {locale: 'en' } },
                    onSelect: function () {
                        $('form .ranges li').removeClass('active');
                        $('form .ranges li:last-child').addClass('active');
                    }
                });

                $(document).on('click', '#date-range-selector', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    $('#date-range').fadeToggle();
                });

                $(document).on('click', '#date-range', function (e) {
                    e.stopPropagation();
                });

                $(document).on('click', 'body', function () {
                    $('#date-range').fadeOut();
                });

                $(document).on('click', 'form .ranges li a.custom', function (e) {
                    e.preventDefault();

                    $(this).parent().parent().find('li.active').removeClass('active');
                    $(this).parent().addClass('active');
                });

            });

        })(jQuery);
    </script>
@else
<script type="application/javascript">
        (function ($) {

            $(document).ready(function () {

                $('.start-range').persianDatepicker({
                    inline: true,
                    altField: '#start-range',
                    altFormat: 'YYYY-MM-DD',
                    toolbox: {
                        calendarSwitch: {
                            enabled: true
                        }
                    },
                    navigator: {
                        text: {
                            btnNextText: ">",
                            btnPrevText: "<"
                        },
                        scroll: {
                            enabled: false
                        }
                    },
                    format: 'YYYY-MM-DD',
                    calendarType: 'persian',
                    observer: true,
                    initialValue: true,
                    initialValueType: 'gregorian',
                    calendar:{ persian: {locale: 'en' } },
                    onSelect: function () {
                        $('form .ranges li').removeClass('active');
                        $('form .ranges li:last-child').addClass('active');
                    }
                });

                $('.end-range').persianDatepicker({
                    inline: true,
                    altField: '#end-range',
                    altFormat: 'YYYY-MM-DD',
                    toolbox: {
                        calendarSwitch: {
                            enabled: true
                        }
                    },
                    navigator: {
                        text: {
                            btnNextText: ">",
                            btnPrevText: "<"
                        },
                        scroll: {
                            enabled: false
                        }
                    },
                    format: 'YYYY-MM-DD',
                    calendarType: 'persian',
                    observer: true,
                    initialValue: true,
                    initialValueType: 'gregorian',
                    calendar:{ persian: {locale: 'en' } },
                    onSelect: function () {
                        $('form .ranges li').removeClass('active');
                        $('form .ranges li:last-child').addClass('active');
                    }
                });

                $(document).on('click', '#date-range-selector', function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    $('#date-range').fadeToggle();
                });

                $(document).on('click', '#date-range', function (e) {
                    e.stopPropagation();
                });

                $(document).on('click', 'body', function () {
                    $('#date-range').fadeOut();
                });

                $(document).on('click', 'form .ranges li a.custom', function (e) {
                    e.preventDefault();

                    $(this).parent().parent().find('li.active').removeClass('active');
                    $(this).parent().addClass('active');
                });

            });

        })(jQuery);
    </script>
 @endif
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let h = screen.height,
                w = screen.width;
            document.querySelector('input[name=screen]').value = w + "w * " + h + "h";

        });
    </script>
@endsection