@include('new_layouts.header')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<style>
.projectlifetimezone{
  display : none !important;
}
.bg-dark-grey {
  background-color: #6b7280;
}
.bg-red {
  background-color: #dc2626; /* A strong red */
}
</style>
<div class="page-wrapper">
@include('construction_project.side-menu')
    <!-- Page header -->
    <div class="container-fluid py-5 px-5">
    <div class="page-header d-print-none">
      <div class="container-fluid">
        <div class="row g-2 align-items-center">
          <div class="col-10">
            <!-- Page pre-title -->
            <div class="page-pretitle">
              {{ __('Overview')}}
            </div>
            <h2 class="page-title">
              {{ __('Dashboard')}}
            </h2>
          </div>


        </div>
      </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
      <div class="container-fluid">
        <div class="row row-deck row-cards">
          <div class="col-lg-6 col-xl-3">
            <div class="card">
              <div class="card-body p-2 text-center">
                @php
                  $avatar=substr($project->project_name, 0, 1);
                @endphp
                <span class="avatar avatar-xl mb-3 rounded">{{ $avatar }}</span>
                <h3 class="mb-0">{{$project->project_name}}</h3>
                <p class="text-secondary"><b>{{ __('Start from')}}:</b>
                {{ Utility::getDateFormated($project->start_date) }} - <b>{{ __('Due to')}}:</b>
                 {{ Utility::getDateFormated($project->end_date) }}</p>
                <p class="mb-3">
                @if($project->status == 'in_progress')
                  <span class="badge bg-info p-2 px-3 rounded"> {{ __('In Progress')}}</span>
                @elseif($project->status == 'on_hold')
                  <span class="badge  bg-warning p-2 px-3 rounded">{{ __('On Hold')}}</span>
                @elseif($project->status == 'Canceled')
                  <span class="badge  bg-red p-2 px-3 rounded"> {{ __('Canceled')}}</span>
                @else
                    <span class="badge bg-success p-2 px-3 rounded">{{ __('Finished')}}</span>
                @endif
                </p>
                <div>
                  <div class="avatar-list avatar-list-stacked">
                    @php
                      $projectmembers=\App\Models\Project::project_member($project->id);
                    @endphp
                  @foreach ($projectmembers as $user)
                    @php
                      $name_r=\App\Models\Project::get_user_name($user->user_id);
                      $short=substr($name_r->name ?? '', 0, 1);
                    @endphp
                  <span class="avatar avatar-sm rounded">{{$avatar}}</span>
                  @endforeach
                  </div>
                </div>
              </div>
              @php
                  $progress=\App\Models\Project::actual_progress($project->id);
               @endphp
               <div class="progress card-progress">
                  <div class="progress-bar" style="width: %" role="progressbar"
                      aria-valuenow="" aria-valuemin="0" aria-valuemax="100"
                       aria-label="% Complete">
                     <span class="visually-hidden">% {{ __('Complete') }}</span>
                  </div>
               </div>
            </div>
          </div>
          <div class="col-lg-6 col-xl-3">
            <div class="card">
              <div class="card-header">
                <h3>{{ __('Project Current Status')}}</h3>
              </div>
              <div class="card-body">
                <div id="chart-demo-pie"></div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-xl-6">
            <div class="card">
                <div class="chart-container">
                  <canvas id="chart"></canvas>
                </div>
            </div>
          </div>

          
          <div class="col-lg-6 col-xl-3 projectlifetimezone" >
            <div class="card">
              <div class="card-header">
                <h3>Project Life Time Zone</h3>
              </div>
              <div class="card-body">
                <p class="mb-3">Life Time <strong>120 th day </strong>of 300 days</p>
                <div class="progress progress-separated mb-3">
                  <div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
                  <div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
                  <div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
                </div>
                <div class="row">
                  <div class="col-auto d-flex align-items-center pe-2">
                    <span class="legend me-2 bg-primary"></span>
                    <span>Safe zone</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
                  </div>
                  <div class="col-auto d-flex align-items-center px-2">
                    <span class="legend me-2 bg-info"></span>
                    <span>Critical Zone</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
                  </div>
                  <div class="col-auto d-flex align-items-center px-2">
                    <span class="legend me-2 bg-success"></span>
                    <span>Shared</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
                  </div>
                  <div class="col-auto d-flex align-items-center ps-2">
                    <span class="legend me-2"></span>
                    <span>Free</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          @if($checkProject != null)
            {{-- <div class="col-lg-6 col-xl-3">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">
                    {{ __('Current Lookahead')}}
                  </h3>
                  <div class="card-actions">
                    <a href="{{ route('micro_taskboard') }}">
                      {{ __('View the Active Lookahead')}}
                      <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
                    </a>
                  </div>
                </div>
                <div class="card-body">
                  <dl class="row">
                    @if($microProgram != null)
                      <dt class="col-5">{{ __('Start Date')}}:</dt>
                      <dd class="col-7">
                        {{ Utility::site_date_format($microProgram->schedule_start_date,\Auth::user()->id) }}
                      </dd>
                      <dt class="col-5">{{ __('End Date')}}:</dt>
                      <dd class="col-7">
                        {{ Utility::site_date_format($microProgram->schedule_end_date,\Auth::user()->id) }}
                      </dd>
                      <dt class="col-5">{{ __('Holiday in Days')}}:</dt>
                      <dd class="col-7">{{$holidayCount}} Days</dd>
                      <dt class="col-5">{{ __('Weekends in Days')}}</dt>
                      <dd class="col-7">{{$microWeekEndCount}} Days</dd>
                      <dt class="col-5">{{ __('Total working Days')}}:</dt>
                      <dd class="col-7">{{$totalWorkingDays}} Days</dd>
                      <dt class="col-5">{{ __('Total Task Taken')}}:</dt>
                      <dd class="col-7">{{$conTaskTaken}} Tasks</dd>
                      <dt class="col-5">{{ __('Total Sub Task Created')}}:</dt>
                      <dd class="col-7">{{$microTaskCount}} Tasks</dd>
                    @else
                      <dd class="col-7 text-center">{{ __('No schedule is active')}}</dd>
                    @endif
                  </dl>
                </div>
              </div>
            </div> --}}
          @endif
          <div class="row">
            @if(!empty($schedules) && count($schedules) > 0)
              @foreach($schedules as $item)
                <div class="col-lg-6 col-xl-3">
                  <div class="card mb-4">
                    <div class="card-header">
                     <h3 class="card-title">
                        <span class="badge bg-primary">{{ $item->schedule_name }}</span>
                      </h3>

                      <div class="card-actions">
                        
                       <a href="#">
  `                       {{ __('View the Active Schedule') }}
                          </a>
                      </div>
                    </div>
                    <div class="card-body">
                      <dl class="row">
                          <dt class="col-6">Open:</dt>
                          <dd class="col-6">{{ $item->open_count ?? 0 }}</dd>
                          <dt class="col-6">Pending:</dt>
                          <dd class="col-6">{{ $item->pending_count ?? 0 }}</dd>
                          <dt class="col-6">In Progress:</dt>
                          <dd class="col-6">{{ $item->in_progress_count ?? 0 }}</dd>
                          <dt class="col-6">Withdrawn:</dt>
                          <dd class="col-6">{{ $item->withdrawn_count ?? 0 }}</dd>
                          <dt class="col-6">Closed:</dt>
                          <dd class="col-6">{{ $item->closed_count ?? 0 }}</dd>
                          <dt class="col-5">{{ __('Start Date') }}:</dt>
                          <dd class="col-7">
                            {{ \Utility::site_date_format($item->schedule_start_date, \Auth::user()->id) }}
                          </dd>
                          <dt class="col-5">{{ __('End Date') }}:</dt>
                          <dd class="col-7">
                            {{ \Utility::site_date_format($item->schedule_end_date, \Auth::user()->id) }}
                          </dd>
                      </dl>
                    </div>
                  </div>
                </div>
              @endforeach
            @else
              <div class="col-12 text-center text-muted">
                {{ __('No schedule is active') }}
              </div>
            @endif
          </div>


        </div>
       
        <div class="row row-deck row-cards">
            <div class="col-sm-6 col-lg-6">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex align-items-center">
                    <div class="subheader">{{ __('Total Task')}}</div>
                  </div>
                  <div class="h1 mb-3">{{$project_data['task']['total'] }} {{ __('Tasks')}}</div>
                  <div class="d-flex mb-2">
                    <div>{{ __('Planned Percentage')}}</div>
                    <div class="ms-auto">
                      <span class="text-blue d-inline-flex align-items-center lh-1">
                      {{ round($current_Planed_percentage) }}%
                      </span>
                    </div>
                  </div>
                  <div class="progress progress-sm">
                    <div class="progress-bar bg-primary" style="width: {{ round($current_Planed_percentage) }}%"
                    role="progressbar" aria-valuenow="{{ round($current_Planed_percentage) }}"
                      aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
                      <span class="visually-hidden">75% Complete</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex align-items-center">
                    <div class="subheader"> {{ __('Completed Task')}}</div>
                    <div class="ms-auto lh-1">
                      {{-- <div class="dropdown">
                        <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true"
                          aria-expanded="false">Last 7 days</a>
                        <div class="dropdown-menu dropdown-menu-end">
                          <a class="dropdown-item active" href="#">Last 7 days</a>
                          <a class="dropdown-item" href="#">Last 30 days</a>
                          <a class="dropdown-item" href="#">Last 3 months</a>
                        </div>
                      </div> --}}
                    </div>
                  </div>
                  <div class="h1 mb-3">
                    <div class="h1 mb-0 me-2">{{$completed_task}} {{ __('Tasks')}}</div>
                  </div>
                  <div class="d-flex mb-2">
                    <div>{{ __('Actual Percentage')}}</div>
                    <div class="ms-auto">
                      <span class="text-blue d-inline-flex align-items-center lh-1">
                      {{round($actual_percentage)}}% <!-- Download SVG icon from http://tabler-icons.io/i/trending-up -->
                      </span>
                    </div>
                  </div>
                  <div class="progress progress-sm">
                    <div class="progress-bar bg-primary" style="width: {{round($actual_percentage)}}%"
                    role="progressbar" aria-valuenow="{{round($actual_percentage)}}"
                      aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
                      <span class="visually-hidden">{{round($actual_percentage)}}% Complete</span>
                    </div>
                  </div>
                </div>

              </div>

            </div>

            <div class="col-12">
              <div class="row row-cards">
                <div class="col-sm-6 col-lg-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="bg-success text-white avatar">
                            <svg xmlns="http://www.w3.org/2000/svg"
                              class="icon icon-tabler icon-tabler-checklist"
                              width="24" height="24" viewBox="0 0 24 24"
                              stroke-width="2" stroke="currentColor" fill="none"
                              stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M9.615 20h-2.615a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8"></path>
                              <path d="M14 19l2 2l4 -4"></path>
                              <path d="M9 8h4"></path>
                              <path d="M9 12h2"></path>
                            </svg>
                          </span>
                        </div>
                        

                          <div class="col">
                            <a @if( Session::get('current_revision_freeze')==1)
                            href='{{ route('taskBoard.view', ['list','status'=>'comp']) }}' @endif>
                            <div class="font-weight-medium">
                              {{ __('Total Completed Task')}} 
                            </div>
                            </a>
                            <div class="text-muted">
                            {{  $completed_task }} {{ __('Tasks')}}
                            </div>
                          </div>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="bg-twitter text-white avatar">
                            <svg xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-road"
                            width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none"
                             stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M4 19l4 -14"></path>
                              <path d="M16 5l4 14"></path>
                              <path d="M12 8v-2"></path>
                              <path d="M12 13v-2"></path>
                              <path d="M12 18v-2"></path>
                            </svg>
                          </span>
                        </div>
                        <div class="col">
                          <a @if( Session::get('current_revision_freeze')==1)
                          href='{{ route('taskBoard.view', ['list','status'=>'ongoing']) }}' @endif>
                            <div class="font-weight-medium">
                              {{ __('Total Ongoing Task')}}
                            </div>
                            <div class="text-muted">
                            {{ $ongoing_task }} {{ __('Tasks')}}
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="bg-dark-grey text-white avatar">
                            <svg xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-list-details"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M13 5h8"></path>
                              <path d="M13 9h5"></path>
                              <path d="M13 15h8"></path>
                              <path d="M13 19h5"></path>
                              <path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
                              <path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
                            </svg>
                          </span>
                        </div>
                        <div class="col">
                          <a @if( Session::get('current_revision_freeze')==1)
                           href='{{ route('taskBoard.view', ['list','status'=>'remaning']) }}' @endif>
                            <div class="font-weight-medium">
                              {{ __('Total Upcoming Task')}}
                            </div>
                            <div class="text-muted">
                            {{ $all_upcoming }} {{ __('Tasks')}}
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="bg-red text-white avatar">

                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                             stroke="currentColor" fill="none" stroke-linecap="round"
                                                      stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M9 6l11 0"></path>
                              <path d="M9 12l11 0"></path>
                              <path d="M9 18l11 0"></path>
                              <path d="M5 6l0 .01"></path>
                              <path d="M5 12l0 .01"></path>
                              <path d="M5 18l0 .01"></path>
                            </svg>
                          </span>
                        </div>
                        <div class="col">
                          <a @if( Session::get('current_revision_freeze')==1)
                           href='{{ route('taskBoard.view', ['list','status'=>'pending']) }}' @endif>
                            <div class="font-weight-medium">
                              {{ __('Total Pending Task')}}
                            </div>
                            <div class="text-muted">
                              {{ $notfinished }} {{ __('Tasks')}}
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                 <!--This is a Dependency Critical task count starts-->
                <div class="col-sm-6 col-lg-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span
                            class="bg-orange text-white avatar">
                            <svg xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-route-2" width="24" height="24"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M3 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                              <path d="M19 7a2 2 0 1 0 0 -4a2 2 0 0 0 0 4z"></path>
                              <path d="M14 5a2 2 0 0 0 -2 2v10a2 2 0 0 1 -2 2"></path>
                            </svg>
                          </span>
                        </div>
                        <div class="col">
                          <a @if( Session::get('current_revision_freeze')==1)
                           href='{{ route('taskBoard.view', ['list','status'=>'dependency_critical']) }}' @endif>
                            <div class="font-weight-medium">
                              {{ __('Total Dependency Critical Task') }}
                            </div>
                            <div class="text-muted">
                              {{ $dependencycriticalcount }} {{ __('Tasks')}}
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--This is a Dependency Critical task count ends-->

                <!--This is a Entire Critical task count starts-->
                <div class="col-sm-6 col-lg-3">
                  <div class="card card-sm">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span
                            class="bg-red  text-white avatar">
                            <svg xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-alert-triangle-filled"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor"></path>
                                      </svg>
                          </span>
                        </div>
                        <div class="col">
                          <a @if( Session::get('current_revision_freeze')==1)
                           href='{{ route('taskBoard.view', ['list','status'=>'entire_critical']) }}' @endif>
                            <div class="font-weight-medium">
                              {{ __('Total Critical Task') }}
                            </div>
                            <div class="text-muted">
                              {{ $entirecriticalcount }} {{ __('Tasks')}}
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--This is a Entire Critical task count ends-->
              </div>
            </div>
            <div class="col-lg-12">
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title">{{ __('Task Summary')}}</h3>
                  <div id="chart-mentions" class="chart-lg"></div>
                </div>
              </div>
            </div>
              

          </div>

        @if($checkProject != null)
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <h3 class="card-title">{{ __('Lookahead Summary')}}</h3>
                <div id="micro_chart-mentions" class="chart-lg"></div>
              </div>
            </div>
          </div>
        @endif


      </div>
    </div>
  </div>
</div>
  <script>
    // @formatter:off
    const all_completed  = ;
    const all_upcoming   = ;
  
    const all_inprogress = ;
    const all_pending    = ;


    document.addEventListener("DOMContentLoaded", function () {
      let chartdemopie = document.getElementById('chart-demo-pie');
      if(chartdemopie!=undefined){
        window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
            chart: {
                type: "donut",
                fontFamily: 'inherit',
                height: 240,
                sparkline: {
                    enabled: true
                },
                animations: {
                    enabled: false
                },
            },
            fill: {
                opacity: 1,
            },
            series: [all_pending, all_completed, all_inprogress, all_upcoming],
            labels: ["Pending", "Completed", "Ongoing", "Upcoming Tasks"],
            tooltip: {
                theme: 'dark'
            },
            grid: {
                strokeDashArray: 4,
            },
            colors: [tabler.getColor("danger"), tabler.getColor("green", 0.8),
            tabler.getColor("primary", 0.6), 'grey'],
            legend: {
                show: true,
                position: 'bottom',
                offsetY: 12,
                markers: {
                    width: 10,
                    height: 10,
                    radius: 100,
                },
                itemMargin: {
                    horizontal: 8,
                    vertical: 8
                },
            },
            tooltip: {
                fillSeriesColor: false
            },
        })).render();
      }
       
    });

    const data=null;
    const completed=null;
    const pending=null;

    document.addEventListener("DOMContentLoaded", function () {
      let chartmentions = document.getElementById('chart-mentions');
      if(chartmentions!=undefined){
        window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
          chart: {
            type: "bar",
            fontFamily: 'inherit',
            height: 240,
            parentHeightOffset: 0,
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false
            },
            stacked: true,
          },
          plotOptions: {
            bar: {
              columnWidth: '50%',
            }
          },
          dataLabels: {
            enabled: false,
          },
          fill: {
            opacity: 1,
          },
          series: [{
            name: "Pending",
            data: pending,
          }, {
            name: "Completed",
            data: completed,
          }],
          tooltip: {
            theme: 'dark'
          },
          grid: {
            padding: {
              top: -20,
              right: 0,
              left: -4,
              bottom: -4
            },
            strokeDashArray: 4,
            xaxis: {
              lines: {
                show: true
              }
            },
          },
          xaxis: {
            labels: {
              padding: 0,
            },
            tooltip: {
              enabled: false
            },
            axisBorder: {
              show: false,
            },
            type: 'datetime',
          },
          yaxis: {
            labels: {
              padding: 4
            },
          },
          labels:data,
          colors: [tabler.getColor("red"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)],
          legend: {
            show: false,
          },
        })).render();
      }
    });

    const microProgramName=null;
    const micro_planned_set =null;
    const micro_actual_percentage_set = null;

    document.addEventListener("DOMContentLoaded", function () {
      let micro_chart = document.getElementById('micro_chart-mentions');
      if(micro_chart!=undefined){
        window.ApexCharts && (new ApexCharts(document.getElementById('micro_chart-mentions'), {
          chart: {
              type: "bar",
              fontFamily: 'inherit',
              height: 320,
              parentHeightOffset: 0,
              toolbar: {
              show: false,
              },
              animations: {
              enabled: false
              },
          },
          plotOptions: {
              bar: {
              columnWidth: '50%',
              }
          },
          dataLabels: {
              enabled: false,
          },
          fill: {
              opacity: 1,
          },
          series: [{
              name: "Planned",
              data: micro_planned_set
          }, {
              name: "Actual",
              data: micro_actual_percentage_set
          }],
          tooltip: {
              theme: 'dark'
          },
          grid: {
              padding: {
              top: -20,
              right: 0,
              left: -4,
              bottom: -4
              },
              strokeDashArray: 4,
          },
          xaxis: {
              labels: {
              padding: 0,
              },
              tooltip: {
              enabled: false
              },
              axisBorder: {
              show: false,
              },
              categories: microProgramName,
          },
          yaxis: {
              labels: {
                padding: 4
              },
          },
          colors: [tabler.getColor("primary")],
          legend: {
              show: false,
          },
        })).render();
      }
    });
    // @formatter:on
  </script>
  <input type="hidden" id="tasksNames" value="{{json_encode($tasksNames)}}"/>
  <script>
const DATA_COUNT = 7;
const NUMBER_CFG = { count: DATA_COUNT, min: -100, max: 100 };

const labels = JSON.parse($('#tasksNames').val());
const dataChart = {
    labels: labels,
    datasets: [
        {
            label: 'Completed',
            data: {{$completed_percent}},
            backgroundColor: 'rgb(47, 179, 68)',
            borderColor: 'rgba(128, 128, 128, 0.8)',
            borderWidth: 0.3,
            barPercentage: 0.9, 
            categoryPercentage: 0.9 
        },
        {
            label: 'Delay',
            data: {{$delay_percent}},
            backgroundColor: 'rgb(214, 57, 57)',
            borderColor: 'rgba(128, 128, 128, 0.8)',
            borderWidth: 0.3,
            barPercentage: 0.9, 
            categoryPercentage: 0.9 
        },
        {
            label: 'Yet to Complete',
            data: {{$yettocomplete_percent}},
            backgroundColor: 'rgb(32, 107, 196)',
            borderColor: 'rgba(128, 128, 128, 0.8)',
            borderWidth: 0.3,
            barPercentage: 0.9, 
            categoryPercentage: 0.9 
        },
    ]
};

const config = {
    type: 'bar',
    data: dataChart,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Task Current Status'
            },
            legend: {
                labels: {
                    usePointStyle: true,
                    pointStyle: 'rect',
                    generateLabels: (chart) => {
                        const datasets = chart.data.datasets;
                        return datasets.map((dataset, i) => ({
                            text: dataset.label,
                            fillStyle: dataset.backgroundColor,
                            hidden: !chart.isDatasetVisible(i),
                            lineCap: dataset.borderCapStyle,
                            lineDash: dataset.borderDash,
                            lineDashOffset: dataset.borderDashOffset,
                            lineJoin: dataset.borderJoinStyle,
                            strokeStyle: 'transparent',
                            pointStyle: 'rect',
                            rotation: 0,
                            datasetIndex: i
                        }));
                    }
                }
            }
        },
        responsive: true,
        scales: {
            x: {
                stacked: true,
                barPercentage: 0.8, // Adjust this value to control the bar width
                categoryPercentage: 0.8, // Adjust this value to control the space between categories
            },
            y: {
                stacked: true
            }
        }
    }
};

new Chart('chart', config);


</script>
@include('new_layouts.footer')