@extends('layouts.acorn.acorn_admin_app')
@section('header_styles')
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/glide.core.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/introjs.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/select2-bootstrap4.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('acorn/css/vendor/plyr.css') }}" />
    <style>
        .user-scroll {
            max-height: 252px;
            overflow-y: auto;

            /* Firefox */
            scrollbar-width: thin;
        }

        /* Chrome, Edge, Safari */
        .user-scroll::-webkit-scrollbar {
            width: 6px;
        }

        .user-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .user-scroll::-webkit-scrollbar-thumb {
            background: #b5b5b5;
            border-radius: 10px;
        }

        .user-scroll::-webkit-scrollbar-thumb:hover {
            background: #999;
        }
    </style>
@endsection
@section('content')
    @php
        $userType = auth()->user()->type;
    @endphp
    <div class="row">
        <div class="col-12 mb-5">
            <div id="statsContainer"></div>
        </div>
    </div>
    {{-- Projects Pie Charts --}}
    <div class="row mt-5">
        <div class="col-md-6">
            <div class="card bg-light-blue-soft w-100 h-100">
                <div class="card-body d-flex flex-column">
                    <div id="projectsCompletionRatioContainer"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card bg-light-blue-soft w-100 h-100">
            <div class="card-body d-flex flex-column">
                <div id="projectsBudjetRatioContainer"></div>
            </div>
        </div>
    </div>

    @if ($userType === 'ADMIN' || $userType === 'SYS_ADMIN')
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="card bg-light-blue-soft w-100 h-100">
                <div class="card-body d-flex flex-column">
                    <div id="projectsAssigneeRatioContainer"></div>
                </div>
            </div>
        </div>
    @endif

    {{-- Projects & Users --}}
    @if ($userType === 'ADMIN' || $userType === 'SYS_ADMIN')
        <div class="row mt-5">
            <div class="col-md-6">
                <div id="projectsContainer"></div>
            </div>

            <div class="col-md-6">
                <div class="card bg-light-blue-soft w-100 h-100">
                <div class="card-body d-flex flex-column">
                    <div id="usersContainer" class="w-100 flex-grow-1"></div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('footer_scripts')
    <script src="{{ asset('acorn/js/vendor/Chart.bundle.min.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/chartjs-plugin-datalabels.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/chartjs-plugin-rounded-bar.min.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/glide.min.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/intro.min.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/select2.full.min.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/plyr.min.js') }}"></script>
    <script src="{{ asset('acorn/js/cs/glide.custom.js') }}"></script>
    <script src="{{ asset('acorn/js/cs/charts.extend.js') }}"></script>
    <script src="{{ asset('acorn/js/pages/dashboard.default.js') }}"></script>
    <script type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#statsContainer").load("{{ route('admin-long-term-project-dashboard-stats') }}");
            $("#projectsCompletionRatioContainer").load("{{ route('admin-long-term-project-dashboard-project-completion-ratio') }}");
            $("#projectsBudjetRatioContainer").load("{{ route('admin-long-term-project-dashboard-project-budget-utilization-ratio') }}");
            $("#projectsAssigneeRatioContainer").load("{{ route('admin-long-term-project-dashboard-project-assignee-utilization-ratio') }}");
            $("#projectsContainer").load("{{ route('admin-long-term-project-dashboard-projects') }}");
            $("#usersContainer").load("{{ route('admin-long-term-project-dashboard-users') }}");
        });
    </script>
@endsection