@extends('layouts.dash')

@section('content')
<!--begin::Main-->



<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
					<!--begin::Content wrapper-->
					<div class="d-flex flex-column flex-column-fluid">
						<!--begin::Toolbar-->
						<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
							<!--begin::Toolbar container-->
							<div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
								<!--begin::Page title-->
								<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
									<!--begin::Title-->
									<h1
										class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
										Dashboard</h1>
									<!--end::Title-->
									<!--begin::Breadcrumb-->

									<!--end::Breadcrumb-->
								</div>
								<!--end::Page title-->
								<!--begin::Actions-->

								<!--end::Actions-->
							</div>
							<!--end::Toolbar container-->
						</div>
						<!--end::Toolbar-->
						<!--begin::Content-->

						<div id="kt_app_content" class="app-content flex-column-fluid mb-5">
							<!--begin::Content container-->
							<div id="kt_app_content_container" class="app-container container-xxl">
								<!--begin::Row-->
								<div class="row g-lg-5">
									<!--begin::Col-->
									<div class="col-md-4 col-xl-4  ">
										<!--begin::Card widget 12-->
										<div class="card overflow-hidden   ">
											<!--begin::Card body-->
											<div class="card-body d-flex justify-content-between flex-column px-0 pb-0">
												<!--begin::Statistics-->
												<div class="mb-4 px-9">
													<!--begin::Info-->
													<div class="d-flex align-items-center mb-2">
														<!--begin::Value-->
														<span
															class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{ $list['totalTasksCount'] }}</span>
														<!--end::Value-->
														<!--begin::Label-->
														<span
															class="d-flex align-items-end text-gray-500 fs-6 fw-semibold"></span>
														<!--end::Label-->
													</div>
													<!--end::Info-->
													<!--begin::Description-->
													<span class="fs-6 fw-semibold text-gray-500">Total Projects</span>
													<!--end::Description-->
												</div>
												<!--end::Statistics-->

											</div>
											<!--end::Card body-->
										</div>
										<!--end::Card widget 12-->
										<!--begin::Card widget 10-->

										<!--end::Card widget 10-->
									</div>
									<!--end::Col-->
									<!--begin::Col-->
									<div class="col-md-4 col-xl-4  ">
										<!--begin::Card widget 13-->
										<div class="card overflow-hidden   ">
											<!--begin::Card body-->
											<div class="card-body d-flex justify-content-between flex-column px-0 pb-0">
												<!--begin::Statistics-->
												<div class="mb-4 px-9">
													<!--begin::Statistics-->
													<div class="d-flex align-items-center mb-2">
														<!--begin::Value-->
														<span
															class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{ $list['pendingTasksCount'] }}</span>
														<!--end::Value-->
														<!--begin::Label-->
														<!--end::Label-->
													</div>
													<!--end::Statistics-->
													<!--begin::Description-->
													<span class="fs-6 fw-semibold text-gray-500">Pending Projects</span>

												</div>
												<!--end::Statistics-->
												<!--begin::Chart-->

												<!--end::Chart-->
											</div>
											<!--end::Card body-->
										</div>
										<!--end::Card widget 13-->
										<!--begin::Card widget 7-->

										<!--end::Card widget 7-->
									</div>
									<!--end::Col-->


									<div class="col-md-4 col-xl-4  ">
										<!--begin::Card widget 12-->
										<div class="card overflow-hidden ">
											<!--begin::Card body-->
											<div class="card-body d-flex justify-content-between flex-column px-0 pb-0">
												<!--begin::Statistics-->
												<div class="mb-4 px-9">
													<!--begin::Info-->
													<div class="d-flex align-items-center mb-2">
														<!--begin::Value-->
														<span
															class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">{{ $list['completedTasksCount'] }}</span>
														<!--end::Value-->
														<!--begin::Label-->
														<span
															class="d-flex align-items-end text-gray-500 fs-6 fw-semibold"></span>
														<!--end::Label-->
													</div>
													<!--end::Info-->
													<!--begin::Description-->
													<span class="fs-6 fw-semibold text-gray-500">Completed
														Projects</span>
													<!--end::Description-->
												</div>
												<!--end::Statistics-->
												<!--begin::Chart-->

												<!--end::Chart-->
											</div>
											<!--end::Card body-->
										</div>
										<!--end::Card widget 12-->
										<!--begin::Card widget 10-->

										<!--end::Card widget 10-->
									</div>

								</div>

							</div>
							<!--end::Content container-->
						</div>




						<div id="kt_app_content" class="app-content flex-column-fluid mb-5">
							<!--begin::Content container-->
							<div id="kt_app_content_container" class="app-container container-fluid">
								<div class="col-xl-8">
									<!--begin::Chart widget 18-->
									<div>
										<!--begin::Charts Widget 2-->
										<div class="card card-xl-stretch mb-5 mb-xl-8">
											<!--begin::Header-->
											<div class="card-header border-0 pt-5">
												<h3 class="card-title align-items-start flex-column">
													<span class="card-label fw-bold fs-3 mb-1">Total Projects</span>
													<span class="text-muted fw-semibold fs-7"></span>
												</h3>
												<!--begin::Toolbar-->
												<div class="card-toolbar" data-kt-buttons="true">
													<a class="btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1" href="{{ route('gethomeDetailsByDate', ['type' => 'this_year']) }}"
														>Year</a>
													<a class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1" href="{{ route('gethomeDetailsByDate', ['type' => 'this_month']) }}"
														>Month</a>
													<a class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4" href="{{ route('gethomeDetailsByDate', ['type' => 'this_week']) }}"
														>Week</a>
												</div>
												<!--end::Toolbar-->
											</div>
											<!--end::Header-->
											<!--begin::Body-->
											<div class="card-body">
												<!--begin::Chart-->
												<canvas id="myChart"></canvas>

												<!--end::Chart-->
											</div>
											<!--end::Body-->
										</div>
										<!--end::Charts Widget 2-->
									</div>
								</div>

							</div>
							<!--end::Content container-->
						</div>

						<div id="kt_app_content" class="app-content flex-column-fluid">
							<!--begin::Content container-->
							<div id="kt_app_content_container" class="app-container container-fluid">
								<div class="card mb-5 mb-xl-8">
									<!--begin::Header-->
									<div class="card-header border-0 pt-5">
										<h3 class="card-title align-items-start flex-column">
											<span class="card-label fw-bold fs-3 mb-1">New Projects</span>
										</h3>
										<div class="card-toolbar">
											<!--begin::Menu-->
											<button type="button"
												class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
												data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
												<i class="ki-duotone ki-category fs-6">
													<span class="path1"></span>
													<span class="path2"></span>
													<span class="path3"></span>
													<span class="path4"></span>
												</i>
											</button>
											<!--begin::Menu 2-->
											<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
												data-kt-menu="true">
											
												<!--begin::Menu separator-->
												<div class="separator mt-3 opacity-75"></div>
												<!--end::Menu separator-->
												<!--begin::Menu item-->
												<div class="menu-item px-3">
													<div class="menu-content px-3 py-3">
														<a class="btn btn-primary btn-sm px-4" href="{{ route('projectList') }}">View All</a>
													</div>
												</div>
												<!--end::Menu item-->
											</div>
											<!--end::Menu 2-->
											<!--end::Menu-->
										</div>
									</div>
									<!--end::Header-->
									<!--begin::Body-->
									<div class="card-body pt-3">
										<!--begin::Table container-->
										<div class="table-responsive">
											<!--begin::Table-->
											<table
												class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
												<!--begin::Table head-->
												<thead>
													<tr class="border-0">
														<th class="p-0">Project Name</th>
														<th class="p-0 min-w-150px">School Name</th>
														<th class="p-0 min-w-200px">District</th>
														<th class="p-0 min-w-150px">BRC Level</th>
														<th class="p-0 min-w-150px">Cont-Per Name</th>
														<th class="p-0 min-w-150px">Cont-Per Phone</th>
														<th class="p-0 min-w-100px">Status</th>
													</tr>
												</thead>
												<!--end::Table head-->
												<!--begin::Table body-->
												<tbody>
												    
												    @if($projects)
												    @foreach($projects as $pro)
													<tr>
														<td class="text-muted fw-semibold">
															{{ $pro->project_name }}
														</td>
														<td class="text-muted fw-semibold">{{ $pro->school_name }}
														</td>
														<td class="text-muted fw-semibold">{{ $pro->district }}
														</td>
														<td class="text-muted fw-semibold">{{ $pro->brcLevel ? $pro->brcLevel->name : 'N/A' }}
														</td>
														<td class="text-muted fw-semibold">{{ $pro->principal }}
														</td>
														<td class="text-muted fw-semibold">{{ $pro->principal_phone }}
														</td>
														<td class="text-muted fw-semibold">
														    
														    @if($pro->dc_approve_status == "completed" && $pro->approve_status == "completed")
															<span class="badge badge-light-success">Completed</span>
															@elseif($pro->dc_approve_status == "pending" || $pro->approve_status == "pending")
                                                                <span class="badge badge-light-danger">Pending</span>
                                                            @else
                                                                <span class="badge badge-light-warning">In Progress</span>
                                                            @endif
															
														</td>
														<!--<td class="text-end">
															<a href="#"
																class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
																<i class="ki-duotone ki-switch fs-2">
																	<span class="path1"></span>
																	<span class="path2"></span>
																</i>
															</a>
															<a href="#"
																class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
																<i class="ki-duotone ki-pencil fs-2">
																	<span class="path1"></span>
																	<span class="path2"></span>
																</i>
															</a>
															<a href="#"
																class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm">
																<i class="ki-duotone ki-trash fs-2">
																	<span class="path1"></span>
																	<span class="path2"></span>
																	<span class="path3"></span>
																	<span class="path4"></span>
																	<span class="path5"></span>
																</i>
															</a>
														</td>--->
													</tr>
													@endforeach
													@endif
												</tbody>
												<!--end::Table body-->
											</table>
											<!--end::Table-->
										</div>
										<!--end::Table container-->
									</div>
									<!--begin::Body-->
								</div>
							</div>
							<!--end::Content container-->
						</div>








						<!--end::Content-->
					</div>
					<!--end::Content wrapper-->
					<!--begin::Footer-->

					<!--end::Footer-->
				</div>
				<!--end:::Main-->
				<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                <script>
            
                const districts = @json($districts);
				const districtNames = districts.map(d => d.district);  // District names for x-axis
                const totalProjects = districts.map(d => d.total_projects);  // Total projects data
                const completedProjects = districts.map(d => d.completed_projects);
                const ctx = document.getElementById('myChart').getContext('2d');
                const myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: districtNames,
                        datasets: [
                            {
                                label: 'Completed Projects',
                                data: completedProjects,
                                backgroundColor: '#f5a623',
                                borderWidth: 1
                            },
                            {
                                label: 'Total Projects',
                                data: totalProjects,
                                backgroundColor: '#d3d3d3',
                                borderWidth: 1
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                grid: {
                                    display: false
                                },
                                barPercentage: 0.2,
                                categoryPercentage: 0.2
                            },
                            y: {
                                beginAtZero: true,
                                max: 120,
                                ticks: {
                                    stepSize: 20
                                },
                                grid: {
                                    display: false
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                                labels: {
                                    usePointStyle: true,
                                }
                            }
                        }
                    }
                });
            </script>
@endsection