@extends('layouts.admin')

@section('style')

<link rel="stylesheet" href="{{ mix('css/admin/admin-home.css') }}">
{{--
<style>
    .svg-container {
        display: inline-block;
        position: relative;
        width: 100%;
        padding-bottom: 100%;
        vertical-align: top;
        overflow: hidden;
        overflow-x: auto;
        width: 100% !important;
    }
    /* .svg-content-responsive {
        display: inline-block;
        position: absolute;
        top: 10px;
        left: 0;
    } */
</style>
--}}
@endsection

@section('content')
    {{-- resync interval --}}
    <div class="col-2 d-none d-flex align-items-center justify-content-end" id="drop_timer_wrap">
        <div class="dropdown dropleft">
            @php
                $opts = [5, 10, 15, 30, 60];
            @endphp
            <button type="button" class="btn btn-success dropdown-toggle"
                {{-- title="Last Sync At: {{ date('Y-m-d H:i:s') }}"  --}}
                type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown_timer">
                <i class="fas fa-stopwatch-20"></i>
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdown_timer">
                @foreach($opts as $idx => $opt)
                    <a class="dropdown-item {{ $idx === 0 ? 'active' : '' }}" href="javascript:void(0);" data-value="{{ $opt }}">
                        {{ $opt }} minutes
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="content dashboard-content">
        <div class="container-fluid">
            {{-- favorite --}}
            <div class="row row-fav {{ $favorite ? '' : 'd-none'}}">
                <div class="col-md-12">
                    <div class="card bg-transparent shadow-none">
                        <div class="card-body py-0 p-sm-0">
                            <div class="row user-select-none fav-item-wrap" >
                                <h5 class="text-muted-blue mb-0 d-flex align-items-center"><i class="fas fa-thumbtack mx-2"></i></h5>
                                <template class="d-none">
                                    <div class="col-xs-3 fav-item m-1">
                                        <a href="#">
                                            <div class="icon-wrap">
                                                <i class="fas fa-question"></i>
                                            </div>
                                            <label></label>
                                        </a>
                                    </div>
                                </template>
                                @foreach($favorite as $fav)
                                    <div class="col-xs-3 fav-item m-1">
                                        <a href="{{ $fav['url'] ?? '/' }}">
                                            <div class="icon-wrap">
                                                <i class="{{ $fav['icon'] ?? 'fas fa-question' }}"></i>
                                            </div>
                                            <label>{{ $fav['title'] }}</label>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- summary --}}
            <div class="row row-summary">
                <div class="col-md-12">
                    <div class="card bg-transparent shadow-none placeholder">
                        <div class="card-body py-0 p-sm-0" style="min-height: 120px;">
                            <div class="row item-summ-row">
                                <template id="tpl_summ_item" class="d-none">
                                    <div class="col-xl-3 col-lg-4 col-6 item-summ-col">
{{--                                        <div class="info-box shadow-sm">--}}
{{--                                            <span class="info-box-icon">--}}
{{--                                                <i class=""></i>--}}
{{--                                            </span>--}}
{{--                                            <div class="info-box-content">--}}
{{--                                                <span class="info-box-text"></span>--}}
{{--                                                <span class="info-box-number"></span>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}

                                        <div class="bg-white small-box shadow-sm overflow-hidden small" style="height: calc(100% - 20px)">
                                            <div class="h-100 align-center d-flex flex-column inner justify-content-between position-relative" style="z-index: 1">
                                                <div class="info-box-text d-block mx-auto w-100 text-center mb-3 text-muted text-bold"></div>
                                                <div class="info-box-number mb-0 w-100 w-lg-75 mx-auto text-center"></div>
                                            </div>
                                            <div class="icon info-box-icon d-block  ">
                                                <i class=""></i>
{{--                                                <i class="ion ion-pie-graph"></i>--}}
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="overlay overlay-loading">
                            <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                        </div>
                        <div class="overlay overlay-error d-none">
                            <label class="error-msg text-center">
                                Oops, your dashboard is currently not available.<br>
                                Dashboard will be updated automatically upon the next hour.
                            </label>
                        </div>
                        <div class="w-100 text-right">
                            <small class="text-right px-1 row-info">
                                <label>Last Updated At:</label>
                                <i class="info-time">-</i>
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            @if (!auth()->user()->checkPermissionTo(\App\Skale\Entities\PermissionEntity::MENU_ACCESS_PERMISSION))
            {{-- chart --}}
            <div class="row row-chart">
                <div class="col-md-12 flex-center error-wrapper d-none">
                    <label class="error-msg text-center">
                        Oops, Something went wrong on chart rendering!<BR>
                        Please retry again later.
                    </label>
                </div>
                {{-- <template class="d-none">
                    <div class="col-md-6 col-sm-12">
                        <div class="card">
                            <div class="pivot-wrapper"></div>
                        </div>
                    </div>
                </template> --}}
                @for($i=0, $max=4; $i<$max; ++$i)
                    <div class="col-md-6 col-sm-12 card-wrap default-load">
                        <div class="card placeholder">
                            <div class="card-header border-0 flex-center d-none">
                                <h3 class="card-title" title="-">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                    <span></span>
                                </h3>

                                <div class="card-tools">
                                    <div class="btn-group show">
                                        <button type="button" class="btn" data-toggle="calendar-filter" data-value="filter" title="-">
                                            <i class="fas fa-calendar"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                            <i class="fas fa-expand"></i>
                                        </button>
                                        <button type="button" class="btn" data-toggle="dropdown" title="Action"
                                            data-display="static" aria-expanded="true">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right text-right dropdown-menu-chart" role="menu">
                                            {{-- <a href="javascript:void(0);" class="dropdown-item" data-value="filter">Date Filter</a> --}}
                                            <a href="javascript:void(0);" class="dropdown-item" data-value="reset">Reset Zoom</a>
                                            {{-- <a href="javascript:void(0);" class="dropdown-item" data-value="unstack">Unstack View</a> --}}
                                            <a href="javascript:void(0);" class="dropdown-item" data-value="refresh">Refresh</a>
                                            <a href="{{ route('analytics') }}" class="dropdown-item" data-value="to_analystic">Go To Analytics</a>
                                            <a href="javascript:void(0);" class="dropdown-item" data-value="unpin">Unpin</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-wrapper"></div>
                            </div>
                            <div class="overlay overlay-loading d-none">
                                <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                            </div>
                            <div class="overlay overlay-error d-none">
                                <label class="error-msg text-center">
                                    Oops, Something went wrong!
                                </label>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>

            {{-- footer info --}}
            <div class="row row-info">
                <div class="col-md-12 text-right">
                    <small>
                        <label>Last Sync Trigger At:</label>
                        <i class="info-time">{{ now()->toDateTimeString() }}</i>
                    </small>
                </div>
            </div>
            @endif
        </div>
    </div>

    @component('components.utility.template_popup', ['id' => 'popup_date_filter', 'is_footer_column' => false])
        @slot('slot_header')
            <label>Filtering</label>
        @endslot

        @slot('slot')
            <x-utility.date_range />
        @endslot

        @slot('slot_footer')
            <button class="btn btn-light" data-dismiss="modal">Close</button>
            <button class="btn btn-primary">Filter</button>
        @endslot
    @endcomponent

    <x-utility.modal_confirmation />

@endsection

@section('script')
<script src="https://cdn.plot.ly/plotly-basic-latest.min.js" defer></script>
{{-- <script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script> --}}
<script type="text/javascript" src="https://www.google.com/jsapi" defer></script>
<script type="text/javascript" src="https://pivottable.js.org/dist/pivot.min.js" defer></script>
<script type="text/javascript" src="https://pivottable.js.org/dist/plotly_renderers.min.js" defer></script>
<script src="{{ mix('js/admin/admin-maint.js') }}" defer></script>
<script src="{{ mix('js/admin/admin-home.js') }}" defer></script>
@endSection