<!DOCTYPE html>
<html lang="ta">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MMMK Admin — @yield('title')</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; background: #f5f6fa; font-family: 'Segoe UI', sans-serif; }

    .sidebar {
      width: 230px;
      min-height: 100vh;
      background: #1a237e;
      position: fixed;
      top: 0; left: 0;
      display: flex;
      flex-direction: column;
      z-index: 100;
    }
    .sidebar .brand {
      padding: 20px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .sidebar .brand-title {
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
    }
    .sidebar .brand-sub {
      color: rgba(255,255,255,0.45);
      font-size: 11px;
      margin-top: 3px;
    }
    .sidebar nav { padding: 12px 8px; flex: 1; }
    .sidebar nav a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      color: rgba(255,255,255,0.65);
      font-size: 13px;
      text-decoration: none;
      margin-bottom: 2px;
      transition: background 0.15s, color 0.15s;
    }
    .sidebar nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .sidebar nav a.active { background: rgba(255,255,255,0.18); color: #fff; }
    .sidebar nav a i { font-size: 17px; }
    .sidebar-footer {
      padding: 12px 8px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .sidebar-footer form button {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      color: rgba(255,255,255,0.55);
      font-size: 13px;
      background: none;
      border: none;
      width: 100%;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .sidebar-footer form button:hover {
      background: rgba(255,80,80,0.15);
      color: #ff8a8a;
    }

    .main { margin-left: 230px; min-height: 100vh; }

    .topbar {
      background: #fff;
      border-bottom: 1px solid #e8eaf0;
      padding: 12px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .topbar-title { font-size: 15px; font-weight: 600; color: #1a1a2e; }
    .admin-info { display: flex; align-items: center; gap: 10px; }
    .admin-avatar {
      width: 34px; height: 34px;
      border-radius: 50%;
      background: #1a237e;
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 600;
    }
    .admin-name { font-size: 13px; color: #555; }

    .content { padding: 24px; }

    .stat-card {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #eaecf4;
      padding: 18px;
    }
    .stat-icon {
      width: 38px; height: 38px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 12px;
      font-size: 18px;
    }
    .stat-label { font-size: 12px; color: #888; margin-bottom: 4px; }
    .stat-value { font-size: 26px; font-weight: 700; color: #1a1a2e; line-height: 1; }
    .stat-sub { font-size: 11px; color: #aaa; margin-top: 6px; }

    .card-box {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #eaecf4;
      overflow: hidden;
    }
    .card-box-head {
      padding: 14px 18px;
      border-bottom: 1px solid #eaecf4;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-box-title { font-size: 14px; font-weight: 600; color: #1a1a2e; }
    .card-body-pad { padding: 18px; }

    table.members-table { width: 100%; border-collapse: collapse; }
    table.members-table th {
      font-size: 11px;
      color: #888;
      font-weight: 600;
      padding: 10px 16px;
      text-align: left;
      background: #f8f9fc;
      border-bottom: 1px solid #eaecf4;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    table.members-table td {
      font-size: 13px;
      color: #333;
      padding: 12px 16px;
      border-bottom: 1px solid #f0f2f8;
    }
    table.members-table tr:last-child td { border-bottom: none; }
    table.members-table tr:hover td { background: #f8f9fc; }

    .badge-male   { background: #e8f0fe; color: #1a5fb4; font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; }
    .badge-female { background: #fce4ec; color: #c2185b; font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; }
    .badge-other  { background: #e8f5e9; color: #2e7d32; font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; }

    .district-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .district-name { font-size: 12px; color: #444; width: 90px; flex-shrink: 0; }
    .district-bar-wrap { flex: 1; height: 6px; background: #eef0f8; border-radius: 3px; overflow: hidden; }
    .district-bar { height: 100%; border-radius: 3px; background: #1a237e; transition: width 0.6s ease; }
    .district-count { font-size: 12px; color: #888; width: 30px; text-align: right; }

    .alert-success-custom {
      background: #e8f5e9;
      border: 1px solid #c8e6c9;
      color: #2e7d32;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 13px;
      margin-bottom: 16px;
    }

    .btn-export {
      background: #1a237e;
      color: #fff;
      border: none;
      padding: 7px 16px;
      border-radius: 7px;
      font-size: 13px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-export:hover { background: #283593; color: #fff; }

    .btn-view-all {
      font-size: 12px;
      color: #1a237e;
      background: none;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    .btn-view-all:hover { text-decoration: underline; }

    .pagination { margin-top: 12px; }
  </style>
</head>
<body>

<div class="sidebar">
  <div class="brand">
    <div class="brand-title">மாமன்னர் மருதிருவர்<br>மக்கள் கட்சி</div>
    <div class="brand-sub">Admin Panel</div>
  </div>
  <nav>
    <a href="{{ route('admin.dashboard') }}"
       class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
      <i class="bi bi-speedometer2"></i> டாஷ்போர்டு
    </a>
    <a href="{{ route('admin.members.index') }}"
       class="{{ request()->routeIs('admin.members.*') ? 'active' : '' }}">
      <i class="bi bi-people-fill"></i> உறுப்பினர்கள்
    </a>
    <a href="{{ route('admin.members.export') }}">
      <i class="bi bi-file-earmark-excel"></i> CSV ஏற்றுமதி
    </a>
  </nav>
  <div class="sidebar-footer">
    <form method="POST" action="{{ route('admin.logout') }}">
      @csrf
      <button type="submit">
        <i class="bi bi-box-arrow-right"></i> வெளியேறு
      </button>
    </form>
  </div>
</div>

<div class="main">
  <div class="topbar">
    <span class="topbar-title">@yield('title')</span>
    <div class="admin-info">
      <div class="admin-avatar">MA</div>
      <span class="admin-name">MMMK Admin</span>
    </div>
  </div>

  <div class="content">
    @if(session('success'))
      <div class="alert-success-custom">
        <i class="bi bi-check-circle-fill"></i> {{ session('success') }}
      </div>
    @endif

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@yield('scripts')
</body>
</html>
