@php
  $title = 'System Maintenance';
@endphp

@extends('layouts/layoutMaster')

@section('title', $title)

@section('page-style')
  <style>
    .maintenance-container {
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding: 2rem 1rem;
    }
    
    .maintenance-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      padding: 2rem;
      text-align: center;
      max-width: 500px;
      width: 100%;
      border: 1px solid #e9ecef;
    }
    
    .maintenance-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      animation: pulse 2s infinite;
    }
    
    .maintenance-icon i {
      font-size: 1.8rem;
      color: white;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    .maintenance-title {
      color: #2d3748;
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }
    
    .maintenance-subtitle {
      color: #6c757d;
      font-size: 1rem;
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }
    
    .maintenance-info {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 1rem;
      margin: 1.5rem 0;
      text-align: left;
    }
    
    .maintenance-info h6 {
      color: #495057;
      font-weight: 600;
      margin-bottom: 0.75rem;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
    }
    
    .maintenance-info h6 i {
      margin-right: 0.5rem;
      color: #667eea;
    }
    
    .maintenance-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.85rem;
    }
    
    .maintenance-list li {
      padding: 0.25rem 0;
      color: #6c757d;
      display: flex;
      align-items: center;
    }
    
    .maintenance-list li::before {
      content: '•';
      color: #667eea;
      font-weight: bold;
      margin-right: 0.5rem;
    }
    
    .estimated-time {
      background: #fff3cd;
      border: 1px solid #ffeaa7;
      color: #856404;
      padding: 0.75rem;
      border-radius: 8px;
      margin: 1rem 0;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .estimated-time i {
      margin-right: 0.5rem;
    }
    
    .progress-container {
      background: #e9ecef;
      border-radius: 6px;
      height: 4px;
      margin: 1rem 0;
      overflow: hidden;
    }
    
    .progress-bar {
      background: linear-gradient(90deg, #667eea, #764ba2);
      height: 100%;
      width: 0%;
      border-radius: 6px;
      animation: progress 3s ease-in-out infinite;
    }
    
    @keyframes progress {
      0% { width: 0%; }
      50% { width: 70%; }
      100% { width: 0%; }
    }
    
    .contact-section {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 1rem;
      margin-top: 1rem;
      border: 1px solid #e9ecef;
    }
    
    .contact-section h6 {
      color: #495057;
      font-weight: 600;
      margin-bottom: 0.75rem;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
    }
    
    .contact-section h6 i {
      margin-right: 0.5rem;
      color: #667eea;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.5rem 0;
      color: #6c757d;
      text-decoration: none;
      transition: color 0.3s ease;
      font-size: 0.85rem;
    }
    
    .contact-item:hover {
      color: #667eea;
      text-decoration: none;
    }
    
    .contact-item i {
      margin-right: 0.5rem;
      color: #667eea;
      width: 16px;
    }
    
    
    
    .maintenance-badge {
      display: inline-block;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 0.25rem 0.75rem;
      border-radius: 15px;
      font-size: 0.7rem;
      font-weight: 600;
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .app-logo {
      margin-bottom: 1.5rem;
    }
    
    .app-logo img {
      max-height: 40px;
      width: auto;
    }
    
    @media (max-width: 768px) {
      .maintenance-card {
        padding: 1.5rem;
        margin: 0.5rem;
      }
      
      .maintenance-title {
        font-size: 1.5rem;
      }
      
      .maintenance-subtitle {
        font-size: 0.9rem;
      }
    }
  </style>
@endsection

@section('content')
  <div class="maintenance-container">
    <div class="maintenance-card">
      <div class="app-logo">
        <img src="{{ asset('assets/img/logo/logo.png') }}" alt="{{ config('variables.templateName') }}" onerror="this.style.display='none'">
      </div>
      
      <div class="maintenance-badge">
        <i class="bx bx-cog"></i> Maintenance
      </div>
      
      <div class="maintenance-icon">
        <i class="bx bx-wrench"></i>
      </div>
      
      <h1 class="maintenance-title">System Maintenance</h1>
      <p class="maintenance-subtitle">
        We're performing scheduled maintenance to improve your experience.
      </p>
      
      <div class="maintenance-info">
        <h6>
          <i class="bx bx-info-circle"></i>
          Updates in progress
        </h6>
        <ul class="maintenance-list">
          <li>System updates and improvements</li>
          <li>Database optimization</li>
          <li>Security enhancements</li>
        </ul>
      </div>
      
      <div class="estimated-time">
        <i class="bx bx-time"></i>
        <strong>ETA:</strong> 1 to 2 months
      </div>
      
      <div class="progress-container">
        <div class="progress-bar"></div>
      </div>
      
       <div class="contact-section">
         <h6>
           <i class="bx bx-headphone"></i>
           Need help?
         </h6>
         <a href="mailto:sieitz@gmail.com" class="contact-item">
           <i class="bx bx-envelope"></i>
           <span>sieitz@gmail.com</span>
         </a>
       </div>
    </div>
  </div>
@endsection

@section('page-script')
  <script>
    // Auto-refresh every 30 seconds
    setTimeout(function() {
      window.location.reload();
    }, 30000);
    
    // Add some subtle animations
    document.addEventListener('DOMContentLoaded', function() {
      const card = document.querySelector('.maintenance-card');
      card.style.opacity = '0';
      card.style.transform = 'translateY(20px)';
      
      setTimeout(() => {
        card.style.transition = 'all 0.6s ease';
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
      }, 100);
    });
  </script>
@endsection