@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/apex-charts/apex-charts.scss',
  'resources/assets/vendor/libs/swiper/swiper.scss'
])
@endsection

@section('page-style')
<!-- Page -->
@vite([
  'resources/assets/vendor/scss/pages/cards-statistics.scss',
  'resources/assets/vendor/scss/pages/cards-analytics.scss'
])
@endsection

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

@section('page-script')
@vite('resources/assets/js/dashboards-crm.js')
@endsection

@section('content')
  @php
  
    $helper = new \App\Helpers\Helpers();
    $common_date_format = $helper->general_setting_data()->date_format ?? 'd-M-y';
    $user_id = auth()->user()->user_id ;
    $auth_id = auth()->user()->id ;
    $userData =$helper->get_staff_data($user_id);
    $lastLogin =$helper->get_user_last_login($auth_id);
    $welcome_status = $userData->welcome_status ?? '1';
  @endphp

  <!-- Welcome Animation: Two panels and modal for welcome message -->
  @if($welcome_status == 0)
    <div>
      <div id="welcome-animation" class="welcome-animation">
        <div class="left-screen"></div>
        <div class="right-screen"></div>
        
        <!-- Welcome Message Modal -->
        <div class="welcome-message-container">
          <img src="{{$favUrl}}" alt="Welcome Animation" class="welcome-logo">
          <h2 class="welcome-message">
            🎉 <br> Welcome Aboard! 🚀
          </h2>
          <p class="welcome-submessage text-black">
            We're excited to have you on the team! <br>
            Your journey begins now—let's explore and achieve amazing things together. 🌟
          </p>
          <p class="welcome-inspiration text-black">
            Remember: <strong> <span id="positive-quote_first" > "Success is the sum of small efforts, repeated day in and day out." </span></strong> <span id="quote-author_first"> — Robert Collier</span>
          </p>
        </div>
      </div>
      <canvas id='canvas'></canvas>
    </div>
  @endif

  <!-- Dashboard Content -->
  
    <div class="container" id="dashboard-content" style="display: none;">
        <!-- First Row -->
        <div class="grid">
            <!-- User Profile Card -->
            <div class="card profile-card animate-fade-in position-relative overflow-hidden"
                style="background: linear-gradient(135deg, rgb(171 43 34),rgb(171 43 34), rgb(251 169 25)); color: white;">

                <!-- BACKGROUND IMAGE (Right Side Decoration) -->
                <img src="/assets/common/egc-CRM-login-png.png"
                    class="profile-bg-img"
                    alt="Decorative BG">

                <div class="d-flex position-relative justify-content-start w-100">
                    <!-- LEFT SIDE — 70% -->
                    <div class="flex-grow-1" >
                        <div class="profile-image-container mb-2">
                            <div class="profile-image-wrapper">
                                <div class="profile-border"></div>

                                @if(Auth::user()->staff->company_type==1)
                                <img  src="{{ Auth::user() && Auth::user()->staff && Auth::user()->staff->staff_image && file_exists(public_path('staff_images/Management/' . Auth::user()->staff->staff_image))
                                                    ? asset('staff_images/Management/' . Auth::user()->staff->staff_image)
                                                    : asset('assets/egc_images/auth/user_1.png') }}" alt="Profile" class="rounded-circle profile-img" />
                                @else
                                <img  src="{{ Auth::user() && Auth::user()->staff && Auth::user()->staff->staff_image && file_exists(public_path('staff_images/Buisness/'.Auth::user()->staff->company_id.'/'.Auth::user()->staff->entity_id.'/' . Auth::user()->staff->staff_image))
                                                    ? asset('staff_images/Buisness/'.Auth::user()->staff->company_id.'/'.Auth::user()->staff->entity_id.'/' . Auth::user()->staff->staff_image)
                                                    : asset('assets/egc_images/auth/user_1.png') }}" alt="Profile" class="rounded-circle profile-img" />
                                @endif
                            </div>
                        </div>

                        <div class="profile-info">
                            <h2 class="text-white">
                                Welcome,
                                @if(Auth::check())
                                    {{ Auth::user()->staff ? Auth::user()->staff->staff_name : 'Super Admin' }}
                                @else
                                    John Doe
                                @endif
                                !
                            </h2>
                            @php
                              $loginAt = \Carbon\Carbon::parse($lastLogin->login_at);

                              if($loginAt->isToday()) {
                                  $lastlogindate = 'Today, ' . $loginAt->format('h:i A');
                              } elseif($loginAt->isYesterday()) {
                                  $lastlogindate = 'Yesterday, ' . $loginAt->format('h:i A');
                              } else {
                                  $lastlogindate = $loginAt ? $loginAt->format('d-M-Y') : '-';
                              }
                          @endphp

                          <p>{{$userData->job_role_name ?? ''}} | Last login: {{$lastlogindate}}</p>

                            <!-- <div class="profile-stats d-flex">
                                <div class="stat me-4">
                                    <div class="stat-value">24</div>
                                    <div class="stat-label">Projects</div>
                                </div>
                                <div class="stat me-4">
                                    <div class="stat-value">89%</div>
                                    <div class="stat-label">Efficiency</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">126</div>
                                    <div class="stat-label">Tasks Done</div>
                                </div>
                            </div> -->
                        </div>
                    </div>

                    <!-- RIGHT SIDE CONTENT (optional) -->
                </div>
            </div>



            <!-- Date + Quote Card -->
            <div class="card date-card animate-fade-in delay-1" style="background: linear-gradient(135deg, rgb(171 43 34),rgb(171 43 34), rgb(251 169 25)); color: white;">
                <div class="date-info">
                    <h3 class="text-white"><i class="far fa-calendar-alt text-white"></i> Today</h3>
                    <div class="current-date" id="today-date">19 Nov 2025</div>
                    <div class="weather" id="weather">
                        <i class="fas fa-cloud-sun"></i>
                        <span>Loading weather...</span>
                    </div>
                </div>
                <div class="quote-container">
                    <div class="quote" id="positive-quote">"Stay motivated and positive!"</div>
                    <div class="author" id="quote-author"></div>
                </div>
            </div>
        </div>

        <!-- Main Content Card -->
        <div class="card content-card animate-fade-in delay-3 " style="background: linear-gradient(135deg, rgb(171 43 34),rgb(171 43 34), rgb(251 169 25)); color: white;">
            <h1 class="text-white"><i class="fas fa-bolt text-white"></i> Dashboard Coming Soon!</h1>
            <p>We are working hard to bring you something amazing.</p>
            <p>Stay tuned — exciting updates are on the way.</p>

            <div class="placeholder">
                <i class="fas fa-rocket me-2"></i> Coming Soon Dashboard Cards
            </div>
        </div>
    </div>



  <style>

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Inter', sans-serif;
      }

      .container {
          max-width: 1200px;
          margin: 0 auto;
      }

      .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 24px;
          margin-bottom: 24px;
      }

      /* Card Styles */
      .card {
          background: var(--card-bg);
          backdrop-filter: blur(10px);
          border-radius: 20px;
          padding: 24px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          border: 1px solid var(--card-border);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          position: relative;
          overflow: hidden;
      }

      .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
      }

     


      /* Profile Card */
      .profile-card {
          grid-column: span 2;
          display: flex;
          align-items: center;
          background: linear-gradient(135deg, var(--primary), var(--primary-dark));
          padding: 30px;
          position: relative;
          overflow: hidden;
      }

      .profile-card::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
          animation: pulse 8s infinite linear;
      }

      .profile-image-container {
          position: relative;
          margin-right: 24px;
          z-index: 2;
      }

      .profile-img {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          object-fit: cover;
          border: 4px solid rgba(255, 255, 255, 0.3);
          box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
          position: relative;
          z-index: 2;
      }
      .profile-image-wrapper {
          position: relative;
          width: 120px;
          height: 120px;
          flex-shrink: 0; /* prevent distortion */
      }
      .profile-bg-img {
          position: absolute;
          right: -16px;
          bottom: 0;
          width: 734px;
          opacity: 0.65;            /* faded background */
          pointer-events: none;     /* prevent any clicking issues */
      }
      .profile-image-container {
        margin-left: -18px; /* adjust */
      }



      .profile-border {
          position: absolute;
          top: -1px;
          left: -1px;
          right: -1px;
          bottom: -1px;
          border-radius: 50%;
          background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
          animation: rotate 3s linear infinite;
          z-index: 1;
      }

      .profile-border::after {
          content: '';
          position: absolute;
          inset: 6px;
          background: linear-gradient(135deg, var(--primary), var(--primary-dark));
          border-radius: 50%;
          z-index: 1;
      }

      .profile-info {
          z-index: 2;
          position: relative;
      }

      .profile-info h2 {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 8px;
      }

      .profile-info p {
          font-size: 16px;
          opacity: 0.9;
          margin-bottom: 16px;
      }

      .profile-stats {
          display: flex;
          gap: 20px;
      }

      .stat {
          text-align: center;
      }

      .stat-value {
          font-size: 20px;
          font-weight: 700;
          padding: 6px 14px;
          border: 2px solid rgba(255, 255, 255, 0.4);
          border-radius: 12px;
          display: inline-block;
          backdrop-filter: blur(4px);
      }


      .stat-label {
          font-size: 14px;
          opacity: 0.8;
      }

      /* Date Card */
      .date-card {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background: linear-gradient(135deg, var(--secondary), #059669);
      }

      .date-info h3 {
          font-size: 18px;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .date-info h3 i {
          font-size: 20px;
      }

      .current-date {
          font-size: 32px;
          font-weight: 700;
          margin: 16px 0;
      }

      .quote-container {
          margin-top: 16px;
      }

      .quote {
          font-style: italic;
          margin-bottom: 12px;
          line-height: 1.5;
      }

      .weather {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
      }

      /* Stats Cards */
      .stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 20px;
          margin-bottom: 24px;
      }

      .stat-card {
          text-align: center;
          padding: 20px;
      }

      .stat-icon {
          font-size: 32px;
          margin-bottom: 12px;
          height: 70px;
          width: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          margin: 0 auto 16px;
          background: rgba(255, 255, 255, 0.1);
      }

      .stat-card .value {
          font-size: 32px;
          font-weight: 700;
          margin-bottom: 8px;
      }

      .stat-card .label {
          font-size: 14px;
          opacity: 0.8;
      }




      /* Animations */
      @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      @keyframes pulse {
          0% { transform: translate(-30%, -30%) scale(0.8); opacity: 0.8; }
          50% { transform: translate(-20%, -20%) scale(1); opacity: 0.4; }
          100% { transform: translate(-30%, -30%) scale(0.8); opacity: 0.8; }
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(40px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .animate-fade-in {
          animation: fadeInUp 0.8s ease forwards;
      }

      .delay-1 { animation-delay: 0.2s; opacity: 0; }
      .delay-2 { animation-delay: 0.4s; opacity: 0; }
      .delay-3 { animation-delay: 0.6s; opacity: 0; }

      /* Responsive */
      @media (max-width: 900px) {
          .profile-card {
              grid-column: span 1;
              flex-direction: column;
              text-align: center;
          }

          .profile-image-container {
              margin-right: 0;
              margin-bottom: 20px;
          }

          .profile-stats {
              justify-content: center;
          }

          .content-card {
              grid-column: span 1;
          }
      }

      @media (max-width: 600px) {
          .grid {
              grid-template-columns: 1fr;
          }

          .profile-stats {
              flex-direction: column;
              gap: 10px;
          }

          .stats-grid {
              grid-template-columns: 1fr;
          }
      }
  </style>
<!-- Styles for Animation -->
<style>
  /* Full Screen Overlay Animation */
  .welcome-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
  }

  /* Left and Right Sliding Panels */
  .left-screen, .right-screen {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
  }

  .left-screen {
    left: 0;
    transform: translateX(-100%);
    animation: slideInLeft 2s forwards; /* Increased time for slower effect */
  }

  .right-screen {
    right: 0;
    transform: translateX(100%);
    animation: slideInRight 2s forwards; /* Increased time for slower effect */
  }

  /* Keyframe animations for the panels */
  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  /* Welcome Message */
  .welcome-message-container {
    z-index: 2;
    text-align: center;
    color: white;
    opacity: 0;
    animation: fadeInMessage 1s 1s forwards; /* Delay to show after the panels */
  }

  .welcome-logo {
    width: 150px;
    margin-bottom: 20px;
  }

  .welcome-message {
    font-size: 32px;
    font-weight: bold;
  }

  @keyframes fadeInMessage {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Ensure the Dashboard content is hidden initially */
  #dashboard-content {
    display: none;
  }
</style>

<!-- Confetti Animation Script -->
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script>
    let user_id = @json($user_id); 
   let fireworksInterval;
   let welcome_status = @json($welcome_status);
   let snd = new Audio("{{ asset('audios/fireworks_sound.mp3') }}");
  // Trigger confetti/fireworks effect
  function stopFireworks() {

      clearInterval(fireworksInterval); // Stop the loop of fireworks
      console.log("Fireworks stopped!");
      document.getElementById('canvas').style.display = 'none';
      stopAudio();  // Stop the fireworks sound when the animation stops
  }

  function stopAudio() {
      snd.pause();  // Pauses the audio
      snd.currentTime = 0;  // Resets audio to the beginning
      // console.log('audio Stoppped')
  }

  // Adjusted Fireworks Timer (10 seconds in the original code, you can adjust as needed)
  if(welcome_status == 0){
      let fireworksTimer = setTimeout(function() {
          stopFireworks();
          console.log("update call")
          updateWelcomeStatus();
      }, 10000);

      // Wait for the animation to finish and show the dashboard
      window.addEventListener('animationend', function() {
        setTimeout(() => {
          // Hide the welcome animation
          document.getElementById('welcome-animation').style.display = 'none';
          // Show the dashboard content
          document.getElementById('dashboard-content').style.display = 'block';
          // Trigger confetti effect
          startFireworks();
        }, 3000); // Delay to ensure animation finishes before revealing dashboard
      });
  }else{
     document.getElementById('dashboard-content').style.display = 'block';
  }
 

  

  // Start the opening animation for the panels
  window.addEventListener("load", function() {
    setTimeout(() => {
      // Show the modal for the welcome message
      const welcomeMessageContainer = document.querySelector(".welcome-message-container");
      if(welcomeMessageContainer){
        welcomeMessageContainer.style.opacity = 1;
      }

      // Wait a few seconds before hiding the modal and showing the dashboard
      setTimeout(() => {
        // Hide welcome message
        if(welcomeMessageContainer){
          welcomeMessageContainer.style.opacity = 0;
        }
      }, 3000); // Hide after 3 seconds
    }, 1000); // Wait for the panels to open before showing welcome message
  });
</script>

<script>
  function getSoundPermission() {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
          const [key, value] = cookies[i].trim().split('=');
          if (key === 'soundPermission' && value === 'allowed') {
              return true;
          }
      }
      return false;
  }
  function startFireworks() {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        cw = window.innerWidth,
        ch = window.innerHeight,
        fireworks = [],
        particles = [],
        hue = 120,
        limiterTotal = 20,
        limiterTick = 0,
        timerTotal = 0,
        randomTime = 0,
        timerTick = 0,
        mousedown = false,
        mx, my;

    canvas.width = cw;
    canvas.height = ch;



    // Play sound when the fireworks start
    // function playSound() {
    //     if (getSoundPermission()) {
    //         snd.play().catch(function (error) {
    //             console.log("Audio play failed:", error);
    //         });
    //     }
    // }

    // Utility functions
    function random(min, max) {
        return min + Math.random() * (max - min);
    }

    function calculateDistance(p1x, p1y, p2x, p2y) {
        return Math.sqrt((p1x - p2x) ** 2 + (p1y - p2y) ** 2);
    }

    // Firework Class
    function Firework(sx, sy, tx, ty) {
        this.x = sx;
        this.y = sy;
        this.sx = sx;
        this.sy = sy;
        this.tx = tx;
        this.ty = ty;
        this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
        this.distanceTraveled = 0;
        this.coordinates = Array.from({ length: 2 }, () => [this.x, this.y]);
        this.angle = Math.atan2(ty - sy, tx - sx);
        this.speed = 1;
        this.acceleration = 1.2;
        this.brightness = random(50, 70);
        this.targetRadius = 1;
    }

    Firework.prototype.update = function(index) {
        if (this.targetRadius < 8) {
            this.targetRadius += 0.3;
        } else {
            this.targetRadius = 1;
        }

        this.speed *= this.acceleration;
        var vx = Math.cos(this.angle) * this.speed;
        var vy = Math.sin(this.angle) * this.speed;
        this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);

        if (this.distanceTraveled >= this.distanceToTarget) {
            this.coordinates.pop();
            this.coordinates.unshift([this.tx, this.ty]);
            createParticles(this.x, this.y);
            // snd.play();
            this.draw();
            fireworks.splice(index, 1);
        } else {
            this.x += vx;
            this.y += vy;
        }

        this.coordinates.unshift([this.x, this.y]);
    };

    Firework.prototype.draw = function() {
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
        ctx.stroke();
    };

    // Particle Class
    function Particle(x, y, type) {
        this.x = x;
        this.y = y;
        this.type = type;
        this.coordinates = Array.from({ length: 6 }, () => [this.x, this.y]);
        this.setProperties(type);
    }

    Particle.prototype.setProperties = function(type) {
        var variation = random(1, 5);
        switch (type) {
            case 1:
                this.angle = random(0, Math.PI * 2);
                this.speed = random(1, 15);
                this.friction = 0.95;
                this.gravity = 4;
                this.hue = random(hue - 50, hue + 50);
                this.brightness = random(50, 80);
                this.alpha = 1;
                this.decay = random(0.01, 0.02);
                break;
            case 2:
                this.angle = random(0, Math.PI * 2);
                this.speed = random(1, 21);
                this.friction = 0.95;
                this.gravity = 3;
                this.hue = 100;
                this.brightness = random(50, 80);
                this.alpha = 1;
                this.decay = random(0.015, 0.03);
                break;
            case 3:
                this.angle = random(0, Math.PI * 2);
                this.speed = random(10, 18);
                this.friction = 0.95;
                this.gravity = 3;
                this.hue = 60;
                this.brightness = random(10, 20);
                this.alpha = 1;
                this.decay = random(0.01, 0.02);
                break;
            case 4:
                this.angle = random(0, Math.PI * 2);
                this.speed = random(1, 21);
                this.friction = 0.95;
                this.gravity = 3;
                this.hue = 300;
                this.brightness = random(50, 80);
                this.alpha = 1;
                this.decay = random(0.015, 0.03);
                break;
            default:
                break;
        }
    };

    Particle.prototype.update = function(index) {
        this.speed *= this.friction;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed + this.gravity;
        this.alpha -= this.decay;

        if (this.alpha <= this.decay) {
            particles.splice(index, 1);
        }

        this.coordinates.pop();
        this.coordinates.unshift([this.x, this.y]);
    };

    Particle.prototype.draw = function() {
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
        ctx.lineTo(this.x, this.y);
        ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
        ctx.stroke();
    };

    function createParticles(x, y) {
        var particleCount = 300;
        var type = Math.floor(random(1, 5));
        while (particleCount--) {
            particles.push(new Particle(x, y, type));
        }
        //  playSound();
    }

    // Main loop
    function loop() {
        hue += 0.5;
        ctx.globalCompositeOperation = "destination-out";
        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        ctx.fillRect(0, 0, cw, ch);

        ctx.globalCompositeOperation = "lighter";
        fireworks.forEach((firework, index) => {
            firework.draw();
            firework.update(index);
        });

        particles.forEach((particle, index) => {
            particle.draw();
            particle.update(index);
        });

        if (timerTick >= timerTotal + randomTime) {
            if (!mousedown) {
                var xPos = Math.pow(Math.floor((random(-Math.pow(cw / 2, 1 / 3), Math.pow(cw / 2, 1 / 3)))), 3);
                xPos += cw / 2;
                fireworks.push(new Firework(cw / 2, ch, xPos, random(0, ch / 2)));
                timerTick = 0;
                randomTime = Math.pow(random(2, 4), 2);
            }
        } else {
            timerTick++;
        }

        if (limiterTick >= limiterTotal) {
            if (mousedown) {
                fireworks.push(new Firework(cw / 2, ch, mx, my));
                limiterTick = 0;
            } else {
                limiterTick = limiterTotal;
            }
        } else {
            limiterTick++;
        }
    }

    // Start the fireworks loop
    fireworksInterval = setInterval(function() {
        loop();
    }, 25);

     setTimeout(function() {
        stopAudio(); // Call stopAudio after the fireworks duration ends
    }, 10000); 
 
    
};
</script>

<script>
        // Set today date
        const today = new Date();
        const options = { day: '2-digit', month: 'short', year: 'numeric' };
        document.getElementById('today-date').innerText = today.toLocaleDateString('en-GB', options);
       let quotes='';
       let auther='';

       fetch('/quote')
        .then(res => res.json())
        .then(data => {
            let quotes = `"${data[0].q}"`;
            let auther = `- ${data[0].a}`;
 
            const q1 = document.getElementById('positive-quote');
            const q2 = document.getElementById('positive-quote_first');
            const a1 = document.getElementById('quote-author');
            const a2 = document.getElementById('quote-author_first');
 
            if (q1) q1.innerText = quotes;
            if (q2) q2.innerText = quotes;
 
            if (a1) a1.innerText = auther;
            if (a2) a2.innerText = auther;
        })
        .catch(err => {
            let quotes = '"Stay positive!"';
            let auther = '- Unknown';
 
            const q1 = document.getElementById('positive-quote');
            const q2 = document.getElementById('positive-quote_first');
            const a1 = document.getElementById('quote-author');
            const a2 = document.getElementById('quote-author_first');
 
            if (q1) q1.innerText = quotes;
            if (q2) q2.innerText = quotes;
 
            if (a1) a1.innerText = auther;
            if (a2) a2.innerText = auther;
        });





        // Free weather example: Open-Meteo API
        fetch('https://api.open-meteo.com/v1/forecast?latitude=28.6139&longitude=77.2090&current_weather=true')
            .then(res => res.json())
            .then(data => {
                const temp = data.current_weather.temperature;
                const weatherCode = data.current_weather.weathercode;

                // Simple weather code to condition mapping
                let weatherCondition = "Clear";
                let weatherIcon = "fas fa-sun";

                if (weatherCode > 0 && weatherCode < 50) {
                    weatherCondition = "Cloudy";
                    weatherIcon = "fas fa-cloud";
                } else if (weatherCode >= 50 && weatherCode < 70) {
                    weatherCondition = "Rainy";
                    weatherIcon = "fas fa-cloud-rain";
                } else if (weatherCode >= 70) {
                    weatherCondition = "Snowy";
                    weatherIcon = "fas fa-snowflake";
                }

                document.getElementById('weather').innerHTML =
                    `<i class="${weatherIcon}"></i><span>${temp}°C, ${weatherCondition}</span>`;
            })
            .catch(err => {
                document.getElementById('weather').innerHTML =
                    '<i class="fas fa-sun"></i><span>28°C, Sunny</span>';
            });

        // Add animation to cards on scroll
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.card');

            cards.forEach(card => {
                card.style.opacity = '0';
            });

            setTimeout(() => {
                cards.forEach(card => {
                    card.style.opacity = '1';
                });
            }, 100);
        });
    </script>

<script>
    // Get the CSRF token from the meta tag (this should be in the head section of your layout)
    let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
     // Ensure that the user ID is correctly passed from Blade

    function updateWelcomeStatus(){
        
        if(user_id || (user_id ==0)){
            $.ajax({
                url: "{{ route('update_welcome_status') }}",
                type: "POST",
                data: {
                    staff_id: user_id,
                },
                headers: {
                    'X-CSRF-TOKEN': csrfToken,  // Add the CSRF token to the request headers
                },
                success: function(response) {
                    if (response.status === 200 && response.data) {
                        var data = response.data;
                    }
                },
                error: function(error) {
                    console.error('Error update welcome:', error);
                }
            });
        }
    }
</script>




<style>
  canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    overflow: hidden;
  }
</style>
@endsection