@extends('layouts.main')
@section('content')
<style>
   .custom-btn {
   background-color: #007bff;
   color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 5px;
   }
   .custom-btn:hover {
   background-color: #0056b3;
   }
   .custom-user-table {
   border-collapse: separate;
   border-spacing: 0 14px;
   }
   .custom-user-table thead th {
   border: none;
   background: transparent;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   padding: 16px 20px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   }
   .custom-user-table tbody tr {
   background: #fff;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
   border-radius: 16px;
   transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .custom-user-table tbody tr:hover {
   transform: translateY(-4px) scale(1.005);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
   z-index: 10;
   position: relative;
   }
   .custom-user-table tbody td {
   padding: 20px;
   vertical-align: middle;
   border: none;
   }
   .custom-user-table tbody td:first-child {
   border-top-left-radius: 16px;
   border-bottom-left-radius: 16px;
   }
   .custom-user-table tbody td:last-child {
   border-top-right-radius: 16px;
   border-bottom-right-radius: 16px;
   }
   /* USER AVATAR */
   .user-avatar {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: linear-gradient(135deg, #6366f1, #a855f7);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 700;
   box-shadow: 0 8px 16px rgba(99, 102, 241, 0.25);
   }
   /* STATS CARDS */
   .stats-card {
   background: #fff;
   border-radius: 24px;
   padding: 28px;
   border: none;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
   transition: 0.4s ease;
   position: relative;
   overflow: hidden;
   z-index: 1;
   }
   .stats-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   }
   .stats-card::before {
   content: "";
   position: absolute;
   top: -50px;
   right: -50px;
   width: 150px;
   height: 150px;
   background: currentColor;
   opacity: 0.03;
   border-radius: 50%;
   z-index: -1;
   }
   .stats-icon {
   width: 56px;
   height: 56px;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 20px;
   }
   .admin-card .stats-icon {
   background: linear-gradient(135deg, #6366f1, #8b5cf6);
   color: #fff;
   box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
   }
   .counsellor-card .stats-icon {
   background: linear-gradient(135deg, #10b981, #059669);
   color: #fff;
   box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
   }
   .user-card .stats-icon {
   background: linear-gradient(135deg, #f59e0b, #d97706);
   color: #fff;
   box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
   }
   .corporate-card .stats-icon {
   background: linear-gradient(135deg, #0ea5e9, #0284c7);
   color: #fff;
   box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
   }
   .stats-count {
   font-size: 32px;
   font-weight: 800;
   margin: 0;
   background: linear-gradient(135deg, #1e293b, #475569);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   }
   /* STATUS TOGGLE */
   .form-check-input:checked {
   background-color: #10b981;
   border-color: #10b981;
   }
   .status-label {
   font-size: 13px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 20px;
   }
   .status-label.text-success {
   background: rgba(16, 185, 129, 0.1);
   color: #10b981 !important;
   }
   .status-label.text-danger {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444 !important;
   }
   /* BUTTONS */
   .btn-add-user {
   background: linear-gradient(135deg, #6366f1, #4f46e5);
   color: #fff;
   padding: 12px 24px;
   border-radius: 14px;
   border: none;
   font-weight: 700;
   box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
   transition: 0.3s;
   }
   .btn-add-user:hover {
   transform: translateY(-2px);
   box-shadow: 0 15px 25px rgba(99, 102, 241, 0.3);
   color: #fff;
   }
   /* MOBILE RESPONSIVE */
   @media(max-width:768px) {
   .custom-user-table thead {
   display: none;
   }
   .custom-user-table tbody tr {
   display: block;
   margin-bottom: 20px;
   }
   .custom-user-table tbody td {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   border-bottom: 1px solid #f1f5f9;
   }
   .custom-user-table tbody td:last-child {
   border-bottom: none;
   }
   }
</style>
<div class="container-fluid py-4">
<!-- Header -->
<div class="d-flex justify-content-between align-items-end mb-4">
   <div>
      <h2 class="fw-bold text-dark mb-1">User Management</h2>
      <p class="text-muted mb-0">Overview of all system users and roles</p>
   </div>
   @can('user_create')
   <button class="custom-btn btn-add-user d-flex align-items-center gap-2" data-bs-toggle="modal"
      data-bs-target="#addUserModal">
   <i class="bi bi-person-plus-fill"></i>
   Add New User
   </button>
   @endcan
</div>
<!-- Success Message -->
@if (session('success'))
<div class="alert alert-success">
   {{ session('success') }}
</div>
@endif
<!-- Card -->
<!-- Top Statistics Cards -->
<div class="row g-3 mb-4">
   <!-- Super Admin -->
   <div class="col-xl-3 col-md-6">
      <div class="stats-card admin-card">
         <div class="d-flex justify-content-between align-items-center">
            <div>
               <p class="stats-title mb-1">
                  Super Admin
               </p>
               <h3 class="stats-count">
                  {{ $stats['super_admin'] ?? 0 }}
               </h3>
            </div>
            <div class="stats-icon">
               <i class="bi bi-shield-fill-check"></i>
            </div>
         </div>
      </div>
   </div>
   <!-- Counsellor -->
   <div class="col-xl-3 col-md-6">
      <div class="stats-card counsellor-card">
         <div class="d-flex justify-content-between align-items-center">
            <div>
               <p class="stats-title mb-1">
                  Total Counsellors
               </p>
               <h3 class="stats-count">
                  {{ $stats['counsellor'] ?? 0 }}
               </h3>
            </div>
            <div class="stats-icon">
               <i class="bi bi-person-workspace"></i>
            </div>
         </div>
      </div>
   </div>
   <!-- User -->
   <!-- Users -->
   <div class="col-xl-3 col-md-6">
      <div class="stats-card user-card">
         <div class="d-flex justify-content-between align-items-center">
            <div>
               <p class="stats-title mb-1">
                  Total Users
               </p>
               <h3 class="stats-count">
                  {{ $stats['user'] ?? 0 }}
               </h3>
            </div>
            <div class="stats-icon">
               <i class="bi bi-person-fill"></i>
            </div>
         </div>
      </div>
   </div>
   <!-- Corporate Client -->
   <!-- Corporate Client -->
   <div class="col-xl-3 col-md-6">
      <div class="stats-card corporate-card">
         <div class="d-flex justify-content-between align-items-center">
            <div>
               <p class="stats-title mb-1">
                  Corporate Clients
               </p>
               <h3 class="stats-count">
                  {{ $stats['corporate_client'] ?? 0 }}
               </h3>
            </div>
            <div class="stats-icon">
               <i class="bi bi-building"></i>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- User Table Card -->
<div class="card shadow-sm border-0 rounded-4 bg-white">
   <div class="card-header bg-white d-flex justify-content-between align-items-center p-4 border-bottom">
      <div>
         <h5 class="mb-1 fw-bold text-dark">
            Registered Users
         </h5>
         <p class="text-muted small mb-0">
            Detailed list of all system participants
         </p>
      </div>
      <div class="d-flex gap-2">
         <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold">
         {{ $users->count() }} Total
         </span>
      </div>
   </div>
   <div class="card-body p-4 pt-2">
      <div class="table-responsive">
         <table class="table custom-user-table align-middle mb-0">
            <thead>
               <tr>
                  <th>#ID</th>
                  <th>User</th>
                  <th>Email</th>
                  <th>Phone</th>
                  <th>Status</th>
                  <th class="text-center">Action</th>
               </tr>
            </thead>
            <tbody>
               @forelse($users as $user)
               <tr>
                  <!-- USER ID -->
                  <td>
                     <span class="fw-bold text-primary">
                     #{{ $user->id }}
                     </span>
                  </td>
                  <!-- USER -->
                  <td>
                     <div class="d-flex align-items-center gap-3">
                        <div class="user-avatar">
                           {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}
                        </div>
                        <div>
                           <h6 class="mb-0 fw-semibold">
                              {{ $user->first_name ?? '' }}
                              {{ $user->last_name ?? '' }}
                           </h6>
                           <small class="text-muted">
                           {{ $user->display_user_type ?? ucfirst($user->user_type ?? 'User') }}
                           </small>
                        </div>
                     </div>
                  </td>
                  <!-- EMAIL -->
                  <td>
                     <span class="fw-medium text-dark">
                     {{ $user->email ?? 'N/A' }}
                     </span>
                  </td>
                  <!-- PHONE -->
                  <td>
                     <span class="fw-medium text-dark">
                     {{ $user->phone_number ?? 'N/A' }}
                     </span>
                  </td>
                  <!-- STATUS -->
                  <td>
                     @php
                     $source = $user->source ?? 'user';
                     $isActive =
                     $user->status === 'active' ||
                     $user->status === 1 ||
                     $user->status === '1' ||
                     $user->status === true;
                     $switchId = 'status-' . $source . '-' . $user->id;
                     @endphp
                     <div class="form-check form-switch d-flex align-items-center">
                        <input class="form-check-input status-toggle" type="checkbox" role="switch"
                        id="{{ $switchId }}" data-id="{{ $user->id }}"
                        data-source="{{ $source }}" {{ $isActive ? 'checked' : '' }}>
                        <label class="form-check-label mb-0 ms-2" for="{{ $switchId }}">
                        <span
                           class="status-label {{ $isActive ? 'text-success' : 'text-danger' }}">
                        {{ $isActive ? 'Active' : 'Inactive' }}
                        </span>
                        </label>
                     </div>
                  </td>
                  <!-- ACTION -->
                  <td>
                     <div class="d-flex justify-content-center align-items-center gap-2">
                        {{-- Edit Button --}}
                        @can('user_edit')
                        <a href="{{ route('superadmin.user.edit', $user->id) }}"
                           class="btn btn-sm btn-outline-primary rounded-circle d-flex align-items-center justify-content-center"
                           style="width:36px; height:36px;"
                           title="Edit">
                        <i class="bi bi-pencil-square"></i>
                        </a>
                        @endcan
                        {{-- Delete Button --}}
                        @can('user_delete')
                        @if ($user->id !== auth()->id())
                        <form action="{{ route('superadmin.user.delete', $user->id) }}"
                           method="POST"
                           class="m-0">
                           @csrf
                           @method('DELETE')
                           <button type="submit"
                              class="btn btn-sm btn-outline-danger rounded-circle d-flex align-items-center justify-content-center"
                              style="width:36px; height:36px;"
                              title="Delete"
                              onclick="return confirm('Are you sure you want to delete this user?')">
                           <i class="bi bi-trash"></i>
                           </button>
                        </form>
                        @else
                        <button
                           class="btn btn-sm btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center"
                           style="width:36px; height:36px;"
                           disabled
                           title="Cannot Delete">
                        <i class="bi bi-trash"></i>
                        </button>
                        @endif
                        @endcan
                     </div>
                  </td>
               </tr>
               @empty
               <tr>
                  <td colspan="6">
                     <div class="text-center py-5">
                        <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png"
                           width="120" class="mb-3">
                        <h5>
                           No Users Found
                        </h5>
                        <p class="text-muted mb-0">
                           No user records available right now.
                        </p>
                     </div>
                  </td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>
</div>
<!-- ================= MODAL ================= -->
<div class="modal fade" id="addUserModal" tabindex="-1">
   <div class="modal-dialog modal-md modal-dialog-centered">
      <div class="modal-content border-0 shadow rounded-3">
         @can('user_create')
         <form action="{{ route('superadmin.user.store') }}" method="POST">
            @csrf
            <div class="modal-header border-0">
               <h5 class="modal-title">Add User</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-0">
               <div class="row g-2">
                  <div class="col-6">
                     <label class="small">First Name</label>
                     <input type="text" name="first_name" class="form-control form-control-sm" required>
                  </div>
                  <div class="col-6">
                     <label class="small">Last Name</label>
                     <input type="text" name="last_name" class="form-control form-control-sm" required>
                  </div>
                  <div class="col-6">
                     <label class="small">Username</label>
                     <input type="text" name="username" class="form-control form-control-sm" required>
                  </div>
                  <div class="col-6">
                     <label class="small">Email</label>
                     <input type="email" name="email" class="form-control form-control-sm" required>
                  </div>
                  <div class="col-6">
                     <label class="small">Password</label>
                     <input type="password" name="password" class="form-control form-control-sm" required>
                  </div>
                  <div class="col-6">
                     <label class="small">Phone</label>
                     <input type="text" name="phone_number" class="form-control form-control-sm"
                        required>
                  </div>
                  <div class="col-6">
                     <label class="small">Country</label>
                     <input type="text" name="country" class="form-control form-control-sm" required>
                  </div>
                  <div class="col-6">
                     <label class="small">User Type</label>
                     <select name="user_type" class="form-control form-control-sm">
                        <option value="">Select</option>
                        <option value="super_admin">Super Admin</option>
                        <option value="user">User</option>
                        <option value="counsellor">Counsellor</option>
                        <option value="corporate_client">Corporate Client</option>
                     </select>
                  </div>
                  <div class="col-12">
                     <label class="small">Role</label>
                     <select name="role_id" class="form-control form-control-sm">
                        <option value="">Select Role</option>
                        @foreach ($roles as $role)
                        <option value="{{ $role->id }}">
                           {{ ucwords(str_replace('_', ' ', $role->name)) }}
                        </option>
                        @endforeach
                     </select>
                  </div>
               </div>
            </div>
            <div class="modal-footer border-0 pt-0">
               <button type="button" class="custom-btn btn-light btn-sm" data-bs-dismiss="modal">
               Cancel
               </button>
               <button type="submit" class="custom-btn btn-primary btn-sm">
               Save User
               </button>
            </div>
         </form>
         @endcan
      </div>
   </div>
</div>
@endsection
@section('scripts')
<script>
   document.addEventListener('DOMContentLoaded', function() {
       const url = '{{ route('superadmin.user.status.toggle') }}';
   
       function handleChange(e) {
           const input = e.currentTarget;
           const id = input.getAttribute('data-id');
           const source = input.getAttribute('data-source') || 'user';
           const checked = input.checked;
   
           if (!id) return;
   
           fetch(url, {
                   method: 'POST',
                   headers: {
                       'Content-Type': 'application/json',
                       'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                           'content') || '{{ csrf_token() }}'
                   },
                   body: JSON.stringify({
                       id: id,
                       source: source
                   })
               })
               .then(r => r.json())
               .then(data => {
                   const label = document.querySelector('label[for="' + input.id + '"] .status-label');
                   if (data && data.active !== undefined) {
                       if (data.active) {
                           label.classList.remove('text-danger');
                           label.classList.add('text-success');
                           label.textContent = 'Active';
                           input.checked = true;
                       } else {
                           label.classList.remove('text-success');
                           label.classList.add('text-danger');
                           label.textContent = 'Inactive';
                           input.checked = false;
                       }
                   } else if (data && data.error) {
                       alert(data.error);
                       // revert checked state on error
                       input.checked = !checked;
                   }
               })
               .catch(err => {
                   console.error(err);
                   alert('Failed to toggle status');
                   input.checked = !checked;
               });
       }
   
       document.querySelectorAll('.status-toggle').forEach(el => el.addEventListener('change', handleChange));
   });
</script>
@endsection