@extends('layouts.admin')
@section('title', 'Account & User Settings')
@section('page-title', 'Account & User Settings')

@section('content')

{{-- Header Banner --}}
<div class="mb-8">
  <h2 class="text-lg font-black text-slate-900">Account Management & Security</h2>
  <p class="text-xs text-slate-500 mt-0.5">Manage your administrator profile, change security credentials, and provision staff admin accounts.</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
  
  {{-- Column 1: Profile & Password (2 cols on desktop) --}}
  <div class="lg:col-span-2 space-y-8">
    
    {{-- Card 1: Administrator Profile Details --}}
    <div class="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-slate-200">
      <div class="flex items-center gap-3 pb-5 mb-6 border-b border-slate-100">
        <div class="w-10 h-10 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-lg font-bold">
          <i class="far fa-user"></i>
        </div>
        <div>
          <h3 class="text-sm font-black uppercase tracking-wider text-slate-900">Profile Information</h3>
          <p class="text-xs text-slate-500">Update your account name and email address</p>
        </div>
      </div>

      <form method="POST" action="{{ route('admin.settings.profile') }}" class="space-y-5">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          {{-- Name --}}
          <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Display Name</label>
            <input type="text" name="name" value="{{ old('name', $admin->name) }}" required
                   class="w-full px-4 py-3 text-xs bg-slate-50 border border-slate-300 rounded-xl font-semibold text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all">
            @error('name')
              <p class="text-rose-500 text-[11px] font-bold mt-1.5">{{ $message }}</p>
            @enderror
          </div>

          {{-- Email --}}
          <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Email Address</label>
            <input type="email" name="email" value="{{ old('email', $admin->email) }}" required
                   class="w-full px-4 py-3 text-xs bg-slate-50 border border-slate-300 rounded-xl font-semibold text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all">
            @error('email')
              <p class="text-rose-500 text-[11px] font-bold mt-1.5">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <div class="flex justify-end pt-2">
          <button type="submit"
                  class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 bg-sky-600 hover:bg-sky-700 text-white font-black text-xs uppercase tracking-wider rounded-xl shadow-md shadow-sky-600/20 transition-all">
            <i class="fas fa-save"></i>
            <span>Save Profile Details</span>
          </button>
        </div>
      </form>
    </div>

    {{-- Card 2: Security & Password Update --}}
    <div class="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-slate-200">
      <div class="flex items-center gap-3 pb-5 mb-6 border-b border-slate-100">
        <div class="w-10 h-10 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-lg font-bold">
          <i class="fas fa-key"></i>
        </div>
        <div>
          <h3 class="text-sm font-black uppercase tracking-wider text-slate-900">Change Password</h3>
          <p class="text-xs text-slate-500">Ensure your account is using a long, secure password</p>
        </div>
      </div>

      <form method="POST" action="{{ route('admin.settings.password') }}" class="space-y-5">
        @csrf
        @method('PUT')

        {{-- Current Password --}}
        <div>
          <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Current Password</label>
          <input type="password" name="current_password" required
                 class="w-full px-4 py-3 text-xs bg-slate-50 border border-slate-300 rounded-xl font-semibold text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all"
                 placeholder="Enter current password">
          @error('current_password')
            <p class="text-rose-500 text-[11px] font-bold mt-1.5">{{ $message }}</p>
          @enderror
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          {{-- New Password --}}
          <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">New Password</label>
            <input type="password" name="password" required
                   class="w-full px-4 py-3 text-xs bg-slate-50 border border-slate-300 rounded-xl font-semibold text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all"
                   placeholder="At least 8 characters">
            @error('password')
              <p class="text-rose-500 text-[11px] font-bold mt-1.5">{{ $message }}</p>
            @enderror
          </div>

          {{-- Confirm Password --}}
          <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Confirm New Password</label>
            <input type="password" name="password_confirmation" required
                   class="w-full px-4 py-3 text-xs bg-slate-50 border border-slate-300 rounded-xl font-semibold text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all"
                   placeholder="Repeat new password">
          </div>
        </div>

        <div class="flex justify-end pt-2">
          <button type="submit"
                  class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 bg-amber-500 hover:bg-amber-600 text-slate-950 font-black text-xs uppercase tracking-wider rounded-xl shadow-md shadow-amber-500/20 transition-all">
            <i class="fas fa-lock"></i>
            <span>Update Password</span>
          </button>
        </div>
      </form>
    </div>

    {{-- Card 3: Admin Staff Accounts --}}
    <div class="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-slate-200">
      <div class="flex items-center justify-between pb-5 mb-6 border-b border-slate-100 flex-wrap gap-4">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-lg font-bold">
            <i class="fas fa-users-cog"></i>
          </div>
          <div>
            <h3 class="text-sm font-black uppercase tracking-wider text-slate-900">Administrator Team</h3>
            <p class="text-xs text-slate-500">Authorized clinic users with access to the admin dashboard</p>
          </div>
        </div>
        <span class="text-xs font-bold text-slate-500 bg-slate-100 px-3 py-1.5 rounded-full">
          {{ $allAdmins->count() }} Active {{ Str::plural('Admin', $allAdmins->count()) }}
        </span>
      </div>

      {{-- List of Admin Users --}}
      <div class="overflow-x-auto mb-8">
        <table class="w-full text-left text-xs border-collapse">
          <thead>
            <tr class="bg-slate-50 border-b border-slate-200 text-[11px] font-black uppercase tracking-wider text-slate-500">
              <th class="px-4 py-3">User</th>
              <th class="px-4 py-3">Email Address</th>
              <th class="px-4 py-3">Role</th>
              <th class="px-4 py-3 text-right">Action</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100 font-medium">
            @foreach($allAdmins as $u)
            <tr class="hover:bg-slate-50/60 transition-colors">
              <td class="px-4 py-3 font-bold text-slate-900 flex items-center gap-2.5">
                <div class="w-7 h-7 rounded-lg bg-sky-600 text-white font-black flex items-center justify-center text-[11px]">
                  {{ strtoupper(substr($u->name, 0, 1)) }}
                </div>
                <span>{{ $u->name }}</span>
                @if($u->id === $admin->id)
                  <span class="px-2 py-0.5 rounded-md text-[10px] font-black bg-sky-100 text-sky-800">You</span>
                @endif
              </td>
              <td class="px-4 py-3 text-slate-600">{{ $u->email }}</td>
              <td class="px-4 py-3">
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-700">
                  Super Admin
                </span>
              </td>
              <td class="px-4 py-3 text-right">
                @if($u->id !== $admin->id)
                  <form method="POST" action="{{ route('admin.settings.users.destroy', $u) }}" class="inline"
                        onsubmit="return confirm('Remove administrator {{ $u->email }}?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="px-2.5 py-1 text-rose-600 hover:text-white hover:bg-rose-600 font-bold text-[11px] rounded-lg transition-all border border-rose-200">
                      Remove
                    </button>
                  </form>
                @else
                  <span class="text-slate-300 text-[11px]">Active</span>
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      {{-- Provision New Admin Form --}}
      <div class="bg-slate-50 rounded-2xl p-5 border border-slate-200">
        <h4 class="text-xs font-black uppercase tracking-wider text-slate-800 mb-3 flex items-center gap-2">
          <i class="fas fa-user-plus text-sky-600"></i>
          <span>Add New Administrator</span>
        </h4>
        <form method="POST" action="{{ route('admin.settings.users.store') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          @csrf
          <input type="text" name="name" required placeholder="Staff Name"
                 class="px-3.5 py-2.5 text-xs bg-white border border-slate-300 rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-sky-500">
          <input type="email" name="email" required placeholder="staff@experiordiagnostics.com"
                 class="px-3.5 py-2.5 text-xs bg-white border border-slate-300 rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-sky-500">
          <input type="password" name="password" required placeholder="Password (min 8)"
                 class="px-3.5 py-2.5 text-xs bg-white border border-slate-300 rounded-xl font-medium focus:outline-none focus:ring-2 focus:ring-sky-500">
          <div class="sm:col-span-3 flex justify-end mt-1">
            <button type="submit"
                    class="px-5 py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-black text-xs rounded-xl shadow-sm transition-all flex items-center gap-2">
              <i class="fas fa-plus text-xs"></i>
              <span>Create Administrator</span>
            </button>
          </div>
        </form>
      </div>

    </div>

  </div>

  {{-- Column 2: System Information & Clinic Summary --}}
  <div class="space-y-8">
    
    {{-- Card: Current User Summary --}}
    <div class="bg-gradient-to-br from-slate-900 via-slate-800 to-sky-950 rounded-3xl p-6 text-white shadow-xl">
      <div class="flex items-center gap-4 mb-5">
        <div class="w-14 h-14 rounded-2xl bg-sky-500/20 border border-sky-400/30 flex items-center justify-center text-sky-400 text-2xl font-black shadow-inner">
          {{ strtoupper(substr($admin->name, 0, 1)) }}
        </div>
        <div>
          <h3 class="text-base font-black tracking-tight leading-tight">{{ $admin->name }}</h3>
          <p class="text-xs text-sky-300 mt-0.5 truncate">{{ $admin->email }}</p>
          <span class="inline-block mt-2 px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-sky-500/20 text-sky-300 border border-sky-400/20">
            Active Administrator
          </span>
        </div>
      </div>
      <div class="pt-4 border-t border-slate-700/60 text-xs text-slate-400 space-y-2">
        <div class="flex justify-between">
          <span>Account Created:</span>
          <span class="text-slate-200 font-semibold">{{ $admin->created_at ? $admin->created_at->format('d M Y') : 'N/A' }}</span>
        </div>
        <div class="flex justify-between">
          <span>Current Session:</span>
          <span class="text-emerald-400 font-semibold flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> Online
          </span>
        </div>
      </div>
      <div class="mt-5 pt-4 border-t border-slate-700/60">
        <form method="POST" action="{{ route('admin.logout') }}">
          @csrf
          <button type="submit" 
                  class="w-full py-2.5 px-4 bg-rose-600 hover:bg-rose-700 text-white font-black text-xs uppercase tracking-wider rounded-xl shadow-md transition-all flex items-center justify-center gap-2">
            <i class="fas fa-sign-out-alt"></i>
            <span>Log Out Current Session</span>
          </button>
        </form>
      </div>
    </div>

    {{-- Card: System Diagnostics --}}
    <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-200">
      <h3 class="text-xs font-black uppercase tracking-wider text-slate-900 mb-4 pb-3 border-b border-slate-100 flex items-center gap-2">
        <i class="fas fa-server text-sky-600"></i>
        <span>System Diagnostics</span>
      </h3>
      <dl class="space-y-3 text-xs">
        <div class="flex justify-between items-center py-1 border-b border-slate-50">
          <dt class="text-slate-500 font-medium">PHP Version</dt>
          <dd class="font-bold text-slate-800">{{ phpversion() }}</dd>
        </div>
        <div class="flex justify-between items-center py-1 border-b border-slate-50">
          <dt class="text-slate-500 font-medium">Laravel Framework</dt>
          <dd class="font-bold text-slate-800">{{ app()->version() }}</dd>
        </div>
        <div class="flex justify-between items-center py-1 border-b border-slate-50">
          <dt class="text-slate-500 font-medium">Database Driver</dt>
          <dd class="font-bold text-slate-800 uppercase">{{ config('database.default') }}</dd>
        </div>
        <div class="flex justify-between items-center py-1 border-b border-slate-50">
          <dt class="text-slate-500 font-medium">Environment</dt>
          <dd class="font-bold text-sky-600 uppercase">{{ app()->environment() }}</dd>
        </div>
        <div class="flex justify-between items-center py-1">
          <dt class="text-slate-500 font-medium">Server Time</dt>
          <dd class="font-bold text-slate-800">{{ now()->format('H:i T') }}</dd>
        </div>
      </dl>
    </div>

    {{-- Card: Clinic Contact Quick Info --}}
    <div class="bg-sky-50/60 rounded-3xl p-6 border border-sky-200/80">
      <h3 class="text-xs font-black uppercase tracking-wider text-sky-900 mb-3 flex items-center gap-2">
        <i class="fas fa-hospital text-sky-600"></i>
        <span>Experior Clinics Support</span>
      </h3>
      <p class="text-xs text-sky-950 font-medium mb-3">
        Experior Clinics and Diagnostics Limited (ECDL) medical helpline and technical inquiry channels.
      </p>
      <div class="space-y-2 text-xs">
        <div class="flex items-center gap-2 text-sky-900 font-bold">
          <i class="fas fa-phone-alt text-sky-600 text-[10px]"></i>
          <span>Area 10: 0913 935 0850</span>
        </div>
        <div class="flex items-center gap-2 text-sky-900 font-bold">
          <i class="fas fa-phone-alt text-sky-600 text-[10px]"></i>
          <span>Kubwa: 0913 935 0852</span>
        </div>
        <div class="flex items-center gap-2 text-sky-900 font-bold">
          <i class="far fa-envelope text-sky-600 text-[10px]"></i>
          <span>info@experiordiagnostics.com</span>
        </div>
      </div>
    </div>

  </div>

</div>

@endsection