@extends('layouts.admin', ['title' => 'Dashboard'])

@push('stylesheets')

    @section('content')

        <div class="main-content" id="layout-wrapper">

            <div class="page-content">
                <div class="container-fluid">

                    <!-- start page title -->
                    <!-- end page title -->
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex flex-column h-100">
                                <div class="row h-100">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-body  pb-30">
                                                {{--<div class="alert alert-warning border-0 rounded-0 m-0 d-flex align-items-center" role="alert">
                                                    <i data-feather="alert-triangle" class="text-warning me-2 icon-sm"></i>
                                                    <div class="flex-grow-1 text-truncate">
                                                        <b>Dashboard</b>
                                                    </div>
                                                    <div class="flex-shrink-0">
                                                        <p class="text-reset text-decoration-underline"></p>
                                                    </div>
                                                </div>--}}

                                                <div class="row">
                                                    <div class="col-sm-8">
                                                        <div class="p-3">
                                                            <p class="fs-16 lh-base">
                                                        <span class="fw-semibold">
                                                            Welcome back, {{Auth::user()->name}}
                                                        </span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <div class="px-3">
                                                            {{--<img src="assets/images/user-illustarator-2.png" class="img-fluid" alt="">--}}
                                                            <img
                                                                src="{{asset('assets/images/ripple_effect_yidams.png')}}"
                                                                class="img-fluid" alt="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <!-- end card-body-->
                                        </div>
                                    </div> <!-- end col-->
                                </div> <!-- end row-->
                            </div>
                        </div>
                    </div>




<!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <style>
    .containerr {
      background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
      padding: 20px;
      font-family: 'Inter', sans-serif;
    }
    .table-header {
      display: grid;
      grid-template-columns: 150px 100px 1fr 1fr 1fr 1fr;
      margin-bottom: 10px;
      font-weight: 600;
      color: #444;
      font-size: 14px;
      background: white;
      padding: 10px;
      border-radius: 15px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    }
    .indicator-card {
      display: grid;
      grid-template-columns: 150px 100px 1fr 1fr 1fr 1fr;
      align-items: start;
      background: white;
      border-radius: 15px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.05);
      padding: 10px;
      margin-bottom: 12px;
      transition: 0.3s ease;
    }
    .indicator-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 7px 15px rgba(0,0,0,0.08);
    }
    .indicator-title {
      font-weight: 600;
      font-size: 15px;
      margin-top:10%;
      color: #333;
      margin-left:10%;
    }
    .quarter {
      padding: 5px;
      text-align: center;
    }
    .progress-container {
      max-width: 40%; /* reduce bar width by half */
      margin: 0 auto;
    }
    .progress {
      height: 3px;
      border-radius: 5px;
      background-color: #eee;
      margin: 2px 0;
    }
    .progress-bar {
      border-radius: 5px;
    }
    .percent-label {
      font-weight: 600;
      font-size: 11px;
      margin-top: 1px;
    }
    .count-label {
      font-weight: 500;
      font-size: 14px; /* Increased font size for bigger number (2-3 times bigger) */
      margin-bottom: 1px;
    }
    .year-wrapper {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }
    .year-row {
      padding: 2px 0;
      font-size: 15px;
    }
    .divider {
      height: 1px;
      background-color: #f4f1f16a;
      margin: 3px 0;
    }
    .ht{
        text-align:center;
        font-size: 16px; 
    }
  </style>



<div class="containerr">

  <!-- TABLE HEADER -->
  <div class="table-header">
    <div class="ht" >Indicator</div>
    <div class="ht" >Year</div>
    <div class="ht" >Quarter 1</div>
    <div class="ht" >Quarter 2</div>
    <div class="ht" >Quarter 3</div>
    <div class="ht" >Quarter 4</div>
  </div>




<!-- Include Vue 3 via CDN -->
<script src="https://unpkg.com/vue@3"></script>
@verbatim
<div id="app">
  <div v-if="loading">Loading...</div>

  <div v-else>
    <div v-for="indicator in indicators" :key="indicator.activity" class="indicator-card">
      <div class="indicator-title">{{ indicator.activity }}</div>

      <!-- Year Headings -->
      <div class="year-wrapper">
        <div v-for="(yearData, yearLabel) in indicator.targets" :key="yearLabel" class="year-row">
          {{ yearLabel.replace('year_', 'Year ') }}
          <div class="divider"></div>
        </div>
      </div>

      <!-- Quarters -->
      <div v-for="quarter in ['q1', 'q2', 'q3', 'q4']" :key="quarter" class="quarter">
        <template v-for="(yearData, yearLabel) in indicator.targets" :key="yearLabel + quarter">
          <div class="count-label">
            {{ yearData[quarter + 'achieved'] }}/{{ yearData[quarter + 'target'] }} -
            {{ calcPercentage(yearData[quarter + 'achieved'], yearData[quarter + 'target']) }}%
          </div>
          <div class="progress-container">
            <div class="progress">
              <div
                class="progress-bar"
                :class="progressClass(yearData[quarter + 'achieved'], yearData[quarter + 'target'])"
                :style="{ width: calcPercentage(yearData[quarter + 'achieved'], yearData[quarter + 'target']) + '%' }"
              ></div>
            </div>
          </div>
          <div class="divider"></div>
        </template>
      </div>
    </div>
  </div>
</div>
@endverbatim


<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      indicators: [],
      loading: true,
    };
  },
  methods: {
    calcPercentage(achieved, target) {
      const a = parseFloat(achieved);
      const t = parseFloat(target);
      if (!t || t === 0) return 0;
      return Math.round((a / t) * 100);
    },
    progressClass(achieved, target) {
      const percentage = this.calcPercentage(achieved, target);
      if (percentage >= 85) return 'bg-success';
      if (percentage >= 65) return 'bg-warning';
      return 'bg-danger';
    }
  },
  mounted() {
    fetch("https://versa-credit.com/ripple/ripple-effect-main/public/api/getindicators")
      .then(res => res.json())
      .then(data => {
        this.indicators = data;
        this.loading = false;
      })
      .catch(err => {
        console.error("API error:", err);
        this.loading = false;
      });
  }
}).mount("#app");
</script>



  <!-- CARD 1 -->
  <div class="indicator-card">
    <div class="indicator-title">Indicator 1</div>

    <div class="year-wrapper">
      <div class="year-row">Year 1</div>
      <div class="divider"></div>
      <div class="year-row">Year 2</div>
    </div>


<!-- Q1 -->
<div class="quarter">
  <div class="count-label">255/300 - 85%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 85%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">270/300 - 90%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 90%"></div></div>
  </div>
</div>

<!-- Q2 -->
<div class="quarter">
  <div class="count-label">195/300 - 65%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-warning" style="width: 65%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">210/300 - 70%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-warning" style="width: 70%"></div></div>
  </div>
</div>

<!-- Q3 -->
<div class="quarter">
  <div class="count-label">276/300 - 92%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 92%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">234/300 - 78%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-warning" style="width: 78%"></div></div>
  </div>
</div>

<!-- Q4 -->
<div class="quarter">
  <div class="count-label">135/300 - 45%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-danger" style="width: 45%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">285/300 - 95%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 95%"></div></div>
  </div>
</div>


  </div>
  
  
  
  <!-- CARD 1 -->
  <div class="indicator-card">
    <div class="indicator-title">Indicator 1</div>

    <div class="year-wrapper">
      <div class="year-row">Year 1</div>
      <div class="divider"></div>
      <div class="year-row">Year 2</div>
    </div>



<!-- Q1 -->
<div class="quarter">
  <div class="count-label">255/300 - 85%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 85%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">270/300 - 90%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 90%"></div></div>
  </div>
</div>

<!-- Q2 -->
<div class="quarter">
  <div class="count-label">195/300 - 65%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-warning" style="width: 65%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">210/300 - 70%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-warning" style="width: 70%"></div></div>
  </div>
</div>

<!-- Q3 -->
<div class="quarter">
  <div class="count-label">276/300 - 92%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 92%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">234/300 - 78%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-warning" style="width: 78%"></div></div>
  </div>
</div>

<!-- Q4 -->
<div class="quarter">
  <div class="count-label">135/300 - 45%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-danger" style="width: 45%"></div></div>
  </div>
  <div class="divider"></div>
  <div class="count-label">285/300 - 95%</div>
  <div class="progress-container">
    <div class="progress"><div class="progress-bar bg-success" style="width: 95%"></div></div>
  </div>
</div>


  </div>
  

</div>


                </div>

                <div class="row mt-3">
                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">MCC/MCP Dashboard</h4>
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <iframe src="https://reports.agrinetug.net/public/dashboard/c379a201-afe3-404e-9e18-85d2c4fbc27b" class="iframe"></iframe>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Farmer Groups By District</h4>
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <div id="farmer-groups-by-district"
                                         data-colors='["--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-danger", "--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-info"]'
                                         class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->


                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Farmers By District</h4>
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <div id="farmers-by-district"
                                         data-colors='["--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-danger", "--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-info"]'
                                         class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Top performing Agents</h4>
                                <a target="_blank" href="/export-data?type=top_performers" class="btn btn-dark"><span
                                        class="ri ri-download-2-line"></span> Download</a>
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <div id="top_performing_agents"
                                         data-colors='["--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-danger", "--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-info"]'
                                         class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Least performing Agents</h4>
                                <a target="_blank" href="/export-data?type=worst_performers" class="btn btn-dark"><span
                                        class="ri ri-download-2-line"></span> Download</a>
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <div id="worst_performing_agents" class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Participant Status stats</h4>
                                {{--<a target="_blank" href="/export-data?type=worst_performers" class="btn btn-dark"><span class="ri ri-download-2-line"></span> Download</a>--}}
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <div id="participant_status" class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Participant gender distribution</h4>
                            </div>
                            <div class="card-body p-0">
                                <div>
                                    <div id="gender_distribution" class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                    <div class="col-12">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Participant profiling rate</h4>
                            </div>
                            <div class="card-body p-0">
                                <div style="height: 500px;">
                                    <canvas id="participant_rate"></canvas>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div> <!-- end col-->

                </div>

            </div>
        </div>

    @endsection

    @push('scripts')

        <!-- apexcharts -->
        <script src="{{ asset('/assets/libs/apexcharts/apexcharts.min.js') }}"></script>

        <!-- Vector map-->
{{--        <script src="{{ asset('/assets/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>--}}
{{--        <script src="{{ asset('/assets/libs/jsvectormap/maps/world-merc.js') }}"></script>--}}

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


        <script>

            $(document).ready(function () {


                /////////////////////////////////////FARMER GROUPS BY DISTRICT BAR CHART //////////////////////////////////////////////////
                {{--var districts = @json($districts);--}}
                /*districts = Object.values(districts);
                {{--var farmer_groups_profiled = @json($farmer_groups_count_by_district);--}}
                farmer_groups_profiled = Object.values(farmer_groups_profiled);

                console.log(farmer_groups_profiled)

                var options = {
                    chart: {
                        type: 'bar'
                    },
                    series: [{
                        name: 'Farmer Groups',
                        data: farmer_groups_profiled
                    }],
                    xaxis: {
                        categories: districts,
                        labels: {
                            show: true,
                            rotate: -45,
                            rotateAlways: true,
                            hideOverlappingLabels: true,
                            showDuplicates: false,
                            trim: false,
                            minHeight: undefined,
                            maxHeight: 120,
                            style: {
                                colors: [],
                                fontSize: '12px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                        },
                    }
                }

                var chart = new ApexCharts(document.querySelector("#farmer-groups-by-district"), options);

                chart.render();*/


//     ////////////////////////////FARMERS BY DISTRICT BAR CHART ///////////////////////////////////////////////////////////////


                /*
                {{--var male_farmers_profiled = @json($male_farmer_count_by_district);--}}
                male_farmers_profiled = Object.values(male_farmers_profiled);

                {{--var female_farmers_profiled = @json($female_farmer_count_by_district);--}}
                female_farmers_profiled = Object.values(female_farmers_profiled);

                let numbered_districts = [];
                for(let i=0; i<districts.length; i++){
                    numbered_districts.push(`${districts[i]} (${male_farmers_profiled[i] + female_farmers_profiled[i]})`);
                }
                console.log("new axis values ::", numbered_districts);


                var options = {
                    chart: {
                        type: 'bar',

                    },
                    series: [
                        {
                            name: 'Male Farmers',
                            data: male_farmers_profiled
                        },
                        {
                            name: 'Female Farmers',
                            data: female_farmers_profiled
                        },
                    ],
                    xaxis: {
                        categories: numbered_districts,
                        labels: {
                            show: true,
                            rotate: -45,
                            rotateAlways: true,
                            hideOverlappingLabels: true,
                            showDuplicates: false,
                            trim: false,
                            minHeight: undefined,
                            maxHeight: 120,
                            style: {
                                colors: [],
                                fontSize: '12px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                        },
                    },
                    responsive: [
                        {
                            breakpoint: 1000,
                            options: {
                                plotOptions: {
                                    bar: {
                                        horizontal: false
                                    }
                                },
                                legend: {
                                    position: "bottom"
                                }
                            }
                        }
                    ]
                }

                var chart = new ApexCharts(document.querySelector("#farmers-by-district"), options);

                chart.render();*/

                /*
                {{--var top_perfoming_agents = {{Js::from($top_performing_agents)}};--}}
                var perfomer_options = {
                    series: [{
                        data: top_perfoming_agents.map(agent => agent.farmers_count)
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 4,
                            horizontal: true,
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    xaxis: {
                        categories: top_perfoming_agents.map(agent => agent.name),
                    }
                };*/

                /*var performer_chart = new ApexCharts(document.querySelector("#top_performing_agents"), perfomer_options);
                performer_chart.render();

                {{--var worst_perfoming_agents = {{Js::from($worst_performing_agents)}};--}}
                var w_performer_options = {
                    series: [{
                        data: worst_perfoming_agents.map(agent => agent.farmers_count)
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 4,
                            horizontal: true,
                        }
                    },
                    dataLabels: {
                        enabled: true
                    },
                    xaxis: {
                        categories: worst_perfoming_agents.map(agent => agent.name),
                    }
                };

                var w_performer_chart = new ApexCharts(document.querySelector("#worst_performing_agents"), w_performer_options);
                w_performer_chart.render();*/

                /*
                {{--var participant_status_stats = {{Js::from($statusCounts)}};--}}
                var status_options = {
                    series: participant_status_stats.map(status => status.count),
                    chart: {
                        width: 380,
                        type: 'pie',
                    },
                    labels: participant_status_stats.map(status => status.status),
                    responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                                width: 200
                            },
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }]
                };*/

                /*var status_chart = new ApexCharts(document.querySelector("#participant_status"), status_options);
                status_chart.render();

                {{--var gender_stats = {{Js::from($genderCounts)}};--}}
                var gender_options = {
                    series: gender_stats.map(status => status.count),
                    chart: {
                        width: 380,
                        type: 'pie',
                    },
                    labels: gender_stats.map(status => status.gender),
                    responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                                width: 200
                            },
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }]
                };*/

                /*var gender_chart = new ApexCharts(document.querySelector("#gender_distribution"), gender_options);
                gender_chart.render();

                {{--const profiling_rate = {{Js::from($profiling_rate)}};--}}
                const pr_ctx = document.getElementById('participant_rate');
                new Chart(pr_ctx, {
                    type: 'line',
                    data: {
                        labels: profiling_rate.map(month => month.mnth),
                        datasets: [{
                            label: 'Monthly Profiling',
                            data: profiling_rate.map(item => item.registrations)
                        }]
                    }
                });*/


            });

        </script>

    @endpush