@extends('layouts.layoutMaster')

@section('title', 'Live Demo Preview')

@section('content')
  <div class="demo-preview-page">
    <div class="container py-4">
      <!-- Header -->
      <div class="text-center mb-4">
        <div class="d-inline-flex align-items-center mb-3">
          <div class="logo-wrapper me-3">
            <img src="{{asset('assets/img/logo.png')}}" alt="App Logo" class="hero-logo">
          </div>
          <div class="text-start">
            <h1 class="hero-title mb-0">{{config('variables.templateName')}}</h1>
            <p class="hero-subtitle mb-0">{{config('variables.templateDescription')}}</p>
          </div>
        </div>
      </div>

      <!-- Web Panel Demos -->
      <div class="row g-4 mb-4">
        @if($isSaaSMode)
          <!-- SaaS Mode: Two Panel Options -->
          <div class="col-md-6">
            <div class="demo-card super-admin-card">
              <div class="demo-card-icon">
                <i class="bx bx-crown"></i>
              </div>
              <div class="demo-card-content">
                <h3 class="demo-card-title">Super Admin Panel</h3>
                <p class="demo-card-desc">Manage tenants, subscriptions, and platform settings</p>
              </div>
              <a href="{{ $demoLinks['superAdminPanelDemoLink'] }}" target="_blank" class="btn btn-primary btn-lg">
                <i class="bx bx-desktop me-2"></i>Launch Demo
              </a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="demo-card tenant-card">
              <div class="demo-card-icon">
                <i class="bx bx-building"></i>
              </div>
              <div class="demo-card-content">
                <h3 class="demo-card-title">Tenant Panel</h3>
                <p class="demo-card-desc">HR, Finance, Operations & 40+ business modules</p>
              </div>
              <a href="{{ $demoLinks['tenantPanelDemoLink'] }}" target="_blank" class="btn btn-success btn-lg">
                <i class="bx bx-desktop me-2"></i>Launch Demo
              </a>
            </div>
          </div>
        @else
          <!-- Non-SaaS Mode: Single Admin Panel -->
          <div class="col-12">
            <div class="demo-card admin-card">
              <div class="demo-card-icon">
                <i class="bx bx-desktop"></i>
              </div>
              <div class="demo-card-content">
                <h3 class="demo-card-title">Admin Panel</h3>
                <p class="demo-card-desc">Complete business management with HR, Finance, Operations & 40+ integrated modules</p>
              </div>
              <a href="{{ $demoLinks['superAdminPanelDemoLink'] }}" target="_blank" class="btn btn-primary btn-lg">
                <i class="bx bx-rocket me-2"></i>Launch Live Demo
              </a>
            </div>
          </div>
        @endif
      </div>

      <!-- Mobile Apps Section -->
      <div class="apps-section">
        <div class="section-header d-flex justify-content-between align-items-center mb-3">
          <h5 class="mb-0"><i class="bx bx-mobile-alt me-2"></i>Mobile Applications</h5>
          <span class="badge bg-label-warning">
            <i class="bx bx-purchase-tag me-1"></i>Sold Separately
          </span>
        </div>

        <div class="row g-3">
          <!-- Employee App -->
          <div class="col-md-6">
            <div class="app-card">
              <div class="app-card-header">
                <div class="app-icon employee-icon">
                  <i class="bx bx-user-circle"></i>
                </div>
                <div class="app-info">
                  <h5 class="app-title mb-1">Employee App</h5>
                  <p class="app-desc mb-0">Attendance, Leave, Payslips, Expenses, Chat & more</p>
                </div>
              </div>
              <div class="app-card-footer">
                <div class="platform-icons">
                  <span><i class="bx bxl-android"></i></span>
                  <span><i class="bx bxl-apple"></i></span>
                </div>
                <a href="{{ $mobileAppLinks['employeeAppDemoLink'] }}" target="_blank" class="btn btn-success btn-sm">
                  <i class="bx bx-download me-1"></i>Download APK
                </a>
              </div>
            </div>
          </div>

          <!-- Manager App -->
          <div class="col-md-6">
            <div class="app-card">
              <div class="app-card-header">
                <div class="app-icon manager-icon">
                  <i class="bx bx-briefcase"></i>
                </div>
                <div class="app-info">
                  <h5 class="app-title mb-1">Field Manager App</h5>
                  <p class="app-desc mb-0">Live tracking, Task assignment, Geofencing, Analytics</p>
                </div>
              </div>
              <div class="app-card-footer">
                <div class="platform-icons">
                  <span><i class="bx bxl-android"></i></span>
                  <span><i class="bx bxl-apple"></i></span>
                </div>
                <a href="{{ $mobileAppLinks['managerAppDemoLink'] }}" target="_blank" class="btn btn-warning btn-sm">
                  <i class="bx bx-download me-1"></i>Download APK
                </a>
              </div>
            </div>
          </div>
        </div>

        <p class="text-muted text-center mt-2 mb-0" style="font-size: 0.8rem;">
          <i class="bx bx-info-circle"></i> Demo APKs available for Android. iOS apps available on App Store after purchase.
        </p>
      </div>

      <!-- Features Overview -->
      <div class="features-section mt-4">
        <div class="section-header text-center mb-3">
          <h5 class="mb-1"><i class="bx bx-grid-alt me-2"></i>40+ Platform Features & Modules</h5>
        </div>

        <!-- Core Modules (Included) -->
        <div class="modules-group mb-3">
          <div class="modules-group-header mb-2">
            <span class="badge bg-success"><i class="bx bx-check-circle me-1"></i>Core Modules (Included)</span>
          </div>
          <div class="row g-2">
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-user-circle"></i> Employee Management</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-time"></i> Attendance</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-calendar"></i> Leave Management</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-check-square"></i> Approvals</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-file"></i> Documents</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-cabinet"></i> Assets</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-coffee"></i> Break System</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-calendar-event"></i> Calendar</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-notepad"></i> Notes & Notices</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-book-content"></i> HR Policies</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-line-chart"></i> Accounting</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-briefcase"></i> Project Management</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-package"></i> Inventory & WMS</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-store"></i> CRM & Sales</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-cog"></i> System & Settings</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-shield"></i> Roles & Permissions</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip core"><i class="bx bx-brain"></i> AI Core (OpenAI)</div>
            </div>
          </div>
        </div>

        <!-- Premium Modules (Sold Separately) -->
        <div class="modules-group">
          <div class="modules-group-header mb-2 d-flex align-items-center gap-2">
            <span class="badge bg-warning"><i class="bx bx-crown me-1"></i>Premium Modules</span>
            <small class="text-muted">(Sold Separately)</small>
          </div>
          <div class="row g-2">
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-money"></i> Payroll</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-map-pin"></i> Field Manager</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-task"></i> Field Tasks</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-message-dots"></i> Chat & Messaging</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-video"></i> Video Calls</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-building"></i> Multi-Tenancy</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-user-check"></i> Recruitment</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-scan"></i> Advanced Attendance</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-book"></i> LMS Training</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-coin"></i> Loan Management</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-target-lock"></i> Sales Targets</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-bot"></i> AI Chat</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-user-voice"></i> HR Assistant AI</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-wallet"></i> Finance Assistant AI</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-trending-up"></i> Sales Assistant AI</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-data"></i> Reporting AI</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-file-find"></i> Document AI</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-edit-alt"></i> Auto Description AI</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bxl-google"></i> Gemini AI Provider</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-server"></i> Local AI Provider</div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
              <div class="feature-chip premium"><i class="bx bx-plus-circle"></i> 10+ More</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .demo-preview-page {
      background: #f5f7fa;
      min-height: 100vh;
    }

    /* Header */
    .logo-wrapper {
      background: white;
      padding: 0.75rem;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .hero-logo {
      max-width: 50px;
      height: auto;
    }

    .hero-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: #2c3e50;
    }

    .hero-subtitle {
      font-size: 0.95rem;
      color: #6c757d;
    }

    /* Demo Cards */
    .demo-card {
      background: white;
      border-radius: 16px;
      padding: 2rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .demo-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .demo-card-icon {
      width: 70px;
      height: 70px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: white;
      flex-shrink: 0;
    }

    .super-admin-card .demo-card-icon { background: #696cff; }
    .tenant-card .demo-card-icon { background: #28a745; }
    .admin-card .demo-card-icon { background: #696cff; }

    .super-admin-card:hover { border-color: #696cff; }
    .tenant-card:hover { border-color: #28a745; }
    .admin-card:hover { border-color: #696cff; }

    .demo-card-content {
      flex: 1;
    }

    .demo-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 0.25rem;
    }

    .demo-card-desc {
      font-size: 0.9rem;
      color: #6c757d;
      margin-bottom: 0;
    }

    .demo-card .btn-lg {
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      border-radius: 10px;
      white-space: nowrap;
    }

    /* Apps Section */
    .apps-section {
      background: white;
      border-radius: 16px;
      padding: 1.5rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .section-header h5 {
      font-weight: 600;
      color: #2c3e50;
    }

    .app-card {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 1rem;
      transition: all 0.3s ease;
    }

    .app-card:hover {
      background: #f0f2f5;
    }

    .app-card-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .app-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: white;
      flex-shrink: 0;
    }

    .employee-icon { background: #28a745; }
    .manager-icon { background: #fd7e14; }

    .app-title {
      font-weight: 600;
      color: #2c3e50;
    }

    .app-desc {
      font-size: 0.8rem;
      color: #6c757d;
    }

    .app-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .platform-icons {
      display: flex;
      gap: 0.5rem;
    }

    .platform-icons span {
      width: 28px;
      height: 28px;
      background: #e9ecef;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: #6c757d;
    }

    /* Features Section */
    .features-section {
      background: white;
      border-radius: 16px;
      padding: 1.5rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .features-section .section-header h5 {
      font-weight: 600;
      color: #2c3e50;
    }

    .feature-chip {
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: white;
    }

    .feature-chip.core { background: #28a745; }
    .feature-chip.premium { background: #fd7e14; }

    /* Responsive */
    @media (max-width: 767px) {
      .demo-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
      }

      .demo-card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
      }

      .demo-card .btn-lg {
        width: 100%;
      }

      .hero-title {
        font-size: 1.5rem;
      }

      .app-card-header {
        flex-direction: column;
        text-align: center;
      }

      .app-card-footer {
        flex-direction: column;
        gap: 0.75rem;
      }

      .app-card-footer .btn {
        width: 100%;
      }
    }
  </style>
@endsection