@extends('layouts.chairman_dashboard')
@section('title')
    Chairman Dashboard
@endsection
@section('styles')
{{--    .card : {--}}
{{--    border-radius: 25px;--}}
{{--    }--}}
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="content-header row"></div>
        <div class="content-body mt-1"><!-- Dashboard Analytics Start -->
            <section id="dashboard-analytics">
                <div class="row ">
                    @php
                        $moduleName = \App\Enums\Pmis\MenuData::getMenuData();
                        $allModuleName = \App\Enums\Pmis\MenuData::getAllModuleData();
                    @endphp
                    <div class="col-md-4 sidebarBox">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="formSearchBox">
                                    <input type="email" class="form-control" id="searchModule" placeholder="Search Module">
                                    <a class="moduleToggle" title="Press a or A" href="javascript:void(0)"><i class='bx bx-left-arrow-alt minimize-icon'></i></a>
                                </div>
                            </div>
                        </div>
                        <div id="sidebarBoxModule">
                            @include('main_dashboard.sidebarbox',['moduleName'=>$moduleName])
                        </div>
                    </div>
                    <div class="col-md-8 detailsSection">
                        <div class="row">
                            @foreach($allModuleName as $key=>$textData)
                                @if(\Auth::user()->hasPermission($textData->permission_key))
                                        <div class="col-md-12 dashboard-card" id="{{$textData->identity}}"
                                             style="display: {{\App\Enums\Pmis\MenuData::activeCheck($textData->identity) || ($textData->identity == 'db_welcome' && $active_count == 0)  ? 'block' : 'none'}}">
                                            <div class="zoom h-100">
                                                <div class="dialog h-100">
                                                    <div class="m-content h-100">
                                                        @include('main_dashboard.partials.'.$textData->identity,['textData' => $textData])
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                @endif
                            @endforeach

                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div class="modal fade" id="second_pop_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close ml-auto bg-black text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="pop_content"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="date_range" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="p_start_date" class="required">From Date</label>
                            <div class="input-group date datePiker" id="p_start_date"
                                 data-target-input="nearest">
                                <input type="text" autocomplete="off"
                                       class="form-control datetimepicker-input"
                                       value="" name="p_start_date"
                                       data-toggle="datetimepicker"
                                       data-target="#p_start_date"
                                       required onautocomplete="off"/>
                                <div class="input-group-append" data-target="#p_start_date"
                                     data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="bx bxs-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="p_end_date" class="required">To Date</label>
                            <div class="input-group date datePiker" id="p_end_date"
                                 data-target-input="nearest">
                                <input type="text" autocomplete="off"
                                       class="form-control datetimepicker-input"
                                       value="" name="p_end_date"
                                       data-toggle="datetimepicker"
                                       data-target="#p_end_date" required onautocomplete="off"/>
                                <div class="input-group-append" data-target="#p_end_date"
                                     data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="bx bxs-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>

        $(document).ready(function () {
            var Interval = 100000;
            @foreach($moduleName as $key=>$textData)
                @if($textData->identity == 'db_pims' && \App\Enums\Pmis\MenuData::activeCheck($textData->identity))
                    // maleRatio();
                    // window.setInterval(maleRatio, Interval);
                    //
                    // runStatusWiseEmployee();
                    // window.setInterval(runStatusWiseEmployee, Interval);
                @endif
            @endforeach
        });

        $(window).on("load", function () {
            var e = "#5A8DEE", a = "#FF5B5C", t = "#FDAC41", r = "#00CFDD", o = "#828D99", s = {
                    chart: {
                        height: 240, type: "radialBar"
                    }
                    , colors: [e, a, t], series: [75, 80, 85], plotOptions: {
                        radialBar: {
                            offsetY: -10, hollow: {
                                size: "40%"
                            }
                            , track: {
                                margin: 10, background: "#fff"
                            }
                            , dataLabels: {
                                name: {
                                    fontSize: "15px", color: [o], fontFamily: "IBM Plex Sans", offsetY: 25
                                }
                                , value: {
                                    fontSize: "30px", fontFamily: "Rubik", offsetY: -15
                                }
                                , total: {
                                    show: !0, label: "Total Visits", color: o
                                }
                            }
                        }
                    }
                    , stroke: {
                        lineCap: "round"
                    }
                    , labels: ["Target", "Mart", "Ebay"]
                }
            ;
        });

        // $('#second_pop_modal').on('hidden.bs.modal', function () {
        //     console.log(222);
        //     destroyCharts();
        // });

        // function initializeDataTable() {
        //     $('.dataTable').DataTable({
        //         "paging": true,
        //         "pageLength": 10,
        //         "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        //         "searching": true,
        //         "ordering": true,
        //     });
        // }
        //
        // // Event listener for the modal's shown.bs.modal event
        // $('#second_pop_modal').on('shown.bs.modal', function () {
        //     initializeDataTable();
        // });

    </script>
@endsection