<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{{ config('app.name', 'Iron Ground') }}</title>

  <!-- Poppins Font -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind / Vite -->
  @vite(['resources/css/app.css', 'resources/js/app.js'])

  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <style>
    :root{
      --igf-black: #0a0a0a;
      --igf-yellow: #F7D40B;
      --igf-hover: #1a1a1a;
      --igf-active: rgba(247, 212, 11, 0.1);
    }

    html, body { 
      font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      margin: 0;
      padding: 0;
    }

    /* Sidebar */
    .sidebar {
      background: var(--igf-black);
      color: #ffffff;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 40;
      width: 16rem;
      padding: 1.5rem 0;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
    }

    .sidebar.collapsed {
      width: 5rem;
    }

    /* Sidebar Header */
    .sidebar-header {
      padding: 0 1.5rem;
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      white-space: nowrap;
    }

    .sidebar-logo {
      width: 120px;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease;
    }

    .sidebar-logo img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .sidebar.collapsed .sidebar-logo {
      opacity: 0;
      display: none;
    }

    /* Collapsed Logo Text */
    .sidebar-logo-text {
      display: none;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--igf-yellow);
      text-align: center;
      letter-spacing: 1px;
    }

    .sidebar.collapsed .sidebar-logo-text {
      display: block;
    }

    /* Navigation */
    .sidebar-nav {
      flex: 1;
      padding: 0 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .sidebar-item {
      color: #ffffff;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 10px;
      padding: 0.75rem 1rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      text-decoration: none;
      position: relative;
      white-space: nowrap;
      font-size: 0.95rem;
      font-weight: 400;
    }

    .sidebar-item:hover {
      background: var(--igf-hover);
      color: var(--igf-yellow);
    }

    .sidebar-item.active {
      background: var(--igf-active);
      color: var(--igf-yellow);
    }

    .sidebar-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 60%;
      background: var(--igf-yellow);
      border-radius: 0 3px 3px 0;
    }

    .sidebar-item i {
      min-width: 36px;
      width: 36px;
      height: 36px;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      transition: all 0.3s ease;
    }

    .sidebar-item:hover i {
      background: rgba(247, 212, 11, 0.15);
      border-color: rgba(247, 212, 11, 0.3);
      box-shadow: 0 4px 15px rgba(247, 212, 11, 0.2);
    }

    .sidebar-item.active i {
      background: rgba(247, 212, 11, 0.2);
      border-color: rgba(247, 212, 11, 0.4);
      box-shadow: 0 4px 20px rgba(247, 212, 11, 0.3);
    }

    .sidebar-item span {
      transition: opacity 0.3s ease;
      flex: 1;
    }

    .sidebar.collapsed .sidebar-item span {
      opacity: 0;
      width: 0;
      overflow: hidden;
    }

    .sidebar.collapsed .sidebar-item {
      justify-content: center;
      padding: 0.75rem;
    }

    /* Badge */
    .sidebar-badge {
      background: #ef4444;
      color: white;
      font-size: 0.7rem;
      padding: 0.15rem 0.5rem;
      border-radius: 12px;
      font-weight: 600;
      min-width: 20px;
      text-align: center;
      transition: opacity 0.3s ease;
    }

    .sidebar.collapsed .sidebar-badge {
      opacity: 0;
      width: 0;
      overflow: hidden;
      padding: 0;
    }

    /* Footer Section */
    .sidebar-footer {
      padding: 0 0.75rem;
      margin-top: auto;
      border-top: 1px solid #222;
      padding-top: 1rem;
    }

    .sidebar-version {
      padding: 1rem;
      text-align: center;
      font-size: 0.75rem;
      color: #666;
      transition: opacity 0.3s ease;
    }

    .sidebar.collapsed .sidebar-version {
      opacity: 0;
      height: 0;
      padding: 0;
      overflow: hidden;
    }

    /* Toggle Button */
    .sidebar-toggle {
      position: absolute;
      right: 1rem;
      top: 2rem;
      width: 24px;
      height: 24px;
      background: var(--igf-yellow);
      border: 2px solid var(--igf-black);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--igf-black);
      font-size: 0.7rem;
      transition: transform 0.3s ease;
      z-index: 50;
    }

    .sidebar.collapsed .sidebar-toggle {
      transform: rotate(180deg);
    }

    /* Main content offset */
    main {
      transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-left: 16rem;
      min-height: 100vh;
    }

    main.sidebar-collapsed {
      margin-left: 5rem;
    }

    @media (max-width: 900px) {
      .desktop-only { display: none !important; }
      .mobile-only { display: block; }
      main { margin-left: 0 !important; }
      .sidebar-toggle { display: none; }
    }
    
    @media (min-width: 901px) {
      .desktop-only { display: flex !important; }
      .mobile-only { display: none; }
    }

    /* Mobile Sidebar Overlay */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 39;
    }

    .sidebar-overlay.active {
      display: block;
    }
  </style>
</head>
<body class="bg-gray-100 font-[Poppins]">
  <div id="app" class="flex min-h-screen">
   @php
$links = [
    ['route'=>'dashboard','icon'=>'fas fa-home','label'=>'Dashboard','badge'=> null],

    ['route'=>'submissions.index','icon'=>'fas fa-inbox','label'=>'New Submissions','badge'=> $sidebarBadges['newSubmissions'] ?? null],

    ['route'=>'members.index','icon'=>'fas fa-users','label'=>'Approved Members','badge'=> $sidebarBadges['approvedMembers'] ?? null],

    ['route'=>'submissions.bin','icon'=>'fas fa-trash-alt','label'=>'Bin','badge'=> $sidebarBadges['binCount'] ?? null],

    ['route'=>'sms.index','icon'=>'fas fa-sms','label'=>'SMS','badge'=> $sidebarBadges['smsCount'] ?? null],

    ['route'=>'sms.logs','icon'=>'fas fa-envelope-open-text','label'=>'SMS Logs','badge'=> null],

    ['route'=>'progress.index','icon'=>'fas fa-chart-line','label'=>'Progress','badge'=> $sidebarBadges['progressCount'] ?? null],

    ['route'=>'payments.index','icon'=>'fas fa-credit-card','label'=>'Payments','badge'=> $sidebarBadges['paymentsCount'] ?? null],
];
@endphp

    <!-- ✅ Single Desktop Sidebar -->
    <aside id="desktop-sidebar" class="sidebar desktop-only">
      <div class="sidebar-toggle p-2 text-right cursor-pointer text-gray-400" onclick="toggleSidebar()">
        <i class="fas fa-chevron-left"></i>
      </div>

      <div>
        <div class="sidebar-header">
          <div class="sidebar-logo">
            <img src="https://i.postimg.cc/6pv6zWvY/For-softwares.png" alt="IGFC Logo" />
          </div>
          <div class="sidebar-logo-text">IGFC</div>
        </div>

        <nav class="sidebar-nav">
          @foreach($links as $link)
            <a href="{{ route($link['route']) }}" 
               class="sidebar-item {{ Request::routeIs($link['route'].'*') ? 'active' : '' }}">
              <i class="{{ $link['icon'] }}"></i>
              <span>{{ $link['label'] }}</span>
              @if($link['badge'])
                <span class="sidebar-badge">{{ $link['badge'] }}</span>
              @endif
            </a>
          @endforeach
        </nav>
      </div>

      <div class="sidebar-footer">
        <a href="#" class="sidebar-item">
          <i class="fas fa-headset"></i>
          <span>Support</span>
        </a>
        <form method="POST" action="{{ route('logout') }}">
          @csrf
          <button type="submit" class="sidebar-item w-full text-left">
            <i class="fas fa-sign-out-alt"></i>
            <span>Logout</span>
          </button>
        </form>
        <div class="sidebar-version">
          Iron Ground © {{ date('Y') }}<br>v. 1.002
        </div>
      </div>
    </aside>

    <!-- 📱 Mobile Sidebar -->
    <div id="mobile-overlay" class="sidebar-overlay mobile-only" onclick="closeMobileSidebar()"></div>

    <aside id="mobile-sidebar" class="sidebar mobile-only transition-all">
      <div class="sidebar-header justify-between">
        <div class="flex items-center gap-3">
          <div class="sidebar-logo" style="width: 100px;">
            <img src="https://i.postimg.cc/6pv6zWvY/For-softwares.png" alt="IGFC Logo" />
          </div>
        </div>
        <button onclick="closeMobileSidebar()" class="text-xl text-white">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <nav class="sidebar-nav">
        @foreach($links as $link)
          <a href="{{ route($link['route']) }}" 
             class="sidebar-item {{ Request::routeIs($link['route'].'*') ? 'active' : '' }}">
            <i class="{{ $link['icon'] }}"></i>
            <span>{{ $link['label'] }}</span>
            @if($link['badge'])
              <span class="sidebar-badge">{{ $link['badge'] }}</span>
            @endif
          </a>
        @endforeach
      </nav>

      <div class="sidebar-footer">
        <a href="#" class="sidebar-item">
          <i class="fas fa-headset"></i>
          <span>Support</span>
        </a>
        <form method="POST" action="{{ route('logout') }}">
          @csrf
          <button type="submit" class="sidebar-item w-full text-left">
            <i class="fas fa-sign-out-alt"></i>
            <span>Logout</span>
          </button>
        </form>
        <div class="sidebar-version">
          Iron Ground © {{ date('Y') }}<br>v. 1.002
        </div>
      </div>
    </aside>

    <!-- 🧠 Main Content -->
    <main id="main-content" class="flex-1 p-6 overflow-auto transition-all">
      <div class="mobile-only mb-4">
        <button onclick="openMobileSidebar()" class="px-3 py-2 rounded bg-gray-800 text-white">
          <i class="fas fa-bars"></i> Menu
        </button>
      </div>

      @if(session('success'))
        <div class="mb-4 p-3 rounded-2xl bg-green-100 text-green-800">
          {{ session('success') }}
        </div>
      @endif

      @if(session('error'))
        <div class="mb-4 p-3 rounded-2xl bg-red-100 text-red-800">
          {{ session('error') }}
        </div>
      @endif

      @yield('content')
    </main>
  </div>

  <script>
    // Desktop Sidebar Toggle
    function toggleSidebar() {
      const sidebar = document.getElementById('desktop-sidebar');
      const mainContent = document.getElementById('main-content');
      sidebar.classList.toggle('collapsed');
      mainContent.classList.toggle('sidebar-collapsed');
      localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
    }

    // Restore sidebar state
    document.addEventListener('DOMContentLoaded', function() {
      const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
      if (isCollapsed) {
        document.getElementById('desktop-sidebar').classList.add('collapsed');
        document.getElementById('main-content').classList.add('sidebar-collapsed');
      }
    });

    // Mobile Sidebar
    function openMobileSidebar() {
      document.getElementById('mobile-sidebar').style.transform = 'translateX(0)';
      document.getElementById('mobile-overlay').classList.add('active');
      document.body.style.overflow = 'hidden';
    }

    function closeMobileSidebar() {
      document.getElementById('mobile-sidebar').style.transform = 'translateX(-100%)';
      document.getElementById('mobile-overlay').classList.remove('active');
      document.body.style.overflow = '';
    }
  </script>
</body>
</html>