@extends('layouts.admin')

@section('content')
<div class="space-y-4 sm:space-y-6">
  <!-- Grid -->
  <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
    <!-- Card -->
    <div class="flex flex-col retro-panel p-4 md:p-5">
      <div class="flex items-center gap-x-2">
        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
          TOTAL_REVENUE
        </p>
      </div>
      <div class="mt-3 flex items-center gap-x-2">
        <h3 class="text-2xl font-bold dark:text-gray-200">$72,540.00</h3>
      </div>
    </div>
    <!-- Card -->
    <div class="flex flex-col retro-panel p-4 md:p-5">
      <div class="flex items-center gap-x-2">
        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
          ACTIVE_MACHINES
        </p>
      </div>
      <div class="mt-3 flex items-center gap-x-2">
        <h3 class="text-2xl font-bold dark:text-gray-200">124_UNIT</h3>
      </div>
    </div>
    <!-- Card -->
    <div class="flex flex-col retro-panel p-4 md:p-5">
      <div class="flex items-center gap-x-2">
        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
          ALERTS_PENDING
        </p>
      </div>
      <div class="mt-3 flex items-center gap-x-2">
        <h3 class="text-2xl font-bold text-red-600 animate-pulse">12_SIGNAL</h3>
      </div>
    </div>
    <!-- Card -->
    <div class="flex flex-col retro-panel p-4 md:p-5">
      <div class="flex items-center gap-x-2">
        <p class="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 dark:text-gray-400">
          NEW_MEMBERS
        </p>
      </div>
      <div class="mt-3 flex items-center gap-x-2">
        <h3 class="text-2xl font-bold dark:text-gray-200">28_NODES</h3>
      </div>
    </div>
  </div>
  <!-- End Grid -->

  <!-- Monitor Section -->
  <div class="retro-panel p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-lg font-bold flex items-center gap-3">
            <span class="w-2.5 h-2.5 bg-red-600 rounded-full animate-pulse shadow-[0_0_8px_rgba(220,38,38,0.8)]"></span>
            SYS_LIVE_MONITORING
        </h2>
        <div class="flex gap-4">
            <span class="text-xs font-bold text-gray-500">SECTOR_B6</span>
            <span class="text-xs font-bold text-gray-500">UID: SCL-99</span>
        </div>
    </div>
    <div class="crt-screen">
        <div class="flex justify-between items-center mb-4 border-b border-amber-900/40 pb-2">
            <span class="text-amber-glow tracking-widest text-[10px] opacity-80 uppercase">Primary Data Channel: Inbound_Telemetry_v1.02</span>
            <div class="flex gap-4 items-center">
                <span class="text-[10px] text-amber-glow/60">SCAN_FREQ: 60Hz</span>
                <span class="text-amber-glow animate-retro-blink font-bold text-xs">ONLINE_</span>
            </div>
        </div>
        <div class="space-y-1 h-[300px] overflow-y-auto scrollbar-hide">
            <div class="text-[11px] font-mono opacity-80 text-amber-glow/40 border-b border-amber-900/20 mb-2">
                &gt;&gt; BOOTING SESSION... OK<br>
                &gt;&gt; KERNEL LOADED... OK<br>
                &gt;&gt; CONNECTING TO SATELLITE... LINK ESTABLISHED
            </div>
            
            <div class="flex gap-4 text-xs font-mono">
                <span class="text-gray-600">[10:05:12]</span>
                <span class="text-blue-500/80">#MAC-402</span>
                <span class="text-amber-glow/80">INFO: TEMPERATURE_NOMINAL (23.5C)</span>
            </div>
             <div class="flex gap-4 text-xs font-mono">
                <span class="text-gray-600">[10:06:45]</span>
                <span class="text-blue-500/80">#MAC-115</span>
                <span class="text-yellow-500 font-bold">WARN: COIN_RECEPTER_NEAR_FULL</span>
            </div>
             <div class="flex gap-4 text-xs font-mono">
                <span class="text-gray-600">[10:07:33]</span>
                <span class="text-blue-500/80">#MAC-882</span>
                <span class="text-red-600 font-bold animate-pulse">ERR: MOTOR_STALL_SECTOR_A1</span>
            </div>
             <div class="flex gap-4 text-xs font-mono">
                <span class="text-gray-600">[10:08:21]</span>
                <span class="text-blue-500/80">#MAC-402</span>
                <span class="text-amber-glow/80">INFO: HEARTBEAT_ACK_SUCCESS</span>
            </div>
            <div class="flex gap-4 text-xs font-mono">
                <span class="text-gray-600">[10:09:12]</span>
                <span class="text-amber-glow animate-retro-blink text-lg leading-none">█</span>
            </div>
        </div>
        <div class="mt-6 border-t border-amber-900/40 pt-3 flex justify-between text-[9px] tracking-[0.3em] text-[#ffb000]/40 uppercase font-bold">
            <span>Terminal: TTY-1 / StarCloudOS v12.53</span>
            <span>Uptime: 14:22:11:05</span>
        </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
    window.addEventListener('load', () => {
        // Here you would initialize charts using ApexCharts or similar, 
        // as Preline examples often use ApexCharts.
        // For now, placeholders are sufficient.
    });
</script>
@endsection