@extends('layouts.master')

@section('mainContent')
    <div class="page-wrapper">
        <div class="page-header-link">
            <a href="javascript:;" class="show-menuheader">
                Policy Menus
                <i class="fas fa-align-left ms-auto"></i>
            </a>
        </div>
        <div class="page-menu">
            <div class="page-menu-header">
                <h2>Policy Menu</h2>
                <a href="javascript:;" class="close-header-menu"> <i class="fas fa-close"></i></a>
            </div>
            @include('layouts.tenants.policy-header-menu')
        </div>
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>Dashboard</h3>
                        <ul>
                            <li class="text-primary">Policy Management</li>
                            <li><a href="javascript:;">Dashboard</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <h3>Insight Statistics</h3>
                            </div>
                            <div class="row">
                                @php
                                    $ptotalDraftCount = $policyCounts->draft_count ?? 0;
                                    $ptotalPublishedCount = $policyCounts->publish_count ?? 0;
                                    $ptotalExpiryCount = $policyCounts->expiry_count ?? 0;
                                @endphp
                                <div class="col-md-6">
                                    <div class="count-stat">
                                        <div class="row">
                                            <div class="col-lg-6 col-12">
                                                <div class="dash-card">
                                                    <h6>Policies</h6>
                                                    <h5>{{ $allPolicyCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                    <span class="badge badge-insights">Published:
                                                        <b>{{ $ptotalPublishedCount }}</b></span>
                                                    <hr>
                                                    <ul class="insight-list d-flex flex-wrap gap-2">
                                                        <li>
                                                            <i class="fa fa-circle draft-status me-1"></i> Draft <span
                                                                class="ms-2 weight-bold">{{ $ptotalDraftCount }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1"></i> Retired <span
                                                                class="ms-2 weight-bold">{{ $ptotalExpiryCount }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            @php
                                                $prototalDraftCount = $procedureCounts->draft_count ?? 0;
                                                $prototalPublishedCount = $procedureCounts->publish_count ?? 0;
                                                $prototalExpiryCount = $procedureCounts->expiry_count ?? 0;
                                            @endphp
                                            <div class="col-lg-6 col-12">
                                                <div class="dash-card">
                                                    <h6>Procedures</h6>
                                                    <h5>{{ $allProcedureCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                    <span class="badge badge-insights">Published:
                                                        <b>{{ $prototalPublishedCount }}</b></span>
                                                    <hr>
                                                    <ul class="insight-list d-flex flex-wrap gap-2">
                                                        <li>
                                                            <i class="fa fa-circle draft-status me-1"></i> Draft <span
                                                                class="ms-2 weight-bold">{{ $prototalDraftCount }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1"></i> Retired <span
                                                                class="ms-2 weight-bold">{{ $prototalExpiryCount }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            @php
                                                $gtotalDraftCount = $guidelineCounts->draft_count ?? 0;
                                                $gtotalPublishedCount = $guidelineCounts->publish_count ?? 0;
                                                $gtotalExpiryCount = $guidelineCounts->expiry_count ?? 0;
                                            @endphp
                                            <div class="col-lg-6 col-12">
                                                <div class="dash-card">
                                                    <h6>Guidelines</h6>
                                                    <h5>{{ $allGuidelineCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                    <span class="badge badge-insights">Published:
                                                        <b>{{ $gtotalPublishedCount }}</b></span>
                                                    <hr>
                                                    <ul class="insight-list d-flex flex-wrap gap-2">
                                                        <li>
                                                            <i class="fa fa-circle draft-status me-1"></i> Draft <span
                                                                class="ms-2 weight-bold">{{ $gtotalDraftCount }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1"></i> Retired <span
                                                                class="ms-2 weight-bold">{{ $gtotalExpiryCount }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="dash-card">
                                                    <h6>Standard</h6>
                                                    <h5>{{ $totalStandCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                    <span class="badge badge-insights" style="opacity: 0;">Count:
                                                        <b>{{ $totalStandCount }}</b></span>
                                                    <hr>
                                                    <ul class="insight-list d-flex flex-wrap gap-2">
                                                        <li>
                                                            <i class="fa fa-circle draft-status me-1"></i> CMMI <span
                                                                class="ms-2 weight-bold">{{ $cmmiCount }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1"></i> Security <span
                                                                class="ms-2 weight-bold">{{ $securityCount }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div id="chart-status"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-12 d-flex">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <div class="row">
                                    <div class="col-md-8">
                                        <h3>Compliance % Insights</h3>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="d-flex select-sm align-items-end">
                                            <select class="select" id="audit_compliance" >
                                                <option value="">Select</option>
                                                @if (!@empty($auditData))
                                                        @foreach ($auditData as $key => $row)
                                                            <option value="{{ $key }}">
                                                                {{ $row }}</option>
                                                        @endforeach
                                                    @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray d-none">
                                        <h5>{{ $totalPolicyCount }}</h5>
                                        <h6>Total Policy/Procedures</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <!-- <div id="chart-policy"></div> -->
                                        <div id="standard-status"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-12 d-flex">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray d-none">
                                        <h5>{{ $totalApprovalCount }}</h5>
                                        <h6>Total Attestation/Exceptions</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="tab-set">
                                            <nav>
                                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                                    <button class="nav-link pt-0 flex-fill active"
                                                        id="nav-attestation-tab" data-bs-toggle="tab"
                                                        data-bs-target="#nav-attestation" type="button" role="tab"
                                                        aria-controls="nav-attestation"
                                                        aria-selected="true">Attestation</button>
                                                    <button class="nav-link pt-0 flex-fill" id="nav-exceptions-tab"
                                                        data-bs-toggle="tab" data-bs-target="#nav-exceptions"
                                                        type="button" role="tab" aria-controls="nav-exceptions"
                                                        aria-selected="false">Exceptions</button>
                                                </div>
                                            </nav>
                                            <div class="tab-content px-0" id="nav-tabContent">
                                                <div class="tab-pane fade show active" id="nav-attestation"
                                                    role="tabpanel" aria-labelledby="nav-attestation-tab">
                                                    <div class="head-client">
                                                        <div class="row">
                                                            <div class="col-md-8">
                                                                <h3>Attestation Insights</h3>
                                                            </div>
                                                            <div class="col-md-4">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <div id="attestation-status"></div> --}}
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div id="attestation-status1"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div id="attestation-status2"></div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div id="attestation-status3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="nav-exceptions" role="tabpanel"
                                                    aria-labelledby="nav-exceptions-tab">
                                                    <div class="head-client">
                                                        <div class="row">
                                                            <div class="col-md-8">
                                                                <h3>Exceptions Insights</h3>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="d-flex select-sm align-items-end">
                                                                    <select class="select" id="exception_for">
                                                                        <option value="Policy">Policy</option>
                                                                        <option value="Procedure">Procedures</option>
                                                                        <option value="Guidelines">Guidelines</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div id="chart-review"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div id="chart-policy-status"></div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-none col-lg-4 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Standards Insights</h3>
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray">
                                        <h5>{{ $totalStandCount }}</h5>
                                        <h6>Total Standards</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chart-policy-standard"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <div class="row">
                                    <div class="col-md-9">
                                        <h3>Retired in 30 days</h3>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="d-flex select-sm align-items-end">
                                            <select class="select" id="policy_type">
                                                <option value="Policy">Policy</option>
                                                <option value="Procedure">Procedures</option>
                                                <option value="Guidelines">Guidelines</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">

                                    <div class="table-responsive">
                                        <table class="table" id="policy_dashboard_table">
                                            <thead>
                                                <tr>
                                                    <th>Policy name</th>
                                                    <th>Standard</th>
                                                    <th>Release date</th>
                                                    <th>Expiry date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row align-items-center">
                                        <div class="col-md-12">
                                            <div class="datatable-paginate"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3>Recent Attestation % Complete</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">

                                    <div class="table-responsive">
                                        <table class="table" id="policy_attestation_table">
                                            <thead>
                                                <tr>
                                                    <th>Policy name</th>
                                                    {{-- <th>Standard</th> --}}
                                                    <th>% Completion</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    {{-- <div class="row align-items-center">
                                        <div class="col-md-12">
                                            <div class="datatable-paginate"></div>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
@endsection

@section('customScript')
    <script>
        var policyDraftCount = @json($ptotalDraftCount);
        var policyExpiryCount = @json($ptotalExpiryCount);
        var procedureDraftCount = @json($prototalDraftCount);
        var procedureExpiryCount = @json($prototalExpiryCount);
        var guidelineDraftCount = @json($gtotalDraftCount);
        var guidelineExpiryCount = @json($gtotalExpiryCount);
        var attestation = @json($allAttestationCounts);
        var policyPublishCount  = @json($ptotalPublishedCount);
        var procedurePublishCount  = @json($prototalPublishedCount);
        var guidelinePublishCount  = @json($gtotalPublishedCount);
    </script>
@endsection