@extends('admin.layouts.app')
@section('page_content')
@php
  use App\Models\WardMaster;
  use App\Models\GVPMaster;
  use App\Models\WorkerMaster;
  use App\Models\SurveyorMaster;
  use App\Models\GISMaster;

  $totalWard = WardMaster::count();
  $totalGVPMajor = GVPMaster::where('gvpType', 'Major')->count();
  $totalGVPMinor = GVPMaster::where('gvpType', 'Minor')->count();
  $totalGVP = GVPMaster::count();
  $totalWorker = WorkerMaster::count();
  $totalSurveyor = SurveyorMaster::count();
  $totalGIS = GISMaster::count();
@endphp
@php
    $loggedIn = null;
    $loggedInID = null;
    if (Auth::guard('admin')->check()) {
        $loggedIn = Auth::guard('admin')->user()->name;
        $loggedInID = Auth::guard('admin')->user()->id;
    } elseif (Auth::guard('staff')->check()) {
        $loggedIn = Auth::guard('staff')->user()->name;
    }
@endphp

<style>
  .dashboard-tile {
    border-radius: 10px;
    color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 140px;
  }

  .dashboard-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .dashboard-tile .icon {
    font-size: 40px;
    opacity: 0.3;
    position: absolute;
    right: 20px;
    bottom: 20px;
  }

  .dashboard-tile h5 {
    margin: 10px 0 5px;
    font-weight: 600;
  }

  .dashboard-tile .count {
    font-size: 32px;
    font-weight: bold;
  }

  .dashboard-tile a {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  .dashboard-tile p {
    margin-bottom: 0;
    font-size: 13px;
    opacity: 0.85;
  }
</style>

<div class="right_col" role="main">
  <div class="row">

    <div class="col-md-12 col-sm-16 col-12">
      <a href="#">
        <div class="dashboard-tile bg-info">
          <h5 id="current-time" style="font-weight: bold;"></h5>
          <br>
          <h6 id="greeting-box"></h6>
        </div>
      </a>
    </div>

    @if($loggedInID && $loggedInID==1)
    <div class="col-md-2 col-sm-6 col-12">
      <a href="/admin/ward-master">
        <div class="dashboard-tile bg-danger animate__animated animate__fadeIn">
          <div class="count">{{ $totalWard }}</div>
          <h5>Wards</h5>
          <div class="icon"><i class="fa-solid fa fa-map"></i></div>
        </div>
      </a>
    </div>
    @endif

    <!-- <div class="col-md-3 col-sm-6 col-12">
      <a href="/admin/gvp-master">
        <div class="dashboard-tile" style="background: #00bcd4;">
          <div class="count">{{ $totalGVPMajor }}</div>
          <h5>Major GVP</h5>
          <div class="icon"><i class="fa-solid fa-industry"></i></div>
        </div>
      </a>
    </div> -->

    <!-- <div class="col-md-3 col-sm-6 col-12">
      <a href="/admin/gvp-master">
        <div class="dashboard-tile" style="background: #ffc107;">
          <div class="count">{{ $totalGVPMinor }}</div>
          <h5>Minor GVP</h5>
          <div class="icon"><i class="fa-solid fa-tree-city"></i></div>
        </div>
      </a>
    </div> -->

    <div class="col-md-2 col-sm-6 col-12">
      <a href="/admin/gvp-master">
        <div class="dashboard-tile" style="background: #4caf50;">
          <div class="count">{{ $totalGVP }}</div>
          <h5>Total VAT/GVP</h5>
          <div class="icon"><i class="fa-solid fa fa-building"></i></div>
        </div>
      </a>
    </div>

    <div class="col-md-2 col-sm-6 col-12">
      <a href="/admin/surveyor-master">
        <div class="dashboard-tile" style="background: #00bcd4;">
          <div class="count">{{ $totalSurveyor }}</div>
          <h5>Sector Incharge</h5>
          <!-- <p>Application Users</p> -->
          <div class="icon"><i class="fa-solid fa fa-user-check"></i></div>
        </div>
      </a>
    </div>

    <div class="col-md-2 col-sm-6 col-12">
      <a href="/admin/worker-master">
        <div class="dashboard-tile" style="background: #9c27b0;">
          <div class="count">{{ $totalWorker }}</div>
          <h5>Block Supervisors</h5>
          <!-- <p>Application Users</p> -->
          <div class="icon"><i class="fa-solid fa fa-user-tie"></i></div>
        </div>
      </a>
    </div>

    <div class="col-md-2 col-sm-6 col-12">
      <a href="/admin/geo-fenced-master">
        <div class="dashboard-tile" style="background: #ffc107;">
          <div class="count">{{ $totalGIS }}</div>
          <h5>Geo-Fenced</h5>
          <div class="icon"><i class="fa-solid fa fa-draw-polygon"></i></div>
        </div>
      </a>
    </div>

  </div>
</div>

<script>
  function updateGreetingAndTime() {
    const now = new Date();
    const hour = now.getHours();
    let greeting = "";
    let icon = "";
    let user = "{{ $loggedIn }}";
    let APP_NAME = "{{ config('constants.APP_NAME') }} ({{ config('constants.APP_NAME_SHORT') }})";

    if (hour >= 5 && hour < 12) {
      greeting = "Good Morning";
      icon = "bi-sun-fill";
    } else if (hour >= 12 && hour < 17) {
      greeting = "Good Afternoon";
      icon = "bi-cloud-sun-fill";
    } else if (hour >= 17 && hour < 21) {
      greeting = "Good Evening";
      icon = "bi-moon-fill";
    } else {
      greeting = "Good Night";
      icon = "bi-moon-stars-fill";
    }

    const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
    const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

    const currentTime = now.toLocaleTimeString([], timeOptions);
    const currentDate = now.toLocaleDateString([], dateOptions);

    document.getElementById("greeting-box").innerHTML =
      `<i class="bi ${icon} me-2"></i> Hello, ${user}! ${greeting}, Welcome to ${APP_NAME}`;

    document.getElementById("current-time").innerText = `${currentDate} | ${currentTime}`;
  }

  updateGreetingAndTime();
  setInterval(updateGreetingAndTime, 1000);
</script>
@endsection