@extends('layouts.superadmin')

@section('title', "Edit Administrator: {$admin->name}")

@section('content')
<div style="max-width: 800px; margin: 0 auto;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <div>
      <h1 style="font-size: 1.6rem; font-family: var(--font-heading); margin: 0 0 0.35rem; color: #fff;">
        <i class="fas fa-user-edit" style="color: #F59E0B; margin-right: 0.5rem;"></i> Edit Administrator Account
      </h1>
      <p style="margin: 0; font-size: 0.9rem; color: #94A3B8;">
        Update account details, role allocation, and granular module permissions for {{ $admin->name }}.
      </p>
    </div>

    <div>
      <a href="{{ route('superadmin.admins.index') }}" class="btn btn-sm btn-outline">
        <i class="fas fa-arrow-left"></i> Back to Staff Directory
      </a>
    </div>
  </div>

  @if($errors->any())
    <div class="alert alert-danger" style="padding: 1rem 1.25rem; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); margin-bottom: 1.5rem;">
      <strong style="display: block; margin-bottom: 0.5rem;"><i class="fas fa-exclamation-triangle"></i> Please correct the validation errors:</strong>
      <ul style="margin: 0; padding-left: 1.25rem;">
        @foreach($errors->all() as $err)
          <li>{{ $err }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="superadmin-card">
    <form action="{{ route('superadmin.admins.update', $admin->id) }}" method="POST">
      @csrf
      @method('PUT')

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem;">
        <div>
          <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">
            Full Name <span style="color: #EF4444;">*</span>
          </label>
          <input type="text" name="name" value="{{ old('name', $admin->name) }}" required 
                 style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
        </div>

        <div>
          <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">
            Official Email Address <span style="color: #EF4444;">*</span>
          </label>
          <input type="email" name="email" value="{{ old('email', $admin->email) }}" required 
                 style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
        </div>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem;">
        <div>
          <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">
            Username
          </label>
          <input type="text" value="{{ $admin->username }}" disabled 
                 style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #94A3B8; font-size: 0.9rem; cursor: not-allowed;">
        </div>

        <div>
          <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">
            Mobile Phone Number <span style="color: #EF4444;">*</span>
          </label>
          <input type="text" name="phone" value="{{ old('phone', $admin->phone) }}" required 
                 style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
        </div>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem;">
        <div>
          <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">
            Administrative Role <span style="color: #EF4444;">*</span>
          </label>
          <select id="roleSelector" name="role" required 
                  style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
            <option value="admin" {{ old('role', $admin->role) === 'admin' ? 'selected' : '' }}>General Administrator</option>
            <option value="district_officer" {{ old('role', $admin->role) === 'district_officer' ? 'selected' : '' }}>District Officer</option>
            <option value="super_admin" {{ old('role', $admin->role) === 'super_admin' ? 'selected' : '' }}>Super Administrator</option>
          </select>
        </div>

        <div>
          <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">
            Assigned District (For District Officers)
          </label>
          <select name="assigned_district" 
                  style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
            <option value="">Select Maharashtra District...</option>
            @foreach($districts as $district)
              <option value="{{ $district->name }}" {{ old('assigned_district', $admin->assigned_district) === $district->name ? 'selected' : '' }}>
                {{ $district->name }}
              </option>
            @endforeach
          </select>
        </div>
      </div>

      <!-- Granular Module Permissions -->
      <div style="margin-bottom: 1.5rem;">
        <label style="display: block; font-size: 0.85rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.6rem;">
          <i class="fas fa-key" style="color: #F59E0B; margin-right: 0.3rem;"></i> Assigned Module Permissions
        </label>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.75rem; background: #0B111E; padding: 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.1);">
          @foreach($permissions as $permKey => $permLabel)
            @php
              $isPermChecked = old("permissions.{$permKey}", !empty($admin->permissions[$permKey]) || empty($admin->permissions));
            @endphp
            <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #E2E8F0; cursor: pointer;">
              <input type="checkbox" name="permissions[{{ $permKey }}]" value="1" {{ $isPermChecked ? 'checked' : '' }} style="accent-color: #F59E0B;">
              {{ $permLabel }}
            </label>
          @endforeach
        </div>
      </div>

      <!-- Optional Password Reset -->
      <div style="border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.25rem; margin-bottom: 2rem;">
        <span style="display: block; font-size: 0.85rem; color: #94A3B8; margin-bottom: 0.75rem;">
          <i class="fas fa-lock" style="color: #F59E0B; margin-right: 0.3rem;"></i> Change Password (Leave blank to keep existing password)
        </span>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;">
          <div>
            <label style="display: block; font-size: 0.82rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">New Password</label>
            <input type="password" name="password" placeholder="Leave empty to keep current" 
                   style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
          </div>
          <div>
            <label style="display: block; font-size: 0.82rem; font-weight: 600; color: #CBD5E1; margin-bottom: 0.4rem;">Confirm New Password</label>
            <input type="password" name="password_confirmation" placeholder="Repeat new password" 
                   style="width: 100%; padding: 0.65rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.9rem;">
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08);">
        <a href="{{ route('superadmin.admins.index') }}" class="btn btn-outline" style="font-weight: 600;">Cancel</a>
        <button type="submit" class="btn" style="background: #F59E0B; color: #000; font-weight: 700; padding: 0.65rem 1.75rem;">
          <i class="fas fa-save"></i> Save Changes
        </button>
      </div>
    </form>
  </div>
</div>
@endsection