@extends('layouts.admin')


@section('style')
    <link rel="stylesheet" type="text/css" href="https://pivottable.js.org/dist/pivot.css">
    <link rel="stylesheet" href="{{ mix('css/admin-maint-style.css') }}">
    <style>
        div#api_token_container {
            -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25);
        }

        .main-color, button#btn-refresh-api-token {
            color: #17a2b8;
        }

        div#api_token_container {
            display: grid;
            vertical-align: top;
            width: 400px;
            min-height: 50px;
            padding: 0px 10px;
            border-radius: 10px;
            background-color: #FFFFFF;
            grid-template-columns: 20% 60% 20%;
            margin-bottom: 20px;
            align-content: center;
            align-items: center;
        }

        div#api_token_container div {
            text-align: center;
        }

        div#api_token_content {
            background-color: #e9e9e9;
            font-weight: bold;
            word-break: break-all;
            padding: 0px 1em;
            cursor: pointer;
            height: 100%;
        }

        button#btn-refresh-api-token {
            font-weight: bold;
            background-color: #FFFFFF;
            border: 0px;
            padding: 0px;
        }

        button .fas {
            margin-right: 10px;
        }

        .title, .btn-selection {
            color: #555;
        }
        .select2 {
            width: 100% !important;
        }

        .btn-wrap button {
            margin-bottom: 10px;
            margin-right: 5px;
        }
        .btn-wrap.padding {
            padding: 15px;
        }
        .btn-wrap.padding button {
            padding: 10px 20px;
        }

        .form-group label.col-md-2 {
            padding: .375rem 0rem;
        }
        .form-group .row {
            margin-left: 0px;
        }

        .filter-sel-row {
            background-color: #F8F8F8;
            border-radius: 10px;
            margin-bottom: 20px;
            padding: 15px;
        }

        .step-title, .separator {
            font-weight: 700;
        }

        .separator {
            color: #6A6A6A;
            padding: 0px 10px;
        }

        .btn-save-view, .btn-save-view:hover, .btn-save-view:focus, .btn-save-view:active {
            background-color: #17a2b8;
            color: #fff;
        }
        .btn-selection {
            background-color: #fff;
            border: 1px solid #6A6A6A;
        }
        .btn-selection.active {
            background-color: #6A6A6A;
            color: #fff;
        }
        .btn-save-view:hover, .btn-selection:hover {
            opacity: 0.6;
        }

        /*pivot table style*/
        div#pivotUI {
            box-sizing: border-box;
            width: 100%;
            overflow: auto;
            text-align: center;
        }
        div#pivotUI::-webkit-scrollbar {
            width: 12px; /* width of the entire scrollbar */
        }
        div#pivotUI::-webkit-scrollbar-track {
            background: #ecf0f5; /* color of the tracking area */
        }
        div#pivotUI::-webkit-scrollbar-thumb {
            background-color: #6A6A6A;
            border-radius: 20px;
            border: 5px solid #ecf0f5;
        }

        .pvtUi, .pvtUi *{
            color:#4b515f;
        }
        .pvtAxisContainer, .pvtVals {
            border: 1px solid #e2e5f2;
            background-color: #fff;
        }

        .pvtAxisContainer.pvtUnused {
            max-width: 100%;
            width: auto;
        }

        .pvtAxisContainer li span.pvtAttr, select.pvtAttrDropdown{
            word-wrap: normal;
            position: relative;
            background: #f0f0f5;
            border: 1px solid #e2e5f2;
            font-size: .9rem;
            border-radius: 5px;
            padding: .25rem;
        }
        li.ui-sortable-handle {
            text-align: left;
        }
        table.pvtTable thead tr th, table.pvtTable tbody tr th {
            background-color: #f0f5f5;
            border: 1px solid #e2e5f2;
        }
        table.pvtTable tbody tr td{
            border: 1px solid #e2e5f2;
        }
        .pvtUiCell .select2{
            font-size: .9rem;
        }
        .pvtUiCell .select2-selection--single {
            border: 1px solid #e2e5f2;
            padding-top: 0.2rem;
        }

        .form-check:not(.disabled) .form-check-input, .form-check:not(.disabled) .form-check-label {
            cursor: pointer;
        }

        .disable-select {
            user-select: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
    </style>
@endSection

@php
    $tabs = [];
    $num_tab = 0;
    foreach ($metadata as $group => &$each) {
        ++$num_tab;
        $tabs[] = [
            'selected' => $num_tab === 1,
            'group' => $group,
            'title' => $each['caption'],
        ];
    }
    $num_section = 0;
@endphp

@section('content')
    @component('admin.components.tabs_custom', ['tabs' => $tabs, 'id' => 'mainTab'])
        @slot('slot_common')
            <div class="row filter-sel-row">
                <!-- Data selection -->
                <div class="col-md-9">
                    <div class="row">
                        <div data-origCol="col-md-6" class="col-md-6">
                            <h6 class="title step-title">{{ ++$num_section }}. Select a data set</h6>
                            <div class="btn-wrap data-set-wrap">
                                <template class="d-none">
                                    <button class="btn btn-selection"></button>
                                </template>
                            </div>
                        </div>
                        {{--
                        <div class="col-md-1 d-none d-md-block">
                            <h1 class="separator">&gt;</h1>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <h6 class="title step-title">{{ ++$num_section }}. Select or create a view</h6>
                                <select name="data_view" class="form-control select2 w-100">
                                    <option value="">Select a view</option>
                                    <option value="create">Create a view</option>
                                </select>
                            </div>
                        </div>
                        --}}
                        <div data-origCol="col-md-1" data-hiddenableFullCol="1" class="col-md-1 d-none d-md-block">
                            <h1 class="separator h-100 flex-center">&gt;</h1>
                        </div>
                        <div data-origCol="col-md-5" class="col-md-5">
                            <div class="form-group">
                                <h6 class="title step-title overflow-hidden d-flex justify-content-between align-items-center">
                                    {{ ++$num_section }}. Select View Columns
                                    <div class="form-check d-inline-block ml-1">
                                        <input class="form-check-input" type="checkbox" value="" id="check-show-advance">
                                        <label class="form-check-label disable-select" for="check-show-advance"><small>Advance</small></label>
                                    </div>
                                </h6>
                                <select name="column_filter" multiple class="form-control select2 w-100"></select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <h6 class="title step-title">{{ ++$num_section }}. Select Data Filter</h6>
                                <select name="data_filter" multiple class="form-control select2 w-100"></select>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="row row-data-filter">
                                <template class="tpl-daterangepicker d-none">
                                    @component('components.utility.date_range', ['is_half_col' => true])
                                    @endcomponent
                                </template>

                                <template class="tpl-select-ajax d-none">
                                    <div class="form-group col-md-6">
                                        <label class="title">Select</label>
                                        <select name="" class="form-control select2" multiple data-ajax-url="" data-normalSearch="true"></select>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    {{--
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <h6 class="title step-title">{{ ++$num_section }}. Select View Columns</h6>
                                <select name="column_filter" multiple class="form-control select2 w-100"></select>
                            </div>
                        </div>
                    </div>
                    --}}

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <h6 class="title step-title">{{ ++$num_section }}. Select or create a view</h6>
                                <select name="data_view" class="form-control select2 w-100">
                                    <option value="">Select a view</option>
                                    <option value="create">Create a view</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row data-view-wrap">
                        <div class="form-group col-md-12">
                            <div class="row">
                                <label class="title col-md-2">Title</label>
                                <div class="col-md-10">
                                    <input type="text" name="data_view_title" required placeholder="e.g. Monthly Report" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-md-12">
                            <div class="row">
                                <label class="title col-md-2">Description</label>
                                <div class="col-md-10">
                                    <input type="text" name="data_view_description" placeholder="e.g. Transactions Per Month" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        {{--
                        <div class="form-group col-md-12">
                            <div class="row">
                                <label class="title col-md-2">BI Chart Home Order</label>
                                <div class="col-md-10">
                                    <input type="text" name="data_view_bi_order" placeholder="any text to adjust order" maxlength="20" class="form-control">
                                </div>
                            </div>
                        </div>
                        --}}
                    </div>
                </div>

                <div class="col-md-3 btn-wrap padding">
                    <button class="btn btn-save-view btn-block d-none" id="btn-save-view">
                        <span>Save this View</span>
                    </button>
                    {{--
                    <button class="btn btn-selection btn-block" id="btn-pin-home">
                        <span class="home-pin flex-center">
                            <i class="fas fa-thumbtack"></i>
                            <span>Pin to Home Favorite</span>
                        </span>

                        <span class="home-unpin flex-center d-none">
                            <i class="fas fa-unlink main-color"></i>
                            <span>Unpin from Home Favorite</span>
                        </span>
                    </button>
                    --}}
                    <button class="btn btn-selection btn-block d-none" id="btn-pin-chart">
                        <span class="home-bi-pin flex-center">
                            <i class="fas fa-thumbtack"></i>
                            <span>Pin to Home BI</span>
                        </span>

                        <span class="home-bi-unpin flex-center d-none">
                            <i class="fas fa-thumbtack main-color"></i>
                            <span>Unpin from Home BI</span>
                        </span>
                    </button>
                </div>
            </div>

            <!-- pivot -->
            <div class="row">
                <div class="col-md-12">
                    <div id="pivotUI"></div>
                    <div id="pivotNoDataMsg" class="flex-center d-none" style="height: 150px;">No data available now</div>
                </div>
            </div>
        @endslot

        @slot('slot_rows')
            <div class="row">
                <div class="col-12">
                    <div id="api_token_container">
                        <div>API TOKEN</div>
                        <div id="api_token_content"></div>
                        <div>
                            <button id="btn-refresh-api-token">Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        @endslot
    @endcomponent

    @component('components.utility.modal_error')
    @endcomponent
@endsection


@section('script')
    <script src="https://cdn.plot.ly/plotly-basic-latest.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://pivottable.js.org/dist/pivot.min.js"></script>
    <script type="text/javascript" src="https://pivottable.js.org/dist/plotly_renderers.min.js"></script>
    <script type="text/javascript" src="https://pivottable.js.org/dist/export_renderers.min.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>
    <script src="{{ mix('js/admin/admin-analytics-v2.js') }}"></script>
    <script>
        var ANALYTICS_DATA = {!! json_encode($metadata) !!};
        var NUM_ANALYTICS_DATA = {{ count($metadata) }};
        var ANALYTICS_SELECTED = {!! $analytic_selected ? json_encode($analytic_selected) : 'null' !!};
    </script>
@endSection