@extends('layouts.dash')

@section('content')
<!--begin::Project Report 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-xxl 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">Project Report</h1>
										<!--end::Title-->
										<!--begin::Breadcrumb-->
									
										<!--end::Breadcrumb-->
									</div>
									<!--end::Page title-->
									<!--begin::Actions-->
									<div class="d-flex align-items-center gap-2 gap-lg-3">
										<!--begin::Filter menu-->
										<div class="m-0">
											<!--begin::Menu toggle-->
											<a href="#" class="btn btn-sm btn-flex btn-secondary fw-bold" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
											<i class="ki-duotone ki-filter fs-6 text-muted me-1">
												<span class="path1"></span>
												<span class="path2"></span>
											</i>Filter</a>
											<!--end::Menu toggle-->
											<!--begin::Menu 1-->
											<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_66b9704f2d6ab">
												<!--begin::Header-->
												<div class="px-7 py-5">
													<div class="fs-5 text-gray-900 fw-bold">Filter Options</div>
												</div>
												<!--end::Header-->
												<!--begin::Menu separator-->
												<div class="separator border-gray-200"></div>
												<!--end::Menu separator-->
												<!--begin::Form-->
												
												<div class="px-7 py-5">
												    <form action="{{ route('filterProjectReport') }}" method="POST">
                                                    @csrf
													<!--begin::Input group-->
													<div class="mb-10">
														<!--begin::Label-->
														
														<!--end::Label-->
														<!--begin::Input-->
														<div>
														
															 <select  class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select District " name="district" id="district" onchange="districtChanged();" >//data-kt-ecommerce-order-filter="status"
                                                                <option value="">Select</option>
                                                                <option value="Alappuzha">Alappuzha</option>
                                                                <option value="Ernakulam">Ernakulam</option>
                                                                <option value="Idukki">Idukki</option>
                                                                <option value="Kannur">Kannur</option>
                                                                <option value="Kasaragod">Kasaragod</option>
                                                                <option value="Kollam">Kollam</option>
                                                                <option value="Kottayam">Kottayam</option>
                                                                <option value="Kozhikode">Kozhikode</option>
                                                                <option value="Malappuram">Malappuram</option>
                                                                <option value="Palakkad">Palakkad</option>
                                                                <option value="Pathanamthitta">Pathanamthitta</option>
                                                                <option value="Thiruvananthapuram">Thiruvananthapuram</option>
                                                                <option value="Thrissur">Thrissur</option>
                                                                <option value="Wayanad">Wayanad</option>

                                                            </select>
														</div>
														<hr>
														<div>
															<select name="brc_level_id" id="brc_level_id" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select BRC " data-kt-ecommerce-order-filter="status">
															    <option></option>
																
															</select>
														</div>
														<hr>
														<div>
															<select name="panchayat" id="panchayat" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select LDGD " data-kt-ecommerce-order-filter="status">	
															    <option></option>
																
															</select>
														</div>
														<!--end::Input-->
													</div>
													<!--end::Input group-->
													<!--begin::Input group-->
													
													<!--end::Input group-->
													<!--begin::Input group-->
												
													<!--end::Input group-->
													<!--begin::Actions-->
													<div class="d-flex justify-content-end">
														<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
														<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
													</div>
													<!--end::Actions-->
													</form>
												</div>
												<!--end::Form-->
											</div>
											<!--end::Menu 1-->
										</div>
										<!--end::Filter menu-->
										<!--begin::Secondary button-->
										<!--end::Secondary button-->
										<!--begin::Primary button-->
										
										<!--end::Primary button-->
									</div>
									<!--end::Actions-->
								</div>
								<!--end::Toolbar container-->
							</div>
							<!--end::Toolbar-->
							<!--begin::Content-->
							<div id="kt_app_content" class="app-content flex-column-fluid">
								<!--begin::Content container-->
								<div id="kt_app_content_container" class="app-container container-xxl">
									<!--begin::Products-->
									<div class="card card-flush">
										<!--begin::Card header-->
										<div class="card-header align-items-center py-5 gap-2 gap-md-5">
											<!--begin::Card title-->
											<div class="card-title">
												<!--begin::Search-->
												<div class="d-flex align-items-center position-relative my-1">
													<i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4">
														<span class="path1"></span>
														<span class="path2"></span>
													</i>
													<input type="text" data-kt-ecommerce-order-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Search Report" />
												</div>
												<!--end::Search-->
												<!--begin::Export buttons-->
												<div id="kt_ecommerce_report_customer_orders_export" class="d-none"></div>
												<!--end::Export buttons-->
											</div>
											<!--end::Card title==

        <!==begin::Card toolbar-->
											<div class="card-toolbar flex-row-fluid justify-content-end gap-5">
												<!--begin::Daterangepicker-->
												<!--<input class="form-control form-control-solid w-100 mw-250px" placeholder="Pick date range" id="kt_ecommerce_report_customer_orders_daterangepicker" />-->
												<!--end::Daterangepicker-->
												<!--begin::Filter-->
												<!--<div class="w-150px">-->
													<!--begin::Select2-->
												<!--	<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Project Status" data-kt-ecommerce-order-filter="status">-->
												<!--		<option></option>-->
												<!--		<option value="all">All</option>-->
												<!--		<option value="Pending">Pending</option>-->
												<!--		<option value="Completed">Completed</option>-->
												<!--		<option value="Rejected">Rejected</option>-->
												<!--		<option value="Approve">Approve Request</option>-->
												<!--	</select>-->
													<!--end::Select2-->
												<!--</div>-->
												<!--end::Filter-->
												<!--begin::Export dropdown-->
												<button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
												<i class="ki-duotone ki-exit-up fs-2">
													<span class="path1"></span>
													<span class="path2"></span>
												</i>Export Report</button>
												<!--begin::Menu-->
												<div id="kt_ecommerce_report_customer_orders_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4" data-kt-menu="true">
													
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<a href="#" class="menu-link px-3" data-kt-ecommerce-export="excel">Export as Excel</a>
													</div>
													<!--end::Menu item-->
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<a href="#" class="menu-link px-3" data-kt-ecommerce-export="csv">Export as CSV</a>
													</div>
													<!--end::Menu item-->
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<a href="#" class="menu-link px-3" data-kt-ecommerce-export="pdf">Export as PDF</a>
													</div>
													<!--end::Menu item-->
												</div>
												<!--end::Menu-->
												<!--end::Export dropdown-->
											</div>
											<!--end::Card toolbar-->
										</div>
										<!--end::Card header-->
										<!--begin::Card body-->
										<div class="card-body pt-0">
											<!--begin::Table-->
											<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_ecommerce_report_customer_orders_table">
											    
												<thead>
													<tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
														<th class="min-w-50px">SI No</th>
														<th class="min-w-100px">Project ID</th>
														<th class="min-w-150px">Project Name</th>
														<th class="min-w-150px">Pjt Start Date</th>
														<th class="min-w-150px">Pjt End Date</th>
														<th class="min-w-150px">Project Status</th>
														
														<th class="min-w-150px">SchoolName</th>
														<th class="min-w-100px">District </th>
														<th class="min-w-100px">LSGD</th>
														<th class="min-w-100px">BRC </th>
														<th class="min-w-150px">BRC In-Charge</th>
														<th class="min-w-150px">BRC In-Charge Ph N0  </th>
														
														
														<th class="min-w-150px">Voucher Amt</th>
														
														<th class="min-w-100px">HOI Name </th>
														<th class="min-w-100px">HOI Ph No  </th>
														<th class="min-w-150px">Address  </th>
														<th class="min-w-100px">In Charge Ph </th>
														<th class="min-w-100px"> Dist Coordinator  </th>
													</tr>
												</thead>
												<tbody class="fw-semibold text-gray-600">
												
												
												     @php
												     $sl=0;
												     @endphp
													 @forEach($projects as $pro)
													 @php
													     $text_color=null;
                                                        switch(ucfirst($pro->project_status)){
                                                            case"Pending":
                                                             $text_color="yellow";
                                                            break;
                                                            case"New":
                                                             $text_color="blue";
                                                            break;
                                                            case"Completed":
                                                             $text_color="green";
                                                            break;
                                                            case"Rejected":
                                                             $text_color="red";
                                                            break;
                                                            case"In Progress":
                                                             $text_color="orange";
                                                            break;
                                                        }
                                                    @endphp    
                                                        <tr>
                                                            <td>{{ ++$sl }}</td>
                                                            <td>{{ $pro->projectId }}</td>
                                                            <td>{{ $pro->project_name }}</td>
                                                            <td>{{ $pro->start_date }}</td>
                                                            <td>{{ $pro->end_date }}</td>
                                                            <td><span style="color:{{ $text_color}}">{{ $pro->project_status }}</span></td>
                                                            <td>{{ $pro->school_name }}</td>
                                                            <td>{{ $pro->district }}</td>
                                                            <td>{{ $pro->panchayat }}</td>
                                                            <td>{{ $pro->brcLevel ? $pro->brcLevel->name : 'N/A' }}</td>
                                                            <td>{{ ($pro->brcLevel && $pro->brcLevel->brc_in_charge) ? $pro->brcLevel->brc_in_charge : null }}</td>
                                                            <td>{{ ($pro->brcLevel && $pro->brcLevel->phone) ? $pro->brcLevel->phone : null }}</td>
                                                            <td>{{ $pro->voucher_amt }}</td>
                                                            <td>{{ $pro->principal }}</td>
                                                            <td>{{ $pro->principal_phone }}</td>
                                                            <td>{{ $pro->address }}</td>
                                                            <td>{{ $pro->school_in_phone }}</td>
                                                            <td>{{ $pro->district_co_ordinator }}</td>
                                                    @endforeach 
                                        
												</tbody>
											</table>
											<!--end::Table-->
										</div>
										<!--end::Card body-->
									</div>
									<!--end::Products-->
								</div>
								<!--end::Content container-->
							</div>
							<!--end::Content-->
						</div>
						<!--end::Content wrapper-->
						<!--begin::Footer-->
						<div id="kt_app_footer" class="app-footer">
							<!--begin::Footer container-->
							<div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
								<!--begin::Copyright-->
								<div class="text-gray-900 order-2 order-md-1">
									<span class="text-muted fw-semibold me-1">2024&copy;</span>
									<a href="#" target="_blank" class="text-gray-800 text-hover-primary">PMS</a>
								</div>
								<!--end::Copyright-->
								<!--begin::Menu-->
							
								<!--end::Menu-->
							</div>
							<!--end::Footer container-->
						</div>
<!--end:::Project Report Main-->
<script>
    
    
    function districtChanged(){
        const district = $('#district').val();
        
            // Clear the Panchayat dropdown
            $('#panchayat').html('<option value="">Select</option>');
    
            if (district) {
                // Make AJAX request to fetch panchayats
                $.ajax({
                    url: '{{ route('getPanchayats') }}', // Replace with your route URL
                    type: 'GET',
                    data: { district: district },
                    success: function (data) {
                    
                        if (data) {
                            
                            console.log(data);
                            // Append panchayat options
                            data.forEach(function (panchayat) {
                                var pan =panchayat.panchayat_name;
                               
                                $('#panchayat').append(
                                    `<option value="${panchayat.panchayat_name}">${panchayat.panchayat_name}</option>`
                                );
                               
                            });
                        }
                    },
                    error: function () {
                        alert('Failed to load panchayats. Please try again.');
                    },
                });
                 
                 
                 
                 $('#brc_level_id').html('<option value="">Select</option>');
                 
                 $.ajax({
                    url: '{{ route('getBRCForDistrict') }}', // Replace with your route URL
                    type: 'GET',
                    data: { district: district },
                    success: function (data) {
                        if (data) {
                            //console.log(data);
                            // Append brclevel options
                            data.forEach(function (brclevel) {
                              var brclevelid =brclevel.id;
                              var edit_brc_level_id=sessionStorage.edit_brc_level_id;
                              if(brclevelid==edit_brc_level_id){
                                  $('#brc_level_id').append(
                                    `<option value="${brclevel.id}" selected data-phone="${brclevel.phone}"  data-brc-in-charge="${brclevel.brc_in_charge}">${brclevel.name}</option>`
                                    
                                    );
                                    $('#brc_level_ph').val(brclevel.phone); 
                                    $('#brc_in_charge').val(brclevel.brc_in_charge); 
                                    sessionStorage.removeItem('edit_brc_level_id');
                              }else{
                                    $('#brc_level_id').append(
                                        `<option value="${brclevel.id}"  data-phone="${brclevel.phone}" data-brc-in-charge="${brclevel.brc_in_charge}" >${brclevel.name}</option>`
                                        
                                    );
                              }
                            });
                        }
                       
                    },
                    error: function () {
                        alert('Failed to load BrcLevel. Please try again.');
                    },
                });
                
            }
    }
</script>
@endsection