@extends('admin.admin_dashboard')
@section('admin')

<<<<<<< HEAD
<div class="page-content">
				<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
                 
                 


 @if (Auth::user()->can('hc_dash.view')) 


 {{-- KPI Cards --}}

  {{-- Revenue --}}
    <div class="col">
 <div class="card radius-10 ">
    <div class="card-body d-flex align-items-center">
      {{-- UGX prefix instead of dollar icon --}}
       <i class="bx bx-money fs-2 text-primary me-3"></i>
      <div>
        <h6 class="text-uppercase text-muted mb-1">
          Revenue <small class="text-capitalize">(this month)</small>
        </h6>
        <h3 class="fw-bold mb-2">{{ number_format($revenue) }}</h3>
        <a href="" class="small text-decoration-none">View Sales →</a>
      </div>
    </div>
  </div>
</div>



  {{-- Expenses --}}
  <div class="col">
    <div class="card radius-10 ">
      <div class="card-body d-flex align-items-center">
        <i class="bx bx-receipt fs-2 text-danger me-3"></i>
        <div>
          <h6 class="text-uppercase text-muted mb-1">
            Expenses <small class="text-capitalize">(this month)</small>
          </h6>
          <h3 class="fw-bold mb-2">{{ number_format($expenses) }}</h3>
          <a href="{{ route('ap.bills.index') }}" class="small text-decoration-none">View Expenses →</a>
        </div>
      </div>
    </div>
  </div>

  {{-- Net Profit --}}
  <div class="col">
    <div class="card radius-10 ">
      <div class="card-body d-flex align-items-center">
        <i class="bx bx-trending-up fs-2 text-success me-3"></i>
        <div>
          <h6 class="text-uppercase text-muted mb-1">Net Profit <small class="text-capitalize">(this month)</small></h6>
          <h3 class="fw-bold mb-2">{{ number_format($profit) }}</h3>
          <a href="{{ route('reports.profit_loss') }}" class="small text-decoration-none">P&amp;L Report →</a>
        </div>
      </div>
    </div>
  </div>

  {{-- Cash Balance --}}
  <div class="col">
    <div class="card radius-10 ">
      <div class="card-body d-flex align-items-center">
        <i class="bx bx-wallet fs-2 text-warning me-3"></i>
        <div>
          <h6 class="text-uppercase text-muted mb-1">Total Assets</h6>
          <h3 class="fw-bold mb-2">{{ number_format($cash) }}</h3>
          <a href="" class="small text-decoration-none">View Report →</a>
        </div>
      </div>
    </div>
  </div>

   <div class="col">
    <div class="card radius-10 ">
      <div class="card-body d-flex align-items-center">
        <i class="bx bx-wallet fs-2 text-warning me-3"></i>
        <div>
          <h6 class="text-uppercase text-muted mb-1">Cash at Hand</h6>
          <h3 class="fw-bold mb-2">{{ number_format($cashAtHand) }}</h3>
          <a href="" class="small text-decoration-none">View Report →</a>
        </div>
      </div>
    </div>
  </div>

   <div class="col">
    <div class="card radius-10 ">
      <div class="card-body d-flex align-items-center">
        <i class="bx bx-wallet fs-2 text-warning me-3"></i>
        <div>
          <h6 class="text-uppercase text-muted mb-1">Cash at Bank</h6>
          <h3 class="fw-bold mb-2">{{ number_format($cashAtBank) }}</h3>
          <a href="" class="small text-decoration-none">View Report →</a>
        </div>
      </div>
    </div>
  </div>






  @endif




                   @if (Auth::user()->can('active_sponsorship.view')) 
                   <div class="col">
					 <div class="card radius-10 border-start border-0 border-4 border-success">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div>
									<p class="mb-0 text-secondary">All Active Sponsorships</p>
									<h4 class="my-1 text-success">{{ $activeSponsorships }}</h4>
								</div>
								<div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bx-check-circle'></i>
								</div>
							</div>
						</div>
					 </div>                  
				   </div>
                   @endif

                    @if (Auth::user()->can('active_sponsorship_usa.view')) 
                   <div class="col">
					 <div class="card radius-10 border-start border-0 border-4 border-success">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div>
									<p class="mb-0 text-secondary">Active Sponsorships</p>
									<h4 class="my-1 text-success">{{ $usaSponsored }}</h4>
								</div>
								<div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bx-check-circle'></i>
								</div>
							</div>
						</div>
					 </div>                  
				   </div>
                   @endif

                    @if (Auth::user()->can('active_sponsorship_ger.view')) 
                   <div class="col">
					 <div class="card radius-10 border-start border-0 border-4 border-success">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div>
									<p class="mb-0 text-secondary">Active Sponsorships </p>
									<h4 class="my-1 text-success">{{ $germanSponsored }}</h4>
								</div>
								<div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bx-check-circle'></i>
								</div>
							</div>
						</div>
					 </div>                  
				   </div>
                   @endif

                      @if (Auth::user()->can('active_sponsorship_ug.view')) 
                   <div class="col">
					 <div class="card radius-10 border-start border-0 border-4 border-success">
						<div class="card-body">
							<div class="d-flex align-items-center">
								<div>
									<p class="mb-0 text-secondary">Active Sponsorships </p>
									<h4 class="my-1 text-success">{{ $ugandaSponsored }}</h4>
								</div>
								<div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bx-check-circle'></i>
								</div>
							</div>
						</div>
					 </div>                  
				   </div>
                   @endif

                   
                   @if (Auth::user()->can('awaiting_sponsorship.view')) 
				   <div class="col">
					<div class="card radius-10 border-start border-0 border-4 border-danger">
					   <div class="card-body">
						   <div class="d-flex align-items-center">
							   <div>
								   <p class="mb-0 text-secondary">Awaiting Sponsorship</p>
								   <h4 class="my-1 text-danger">{{ $pendingSponsorships }}</h4>
							   </div>
							   <div class="widgets-icons-2 rounded-circle bg-gradient-burning text-white ms-auto"><i class='bx bx-hourglass'></i>
							   </div>
						   </div>
					   </div>
					</div>
				  </div>
                  @endif

                   @if (Auth::user()->can('children_received_coffee.view')) 
				   <div class="col">
					<div class="card radius-10 border-start border-0 border-4 border-success">
					   <div class="card-body">
						   <div class="d-flex align-items-center">
							   <div>
								   <p class="mb-0 text-secondary">Received Coffee</p>
								   <h4 class="my-1 text-success">{{ $coffeeYesCount }}</h4>
                                   <a href="" class="small text-decoration-none">View List →</a>
							   </div>
							   <div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bxs-tree text-4xl text-coffee-green'></i>
                               
							   </div>
						   </div>
					   </div>
					</div>
				  </div>
                  @endif

                    @if (Auth::user()->can('children_not_received_coffee.view')) 
				   <div class="col">
					<div class="card radius-10 border-start border-0 border-4 border-danger">
					   <div class="card-body">
						   <div class="d-flex align-items-center">
							   <div>
								   <p class="mb-0 text-secondary">Not Received Coffee</p>
								   <h4 class="my-1 text-danger">{{ $coffeeNoCount }}</h4>
                                   <a href="" class="small text-decoration-none">View List →</a>
							   </div>
							   <div class="widgets-icons-2 rounded-circle bg-gradient-burning text-white ms-auto"><i class='bx bxs-tree text-4xl text-coffee-green'></i>
							   </div>
						   </div>
					   </div>
					</div>
				  </div>
                  @endif

                  @if (Auth::user()->can('success_rate.view')) 
				  <div class="col">
					<div class="card radius-10 border-start border-0 border-4 border-info">
					   <div class="card-body">
						   <div class="d-flex align-items-center">
							   <div>
								   <p class="mb-0 text-secondary">Sponsorship Rate</p>
								   <h4 class="my-1 text-info">34.6%</h4>
							   </div>
							   <div class="widgets-icons-2 rounded-circle bg-gradient-blues text-white ms-auto"><i class='bx bxs-bar-chart-alt-2' ></i>
							   </div>
						   </div>
					   </div>
					</div>
				  </div>
                   @endif

                   @if (Auth::user()->can('graduated.view')) 
				  <div class="col">
					<div class="card radius-10 border-start border-0 border-4 border-warning">
					   <div class="card-body">
						   <div class="d-flex align-items-center">
							   <div>
								   <p class="mb-0 text-secondary">Graduated</p>
								   <h4 class="my-1 text-warning">{{ $graduated }}</h4>
							   </div>
							   <div class="widgets-icons-2 rounded-circle bg-gradient-orange text-white ms-auto"><i class='bx bxs-graduation'></i>
							   </div>
						   </div>
					   </div>
					</div>
				  </div> 
                  @endif

                                       @if (Auth::user()->can('active_farmers.view')) 
                                        <div class="col">
											<div class="card radius-10 overflow-hidden mb-0 shadow-none border">
												<div class="card-body">
													<div class="d-flex align-items-center">
														<div>
															<p class="mb-0 text-secondary font-14">Active Farmers</p>
															<h5 class="my-0">4,541</h5>
														</div>
														<div class="text-primary ms-auto font-30"><i class='bx bx-user-check'></i>
														</div>
													</div>
												 </div>
												<div class="mt-1" id="chart4"></div>
												<div class="position-absolute end-0 bottom-0 m-2"><span class="text-success"></span></div>
											</div>
										</div>
                                         @endif

                                         @if (Auth::user()->can('groups_dash.view')) 
										<div class="col">
											<div class="card radius-10 overflow-hidden mb-0 shadow-none border">
												<div class="card-body">
													<div class="d-flex align-items-center">
														<div>
															<p class="mb-0 text-secondary font-14">Groups</p>
															<h5 class="my-0">61</h5>
														</div>
														<div class="text-danger ms-auto font-30"><i class='bx bx-group' ></i>
														</div>
													</div>
												</div>
												<div class="mt-1" id="chart5"></div>
												<div class="position-absolute end-0 bottom-0 m-2"><span class="text-success"></span></div>
											</div>
										</div>
                                         @endif

                                         @if (Auth::user()->can('female_farmers_dash.view')) 
										<div class="col">
											<div class="card radius-10 overflow-hidden mb-0 shadow-none border">
												<div class="card-body">
													<div class="d-flex align-items-center">
														<div>
															<p class="mb-0 text-secondary font-14">Female Farmers</p>
															<h5 class="my-0">1,770</h5>
														</div>
														<div class="text-success ms-auto font-30"><i class='bx bx-female'></i>
														</div>
													</div>
												</div>
												<div class="mt-1" id="chart6"></div>
												<div class="position-absolute end-0 bottom-0 m-2"><span class="text-danger"></span></div>
											</div>
										</div>
                                         @endif

                                         @if (Auth::user()->can('male_farmers_dash.view')) 
										<div class="col">
											<div class="card radius-10 overflow-hidden mb-0 shadow-none border">
												<div class="card-body">
													<div class="d-flex align-items-center">
														<div>
															<p class="mb-0 text-secondary font-14">Male Farmers</p>
															<h5 class="my-0">2,771</h5>
														</div>
														<div class="text-warning ms-auto font-30"><i class='bx bx-male'></i>
														</div>
													</div>
												</div>
												<div class="mt-1" id="chart7"></div>
												<div class="position-absolute end-0 bottom-0 m-2"><span class="text-danger"></span></div>
											</div>
										</div>
                                         @endif
				</div><!--end row-->
                <br>

      <div class="row">

    @if (Auth::user()->can('farmers_age_gender.view'))
    <div class="col-12 col-lg-6">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white">
                <h6 class="mb-0">📊 Farmers by Age Group & Gender</h6>
            </div>
            <div class="card-body">
                <div class="chart-container" style="position: relative; height: 350px;">
                    <canvas id="farmersByAgeChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif


 @if (Auth::user()->can('farmers_group.view'))
    <div class="col-12 col-lg-6">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-success text-white">
               <h5>👥 Farmers by Group</h5>
            </div>
            <div class="card-body">
                 <div class="chart-container" style="position: relative; height: 350px;">
            <canvas id="farmersByGroupChart"></canvas>
        </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!--end row-->
@if (Auth::user()->can('hc_dash.view')) 
  <div class="row">
     <div class="col-12">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                <h5>Monthly Revenue vs. Expenses</h5>
               
            </div>
            <div class="card-body">
                <div class="chart-container" style="width: 100%; height: 500px;">
                   <canvas id="revExpChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="row">
  <!-- Expense Breakdown by Category -->
  <div class="col-12 col-lg-6 mb-4">
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h5 class="mb-0">Expense Breakdown by Category</h5>
      </div>
      <div class="card-body" style="position: relative; height:300px;">
        <canvas id="expCatChart"></canvas>
      </div>
    </div>
  </div>

  

  <!-- Invoice Status Overview -->
  <div class="col-12 col-lg-6 mb-4">
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h5 class="mb-0">Invoice Status Overview</h5>
      </div>
      <div class="card-body" style="position: relative; height:300px;">
        <canvas id="invoiceStatusDonut"></canvas>
      </div>
    </div>
  </div>
</div>



<div class="row">
  <div class="col-12">
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h5 class="mb-0">Revenue & Quantity by Farmer</h5>
      </div>
      {{-- add Bootstrap padding utility “ps-4” for extra left space --}}
      <div class="card-body ps-4" style="position: relative; height:300px; overflow: visible;">
        <canvas id="revByFarmerChart"></canvas>
      </div>
    </div>
  </div>
</div>


@endif

 @if (Auth::user()->can('hc_dash.view')) 
<div class="row">

 <!-- AR / AP Drill-Down Tables -->
  
     {{-- Top 5 Overdue AR --}}
    <div class="col-lg-6">
      <div class="card shadow-sm border-0 rounded-lg">
        <div class="card-header bg-secondary text-white">
          Top 5 Overdue AR
        </div>
        <div class="card-body p-4">
          <div class="table-responsive">
            <table class="table table-hover table-striped align-middle mb-0">
              <thead class="table-dark">
                <tr>
                  <th>Ref</th>
                  <th>Customer</th>
                  <th class="text-end">Balance</th>
                  <th>Due Date</th>
                </tr>
              </thead>
              <tbody>
                @forelse($topAr as $r)
                <tr>
                  <td>{{ $r->ref }}</td>
                  <td>{{ $r->party }}</td>
                  <td class="text-end">{{ number_format($r->balance,2) }}</td>
                  <td>{{ $r->due }}</td>
                </tr>
                @empty
                <tr>
                  <td colspan="4" class="text-center text-muted">No overdue receivables.</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer border-0 text-end">
          <a href="{{ route('ar.aging') }}" class="small">View Full AR Aging →</a>
        </div>
      </div>
    </div>

    {{-- Top 5 Overdue AP --}}
    <div class="col-lg-6">
      <div class="card shadow-sm border-0 rounded-lg">
        <div class="card-header bg-secondary text-white">
          Top 5 Overdue AP
        </div>
        <div class="card-body p-4">
          <div class="table-responsive">
            <table class="table table-hover table-striped align-middle mb-0">
              <thead class="table-dark">
                <tr>
                  <th>Ref</th>
                  <th>Vendor</th>
                  <th class="text-end">Balance</th>
                  <th>Due Date</th>
                </tr>
              </thead>
              <tbody>
                @forelse($topAp as $r)
                <tr>
                  <td>{{ $r->ref }}</td>
                  <td>{{ $r->party }}</td>
                  <td class="text-end">{{ number_format($r->balance,2) }}</td>
                  <td>{{ $r->due }}</td>
                </tr>
                @empty
                <tr>
                  <td colspan="4" class="text-center text-muted">No overdue payables.</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer border-0 text-end">
          <a href="{{ route('ap.aging.index') }}" class="small">View Full AP Aging →</a>
        </div>
      </div>
    </div>
</div>
 @endif



				<div class="row">

                @if (Auth::user()->can('sponsorship_per_cluster.view')) 
                   <div class="col-12 col-lg-8 d-flex">
    <div class="card radius-10 w-100">
        <div class="card-header">
            <div class="d-flex align-items-center">
                <div>
                    <h6 class="mb-0">Child and Family Sponsorship Per Cluster</h6>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="chart-container-1" style="width: 100%; overflow-x: auto;">
                <canvas id="sponsorshipChart" style="max-width: 100%; height: 400px;"></canvas>
            </div>
        </div>
    </div>
</div>
 @endif


       @if (Auth::user()->can('sponsorship_per_cluster_ger.view')) 
                   <div class="col-12 col-lg-8 d-flex">
    <div class="card radius-10 w-100">
        <div class="card-header">
            <div class="d-flex align-items-center">
                <div>
                    <h6 class="mb-0">Child and Family Sponsorship Per Cluster</h6>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="chart-container-1" style="width: 100%; overflow-x: auto;">
                <canvas id="sponsorshipChartGer" style="max-width: 100%; height: 400px;"></canvas>
            </div>
        </div>
    </div>
</div>
 @endif


       @if (Auth::user()->can('sponsorship_per_cluster_usa.view')) 
                   <div class="col-12 col-lg-8 d-flex">
    <div class="card radius-10 w-100">
        <div class="card-header">
            <div class="d-flex align-items-center">
                <div>
                    <h6 class="mb-0">Child and Family Sponsorship Per Cluster </h6>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="chart-container-1" style="width: 100%; overflow-x: auto;">
                <canvas id="sponsorshipChartUsa" style="max-width: 100%; height: 400px;"></canvas>
            </div>
        </div>
    </div>
</div>
 @endif



                   @if (Auth::user()->can('country_specifics.view')) 
    <div class="col-12 col-lg-4 d-flex">
        <div class="card radius-10 w-100">
            <div class="card-header">
                <div class="d-flex align-items-center">
                    <div>
                        <h6 class="mb-0">Country Specifics</h6>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container-2">
                    <canvas id="sponsorshipPieChart"></canvas>
                </div>
            </div>
            <ul class="list-group list-group-flush">
                @foreach($countries as $index => $country)
                    @if($country == 'Germany') 
                        <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center border-top">
                            {{ $country }} <span class="badge bg-success rounded-pill">{{ $childCounts[$index] }}</span>
                        </li>
                    @else
                        <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center border-top">
                            {{ $country }} <span class="badge bg-primary rounded-pill">{{ $childCounts[$index] }}</span>
                        </li>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
@endif


 @if (Auth::user()->can('children_sponsorship_trend.view'))
<div class="row">
    <div class="col-12">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                <h5>📊 Child and Family Sponsorship Trends</h5>
               
            </div>
            <div class="card-body">
                <div style="width: 100%; overflow-x: auto;">
    <canvas id="newSponsorshipChart" style="max-width: 100%; height: 400px;"></canvas>
</div>

            </div>
        </div>
    </div>
</div>
 @endif


  @if (Auth::user()->can('children_graduation_trend.view'))
<div class="row">
    <div class="col-12">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                <h5>📊 Child and Family Graduation Trends</h5>
               
            </div>
            <div class="card-body">
                <div style="width: 100%; overflow-x: auto;">
    <canvas id="graduationTrendChart" style="max-width: 100%; height: 400px;" ></canvas>

</div>

            </div>
        </div>
    </div>
</div>
 @endif








<div class="row">
                @if (Auth::user()->can('recent_sponsorships.view'))
				 <div class="card radius-10">
					<div class="card-header">
						<div class="d-flex align-items-center">
							<div>
								<h6 class="mb-0">Recent Sponsorships</h6>
							</div>
						
						</div>
					</div>
                        <div class="card-body">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>S/N</th>
                    <th>Photo</th>
                    <th>Child Number</th>
                    <th>Name</th>
                    <th>Sponsor</th>
                    <th>Start Date</th>
                    <th>Graduation Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sponsorship as $index => $item)
                    <tr>
    <td>{{ $index + 1 }}</td>
    <td><img src="{{ $item['child_photo'] }}" alt="Child Photo" class="product-img-2"></td>
     <td>
        <a href="{{ route('child.profile.view', ['id_child' => $item['id_child']]) }}">
            {{ $item['child_number'] }}
        </a>
    </td>
    <td>{{ $item['child_name'] }}</td>
    <td>{{ $item['sponsor_name'] }}</td>
    <td>{{ $item['start_date'] }}</td>
    <td>{{ $item['graduation_date'] }}</td>
</tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
 @endif
</div>


<div class="row">
                @if (Auth::user()->can('recent_sponsorshipsGer.view'))
				 <div class="card radius-10">
					<div class="card-header">
						<div class="d-flex align-items-center">
							<div>
								<h6 class="mb-0">Recent Sponsorships</h6>
							</div>
						
						</div>
					</div>
                        <div class="card-body">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>S/N</th>
                    <th>Photo</th>
                    <th>Child Number</th>
                    <th>Name</th>
                    <th>Sponsor</th>
                    <th>Start Date</th>
                    <th>Graduation Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sponsorshipGer as $index => $item)
                    <tr>
    <td>{{ $index + 1 }}</td>
    <td><img src="{{ $item['child_photo'] }}" alt="Child Photo" class="product-img-2"></td>
     <td>
        <a href="{{ route('child.profile.view', ['id_child' => $item['id_child']]) }}">
            {{ $item['child_number'] }}
        </a>
    </td>
    <td>{{ $item['child_name'] }}</td>
    <td>{{ $item['sponsor_name'] }}</td>
    <td>{{ $item['start_date'] }}</td>
    <td>{{ $item['graduation_date'] }}</td>
</tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
 @endif
</div>


<div class="row">
                @if (Auth::user()->can('recent_sponsorshipsUS.view'))
				 <div class="card radius-10">
					<div class="card-header">
						<div class="d-flex align-items-center">
							<div>
								<h6 class="mb-0">Recent Sponsorships</h6>
							</div>
						
						</div>
					</div>
                        <div class="card-body">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>S/N</th>
                    <th>Photo</th>
                    <th>Child Number</th>
                    <th>Name</th>
                    <th>Sponsor</th>
                    <th>Start Date</th>
                    <th>Graduation Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sponsorshipUS as $index => $item)
                    <tr>
    <td>{{ $index + 1 }}</td>
    <td><img src="{{ $item['child_photo'] }}" alt="Child Photo" class="product-img-2"></td>
     <td>
        <a href="{{ route('child.profile.view', ['id_child' => $item['id_child']]) }}">
            {{ $item['child_number'] }}
        </a>
    </td>
    <td>{{ $item['child_name'] }}</td>
    <td>{{ $item['sponsor_name'] }}</td>
    <td>{{ $item['start_date'] }}</td>
    <td>{{ $item['graduation_date'] }}</td>
</tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
 @endif
</div>


<div class="row">
    @if (Auth::user()->can('pending_payment_vouchers.view'))
        <div class="card radius-10">
            <div class="card-header">
                <div class="d-flex align-items-center">
                    <div>
                        <h6 class="mb-0">Recent Payment Vouchers</h6>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>S/N</th>
                                <th>Date</th>
                                <th>Farmer Photo</th>
                                <th>Voucher ID</th>
                                <th>Farmer Name</th>
                                <th>Amount</th>
                                <th>Action</th> <!-- Add a new column for actions -->
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($paymentVouchers as $index => $voucher)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ \Carbon\Carbon::parse($voucher->date_saved)->format('F j, Y') }}</td>

                                    <td>
                                        <img src="{{ !empty($voucher->farmer_photo) ? url('upload/farmers/'.$voucher->farmer_photo) : url('upload/no_image.jpg') }}" 
                                             alt="Farmer Photo" class="product-img-2" style="width: 50px; height: 50px; object-fit: cover;">
                                    </td>
                                    <td>{{ $voucher->id }}</td>
                                    <td>{{ $voucher->farmer_fname }} {{ $voucher->farmer_lname }}</td>
                                    <td>{{number_format($voucher->net_pay, 0) }}</td>
                                    <td>
                                        @if (Auth::user()->can('payment_voucher_pending_payment.view') && $voucher->voucher_status == 3)
                                            <!-- Action Button for Making Payment -->
                                            <a href="{{ route('payment.voucher.payment', $voucher->id) }}" class="btn btn-primary btn-sm">
                                                <i class="bx bx-money me-2"></i> Make Payment
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
</div>




 @if (Auth::user()->can('farmers_registration_trend.view'))
<div class="row">
    <div class="col-12">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                <h5>📊 Farmers Registration Trends</h5>
               
            </div>
            <div class="card-body">
                <div class="chart-container" style="width: 100%; height: 500px;">
                   <canvas id="farmersTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
 @endif



 @if (Auth::user()->can('farmers_group.view'))
<div class="row">
     <div class="col-12">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                <h5>📊 Farmers Per Group</h5>
               
            </div>
            <div class="card-body">
                <div class="chart-container" style="width: 100%; height: 500px;">
                   <canvas id="groupChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
 @endif


   <div class="row">

    @if (Auth::user()->can('farmers_district.view'))
    <div class="col-12 col-lg-12">
        <div class="card radius-10 shadow-lg border-0">
            <div class="card-header bg-gradient-primary text-white">
                <h6 class="mb-0">🗺️ Farmers Location</h6>
            </div>
            <div class="card-body">
               <div id="map" style="height: 500px;"></div>
            </div>
        </div>
    </div>
    @endif

</div>





<!-- Include Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@push('scripts')
  <!-- only load the datalabels plugin once, after Chart.js core -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    const labels   = @json($farmerNames);      // ['Alice','Bob',…]
    const revenue  = @json($farmerRevenues).map(v => +v || 0);
    const quantity = @json($farmerQuantities).map(v => +v || 0);

    const ctx = document.getElementById('revByFarmerChart').getContext('2d');

    new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [{
          data: revenue,
          backgroundColor: '#6cb2eb',  // solid fallback color
          borderRadius: 8,
          barThickness: 20
        }]
      },
      options: {
        indexAxis: 'y',             // horizontal -> vertical flipped
        maintainAspectRatio: false, // fills the 300px container
        layout: {
          padding: { top:16, right:24, bottom:8, left:8 }
        },
        scales: {
          x: {
            grid:  { drawBorder:false, color:'#ececec' },
            ticks: {
              color: '#666',
              callback: v => `UGX ${Number(v).toLocaleString()}`
            }
          },
          y: {
            grid:    { display:false },
            ticks:   { color:'#333', font:{ size:14, weight:'500' } }
          }
        },
        plugins: {
          // keep your other charts’ legends intact
          legend: { display:false },

          // only apply datalabels here
          datalabels: {
            anchor: 'end',
            align:  'right',
            color:  '#fff',
            font:   { weight:'bold', size:12 },
            formatter: (val, ctx) => {
              const qty = quantity[ctx.dataIndex];
              return [
                `UGX ${val.toLocaleString()}`,
                `${qty.toLocaleString()} kg`
              ];
            }
          },

          tooltip: {
            backgroundColor: '#fff',
            titleColor:      '#333',
            bodyColor:       '#555',
            borderColor:     '#ddd',
            borderWidth:     1,
            padding:         8,
            callbacks: {
              label: ctx => {
                const val = ctx.parsed.x;
                const qty = quantity[ctx.dataIndex];
                return [
                  `UGX ${val.toLocaleString()}`,
                  `Qty: ${qty.toLocaleString()} kg`
                ];
              }
            }
          }
        },
      },
      // register the plugin only for this chart
      plugins: [ ChartDataLabels ]
    });
  });
  </script>
@endpush
































@push('scripts')
  {{-- 1) include Chart.js if you haven’t already --}}
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    // 2) your PHP arrays, passed from controller
    const labels = @json($invoiceStatusLabels);      // e.g. ['Draft','Sent','Partially Paid','Paid']
    const data   = @json($invoiceStatusData);        // e.g. [12, 34, 8, 20]

    // 3) build the chart
    const ctx = document.getElementById('invoiceStatusDonut').getContext('2d');
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels,
        datasets: [{
          data,
          backgroundColor: [
            '#6cb2eb', // Draft
            '#f6993f', // Sent
            '#38c172', // Partially Paid
            '#9561e2'  // Paid
          ],
          borderColor: '#fff',
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
            labels: { boxWidth: 12, padding: 16 }
          },
          tooltip: {
            callbacks: {
              label: ctx => {
                const value = ctx.parsed;
                const total = data.reduce((sum, v) => sum + v, 0);
                const pct = total ? (value/total*100).toFixed(1) : '0.0';
                return `${ctx.label}: ${value} (${pct}%)`;
              }
            }
          }
        }
      }
    });
  });
  </script>
@endpush

































@push('scripts')
  <!-- Chart.js core -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  <!-- outlabels plugin -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels@1.1.0/dist/chartjs-plugin-piechart-outlabels.min.js"></script>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    const labels = @json($expenseLabels);
    const values = @json($expenseValues).map(v => +v || 0);
    const total  = values.reduce((sum,v) => sum + v, 0);

    const ctx = document.getElementById('expCatChart').getContext('2d');
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels,
        datasets: [{
          data: values,
          backgroundColor: [
            '#FF6384','#36A2EB','#FFCE56','#4BC0C0',
            '#9966FF','#FF9F40','#C9CBCF','#8DD17E'
          ],
          borderColor: '#fff',
          borderWidth: 2,
          hoverOffset: 8
        }]
      },
      options: {
        maintainAspectRatio: false,
        cutout: '60%',
        // <-- make the chart itself smaller so labels/connectors have space
        zoomOutPercentage: 40,
        plugins: {
          // disable the built-in legend
          legend: { display: false },
          outlabels: {
            display: true,
            // label format: "Category: 23.4%"
            text: '%l: %p',
            color: '#333',
            font: {
              weight: 'bold',
              size: 12
            },
            stretch: 24,         // length of connector
            lineColor: '#333',   // connector color
            lineWidth: 1.5,
            offset: 8,           // how far out from slice
            align: 'start',      // arrow “heads” sit at slice edge
            clamp: false         // allow lines to go outside canvas area
          },
          tooltip: {
            callbacks: {
              label: ctx => {
                const val = ctx.parsed;
                const pct = total ? (val/total*100).toFixed(1) : '0.0';
                return `${ctx.label}: UGX ${val.toLocaleString()} (${pct}%)`;
              }
            }
          }
        }
      }
    });
  });
  </script>
@endpush
















@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    (function() {
      const labels    = {!! json_encode($labelsChart) !!};
      const revenue   = {!! json_encode($revenueChart) !!};
      const expenses  = {!! json_encode($expensesChart) !!};
      const ctx       = document.getElementById('revExpChart').getContext('2d');

      // create vertical gradients
      const revGrad = ctx.createLinearGradient(0, 0, 0, 300);
      revGrad.addColorStop(0, 'rgba(62,207,142,0.4)');
      revGrad.addColorStop(1, 'rgba(62,207,142,0.05)');
      const expGrad = ctx.createLinearGradient(0, 0, 0, 300);
      expGrad.addColorStop(0, 'rgba(255,107,107,0.4)');
      expGrad.addColorStop(1, 'rgba(255,107,107,0.05)');

      new Chart(ctx, {
        type: 'line',
        data: {
          labels,
          datasets: [
            {
              label: 'Revenue',
              data: revenue,
              borderColor:   '#3ecf8e',
              backgroundColor: revGrad,
              fill: true,
              tension: 0.3,
              pointRadius: 4,
              pointHoverRadius: 6,
              borderWidth: 3,
            },
            {
              label: 'Expenses',
              data: expenses,
              borderColor:   '#ff6b6b',
              backgroundColor: expGrad,
              fill: true,
              tension: 0.3,
              pointRadius: 4,
              pointHoverRadius: 6,
              borderWidth: 3,
            }
          ]
        },
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: { top: 10, right: 20, bottom: 10, left: 10 }
          },
          plugins: {
            legend: {
              position: 'top',
              labels: {
                boxWidth: 12,
                padding: 16,
                font: { size: 13 }
              }
            },
            tooltip: {
              mode: 'index',
              intersect: false,
              backgroundColor: 'rgba(0,0,0,0.7)',
              titleFont: { size: 14, weight: 'bold' },
              bodyFont: { size: 12 },
              callbacks: {
                label: ctx => `${ctx.dataset.label}: UGX ${ctx.parsed.y.toLocaleString()}`
              }
            }
          },
          interaction: {
            mode: 'index',
            intersect: false
          },
          scales: {
            x: {
              title: {
                display: true,
                text: 'Month (YYYY-MM)',
                font: { size: 14 }
              },
              ticks: {
                maxRotation: 45,
                minRotation: 45,
                color: '#666'
              },
              grid: { display: false }
            },
            y: {
              title: {
                display: true,
                text: 'Amount (UGX)',
                font: { size: 14 }
              },
              ticks: {
                callback: v => v.toLocaleString(),
                color: '#666',
                maxTicksLimit: 6
              },
              grid: {
                color: 'rgba(200,200,200,0.3)',
                borderDash: [4, 4]
              }
            }
          }
        }
      });
    })();
  </script>
@endpush





















<script>
    document.addEventListener("DOMContentLoaded", function() {
        var ctx = document.getElementById('graduationTrendChart').getContext('2d');

        // Create gradient effect
        function createGradient(ctx, color1, color2) {
            let gradient = ctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, color1);
            gradient.addColorStop(1, color2);
            return gradient;
        }

        var gradientMale = createGradient(ctx, 'rgba(54, 162, 235, 0.85)', 'rgba(54, 162, 235, 0)');
        var gradientFemale = createGradient(ctx, 'rgba(255, 99, 132, 0.85)', 'rgba(255, 99, 132, 0)');
        var gradientCumulative = createGradient(ctx, 'rgba(75, 192, 192, 0.7)', 'rgba(75, 192, 192, 0)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: {!! json_encode($graduationPeriods) !!}, // The graduation periods (months/years)
                datasets: [
                    {
                        label: 'Male Graduates',
                        data: {!! json_encode($maleGraduates) !!}, // Male graduates count
                        backgroundColor: gradientMale,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 3,
                        pointRadius: 6,
                        pointHoverRadius: 10,
                        pointBackgroundColor: 'white',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Female Graduates',
                        data: {!! json_encode($femaleGraduates) !!}, // Female graduates count
                        backgroundColor: gradientFemale,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 3,
                        pointRadius: 6,
                        pointHoverRadius: 10,
                        pointBackgroundColor: 'white',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Cumulative Graduates',
                        data: {!! json_encode($cumulativeGraduates) !!}, // Cumulative count of graduates
                        backgroundColor: gradientCumulative,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 3,
                        borderDash: [5, 5], // Dashed line for cumulative total
                        pointRadius: 5,
                        pointHoverRadius: 8,
                        pointBackgroundColor: 'white',
                        fill: false, // No fill for cumulative line
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: { display: true, color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 12, weight: 'bold' } }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 12, weight: 'bold' } }
                    }
                },
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(0, 0, 0, 0.85)',
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 12 },
                        padding: 10,
                        cornerRadius: 10,
                        displayColors: false
                    },
                    legend: {
                        position: 'top',
                        labels: { font: { size: 12, weight: 'bold' }, padding: 10 }
                    },
                    animation: { duration: 2000, easing: 'easeInOutQuart' }
                }
            }
        });
    });
</script>






<script>
    document.addEventListener("DOMContentLoaded", function() {
        var ctx = document.getElementById('newSponsorshipChart').getContext('2d');

        // Create gradient effect
        function createGradient(ctx, color1, color2) {
            let gradient = ctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, color1);
            gradient.addColorStop(1, color2);
            return gradient;
        }

        var gradientMale = createGradient(ctx, 'rgba(54, 162, 235, 0.85)', 'rgba(54, 162, 235, 0)');
        var gradientFemale = createGradient(ctx, 'rgba(255, 99, 132, 0.85)', 'rgba(255, 99, 132, 0)');
        var gradientCumulative = createGradient(ctx, 'rgba(75, 192, 192, 0.7)', 'rgba(75, 192, 192, 0)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: {!! json_encode($sponsorshipPeriods) !!}, 
                datasets: [
                    {
                        label: 'Male Sponsorships',
                        data: {!! json_encode($maleSponsorships) !!}, 
                        backgroundColor: gradientMale,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 3,
                        pointRadius: 6,
                        pointHoverRadius: 10,
                        pointBackgroundColor: 'white',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Female Sponsorships',
                        data: {!! json_encode($femaleSponsorships) !!}, 
                        backgroundColor: gradientFemale,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 3,
                        pointRadius: 6,
                        pointHoverRadius: 10,
                        pointBackgroundColor: 'white',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Cumulative Total',
                        data: {!! json_encode($cumulativeTotal) !!}, 
                        backgroundColor: gradientCumulative,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 3,
                        borderDash: [5, 5], // Dashed line
                        pointRadius: 5,
                        pointHoverRadius: 8,
                        pointBackgroundColor: 'white',
                        fill: false, // No fill
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: { display: true, color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 12, weight: 'bold' } }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 12, weight: 'bold' } }
                    }
                },
                plugins: {
                    tooltip: { 
                        mode: 'index', 
                        intersect: false,
                        backgroundColor: 'rgba(0, 0, 0, 0.85)',
                        titleFont: { size: 14, weight: 'bold' },
                        bodyFont: { size: 12 },
                        padding: 10,
                        cornerRadius: 10,
                        displayColors: false
                    },
                    legend: { 
                        position: 'top',
                        labels: { font: { size: 12, weight: 'bold' }, padding: 10 }
                    },
                    animation: { duration: 2000, easing: 'easeInOutQuart' }
                }
            }
        });
    });
</script>













<script>
    const countries = @json($countries);
    const childCounts = @json($childCounts);

    // Verify data is passed correctly
    console.log(countries);
    console.log(childCounts);

    // Only proceed if data is available
    if (countries.length > 0 && childCounts.length > 0) {
        const ctx = document.getElementById('sponsorshipPieChart').getContext('2d');
        const sponsorshipData = {
            labels: countries,  // Country names
            datasets: [{
                label: 'Children Sponsored per Country',
                data: childCounts,  // Number of children sponsored per country
                backgroundColor: ['#FF5733', '#33FF57', '#3357FF', '#FFB533', '#33FFF0'], // Adjust colors as needed
                borderColor: ['#FF5733', '#33FF57', '#3357FF', '#FFB533', '#33FFF0'],
                borderWidth: 1
            }]
        };

        const options = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw + ' children';  // Display number of children
                        }
                    }
                }
            }
        };

        new Chart(ctx, {
            type: 'pie',
            data: sponsorshipData,
            options: options
        });
    } else {
        console.log("No valid data to display.");
    }
</script>






<script>
    document.addEventListener("DOMContentLoaded", function() {
        var ctx = document.getElementById('sponsorshipChart').getContext('2d');

        var clusterNames = {!! json_encode($clusterNames) !!};
        var maleCounts = {!! json_encode($maleCounts) !!};
        var femaleCounts = {!! json_encode($femaleCounts) !!};
        var totalCounts = {!! json_encode($totalCounts) !!};

        // Create gradient background colors
        var maleGradient = ctx.createLinearGradient(0, 0, 0, 400);
        maleGradient.addColorStop(0, 'rgba(54, 162, 235, 1)');
        maleGradient.addColorStop(1, 'rgba(54, 162, 235, 0.7)');

        var femaleGradient = ctx.createLinearGradient(0, 0, 0, 400);
        femaleGradient.addColorStop(0, 'rgba(255, 99, 132, 1)');
        femaleGradient.addColorStop(1, 'rgba(255, 99, 132, 0.7)');

        var totalGradient = ctx.createLinearGradient(0, 0, 0, 400);
        totalGradient.addColorStop(0, 'rgba(255, 205, 86, 1)');
        totalGradient.addColorStop(1, 'rgba(255, 205, 86, 0.7)');

        // Initialize the chart
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: clusterNames,
                datasets: [
                    {
                        label: 'Boys',
                        data: maleCounts,
                        backgroundColor: maleGradient,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        borderRadius: 10,
                        hoverBackgroundColor: 'rgba(54, 162, 235, 1)',
                        hoverBorderColor: 'white',
                        hoverBorderWidth: 2
                    },
                    {
                        label: 'Girls',
                        data: femaleCounts,
                        backgroundColor: femaleGradient,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 2,
                        borderRadius: 10,
                        hoverBackgroundColor: 'rgba(255, 99, 132, 1)',
                        hoverBorderColor: 'white',
                        hoverBorderWidth: 2
                    },
                    {
                        label: 'Total',
                        data: totalCounts,
                        backgroundColor: totalGradient,
                        borderColor: 'rgba(255, 205, 86, 1)',
                        borderWidth: 2,
                        borderRadius: 10,
                        hoverBackgroundColor: 'rgba(255, 205, 86, 1)',
                        hoverBorderColor: 'white',
                        hoverBorderWidth: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { 
                        grid: { display: false }, 
                        ticks: { font: { size: 14, weight: 'bold' } } 
                    },
                    y: { 
                        beginAtZero: true, 
                        grid: { color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 14, weight: 'bold' } }
                    }
                },
                plugins: {
                    tooltip: { 
                        mode: 'index', 
                        intersect: false, 
                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
                        titleFont: { size: 16, weight: 'bold' },
                        bodyFont: { size: 14 },
                        padding: 12,
                        cornerRadius: 12,
                        displayColors: true
                    },
                    legend: { 
                        position: 'top',
                        labels: { font: { size: 14, weight: 'bold' }, padding: 20 }
                    },
                    animation: {
                        duration: 1500,
                        easing: 'easeInOutQuad'
                    }
                }
            }
        });
    });
</script>





<script>
document.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById('sponsorshipChartGer').getContext('2d');

    var clusterNamesGer  = {!! json_encode($clusterNamesGer) !!};
    var maleCountsGer    = {!! json_encode($maleCountsGer) !!};
    var femaleCountsGer  = {!! json_encode($femaleCountsGer) !!};
    var totalCountsGer   = {!! json_encode($totalCountsGer) !!};

    // build gradients (as before)…
    var maleGradient = ctx.createLinearGradient(0,0,0,400);
    maleGradient.addColorStop(0,'rgba(54,162,235,1)');
    maleGradient.addColorStop(1,'rgba(54,162,235,0.7)');

    var femaleGradient = ctx.createLinearGradient(0,0,0,400);
    femaleGradient.addColorStop(0,'rgba(255,99,132,1)');
    femaleGradient.addColorStop(1,'rgba(255,99,132,0.7)');

    var totalGradient = ctx.createLinearGradient(0,0,0,400);
    totalGradient.addColorStop(0,'rgba(255,205,86,1)');
    totalGradient.addColorStop(1,'rgba(255,205,86,0.7)');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: clusterNamesGer,
            datasets: [
                {
                    label: 'Boys',
                    data: maleCountsGer,
                    backgroundColor: maleGradient,
                    borderColor: 'rgba(54,162,235,1)',
                    borderWidth: 2,
                    borderRadius: 10
                },
                {
                    label: 'Girls',
                    data: femaleCountsGer,
                    backgroundColor: femaleGradient,
                    borderColor: 'rgba(255,99,132,1)',
                    borderWidth: 2,
                    borderRadius: 10
                },
                {
                    label: 'Total',
                    data: totalCountsGer,
                    backgroundColor: totalGradient,
                    borderColor: 'rgba(255,205,86,1)',
                    borderWidth: 2,
                    borderRadius: 10
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: { grid:{display:false}, ticks:{font:{size:14,weight:'bold'}} },
                y: { beginAtZero:true, grid:{color:'rgba(200,200,200,0.2)'}, ticks:{font:{size:14,weight:'bold'}} }
            },
            plugins: {
                tooltip: { padding:12, cornerRadius:12, titleFont:{size:16,weight:'bold'} },
                legend:  { position:'top', labels:{font:{size:14,weight:'bold'},padding:20} },
                animation: { duration:1500, easing:'easeInOutQuad' }
            }
        }
    });
});
</script>


<script>
document.addEventListener("DOMContentLoaded", function() {
  var ctxUsa = document.getElementById('sponsorshipChartUsa').getContext('2d');

  var clusterNamesUsa  = {!! json_encode($clusterNamesUsa) !!};
  var maleCountsUsa    = {!! json_encode($maleCountsUsa) !!};
  var femaleCountsUsa  = {!! json_encode($femaleCountsUsa) !!};
  var totalCountsUsa   = {!! json_encode($totalCountsUsa) !!};

  // reuse the same gradients
  var maleGradientUsa = ctxUsa.createLinearGradient(0,0,0,400);
  maleGradientUsa.addColorStop(0,'rgba(54,162,235,1)');
  maleGradientUsa.addColorStop(1,'rgba(54,162,235,0.7)');

  var femaleGradientUsa = ctxUsa.createLinearGradient(0,0,0,400);
  femaleGradientUsa.addColorStop(0,'rgba(255,99,132,1)');
  femaleGradientUsa.addColorStop(1,'rgba(255,99,132,0.7)');

  var totalGradientUsa = ctxUsa.createLinearGradient(0,0,0,400);
  totalGradientUsa.addColorStop(0,'rgba(255,205,86,1)');
  totalGradientUsa.addColorStop(1,'rgba(255,205,86,0.7)');

  new Chart(ctxUsa, {
    type: 'bar',
    data: {
      labels: clusterNamesUsa,
      datasets: [
        {
          label: 'Boys',
          data: maleCountsUsa,
          backgroundColor: maleGradientUsa,
          borderColor: 'rgba(54,162,235,1)',
          borderWidth: 2,
          borderRadius: 10
        },
        {
          label: 'Girls',
          data: femaleCountsUsa,
          backgroundColor: femaleGradientUsa,
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 2,
          borderRadius: 10
        },
        {
          label: 'Total',
          data: totalCountsUsa,
          backgroundColor: totalGradientUsa,
          borderColor: 'rgba(255,205,86,1)',
          borderWidth: 2,
          borderRadius: 10
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: { grid:{display:false}, ticks:{font:{size:14,weight:'bold'}} },
        y: { beginAtZero:true, grid:{color:'rgba(200,200,200,0.2)'}, ticks:{font:{size:14,weight:'bold'}} }
      },
      plugins: {
        tooltip: { padding:12, cornerRadius:12, titleFont:{size:16,weight:'bold'} },
        legend:  { position:'top', labels:{font:{size:14,weight:'bold'},padding:20} },
        animation: { duration:1500, easing:'easeInOutQuad' }
      }
    }
  });
});
</script>




















































































<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Farmers Trend Chart
        var ctx = document.getElementById('farmersTrendChart').getContext('2d');

        // Function to create gradient with shimmer effect
        function createGradient(ctx, color1, color2) {
            let gradient = ctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, color1);
            gradient.addColorStop(1, color2);
            return gradient;
        }

        var gradientMale = createGradient(ctx, 'rgba(54, 162, 235, 0.85)', 'rgba(54, 162, 235, 0)');
        var gradientFemale = createGradient(ctx, 'rgba(255, 99, 132, 0.85)', 'rgba(255, 99, 132, 0)');
        var gradientCumulative = createGradient(ctx, 'rgba(75, 192, 192, 0.7)', 'rgba(75, 192, 192, 0)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: {!! json_encode($farmersData->pluck('month')) !!}, 
                datasets: [
                    {
                        label: 'Male Farmers',
                        data: {!! json_encode($farmersData->pluck('male_count')) !!}, 
                        backgroundColor: gradientMale,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 3,
                        pointRadius: 7,
                        pointHoverRadius: 12,
                        pointBackgroundColor: 'white',
                        pointBorderWidth: 3,
                        hoverBorderColor: 'rgba(54, 162, 235, 1)',
                        hoverBorderWidth: 5,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Female Farmers',
                        data: {!! json_encode($farmersData->pluck('female_count')) !!}, 
                        backgroundColor: gradientFemale,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 3,
                        pointRadius: 7,
                        pointHoverRadius: 12,
                        pointBackgroundColor: 'white',
                        pointBorderWidth: 3,
                        hoverBorderColor: 'rgba(255, 99, 132, 1)',
                        hoverBorderWidth: 5,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Cumulative Total',
                        data: {!! json_encode($cumulativeCount) !!}, 
                        backgroundColor: gradientCumulative,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 3,
                        borderDash: [6, 6],
                        pointRadius: 6,
                        pointHoverRadius: 10,
                        pointBackgroundColor: 'white',
                        pointBorderWidth: 3,
                        hoverBorderColor: 'rgba(75, 192, 192, 1)',
                        hoverBorderWidth: 5,
                        fill: false,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: { display: true, color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 16, weight: 'bold', family: 'Poppins' } }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(200, 200, 200, 0.2)' },
                        ticks: { font: { size: 16, weight: 'bold', family: 'Poppins' } }
                    }
                },
                plugins: {
                    tooltip: { 
                        mode: 'index', 
                        intersect: false, 
                        backgroundColor: 'rgba(0, 0, 0, 0.85)',
                        titleFont: { size: 18, weight: 'bold', family: 'Poppins' },
                        bodyFont: { size: 14, family: 'Poppins' },
                        padding: 12,
                        cornerRadius: 12,
                        displayColors: false
                    },
                    legend: { 
                        position: 'top',
                        labels: { font: { size: 16, weight: 'bold', family: 'Poppins' }, padding: 20 },
                        onClick: (e, legendItem, chart) => {
                            let index = legendItem.datasetIndex;
                            let dataset = chart.chart.data.datasets[index];
                            dataset.hidden = !dataset.hidden;
                            chart.chart.update();
                        }
                    },
                    animation: { duration: 2200, easing: 'easeInOutQuart' }
                }
            }
        });

       
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var groupCtx = document.getElementById('groupChart').getContext('2d');

    var labels = {!! json_encode($groupNames) !!};
    var maleCounts = {!! json_encode($groupMaleCounts) !!};
    var femaleCounts = {!! json_encode($groupFemaleCounts) !!};
    var totalCounts = {!! json_encode($groupCounts) !!};

    // Create gradient backgrounds
    function createGradient(ctx, color1, color2) {
        let gradient = ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, color1);
        gradient.addColorStop(1, color2);
        return gradient;
    }

    var gradientMale = createGradient(groupCtx, '#36a2eb', '#007bff');
    var gradientFemale = createGradient(groupCtx, '#ff6384', '#d63384');
    var gradientTotal = createGradient(groupCtx, '#4bc0c0', '#009688');

    var chart = new Chart(groupCtx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: '👨‍🌾 Male Farmers',
                    data: maleCounts,
                    backgroundColor: gradientMale,
                    borderColor: '#007bff',
                    borderWidth: 3,
                    borderRadius: 12,
                    hoverBackgroundColor: '#0056b3',
                    hoverBorderColor: 'white',
                    hoverBorderWidth: 2
                },
                {
                    label: '👩‍🌾 Female Farmers',
                    data: femaleCounts,
                    backgroundColor: gradientFemale,
                    borderColor: '#d63384',
                    borderWidth: 3,
                    borderRadius: 12,
                    hoverBackgroundColor: '#a31b5f',
                    hoverBorderColor: 'white',
                    hoverBorderWidth: 2
                },
                {
                    label: '🏡 Total Farmers',
                    data: totalCounts,
                    backgroundColor: gradientTotal,
                    borderColor: '#009688',
                    borderWidth: 3,
                    borderRadius: 12,
                    hoverBackgroundColor: '#00695c',
                    hoverBorderColor: 'white',
                    hoverBorderWidth: 2
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: { 
                    grid: { display: false }, 
                    ticks: { font: { size: 14, family: 'Poppins', weight: 'bold' }, color: '#333' } 
                },
                y: { 
                    beginAtZero: true, 
                    grid: { color: 'rgba(200, 200, 200, 0.2)' },
                    ticks: { font: { size: 14, family: 'Poppins', weight: 'bold' }, color: '#333' }
                }
            },
            animation: {
                duration: 1500,
                easing: 'easeOutBounce'  // Fun bounce effect!
            },
            plugins: {
                tooltip: { 
                    mode: 'index', 
                    intersect: false, 
                    backgroundColor: 'rgba(0, 0, 0, 0.85)',
                    titleFont: { size: 16, weight: 'bold', family: 'Poppins' },
                    bodyFont: { size: 14, family: 'Poppins' },
                    padding: 12,
                    cornerRadius: 12,
                    displayColors: false,
                    callbacks: {
                        label: function(tooltipItem) {
                            return `🌱 ${tooltipItem.dataset.label}: ${tooltipItem.raw} Farmers`;
                        }
                    }
                },
                legend: { 
                    position: 'top',
                    labels: { font: { size: 14, weight: 'bold', family: 'Poppins' }, padding: 20 },
                    onClick: (e, legendItem, chart) => {
                        let index = legendItem.datasetIndex;
                        let dataset = chart.chart.data.datasets[index];
                        dataset.hidden = !dataset.hidden;
                        chart.chart.update();
                    }
                }
            }
        }
    });
});
</script>





<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Initialize map
        var map = L.map('map').setView([0, 0], 2); // Set initial map view with default zoom level

        // Add OpenStreetMap tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Parse the passed GeoJSON and farmer locations data
        var districtsGeoJSON = {!! $districtsGeoJSON !!};  // GeoJSON data for districts passed from the backend
        var farmersLocations = {!! $farmersLocations !!};  // Farmers' data passed from the backend as JSON

        // Add GeoJSON layer for districts (display district boundaries)
        L.geoJSON(districtsGeoJSON, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(
                    '<b>' + feature.properties.district_name + '</b><br>' +
                    'Farmers Count: ' + feature.properties.farmers_count
                );
                layer.setStyle({
                    fillColor: feature.properties.color, // Use color based on farmers count
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    fillOpacity: 0.7
                });
            }
        }).addTo(map);

        // Add farmer locations as individual markers on the map
        farmersLocations.forEach(function(farmer) {
            // Add marker for each farmer with popup containing their name and number
            L.marker([farmer.latitude, farmer.longitude])
                .bindPopup('<b>' + farmer.fname + ' ' + farmer.lname + '</b><br>' +
                           'Number: ' + farmer.number)
                .addTo(map);
        });

        // Fit map to include all the farmers' locations
        var bounds = L.latLngBounds();
        farmersLocations.forEach(function(farmer) {
            bounds.extend([farmer.latitude, farmer.longitude]);
        });
        map.fitBounds(bounds);  // Zoom to fit all farmer markers on the map
    });
</script>





				

					

			</div>


<script>
document.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById('farmersByAgeChart').getContext('2d');

    var gradientMale = ctx.createLinearGradient(0, 0, 0, 400);
    gradientMale.addColorStop(0, 'rgba(54, 162, 235, 0.8)');
    gradientMale.addColorStop(1, 'rgba(54, 162, 235, 0.2)');

    var gradientFemale = ctx.createLinearGradient(0, 0, 0, 400);
    gradientFemale.addColorStop(0, 'rgba(255, 99, 132, 0.8)');
    gradientFemale.addColorStop(1, 'rgba(255, 99, 132, 0.2)');

    var farmersByAgeChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['18-25', '26-40', '41-60', '60+'],
            datasets: [
                {
                    label: 'Male Farmers',
                    data: [{{ $maleAge18_25 }}, {{ $maleAge26_40 }}, {{ $maleAge41_60 }}, {{ $maleAge60Plus }}],
                    backgroundColor: gradientMale,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1.5,
                    borderRadius: 10,
                    hoverBackgroundColor: 'rgba(54, 162, 235, 1)',
                    hoverBorderColor: '#fff'
                },
                {
                    label: 'Female Farmers',
                    data: [{{ $femaleAge18_25 }}, {{ $femaleAge26_40 }}, {{ $femaleAge41_60 }}, {{ $femaleAge60Plus }}],
                    backgroundColor: gradientFemale,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1.5,
                    borderRadius: 10,
                    hoverBackgroundColor: 'rgba(255, 99, 132, 1)',
                    hoverBorderColor: '#fff'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        font: { size: 14, weight: 'bold' },
                        color: '#333'
                    }
                },
                tooltip: {
                    enabled: true,
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    titleFont: { size: 14, weight: 'bold' },
                    bodyFont: { size: 12 },
                    padding: 10,
                    cornerRadius: 6
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { font: { size: 14 }, color: '#444' }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(200, 200, 200, 0.3)' },
                    ticks: { font: { size: 14 }, color: '#444' }
                }
            },
            animation: {
                duration: 2000,
                easing: 'easeOutBounce'
            }
        }
    });
});
</script>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var ctx = document.getElementById('farmersByGroupChart').getContext('2d');

    var groupLabels = {!! json_encode($groups) !!};
    var groupCounts = {!! json_encode($groupCounts) !!};

    // Create gradient background for bars
    var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, '#36a2eb');
    gradient.addColorStop(1, '#ffcc00');

    var farmersByGroupChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: groupLabels,
            datasets: [{
                label: 'Number of Farmers',
                data: groupCounts,
                backgroundColor: gradient, // Using the gradient color
                borderColor: '#333',
                borderWidth: 1,
                barThickness: 30,  // Adjust thickness of bars
                borderRadius: 5,  // Round the corners of the bars
                hoverBackgroundColor: '#ff6f61'  // Hover effect for bars
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: { 
                    beginAtZero: true,
                    ticks: {
                        font: { size: 14, weight: 'bold' }, // Style Y-axis labels
                        color: '#333'
                    }
                },
                x: {
                    ticks: {
                        autoSkip: false,
                        callback: function(value, index, values) {
                            // Show only a few group labels to avoid congestion
                            return index % 3 === 0 ? groupLabels[index] : '';
                        },
                        font: { size: 12, weight: 'bold' }, // Style X-axis labels
                        color: '#333',
                        maxRotation: 30,
                        minRotation: 0
                    }
                }
            },
            animation: {
                duration: 1500,
                easing: 'easeInOutQuart'
            },
            plugins: {
                legend: { 
                    display: false // Hide legend
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.6)',
                    bodyFont: { size: 14 },
                    titleFont: { size: 16 }
                }
            }
        }
    });
});
</script>






            @endsection
=======
@include('admin.dashboard.partials.styles')

<div class="page-content chm-dashboard" data-chm-live-url="{{ route('admin.dashboard.live') }}">

    @include('admin.dashboard.partials.header')

    @include('admin.dashboard.partials.quick-actions')

    @include('admin.dashboard.partials.kpis')

    @include('admin.dashboard.partials.recent-activity')

    @include('admin.dashboard.partials.charts')

</div>

@include('admin.dashboard.partials.scripts')

@push('scripts')
<script src="{{ asset('backend/assets/js/chm-quick-actions.js') }}"></script>
@endpush

@endsection
>>>>>>> origin/main