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

@section('content')

<div class="card">
  <div class="ch">
    <div class="ct">
      <i class="fas fa-user-shield"></i>All Unit Admins
    </div>
    <button class="btn bp bsm" onclick="om('addUAM')">
      <i class="fas fa-plus"></i>Create Unit Admin
    </button>
  </div>
  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Unit</th>
          <th>District</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($unitAdmins as $ua)
        <tr>
          <td style="color:var(--text-dim)">{{ $loop->iteration }}</td>
          <td>
            <div class="mc2">
              <div class="av2"
                style="background:rgba(167,139,250,0.2);
                       color:var(--purple)">
                {{ strtoupper(substr($ua->user->name,0,2)) }}
              </div>
              <div class="mn">{{ $ua->user->name }}</div>
            </div>
          </td>
          <td style="color:var(--text-dim)">{{ $ua->user->email }}</td>
          <td style="color:var(--text-dim)">{{ $ua->user->phone }}</td>
          <td><span class="utag">{{ $ua->unit->name }}</span></td>
          <td style="color:var(--text-dim)">
            {{ $ua->unit->district->name }}
          </td>
          <td>
            <span class="badge {{ $ua->user->is_active ? 'bac' : 'brj' }}">
              {{ $ua->user->is_active ? 'Active' : 'Inactive' }}
            </span>
          </td>
          <td>
            <div class="abr">
              <div class="ab ed"
                onclick="editUA(
                  {{ $ua->id }},
                  '{{ $ua->user->name }}',
                  '{{ $ua->user->phone }}')">
                <i class="fas fa-edit"></i>
              </div>
              <form method="POST"
                action="{{ route('admin.unit-admins.reset-password') }}"
                style="display:inline">
                @csrf
                <input type="hidden" name="id" value="{{ $ua->id }}">
                <button type="submit" class="ab"
                  title="Reset Password"
                  onclick="return confirm('Reset password for {{ $ua->user->name }}?')">
                  <i class="fas fa-key"></i>
                </button>
              </form>
              <form method="POST"
                action="{{ route('admin.unit-admins.toggle-status') }}"
                style="display:inline">
                @csrf
                <input type="hidden" name="id" value="{{ $ua->id }}">
                <button type="submit"
                  class="ab {{ $ua->user->is_active ? 'rej' : 'app' }}"
                  title="{{ $ua->user->is_active ? 'Deactivate' : 'Activate' }}"
                  onclick="return confirm('{{ $ua->user->is_active ? 'Deactivate' : 'Activate' }} {{ $ua->user->name }}?')">
                  <i class="fas fa-{{ $ua->user->is_active ? 'ban' : 'check' }}"></i>
                </button>
              </form>
              <form method="POST"
                action="{{ route('admin.unit-admins.delete') }}"
                style="display:inline"
                onsubmit="return confirm('Delete {{ $ua->user->name }}?')">
                @csrf @method('DELETE')
                <input type="hidden" name="id" value="{{ $ua->id }}">
                <button type="submit" class="ab rej">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="8"
            style="text-align:center;color:var(--text-dim);padding:30px;">
            No unit admins yet
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div id="addUAM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Create Unit Admin</span>
      <div class="mc3" onclick="cm('addUAM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST"
          action="{{ route('admin.unit-admins.store') }}">
      @csrf
      <div class="fgrid">
        <div class="fg">
          <label>Full Name</label>
          <input type="text" name="name"
                 placeholder="Enter full name" required>
        </div>
        <div class="fg">
          <label>Email</label>
          <input type="email" name="email"
                 placeholder="Enter email" required>
        </div>
        <div class="fg">
          <label>Phone</label>
          <input type="text" name="phone"
                 placeholder="10 digit number" required>
        </div>
        <div class="fg">
          <label>Assign Unit</label>
          <select name="unit_id" required>
            <option value="">Select Unit</option>
            @foreach($units as $unit)
              <option value="{{ $unit->id }}">
                {{ $unit->name }}
                ({{ $unit->district->name }})
              </option>
            @endforeach
          </select>
        </div>
      </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>
        Password will be auto-generated and shown
        in success message. Share it immediately!
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('addUAM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-user-plus"></i>Create
        </button>
      </div>
    </form>
  </div>
</div>

<div id="editUAM" class="mo">
  <div class="md">
    <div class="mh">
      <span class="mt2">Edit Unit Admin</span>
      <div class="mc3" onclick="cm('editUAM')">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <form method="POST"
          action="{{ route('admin.unit-admins.update') }}">
      @csrf
      <input type="hidden" name="id" id="editUAId">
      <div class="fgrid">
        <div class="fg">
          <label>Full Name</label>
          <input type="text" name="name"
                 id="editUAName" required>
        </div>
        <div class="fg">
          <label>Phone</label>
          <input type="text" name="phone"
                 id="editUAPhone" required>
        </div>
      </div>
      <div class="ff">
        <button type="button" class="btn bo"
                onclick="cm('editUAM')">Cancel</button>
        <button type="submit" class="btn bp">
          <i class="fas fa-save"></i>Update
        </button>
      </div>
    </form>
  </div>
</div>

@endsection

@section('scripts')
<script>
function editUA(id, name, phone) {
  document.getElementById('editUAId').value    = id;
  document.getElementById('editUAName').value  = name;
  document.getElementById('editUAPhone').value = phone;
  om('editUAM');
}
</script>
@endsection