@extends('layouts.master')

@section('mainContent')
    <div class="page-wrapper">
        <div class="page-header-link">
            <a href="javascript:;" class="show-menuheader">
                Project Menus
                <i class="fas fa-align-left ms-auto"></i>
            </a>
        </div>
        <div class="page-menu">
            <div class="page-menu-header">
                <h2>Project Menu</h2>
                <a href="javascript:;" class="close-header-menu"> <i class="fas fa-close"></i></a>
            </div>

            @include('layouts.tenants.project-support-menu')

        </div>
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>Dashboard</h3>
                        <ul>
                            <li class="text-primary">Project 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">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h3>Training Statistics</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="count-stat">
                                        <div class="row">
                                            <div class="col-lg-3 col-12 d-flex">
                                                <div class="dash-card w-100">
                                                    <h6>All Training</h6>
                                                    <h5>{{ $TrainingCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-12 d-flex">
                                                <div class="dash-card w-100">
                                                    <h6>Upcoming Training</h6>
                                                    <h5>{{ $upcomingTrainingCount }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-12 d-flex">
                                                <div class="dash-card w-100">
                                                    <h6>Training Goal</h6>
                                                    <h5>{{ $trainingratio }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-12 d-flex">
                                                <div class="dash-card w-100">
                                                    <h6>Allocation</h6>
                                                    <h5>{{ $overallAllocationPercentage."%" }}</h5>
                                                    <div class="dash-img">
                                                        <i class="fe fe-bar-chart-2"></i>
                                                    </div>
                                                    <hr>
                                                    <ul class="insight-list d-flex flex-wrap gap-2">
                                                        <li>
                                                            <i class="fa fa-circle draft-status me-1"></i> Allocated <span
                                                                class="ms-2 weight-bold">{{ $allocationCounts['allocated'] }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1"></i> Available <span
                                                                class="ms-2 weight-bold">{{ $allocationCounts['available'] }}</span>
                                                        </li>
                                                        <li>
                                                            <i class="fa fa-circle retired-status me-1 text-danger"></i>
                                                            Bench <span
                                                                class="ms-2 weight-bold">{{ $allocationCounts['bench'] }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <div class="head-client">
                                <div class="row">
                                    <div class="col-md-9">
                                        <h3>Count Statistics</h3>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="d-flex select-sm align-items-end">
                                            <select class="select" name="project_id" id="project_id">
                                                <option value="">Select Project</option>
                                                @foreach ($projects as $row)
                                                    <option value="{{ $row->id }}"
                                                        @if (session('project_id') == $row->id) selected @endif>
                                                        {{ $row->project_name . ' - ' . $row->project_id }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php
                                $colors = ['text-warning', 'text-info', 'text-danger', 'text-purple', 'text-success']
                            @endphp
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="count-stat">
                                        <div class="row">
                                            <div class="col-lg-6 col-12">
                                                <div class="nested-card mb-4 border p-3 rounded">
                                                    <div class="dash-card">
                                                        <div class="flex-count-blk d-flex align-items-end">
                                                            <div class="count-start flex-fill">
                                                                <h6>Defects</h6>
                                                                <h5>{{ $totalDefectCount }}</h5>
                                                            </div>
                                                            <ul class="insight-list flex-fill d-flex flex-wrap gap-2">
                                                                @if (!empty($defectCounts['all_labels']) && !empty($defectCounts['all_counts']))
                                                                    @for ($i = 0; $i < count($defectCounts['all_labels']); $i++)
                                                                        <li>
                                                                            <i class="fa fa-circle {{$colors[$i]}} me-1"></i>
                                                                            {{ strtoupper($defectCounts['all_labels'][$i]) }}
                                                                            <span
                                                                                class="ms-2 weight-bold">{{ $defectCounts['all_counts'][$i] }}</span>
                                                                        </li>
                                                                    @endfor
                                                                @endif
                                                            </ul>
                                                        </div>
                                                        <div class="dash-img">
                                                            <i class="fe fe-bar-chart-2"></i>
                                                        </div>
                                                    </div>
                                                    <div id="defects-status"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="nested-card mb-4 border p-3 rounded">
                                                    <div class="dash-card">
                                                        <div class="flex-count-blk d-flex align-items-end">
                                                            <div class="count-start flex-fill">
                                                                <h6>Incidents</h6>
                                                                <h5>{{ $totalIncidentCount }}</h5>
                                                            </div>
                                                            <ul class="insight-list flex-fill d-flex flex-wrap gap-2">
                                                                @if (!empty($incidentCounts['all_labels']) && !empty($incidentCounts['all_counts']))
                                                                    @for ($i = 0; $i < count($incidentCounts['all_labels']); $i++)
                                                                        <li>
                                                                            <i class="fa fa-circle draft-status me-1"></i>
                                                                            {{ strtoupper($incidentCounts['all_labels'][$i]) }}
                                                                            <span
                                                                                class="ms-2 weight-bold">{{ $incidentCounts['all_counts'][$i] }}</span>
                                                                        </li>
                                                                    @endfor
                                                                @endif
                                                            </ul>
                                                        </div>
                                                        <div class="dash-img">
                                                            <i class="fe fe-bar-chart-2"></i>
                                                        </div>
                                                    </div>
                                                    <div id="project-incidents-status"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-12">
                                                <div class="nested-card mb-4 border p-3 rounded">
                                                    <div class="dash-card">
                                                        <div class="flex-count-blk d-flex align-items-end">
                                                            <div class="count-start flex-fill">
                                                                <h6>Change Request</h6>
                                                                <h5>{{ $totalCRCount }}</h5>
                                                            </div>
                                                            <ul class="insight-list flex-fill d-flex flex-wrap gap-2">
                                                                <li>
                                                                    <i class="fa fa-circle draft-status me-1"></i>
                                                                    Enhancement
                                                                    <span
                                                                        class="ms-2 weight-bold">{{ $CRCounts['enhancement'] ?? '0' }}</span>
                                                                </li>
                                                                <li>
                                                                    <i class="fa fa-circle retired-status me-1"></i> Minor
                                                                    <span
                                                                        class="ms-2 weight-bold">{{ $CRCounts['minor'] ?? '0' }}</span>
                                                                </li>
                                                                <li>
                                                                    <i class="fa fa-circle danger-status me-1"></i> Major
                                                                    <span
                                                                        class="ms-2 weight-bold">{{ $CRCounts['major'] ?? '0' }}</span>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="dash-img">
                                                            <i class="fe fe-bar-chart-2"></i>
                                                        </div>
                                                    </div>
                                                    <div id="project-cr-status"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="sid" value ="{{ session('project_id') ?? '' }}" />
@endsection

@section('customScript')
    <script>
        // var defectCounts = @json($defectCounts);
        var incidentCounts = @json($incidentCounts);
        var CRTotalCounts = @json($CRTotalCounts);
        var finalData = @json($finalData);
        var finalDefectData = @json($finalDefectData);
        var finalIncidentData = @json($finalIncidentData);
    </script>
@endsection