@extends('portal.main.layout')

@section('title','Graphical | Analysis')

@section('breadcrumb')

    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
        <li class="breadcrumb-item text-sm text-white">
            <a class="text-white" href="{{ route('dashboard.index') }}">
                <i class="fas fa-home"></i>
            </a>
        </li>
        <li class="breadcrumb-item text-sm text-white active" aria-current="page">@yield('title')</li>
    </ol>

@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('searchselect/select2.css') }}">

    <style>
        .default_height{
            min-height: 300px;
        }
    </style>

@endsection

@section('content')

    <div class="row" id="graph"
         data-init="{{ route('analytics.init') }}"
         data-loading="{{ route('analytics.data') }}"
         data-token="{{ csrf_token() }}">

        <div class="col-12">

            <div class="card default_height" id="filter_view">

                <div class="card-body">

                    <div class="row">

                        <div class="col-md-3">
                            <h6>Analysis Type</h6>
                            <div style="margin-top: 14px!important;">
                                <select class="select2 form-control" onchange="handleType()" style="width: 100%" id="type">
                                    <option value="">--Select Option--</option>
                                    <option value="Single Audit">Single Audit</option>
                                    <option value="Periodic">Periodic</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3 displaystatus" id="audit_select_view">
                            <h6>Audits</h6>
                            <div style="margin-top: 14px!important;">
                                <select class="select2 form-control" style="width: 100%" id="audits">

                                </select>
                            </div>
                        </div>

                        <div class="col-md-3 displaystatus" id="department_select_view">
                            <h6>Departments</h6>
                            <div style="margin-top: 14px!important;">
                                <select class="select2 form-control" style="width: 100%" id="department">

                                </select>
                            </div>
                        </div>

                        <div class="col-md-3 displaystatus" id="period_select_view">
                            <h6>Period</h6>
                            <div style="margin-top: 9px!important;">
                                <input id="period" class="form-control datepicker" placeholder="Please select date" type="text" onfocus="focused(this)" onfocusout="defocused(this)">
                            </div>
                        </div>

                        <div class="col-md-3 displaystatus" id="action_view">
                            <h6>Actions</h6>
                            <div class="col-12">
                                <a href="javascript:void(0)" onclick="loadAnalytics()" class="btn btn-icon btn-3 btn-primary" type="button">
                                    <span class="btn-inner--icon"><i class="ni ni-chart-bar-32"></i></span>
                                    <span class="btn-inner--text">Load</span>
                                </a>
                                <a href="javascript:void(0)" onclick="resetAll('NO')" class="btn btn-icon btn-3 btn-danger" type="button">
                                    <span class="btn-inner--icon"><i class="ni ni-fat-remove"></i></span>
                                    <span class="btn-inner--text">Reset</span>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <div class="displaystatus" id="singlecharts">

                <br>

                <div class="row">

                    <div class="col-md-6">

                        <div class="card">

                            <div class="card-body">

                                <div id="rcas" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                            </div>

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="card">

                            <div class="card-body">

                                <div id="caps" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                            </div>

                        </div>

                    </div>

                </div>

                <br>

                <div class="row">

                    <div class="col-md-6">

                        <div class="card">

                            <div class="card-body">

                                <div id="fats" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                            </div>

                        </div>

                    </div>

                    <div class="col-md-6">

                        {{--<div class="card">

                            <div class="card-body">

                                <div id="closureContainer" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

                            </div>

                        </div>--}}

                    </div>

                </div>

            </div>

            <div class="displaystatus" id="periodiccharts">

                <br>

                <div class="row">

                    <div class="col-md-12">

                        <div class="card">

                            <div class="card-body">

                                <div id="periodicContainer" style="min-width: 410px; height: 500px; margin: 0 auto"></div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

@endsection

@section('scripts')

    <script src="{{ asset('assets/js/plugins/flatpickr.min.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/code/highcharts.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/code/modules/exporting.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/code/modules/export-data.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/code/highcharts-more.js') }}"></script>
    <script src="{{ asset('searchselect/select2.full.js') }}" type="text/javascript"></script>
    <script src="{{ asset('searchselect/form-select2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/core/analytic.js') }}" type="text/javascript"></script>

@endsection