@extends('layouts.admin')
@section('title', 'Members')
@section('page_title', 'Members')

@section('content')

  <div class="card">
    <div class="ch">
      <div class="ct">
        <i class="fas fa-users"></i>All Members
      </div>
      <button class="btn bp bsm" onclick="om('addMemberM')">
        <i class="fas fa-plus"></i>Add Member
      </button>
    </div>

    {{-- FILTERS --}}
    <form method="GET" action="{{ route('admin.members') }}" style="display:flex;gap:8px;padding:12px 16px;
                   border-bottom:1px solid var(--border);
                   flex-wrap:wrap;align-items:center;">
      <select name="status" style="padding:4px 10px;font-size:11px;
                 border-radius:20px;border:1px solid var(--border);
                 background:transparent;color:var(--text-dim);
                 width:auto;cursor:pointer;">
        <option value="">All Status</option>
        <option value="PENDING" {{ $status == 'PENDING' ? 'selected' : '' }}>Pending</option>
        <option value="APPROVED" {{ $status == 'APPROVED' ? 'selected' : '' }}>Approved</option>
        <option value="ACTIVE" {{ $status == 'ACTIVE' ? 'selected' : '' }}>Active</option>
        <option value="REJECTED" {{ $status == 'REJECTED' ? 'selected' : '' }}>Rejected</option>
        <option value="EXPIRED" {{ $status == 'EXPIRED' ? 'selected' : '' }}>Expired</option>
      </select>

      <select name="district_id" style="padding:4px 10px;font-size:11px;
                 border-radius:20px;border:1px solid var(--border);
                 background:transparent;color:var(--text-dim);
                 width:auto;cursor:pointer;">
        <option value="">All Districts</option>
        @foreach($districts as $district)
          <option value="{{ $district->id }}" {{ $district_id == $district->id ? 'selected' : '' }}>
            {{ $district->name }}
          </option>
        @endforeach
      </select>

      <select name="membership_type" style="padding:4px 10px;font-size:11px;
                 border-radius:20px;border:1px solid var(--border);
                 background:transparent;color:var(--text-dim);
                 width:auto;cursor:pointer;">
        <option value="">All Types</option>
        <option value="LIFE" {{ $membership_type == 'LIFE' ? 'selected' : '' }}>Life</option>
        <option value="ANNUAL" {{ $membership_type == 'ANNUAL' ? 'selected' : '' }}>Annual</option>
      </select>

      <button type="submit" class="btn bp bsm">
        <i class="fas fa-filter"></i>Filter
      </button>
      <a href="{{ route('admin.members') }}" class="btn bo bsm">
        <i class="fas fa-times"></i>Clear
      </a>
    </form>

    {{-- TABLE --}}
    <div class="tw">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Member</th>
            <th>Phone</th>
            <th>Unit</th>
            <th>District</th>
            <th>Type</th>
            <th>Membership ID</th>
            <th>Status</th>
            <th>Registered</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          @forelse($members as $member)
            <tr>
              <td style="color:var(--text-dim)">
                {{ $loop->iteration }}
              </td>
              <td>
                <div class="mc2">
                  <div class="av2" style="background:rgba(79,142,247,0.2);
                               color:var(--accent)">
                    {{ strtoupper(substr($member->user->name, 0, 2)) }}
                  </div>
                  <div>
                    <div class="mn">{{ $member->user->name }}</div>
                    <div class="me">{{ $member->user->email }}</div>
                  </div>
                </div>
              </td>
              <td style="color:var(--text-dim)">
                {{ $member->user->phone }}
              </td>
              <td>
                <span class="utag">{{ $member->unit->name }}</span>
              </td>
              <td style="color:var(--text-dim)">
                {{ $member->district->name }}
              </td>
              <td>
                <span class="badge
                      {{ $member->membership_type == 'LIFE' ? 'bli' : 'ban' }}">
                  {{ $member->membership_type }}
                </span>
              </td>
              <td style="color:var(--text-dim)">
                {{ $member->membership_id ?? '—' }}
              </td>
              <td>
                <span class="badge
                      @if($member->status == 'PENDING') bpe
                      @elseif($member->status == 'APPROVED') bap
                      @elseif($member->status == 'ACTIVE') bac
                      @elseif($member->status == 'REJECTED') brj
                      @else bex @endif">
                  {{ $member->status }}
                </span>
              </td>
              <td style="color:var(--text-dim)">
                {{ $member->created_at->format('d M Y') }}
              </td>
              <td>
                <div class="abr">
                  {{-- VIEW --}}
                  <div class="ab vw" onclick="viewMember({{ $member->id }})" title="View Detail">
                    <i class="fas fa-eye"></i>
                  </div>

                  {{-- APPROVE (PENDING or REJECTED) --}}
                  @if(in_array($member->status, ['PENDING', 'REJECTED']))
                    <form method="POST" action="{{ route('admin.members.approve') }}" style="display:inline" onsubmit="return confirm(
                          'Approve {{ $member->user->name }}?')">
                      @csrf
                      <input type="hidden" name="id" value="{{ $member->id }}">
                      <button type="submit" class="ab app" title="Approve">
                        <i class="fas fa-check"></i>
                      </button>
                    </form>
                  @endif

                  {{-- REJECT (PENDING or APPROVED) --}}
                  @if(in_array($member->status, ['PENDING', 'APPROVED']))
                    <div class="ab rej" title="Reject" onclick="openReject(
                           {{ $member->id }},
                           '{{ $member->user->name }}')">
                      <i class="fas fa-times"></i>
                    </div>
                  @endif

                  {{-- DELETE --}}
                  <form method="POST" action="{{ route('admin.members.delete') }}" style="display:inline" onsubmit="return confirm(
                'Delete {{ $member->user->name }}?')">
                    @csrf @method('DELETE')
                    <input type="hidden" name="id" value="{{ $member->id }}">
                    <button type="submit" class="ab rej" title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="10" style="text-align:center;
                           color:var(--text-dim);
                           padding:30px;">
                No members found
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- ══ ADD MEMBER MODAL ══ --}}
  <div id="addMemberM" class="mo">
    <div class="md" style="width:580px">
      <div class="mh">
        <span class="mt2">Add New Member</span>
        <div class="mc3" onclick="cm('addMemberM')">
          <i class="fas fa-times"></i>
        </div>
      </div>
      <form method="POST" action="{{ route('admin.members.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- PERSONAL INFO --}}
        <div style="padding:14px 18px 0;font-size:10px;
                      font-weight:700;text-transform:uppercase;
                      letter-spacing:1px;color:var(--accent);">
          Personal Info
        </div>
        <div class="fgrid">
          <div class="fg">
            <label>Full Name</label>
            <input type="text" name="name" placeholder="Rajesh Kumar" required>
          </div>
          <div class="fg">
            <label>Email</label>
            <input type="email" name="email" placeholder="rajesh@gmail.com" required>
          </div>
          <div class="fg">
            <label>Phone</label>
            <input type="text" name="phone" placeholder="9845002001" required>
          </div>
          <div class="fg">
            <label>Password</label>
            <input type="password" name="password" placeholder="Min 8 characters" required>
          </div>
          <div class="fg">
            <label>Date of Birth</label>
            <input type="date" name="dob" required>
          </div>
          <div class="fg">
            <label>Gender</label>
            <select name="gender" required>
              <option value="">Select Gender</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div class="fg s2">
            <label>Photo (optional)</label>
            <input type="file" name="photo" accept="image/jpg,image/jpeg,image/png" style="padding:6px 11px;">
          </div>
        </div>

        {{-- PROFESSIONAL INFO --}}
        <div style="padding:6px 18px 0;font-size:10px;
                      font-weight:700;text-transform:uppercase;
                      letter-spacing:1px;color:var(--accent);">
          Professional Info
        </div>
        <div class="fgrid">
          <div class="fg">
            <label>Organization</label>
            <input type="text" name="organization" placeholder="Bangalore Public School" required>
          </div>
          <div class="fg">
            <label>Designation</label>
            <input type="text" name="designation" placeholder="Principal / Teacher" required>
          </div>
          <div class="fg">
            <label>Experience (years)</label>
            <input type="number" name="experience" placeholder="0" min="0" max="50" required>
          </div>
          <div class="fg">
            <label>Website (optional)</label>
            <input type="url" name="website" placeholder="https://example.com">
          </div>
        </div>

        {{-- ADDRESS --}}
        <div style="padding:6px 18px 0;font-size:10px;
                      font-weight:700;text-transform:uppercase;
                      letter-spacing:1px;color:var(--accent);">
          Address
        </div>
        <div class="fgrid">
          <div class="fg s2">
            <label>Full Address</label>
            <input type="text" name="address" placeholder="12 MG Road Bangalore" required>
          </div>
          <div class="fg">
            <label>Pincode</label>
            <input type="text" name="pincode" placeholder="560001" required>
          </div>
        </div>

        {{-- LOCATION & MEMBERSHIP --}}
        <div style="padding:6px 18px 0;font-size:10px;
              font-weight:700;text-transform:uppercase;
              letter-spacing:1px;color:var(--accent);">
          Location & Membership
        </div>
        <div class="fgrid">
          <div class="fg">
            <label>State</label>
            <select onchange="loadMemberDistricts(this.value)" required>
              <option value="">Select State</option>
              @foreach($states as $state)
                <option value="{{ $state->id }}">
                  {{ $state->name }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="fg">
            <label>District</label>
            <select id="memberDistrict" name="district_id" onchange="loadMemberUnits(this.value)" required>
              <option value="">Select State First</option>
            </select>
          </div>
          <div class="fg">
            <label>Unit</label>
            <select id="memberUnit" name="unit_id" required>
              <option value="">Select District First</option>
            </select>
          </div>

          {{-- PLAN DROPDOWN (dynamic from DB) --}}
          <div class="fg">
            <label>Membership Plan</label>
            <select name="plan_id" required>
              <option value="">Select Plan</option>
              @foreach($plans as $plan)
                <option value="{{ $plan->id }}">
                  {{ $plan->name }}
                  ({{ $plan->type }})
                  — ₹{{ number_format($plan->amount, 0) }}
                </option>
              @endforeach
            </select>
          </div>

          <input type="hidden" name="state_id" id="memberStateId">
        </div>

        <div style="margin:0 18px 14px;padding:10px 12px;
                      background:rgba(79,142,247,0.07);
                      border-radius:8px;font-size:11px;
                      color:var(--text-dim);">
          <i class="fas fa-info-circle" style="color:var(--accent)"></i>
          Member will be created with
          <b style="color:var(--orange)">PENDING</b>
          status. Unit Admin must approve before payment.
        </div>

        <div class="ff">
          <button type="button" class="btn bo" onclick="cm('addMemberM')">Cancel</button>
          <button type="submit" class="btn bp">
            <i class="fas fa-user-plus"></i>Create Member
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- ══ REJECT MEMBER MODAL ══ --}}
  <div id="rejectMemberM" class="mo">
    <div class="md">
      <div class="mh">
        <span class="mt2">❌ Reject Member</span>
        <div class="mc3" onclick="cm('rejectMemberM')">
          <i class="fas fa-times"></i>
        </div>
      </div>
      <form method="POST" action="{{ route('admin.members.reject') }}">
        @csrf
        <input type="hidden" name="id" id="rejectMemberId">
        <div class="fgrid c1">
          <div class="fg">
            <label>Member Name</label>
            <input type="text" id="rejectMemberName" disabled style="opacity:0.6">
          </div>
          <div class="fg">
            <label>Reason (optional)</label>
            <textarea name="reason" placeholder="Enter rejection reason...">
              </textarea>
          </div>
        </div>
        <div class="ff">
          <button type="button" class="btn bo" onclick="cm('rejectMemberM')">
            Cancel
          </button>
          <button type="submit" class="btn bda">
            <i class="fas fa-times"></i>Reject Member
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- ══ VIEW MEMBER MODAL ══ --}}
  <div id="viewMemberM" class="mo">
    <div class="md" style="width:560px">
      <div class="mh">
        <span class="mt2">Member Detail</span>
        <div class="mc3" onclick="cm('viewMemberM')">
          <i class="fas fa-times"></i>
        </div>
      </div>
      <div id="memberContent" style="padding:20px">
        Loading...
      </div>
      <div class="ff">
        <button class="btn bo" onclick="cm('viewMemberM')">
          Close
        </button>
      </div>
    </div>
  </div>

@endsection

@section('scripts')
  <script>
    // Open reject modal
    function openReject(id, name) {
      document.getElementById('rejectMemberId').value = id;
      document.getElementById('rejectMemberName').value = name;
      om('rejectMemberM');
    }

    function loadMemberDistricts(stateId) {
      document.getElementById('memberStateId').value = stateId;
      if (!stateId) return;

      fetch(`/api/states/${stateId}/districts`, {
        headers: { 'Accept': 'application/json' }
      })
        .then(r => r.json())
        .then(data => {
          const sel = document.getElementById('memberDistrict');
          sel.innerHTML = '<option value="">Select District</option>';
          data.data.forEach(d => {
            sel.innerHTML += `<option value="${d.id}">${d.name}</option>`;
          });
          document.getElementById('memberUnit').innerHTML =
            '<option value="">Select District First</option>';
        });
    }

    function loadMemberUnits(districtId) {
      if (!districtId) return;

      fetch(`/api/districts/${districtId}/units`, {
        headers: { 'Accept': 'application/json' }
      })
        .then(r => r.json())
        .then(data => {
          const sel = document.getElementById('memberUnit');
          sel.innerHTML = '<option value="">Select Unit</option>';
          data.data.forEach(u => {
            sel.innerHTML += `<option value="${u.id}">${u.name}</option>`;
          });
        });
    }

    function viewMember(id) {
      document.getElementById('memberContent').innerHTML = 'Loading...';
      om('viewMemberM');

      fetch(`/admin/members/${id}/detail`)
        .then(r => r.json())
        .then(d => {
          document.getElementById('memberContent').innerHTML = `
            <div style="display:grid;
                        grid-template-columns:1fr 1fr;
                        gap:14px;">
              ${field('Name', d.name)}
              ${field('Email', d.email)}
              ${field('Phone', d.phone)}
              ${field('Gender', d.gender)}
              ${field('Date of Birth', d.dob)}
              ${field('Organization', d.organization)}
              ${field('Designation', d.designation)}
              ${field('Experience', d.experience + ' years')}
              ${field('Address', d.address)}
              ${field('Pincode', d.pincode)}
              ${field('Website', d.website)}
              ${field('Unit', d.unit_name)}
              ${field('District', d.district_name)}
              ${field('State', d.state_name)}
              ${field('Membership Type', d.membership_type)}
              ${field('Membership ID', d.membership_id)}
              ${field('Status', d.status)}
              ${field('Joined Date', d.joined_date)}
              ${field('Expiry Date', d.expiry_date)}
              ${field('Registered On', d.registered_on)}
            </div>
          `;
        });
    }

    function field(label, value) {
      return `
        <div>
          <div style="font-size:10px;color:var(--text-dim);
                      text-transform:uppercase;
                      letter-spacing:0.5px;
                      margin-bottom:3px;">${label}</div>
          <div style="font-size:12.5px;font-weight:500">
            ${value || '—'}
          </div>
        </div>
      `;
    }
  </script>
@endsection