@extends('admin.layout')
@section('title', 'டாஷ்போர்டு')

@section('content')

{{-- Stat Cards --}}
<div class="row g-3 mb-4">
  <div class="col-md-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:#e8f0fe;color:#1a237e;">
        <i class="bi bi-people-fill"></i>
      </div>
      <div class="stat-label">மொத்த உறுப்பினர்கள்</div>
      <div class="stat-value">{{ number_format($stats['total']) }}</div>
      <div class="stat-sub">தமிழ்நாடு முழுவதும்</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:#e8f5e9;color:#2e7d32;">
        <i class="bi bi-person-plus-fill"></i>
      </div>
      <div class="stat-label">இன்று சேர்ந்தவர்கள்</div>
      <div class="stat-value">{{ $stats['today'] }}</div>
      <div class="stat-sub">இன்றைய பதிவுகள்</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:#fff8e1;color:#f57f17;">
        <i class="bi bi-calendar-month-fill"></i>
      </div>
      <div class="stat-label">இம்மாதம்</div>
      <div class="stat-value">{{ $stats['this_month'] }}</div>
      <div class="stat-sub">{{ now()->format('F Y') }}</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:#f3e5f5;color:#7b1fa2;">
        <i class="bi bi-gender-ambiguous"></i>
      </div>
      <div class="stat-label">பாலினம் பகிர்வு</div>
      <div class="stat-value" style="font-size:16px;line-height:1.6;">
        <span style="color:#1a237e;">{{ $stats['male'] }}</span> /
        <span style="color:#c2185b;">{{ $stats['female'] }}</span> /
        <span style="color:#2e7d32;">{{ $stats['transgender'] }}</span>
      </div>
      <div class="stat-sub">ஆண் / பெண் / மற்றவர்</div>
    </div>
  </div>
</div>

{{-- Charts Row --}}
<div class="row g-3 mb-4">
  <div class="col-md-8">
    <div class="card-box">
      <div class="card-box-head">
        <span class="card-box-title">மாதாந்திர பதிவு — {{ now()->year }}</span>
      </div>
      <div class="card-body-pad">
        <canvas id="monthlyChart" height="90"></canvas>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card-box h-100">
      <div class="card-box-head">
        <span class="card-box-title">பாலினம் பகிர்வு</span>
      </div>
      <div class="card-body-pad" style="display:flex;flex-direction:column;align-items:center;">
        <canvas id="genderChart" height="160"></canvas>
        <div style="margin-top:14px;width:100%;">
          <div style="display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:6px;">
            <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#1a237e;margin-right:5px;"></span>ஆண்</span>
            <span style="font-weight:600;">{{ $stats['male'] }}</span>
          </div>
          <div style="display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:6px;">
            <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#c2185b;margin-right:5px;"></span>பெண்</span>
            <span style="font-weight:600;">{{ $stats['female'] }}</span>
          </div>
          <div style="display:flex;justify-content:space-between;font-size:12px;color:#555;">
            <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#2e7d32;margin-right:5px;"></span>மற்றவர்</span>
            <span style="font-weight:600;">{{ $stats['transgender'] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- District + Recent Members --}}
<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card-box">
      <div class="card-box-head">
        <span class="card-box-title">முதல் 10 மாவட்டங்கள்</span>
      </div>
      <div class="card-body-pad">
        @php $maxDistrict = $districtStats->first()->total ?? 1; @endphp
        @foreach($districtStats as $d)
        <div class="district-row">
          <span class="district-name">{{ $d->district }}</span>
          <div class="district-bar-wrap">
            <div class="district-bar"
                 style="width:{{ round(($d->total / $maxDistrict) * 100) }}%">
            </div>
          </div>
          <span class="district-count">{{ $d->total }}</span>
        </div>
        @endforeach
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card-box">
      <div class="card-box-head">
        <span class="card-box-title">சமீபத்திய உறுப்பினர்கள்</span>
        <a href="{{ route('admin.members.index') }}" class="btn-view-all">
          அனைவரையும் காண்க →
        </a>
      </div>
      <table class="members-table">
        <thead>
          <tr>
            <th>#</th>
            <th>பெயர்</th>
            <th>கைபேசி</th>
            <th>மாவட்டம்</th>
            <th>பாலினம்</th>
            <th>தேதி</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentMembers as $i => $m)
          <tr>
            <td>{{ $i + 1 }}</td>
            <td>
              <a href="{{ route('admin.members.show', $m->id) }}"
                 style="color:#1a237e;text-decoration:none;font-weight:500;">
                {{ $m->name }}
              </a>
            </td>
            <td>{{ $m->mobile }}</td>
            <td>{{ $m->district }}</td>
            <td>
              @if($m->gender === 'Male')
                <span class="badge-male">ஆண்</span>
              @elseif($m->gender === 'Female')
                <span class="badge-female">பெண்</span>
              @else
                <span class="badge-other">மற்றவர்</span>
              @endif
            </td>
            <td>{{ $m->created_at->format('d-m-Y') }}</td>
          </tr>
          @empty
          <tr>
            <td colspan="6" style="text-align:center;color:#aaa;padding:30px;">
              இன்னும் உறுப்பினர்கள் இல்லை.
            </td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

@endsection

@section('scripts')
<script>
const monthlyData = @json($monthlyStats);
const labels = ['ஜன','பிப்','மார்','ஏப்','மே','ஜூன்','ஜூல்','ஆக','செப்','அக்','நவ','டிச்'];
const data = Array(12).fill(0);
monthlyData.forEach(item => { data[item.month - 1] = item.total; });

new Chart(document.getElementById('monthlyChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'உறுப்பினர்கள்',
      data: data,
      backgroundColor: '#1a237e',
      borderRadius: 5,
      barPercentage: 0.6,
    }]
  },
  options: {
    plugins: { legend: { display: false } },
    scales: {
      x: { grid: { display: false }, ticks: { font: { size: 11 } } },
      y: { beginAtZero: true, ticks: { stepSize: 1, font: { size: 11 } } }
    },
    responsive: true,
    maintainAspectRatio: true
  }
});

const genderData = @json($stats);
new Chart(document.getElementById('genderChart'), {
  type: 'doughnut',
  data: {
    labels: ['ஆண்', 'பெண்', 'மற்றவர்'],
    datasets: [{
      data: [genderData.male, genderData.female, genderData.transgender],
      backgroundColor: ['#1a237e', '#c2185b', '#2e7d32'],
      borderWidth: 2,
      borderColor: '#fff',
      hoverOffset: 4
    }]
  },
  options: {
    cutout: '65%',
    plugins: { legend: { display: false } },
    responsive: true,
    maintainAspectRatio: true
  }
});
</script>
@endsection
