@php
  $title = 'Under Development';
@endphp

@extends('layouts/layoutMaster')

@section('title', $title)

@section('page-style')
  <style>
    html, body {
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .maintenance-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      padding: 0;
      margin: 0;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
      box-sizing: border-box;
      transition: all 0.3s ease;
    }
    
    /* Ensure the layout-page has relative positioning for absolute positioning to work */
    .layout-page {
      position: relative;
    }
    
    .maintenance-content {
      text-align: center;
      max-width: 500px;
      width: 100%;
      pointer-events: auto;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .maintenance-icon {
      width: 120px;
      height: 120px;
      background: rgba(102, 126, 234, 0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 2rem;
      padding: 20px;
    }
    
    .maintenance-icon i {
      font-size: 4rem;
      color: #667eea;
    }
    
    .maintenance-title {
      color: #2d3748;
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      line-height: 1.2;
    }
    
    .maintenance-subtitle {
      color: #6c757d;
      font-size: 1rem;
      line-height: 1.5;
      margin: 0;
    }
    
    @media (max-width: 768px) {
      .maintenance-container {
        padding: 1rem;
        height: 100vh;
      }
      
      .maintenance-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
        padding: 15px;
      }
      
      .maintenance-icon i {
        font-size: 2.5rem;
      }
      
      .maintenance-title {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
      }
      
      .maintenance-subtitle {
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }
    
    @media (max-height: 600px) {
      .maintenance-container {
        padding: 1rem;
      }
      
      .maintenance-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem;
        padding: 15px;
      }
      
      .maintenance-icon i {
        font-size: 2.5rem;
      }
      
      .maintenance-title {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
      }
      
      .maintenance-subtitle {
        font-size: 0.9rem;
      }
    }
  </style>
@endsection

@section('content')
  <div class="maintenance-container">
    <div class="maintenance-content">
      <div class="maintenance-icon">
        <i class="bx bx-cog"></i>
      </div>
      
      <h1 class="maintenance-title">Under Development</h1>
      <p class="maintenance-subtitle">
        The Tasks feature is temporarily unavailable while we make improvements. Please check back later.
      </p>
    </div>
  </div>
@endsection

@section('page-script')
  <script>
    // Simple fade-in animation on page load
    document.addEventListener('DOMContentLoaded', function() {
      const content = document.querySelector('.maintenance-content');
      content.style.opacity = '0';
      content.style.transform = 'translateY(20px)';
      
      setTimeout(() => {
        content.style.transition = 'all 0.6s ease';
        content.style.opacity = '1';
        content.style.transform = 'translateY(0)';
      }, 100);
      
      // Handle layout changes
      function handleLayoutChange() {
        const container = document.querySelector('.maintenance-container');
        if (container) {
          // Force re-center the content
          setTimeout(() => {
            container.style.display = 'flex';
            container.style.alignItems = 'center';
            container.style.justifyContent = 'center';
          }, 100);
        }
      }
      
      // Listen for layout toggle events
      document.addEventListener('click', function(e) {
        // Check if layout toggle button was clicked
        if (e.target.closest('.layout-menu-toggle') || 
            e.target.closest('[data-bs-toggle="layout-menu"]') ||
            e.target.closest('.menu-toggle')) {
          setTimeout(handleLayoutChange, 300);
        }
      });
      
      // Listen for window resize events
      window.addEventListener('resize', handleLayoutChange);
      
      // Use MutationObserver to watch for class changes on the layout wrapper
      const layoutWrapper = document.querySelector('.layout-wrapper');
      if (layoutWrapper) {
        const observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
              if (mutation.target.classList.contains('layout-menu-collapsed') ||
                  mutation.target.classList.contains('layout-menu-expanded')) {
                handleLayoutChange();
              }
            }
          });
        });
        
        observer.observe(layoutWrapper, {
          attributes: true,
          attributeFilter: ['class']
        });
      }
    });
  </script>
@endsection