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

@section('content')

<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card-box">
      <div class="card-box-head">
        <span class="card-box-title">உறுப்பினர் விவரம்</span>
        <a href="{{ route('admin.members.index') }}"
           class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-left"></i> திரும்பு
        </a>
      </div>
      <div class="card-body-pad">

        {{-- Avatar + Name --}}
        <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px;
                    padding-bottom:18px;border-bottom:1px solid #eaecf4;">
          <div style="width:52px;height:52px;border-radius:50%;background:#e8f0fe;
                      display:flex;align-items:center;justify-content:center;
                      font-size:18px;font-weight:700;color:#1a237e;">
            {{ mb_substr($member->name, 0, 1) }}
          </div>
          <div>
            <div style="font-size:16px;font-weight:600;color:#1a1a2e;">
              {{ $member->name }}
            </div>
            <div style="font-size:12px;color:#888;margin-top:2px;">
              உறுப்பினர் #{{ $member->id }}
            </div>
          </div>
        </div>

        {{-- Details Table --}}
        <table style="width:100%;border-collapse:collapse;">
          @php
            $rows = [
              ['bi-cake2',       'பிறந்த தேதி',         $member->dob->format('d-m-Y') . ' (' . $member->age . ' வயது)'],
              ['bi-geo-alt',     'மாவட்டம்',             $member->district],
              ['bi-phone',       'கைபேசி எண்',           $member->mobile],
              ['bi-person',      'பாலினம்',              $member->gender === 'Male' ? 'ஆண்' : ($member->gender === 'Female' ? 'பெண்' : 'மற்றவர்')],
              ['bi-building',    'சட்டமன்றத் தொகுதி',   $member->constituency],
              ['bi-calendar',    'பதிவு தேதி',           $member->created_at->format('d-m-Y H:i')],
            ];
          @endphp
          @foreach($rows as $row)
          <tr>
            <td style="padding:10px 0;color:#888;font-size:13px;width:45%;
                       border-bottom:1px solid #f0f2f8;vertical-align:top;">
              <i class="bi {{ $row[0] }}" style="margin-right:6px;"></i>{{ $row[1] }}
            </td>
            <td style="padding:10px 0;color:#1a1a2e;font-size:13px;font-weight:500;
                       border-bottom:1px solid #f0f2f8;">
              {{ $row[2] }}
            </td>
          </tr>
          @endforeach

          @if($member->message)
          <tr>
            <td style="padding:10px 0;color:#888;font-size:13px;vertical-align:top;">
              <i class="bi bi-chat-text" style="margin-right:6px;"></i>செய்தி
            </td>
            <td style="padding:10px 0;color:#1a1a2e;font-size:13px;">
              {{ $member->message }}
            </td>
          </tr>
          @endif
        </table>

        {{-- Delete Button --}}
        <div style="margin-top:20px;padding-top:16px;border-top:1px solid #eaecf4;">
          <form method="POST"
                action="{{ route('admin.members.destroy', $member->id) }}"
                onsubmit="return confirm('இந்த உறுப்பினரை நீக்கவா? இது மீட்டெடுக்க முடியாது.')">
            @csrf @method('DELETE')
            <button class="btn btn-danger btn-sm">
              <i class="bi bi-trash"></i> உறுப்பினரை நீக்கு
            </button>
          </form>
        </div>

      </div>
    </div>
  </div>
</div>

@endsection
