@php
  $quotes = [
      ['text' => __('Success is the result of hard work, determination, and the courage to pursue greatness.')],
      ['text' => __('Teamwork divides the task and multiplies the success.')],
      ['text' => __("You don't have to be perfect to make an impact; every small effort counts.")],
      ['text' => __("Productivity is not about doing more; it's about focusing on what truly matters.")],
      ['text' => __('Your attitude, not your aptitude, will determine your altitude.')],
      ['text' => __('The secret to great teamwork is trust, communication, and a shared goal.')],
      ['text' => __('Every accomplishment starts with the decision to try.')],
      ['text' => __('When we work together, the impossible becomes possible.')],
      ['text' => __('Productivity is never an accident. It is always the result of commitment to excellence.')],
      ['text' => __('Believe in your ability to shape the future with the work you do today.')],
  ];

  $quote = $quotes[array_rand($quotes)];
  $quoteText = $quote['text'];

@endphp
@extends('layouts/layoutMaster')

@section('title', __('Dashboard'))

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@section('page-script')
  @vite(['resources/assets/js/app/dashboard-index.js'])
@endsection

@section('content')
  <div class="card bg-transparent shadow-none my-6 border-0">
    <div class="card-body row p-0 pb-6 g-6">
      <div class="col-12 col-lg-8 card-separator">
        <h5 class="mb-2">{{ __('Welcome back,') }}<span class="h4"> {{ auth()->user()->getFullName() }} 👋🏻</span></h5>
        <div class="col-12 col-lg-5">
          <p>{{$quoteText}}</p>
        </div>
        <div class="d-flex justify-content-between flex-wrap gap-4 me-12">
          <div class="d-flex align-items-center gap-4 me-6 me-sm-0">
            <div class="avatar avatar-lg">
              <div class="avatar-initial bg-label-primary rounded">
                <i class="bx bx-time-five"></i>
              </div>
            </div>
            <div class="content-right">
              <p class="mb-0 fw-medium">{{ __('Hours Logged') }}</p>
              <h4 class="text-primary mb-0">{{ $todayHours ?? 0 }}h</h4>
            </div>
          </div>
          <div class="d-flex align-items-center gap-4">
            <div class="avatar avatar-lg">
              <div class="avatar-initial bg-label-info rounded">
                <i class="bx bx-task"></i>
              </div>
            </div>
            <div class="content-right">
              <p class="mb-0 fw-medium">{{ __('Pending Tasks') }}</p>
              <h4 class="text-info mb-0">{{ $tasks ?? 0 }}</h4>
            </div>
          </div>
          <div class="d-flex align-items-center gap-4">
            <div class="avatar avatar-lg">
              <div class="avatar-initial bg-label-warning rounded">
                <i class="bx bx-certification"></i>
              </div>
            </div>
            <div class="content-right">
              <p class="mb-0 fw-medium">{{ __('Ongoing Tasks') }}</p>
              <h4 class="text-warning mb-0">{{ $onGoingTasks ?? 0 }}</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 ps-md-4 ps-lg-6">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-1">{{ __('Time Spending') }}</h5>
            <p class="mb-9">{{ __('Weekly Overview') }}</p>
            <div class="time-spending-chart">
              <h4 class="mb-2">{{ $thisWeekWorkingHours }}<span
                  class="text-body">h</span>
              </h4>
              <span class="badge bg-label-success">{{ __('Your weekly working hours') }}</span>
            </div>
          </div>
          <div id="weeklyReportChart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <!-- Overview Cards -->
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5>{{ __('Total Employees') }}</h5>
          <h2>{{ $totalUser }}</h2>
          @if($totalUser > 0)
            <small class="text-success">{{ __('100% of total employees') }}</small>
          @endif
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5>{{ __('On Leave') }}</h5>
          <h2>{{ $onLeaveUsersCount  }}</h2>
          <small class="text-warning">
            @if($onLeaveUsersCount > 0)
              {{ round(($onLeaveUsersCount / $totalUser) * 100, 2) }}{{ __('% of total employees') }}
            @else
              {{ __('0% of total employees') }}
            @endif
          </small>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5>{{ __("Today's Present") }}</h5>
          <h2>{{ $todayPresentUsers }}</h2>
          <small class="text-primary">
            @if($todayPresentUsers > 0)
              {{ round(($todayPresentUsers / $totalUser) * 100, 2) }}{{ __('% of total employees') }}
            @else
              {{ __('0% of total employees') }}
            @endif
          </small>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5>{{ __("Today's Absentees") }}</h5>
          <h2>{{ $todayAbsentUsers }}</h2>
          <small class="text-danger">
            @if($todayAbsentUsers > 0)
              {{ round(($todayAbsentUsers / $totalUser) * 100, 2) }}{{ __('% of total employees') }}
            @else
              {{ __('0% of total employees') }}
            @endif
          </small>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Top Departments by Performance -->
    <div class="col-lg-12 col-md-12 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <div id="topDepartmentsChart"></div>
        </div>
      </div>
    </div>


  </div>

  <div class="row">
    <!-- Requests -->
    <div class="col-lg-4 col-md-6">
      <div class="card h-100 text-center shadow-sm">
        <div class="card-body">
          <h5 class="card-title">{{ __('Pending Requests') }}</h5>
          <div class="list-group">
            @if(\Illuminate\Support\Facades\Route::has('leaveRequests.index'))
              <a href="{{ route('leaveRequests.index') }}"
                 class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                {{ __('Leave Requests') }}
                <span class="badge bg-primary rounded-pill">{{ $pendingLeaveRequests }}</span>
              </a>
            @endif
            @if(\Illuminate\Support\Facades\Route::has('expenseRequests.index'))
              <a href="{{ route('expenseRequests.index') }}"
                 class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                {{ __('Expense Requests') }}
                <span class="badge bg-success rounded-pill">{{ $pendingExpenseRequests }}</span>
              </a>
            @endif
            @if(\Illuminate\Support\Facades\Route::has('documentmanagement.index'))
              <a href="{{ route('documentmanagement.index') }}"
                 class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                {{ __('Document Requests') }}
                <span class="badge bg-warning rounded-pill">{{ $pendingDocumentRequests }}</span>
              </a>
            @endif
            @if(\Illuminate\Support\Facades\Route::has('loan.index'))
              <a href="{{ route('loan.index') }}"
                 class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                {{ __('Loan Requests') }}
                <span class="badge bg-danger rounded-pill">{{ $pendingLoanRequests }}</span>
              </a>
            @endif
          </div>
        </div>
        <div class="card-footer text-muted">
          <small>{{ __('Last updated') }} {{ now()->diffForHumans() }}</small>
        </div>
      </div>
    </div>
    <!-- Recent Activities -->
    <div class="col-md-8 col-12">
      <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
          <div>
            <h5 class="card-title mb-0">{{ __('Recent Activities') }}</h5>
            <p class="card-subtitle my-0">{{ __('Latest activities of users') }}</p>
          </div>
        </div>
        <div class="card-body">
          <div class="timeline">
            <!--class="list-group list-group-flush" -->
            <ul id="activityList" class="list-group list-group-flush overflow-auto" style="max-height: 400px;">
              <!-- Activities will be dynamically loaded here -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection