@extends('admin.layout')
@section('title', 'உறுப்பினர்கள்')

@section('content')

{{-- Filters --}}
<div class="card-box mb-3">
  <div class="card-body-pad">
    <form method="GET" class="row g-2 align-items-end">
      <div class="col-md-4">
        <input type="text" name="search" class="form-control form-control-sm"
               placeholder="பெயர், கைபேசி, மாவட்டம் தேடுக..."
               value="{{ request('search') }}">
      </div>
      <div class="col-md-2">
        <select name="district" class="form-select form-select-sm">
          <option value="">அனைத்து மாவட்டங்கள்</option>
          @foreach($districts as $d)
            <option value="{{ $d }}" {{ request('district') == $d ? 'selected' : '' }}>
              {{ $d }}
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-md-2">
        <select name="gender" class="form-select form-select-sm">
          <option value="">அனைத்து பாலினம்</option>
          <option value="Male"        {{ request('gender') == 'Male'        ? 'selected' : '' }}>ஆண்</option>
          <option value="Female"      {{ request('gender') == 'Female'      ? 'selected' : '' }}>பெண்</option>
          <option value="Transgender" {{ request('gender') == 'Transgender' ? 'selected' : '' }}>மற்றவர்</option>
        </select>
      </div>
      <div class="col-md-4 d-flex gap-2">
        <button type="submit" class="btn btn-sm btn-primary px-3">
          <i class="bi bi-search"></i> தேட
        </button>
        <a href="{{ route('admin.members.index') }}" class="btn btn-sm btn-outline-secondary px-3">
          மீட்டமை
        </a>
        <a href="{{ route('admin.members.export', request()->query()) }}"
           class="btn-export">
          <i class="bi bi-download"></i> CSV
        </a>
      </div>
    </form>
  </div>
</div>

{{-- Table --}}
<div class="card-box">
  <div class="card-box-head">
    <span class="card-box-title">
      மொத்தம்: <strong>{{ $members->total() }}</strong> உறுப்பினர்கள்
    </span>
  </div>
  <div style="overflow-x:auto;">
    <table class="members-table">
      <thead>
        <tr>
          <th>#</th>
          <th>பெயர்</th>
          <th>பிறந்த தேதி / வயது</th>
          <th>கைபேசி</th>
          <th>மாவட்டம்</th>
          <th>பாலினம்</th>
          <th>சட்டமன்றத் தொகுதி</th>
          <th>பதிவு தேதி</th>
          <th>நடவடிக்கை</th>
        </tr>
      </thead>
      <tbody>
        @forelse($members as $i => $m)
        <tr>
          <td>{{ $members->firstItem() + $i }}</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->dob->format('d-m-Y') }}
            <span style="color:#aaa;font-size:11px;">({{ $m->age }} வ)</span>
          </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->constituency }}</td>
          <td>{{ $m->created_at->format('d-m-Y') }}</td>
          <td>
            <div style="display:flex;gap:6px;">
              <a href="{{ route('admin.members.show', $m->id) }}"
                 class="btn btn-sm btn-outline-primary py-0 px-2">
                <i class="bi bi-eye"></i>
              </a>
              <form method="POST"
                    action="{{ route('admin.members.destroy', $m->id) }}"
                    onsubmit="return confirm('இந்த உறுப்பினரை நீக்கவா?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger py-0 px-2">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="9" style="text-align:center;color:#aaa;padding:40px;">
            உறுப்பினர்கள் எவரும் இல்லை.
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
  <div style="padding:14px 18px;border-top:1px solid #eaecf4;">
    {{ $members->links() }}
  </div>
</div>

@endsection
