@extends('layouts.master', ['title' => 'Dashboard'])
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard/dashboard.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style type="text/css">
        #show_date_filter {
            cursor: not-allowed;
            margin-top: -5px;
            margin-right: 10px;
            color: #000;
            border-bottom: 3px solid #E89417;
            padding: 5px 10px;
        }

        #show_date_filter2 {
            cursor: not-allowed;
            margin-top: -5px;
            margin-right: 10px;
            color: #000;
            border-bottom: 3px solid #E89417;
            padding: 5px 10px;
        }
        .h32{
            height: 32px;
        }
        .none-display{
            display: none;
        }
        .block-display{
            display: block;
        }
        .datetimepicker .datepicker-nav {
            background: #E89417;
        }

        .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-day, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-day {
            color: #E89417;
        }

        .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range {
            background: #E89417;
        }

        .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item {
            background-color: #E89417;
        }

        .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item {
            border: .1rem solid #E89417;
            color: #E89417 !important;
        }

        .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
            border: .1rem dotted #E89417;
            color: #E89417 !important;
        }

        .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
            border: .1rem dotted #E89417;
            color: #E89417 !important;
        }

        .datetimepicker .datepicker-body .datepicker-months .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-months .datepicker-year.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-year.is-active {
            background: #E89417 !important;
            border-color: #E89417 !important;
        }

        .datetimepicker-dummy:before {
            content: "" !important;
            color: #E89417 !important;
        }
        .datetimepicker.is-active {
            z-index: 222;
        }

        .datetimepicker-dummy {
            height: 33px;
        }

        .datetimepicker-dummy:before {
            margin-top: -4px;
        }

        .dtts{
            background-color: #fff;
            margin-top: -7px;
            border: 1px solid #ddd;
            border-radius: 8px;
            height: 33px;
            margin-right: 10px;
        }
    </style>
@endpush
@section('content')
    <div class="page-content-inner">
        <div class="banking-dashboard banking-dashboard-v3" id="page_dashboard">
             @role('dokter')
            <div class="columns">
                <div class="column is-12">
                    @include('components.dashboard.review-data-doctor', [
                        'show_all' => true,
                        'cursor' => 'default',
                    ])
                </div>
            </div>
            @endrole
            @unlessrole('dokter')
                <div class="columns">
                    <div class="column is-12">
                        <div class="columns is-multiline">
                            <div class="column @if (auth()->user()->hasRole(['contract_user','super_admin','admin_contractor'])) is-3 @else is-4 @endif">
                                <div id="chart_mcu_approved"></div>
                            </div>
                            <div class="column @if (auth()->user()->hasRole(['contract_user','super_admin','admin_contractor'])) is-3 @else is-4 @endif">
                                <div id="chart_competency_approved"></div>
                            </div>
                            <div class="column @if (auth()->user()->hasRole(['contract_user','super_admin','admin_contractor'])) is-3 @else is-4 @endif">
                                <div id="chart_status_approved"></div>
                            </div>
                            @role(['contract_user', 'super_admin', 'admin_contractor'])
                                <div class="column is-3">
                                    <div id="chart_visitor_need_review"></div>
                                </div>
                            @endrole
                        </div>
                    </div>
                </div>
            @endunlessrole
            <div class="dashboard-header" style="margin-top: 30px;">
                <div class="left">
                    <div class="buttons">
                        <button onclick="downloadImage('png')" class="button h-action rounded mr-2 exclude-download"
                            id="download_png">
                            <i class="fa-regular fa-file-image mr-1"></i>
                            @lang('app.png')
                        </button>
                        <button onclick="downloadImage('pdf')" class="button h-action rounded mr-2 exclude-download"
                            id="download_pdf">
                            <i class="fa-regular fa-file-pdf mr-1"></i>
                            @lang('app.pdf')
                        </button>
                    </div>
                </div>
                <div class="right">
                    <div style="display: flex;justify-content: flex-end;">
                        <div class="buttons exclude-download">
                            <div class="txt-content-mc" id="show_date_filter" style="display: none;"></div>
                            {{-- <button id="daterange" class="button h-action rounded mr-2 h32">
                                @lang('app.custom')
                            </button> --}}
                            
                            <div class="dtts">
                                <input id="daterange" name="daterange" type="date" autocomplete="off" data-is-range="true">
                            </div>
                            <button class="button h-action rounded filter-date-dashboard mr-2" data-date="2">
                                @lang('app.3_days')
                            </button>
                            <button class="button h-action rounded filter-date-dashboard mr-2" data-date="6">
                                @lang('app.7_days')
                            </button>
                            <button class="button h-action rounded filter-date-dashboard mr-2" data-date="29">
                                @lang('app.30_days')
                            </button>
                            <button class="button h-action rounded filter-date-dashboard mr-2" data-date="364">
                                1 Year
                            </button>
                            <button id="all" class="button h-action filter-date-dashboard rounded mr-2" data-date="0">
                                All Time
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @unlessrole('dokter')
            <div class="columns">
                <div class="column is-12">
                    <div class="columns is-multiline">
                        <div class="column is-7">
                            <div class="card-chart">
                                {{-- @include('components.dashboard.personnel-on-duty', [
                                    'show_all' => true,
                                ]) --}}
                                <div id="chart_on_duty"></div>
                            </div>
                        </div>
                        <div class="column is-5" style="display: flex; flex-direction: column;">
                            <div style="flex: 1; margin-bottom: 20px;">
                                @include('components.dashboard.widget-over-days', [
                                    'show_all' => true,
                                ])
                            </div>
                            <div style="flex: 1;">
                                @include('components.dashboard.widget-permitted-to-work', [
                                    'show_all' => true,
                                ])
                            </div>
                        </div>
                        {{-- <div class="column is-5">
                            <div class="is-full-height">
                                @include('components.dashboard.widget-on-duty-approval', [
                                    'show_all' => true,
                                ])
                                
                                @include('components.dashboard.widget-over-days', [
                                    'show_all' => true,
                                ])
                                @include('components.dashboard.widget-permitted-to-work', [
                                    'show_all' => true,
                                ])
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
            @endunlessrole
            <div class="columns">
                <div class="column is-12">
                    <div class="card-chart">
                        <div id="chart_mcu"></div>
                    </div>
                </div>
            </div>
            {{-- @role('dokter')
                <div class="columns">
                    <div class="column is-12">
                        <div class="s-card" style="overflow:visible !important;opacity:1 !important;display:block !important">
                            @include('components.dashboard.review-data-doctor', [
                                'show_all' => true,
                                'cursor' => 'default',
                            ])
                        </div>
                    </div>
                </div>
            @endrole --}}
            {{-- <div class="columns">
                <div class="column is-4 is-half-tablet-p">
                    <div class="s-card"
                        style="height: 180px;overflow:visible !important;opacity:1 !important;display:block !important">
                        <div class="columns">
                            @include('components.dashboard.widget-permitted-to-work', [
                                'show_all' => true,
                            ])
                        </div>
                    </div>
                </div>
                <div class="column is-4 is-half-tablet-p">
                    <div class="s-card"
                        style="height: 180px;overflow:visible !important;opacity:1 !important;display:block !important">
                        <div class="columns">
                            @include('components.dashboard.widget-over-days', [
                                'show_all' => true,
                            ])
                        </div>
                    </div>
                </div>
                <div class="column is-4 is-half-tablet-p">
                    <div class="s-card"
                        style="height: 180px;overflow:visible !important;opacity:1 !important;display:block !important">
                        <div class="columns">
                            @include('components.dashboard.widget-on-duty-approval', [
                                'show_all' => true,
                            ])
                        </div>
                    </div>
                </div>
            </div> --}}

            <div class="columns">
                <div class="column is-12">
                    <div class="dashboard-header">
                        <div class="left">
                        </div>
                        <div class="right">
                            <div style="display: flex;justify-content: flex-end;">
                                <div class="buttons exclude-download">
                                    <div class="txt-content-mc" id="show_date_filter2" style="display: none;"></div>

                                    <div class="dtts">
                                        <input id="daterange2" name="daterange2" type="date" autocomplete="off" data-is-range="true">
                                    </div>
                                    {{-- <button id="daterange2" class="button h-action rounded mr-2  cursor-pointer">
                                        @lang('app.custom')
                                    </button> --}}
                                    <button id="days30" class="button h-action rounded mr-2 filter-date-dashboard2 cursor-pointer is-active">
                                        30 Days
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-chart">

                        <div id="multiple_chart_dashboard"></div>
                        {{-- <div class="apexcharts-title-text">Activity Movement</div>
                        <div class="not-chart">
                            <svg xmlns="http://www.w3.org/2000/svg" width="81" height="80" viewBox="0 0 81 80" fill="none">
                              <path d="M64.2332 10H17.5666C13.8999 10 10.8999 13 10.8999 16.6667V63.3333C10.8999 67 13.8999 70 17.5666 70H64.2332C67.8999 70 70.8999 67 70.8999 63.3333V16.6667C70.8999 13 67.8999 10 64.2332 10ZM64.2332 63.3333H17.5666V16.6667H64.2332V63.3333ZM24.2332 33.3333H30.8999V56.6667H24.2332V33.3333ZM37.5666 23.3333H44.2332V56.6667H37.5666V23.3333ZM50.8999 43.3333H57.5666V56.6667H50.8999V43.3333Z" fill="#A2A5B9"/>
                            </svg>
                            <div class="txt-dsh-1">Nothing Here Yet</div>
                            <div class="txt-dsh-2">There is currently no data to diplay.</div>
                        </div> --}}
                    </div><br><br>
                    {{-- <div class="dashboard-card has-loader" style="height: 420px">
                        <div class="h-loader-wrapper">
                            <div class="loader is-loading"></div>
                        </div>
                        <div class="widget-toolbar">
                            <div class="left">
                                <h3 class="is-bigger">@lang('app.activity_movement')</h3>
                            </div>
                        </div>
                        <div id="multiple_chart_dashboard">
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>

    {{-- modal chart --}}
    <div id="modal-chart-status" class="modal h-modal is-big">
        <div class="modal-background h-modal-close"></div>
        <div class="modal-content">
            <div class="modal-card">
                <header class="modal-card-head">
                    <h3 id="title"></h3>
                    <button class="h-modal-close ml-auto" id="btn-close-modal-chart-status" aria-label="close">
                        @include('components.icons.close')
                    </button>
                </header>
                <div class="modal-card-body">
                    <div class="table-wrapper">
                        <table id="table_personnel_status" class="table is-datatable is-hoverable table-is-bordered">
                            <thead>
                                <tr>
                                    <th>@lang('app.nomor')</th>
                                    <th class="has-text-centered">@lang('app.name')</th>
                                    <th class="has-text-centered">@lang('app.nik')</th>
                                    <th class="has-text-centered">@lang('app.position')</th>
                                    <th class="has-text-centered">@lang('app.gender')</th>
                                    <th>@lang('app.company')</th>
                                    <th id="titlevisitor"></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="pagination_personnel_status"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const urlDataPersonnelOnDuty = '{{ route('dashboard.data.personnel-on-duty') }}'
        const urlApprovedByCategory = '{{ route('dashboard.data.approval-by-category') }}'
        const urlApprovedByStatus = '{{ route('dashboard.data.approval-by-status') }}'
        const urlPermittedToWork = '{{ route('dashboard.data.permitted-to-work') }}'
        const urlDataOverDays = '{{ route('dashboard.data.over-days') }}'
        const urlPersonnelNotApproved = '{{ route('dashboard.data.personnel-not-approved') }}'
        const urlDataReviewByDoctor = '{{ route('dashboard.data.review-by-doctor') }}'
        const urlMultipleChart = '{{ route('dashboard.multiple-chart') }}'
        const urlModalPersonnelStatus = '{{ route('dashboard.modal-chart') }}'
        const urlDataMCUResult = '{{ route('dashboard.data.mcu-result') }}'
        
        const urlRedirectWorker = '{{ route('employee.index') }}'
        const urlRedirectVisitor = '{{ route('gate-in.visitor') }}'
        const urlRedirectGateIn = '{{ route('gate-in.employee') }}'

        const iconTrendingUp = '{{ asset('assets/img/icons/trending_up.svg') }}'
        const iconTrendingDown = '{{ asset('assets/img/icons/trending_down.svg') }}'
        const iconEmptyState = '{{ asset('assets/img/illustrations/empty-state.svg') }}'
        const gateNames = @json($gates->pluck('name'));
        const gateIds = @json($gates->pluck('id'));
        const locationNames = @json($locations->pluck("name"));
        const locationIds = @json($locations->pluck("id"));
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <script src="{{ asset('assets/js/dashboard/dashboard.js') }}"></script>
    <script src="{{ asset('assets/js/chart/chart.js') }}"></script>
    <script src="{{ asset('assets/js/utils/utils.js') }}"></script>
    <script src="{{ asset('assets/js/widget-loader.js') }}"></script>
    <script src="{{ asset('assets/js/table-loader.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/Paginate.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/change-perpage.js') }}"></script>
    {{-- <script type="text/javascript">
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }

        const cookieValue = getCookie('daterange_dashboard2');

        const formatDatexx = 'DD/MM/YYYY';
        const weeks2xx = `${moment().subtract(30, 'days').format(formatDatexx)} - ${moment().format(formatDatexx)}`;

        if (cookieValue === weeks2xx) {
            document.getElementById("days30").classList.add('is-active');
            document.getElementById("daterange2").classList.remove('is-active');
        } else {
            document.getElementById("days30").classList.remove('is-active');
            document.getElementById("daterange2").classList.add('is-active');
        }
    </script> --}}

@endpush