@extends('admin.layouts.app')

@section('title', 'Create Role')
@section('page-title', 'Create Role')
@section('page-subtitle', 'Define new user role')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">Role Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.roles.store') }}">
        @csrf
        
        <div class="p-6 space-y-4">
          <!-- Name -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Role Name *</label>
            <input type="text" name="name" value="{{ old('name') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('name') border-red-500 @enderror" placeholder="e.g., Administrator, Doctor, Receptionist">
            @error('name')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Description -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Description</label>
            <textarea name="description" rows="3" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('description') border-red-500 @enderror" placeholder="Describe the role and its responsibilities...">{{ old('description') }}</textarea>
            @error('description')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Permissions -->
          <div class="border-t border-slate-200 pt-4">
            <div class="flex items-center justify-between mb-4">
              <div>
                <h4 class="text-lg font-bold text-slate-800">Permissions *</h4>
                <p class="text-sm text-slate-500">Select the permissions this role should have</p>
              </div>
              
              <!-- Master Select All Checkbox -->
              <div class="flex items-center bg-primary-50 px-4 py-2 rounded-lg border border-primary-200">
                <input type="checkbox" id="selectAllMaster" onchange="toggleAllPermissions(this)" class="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                <label for="selectAllMaster" class="ml-2 text-sm font-semibold text-primary-700 cursor-pointer">Select All Permissions</label>
              </div>
            </div>
            
            @error('permissions')
              <p class="mb-3 text-sm text-red-500">{{ $message }}</p>
            @enderror

            <div class="space-y-6">
              <!-- User Management -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-users w-5 text-primary-600 mr-2"></i>
                    User Management
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-user-management" onchange="toggleGroup(this, 'group-user-management')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-user-management" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_users" data-group="group-user-management" {{ in_array('manage_users', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Users</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_roles" data-group="group-user-management" {{ in_array('manage_roles', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Roles</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_users" data-group="group-user-management" {{ in_array('view_users', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Users</label>
                  </div>
                </div>
              </div>

              <!-- Appointments -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-calendar-check w-5 text-blue-600 mr-2"></i>
                    Appointments
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-appointments" onchange="toggleGroup(this, 'group-appointments')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-appointments" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_appointments" data-group="group-appointments" {{ in_array('manage_appointments', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Appointments</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_appointments" data-group="group-appointments" {{ in_array('view_appointments', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View All Appointments</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_own_appointments" data-group="group-appointments" {{ in_array('view_own_appointments', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Own Appointments</label>
                  </div>
                </div>
              </div>

              <!-- Patients -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-user-injured w-5 text-violet-600 mr-2"></i>
                    Patients
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-patients" onchange="toggleGroup(this, 'group-patients')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-patients" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_patients" data-group="group-patients" {{ in_array('manage_patients', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Patients</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_patients" data-group="group-patients" {{ in_array('view_patients', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View All Patients</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_own_patients" data-group="group-patients" {{ in_array('view_own_patients', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Own Patients</label>
                  </div>
                </div>
              </div>

              <!-- Fundraising -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-hand-holding-usd w-5 text-green-600 mr-2"></i>
                    Fundraising
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-fundraising" onchange="toggleGroup(this, 'group-fundraising')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-fundraising" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_campaigns" data-group="group-fundraising" {{ in_array('manage_campaigns', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Campaigns</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_donors" data-group="group-fundraising" {{ in_array('manage_donors', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Donors</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_donations" data-group="group-fundraising" {{ in_array('view_donations', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Donations</label>
                  </div>
                </div>
              </div>

              <!-- Content Management -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-newspaper w-5 text-orange-600 mr-2"></i>
                    Content Management
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-content" onchange="toggleGroup(this, 'group-content')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-content" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_content" data-group="group-content" {{ in_array('manage_content', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Content</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="publish_content" data-group="group-content" {{ in_array('publish_content', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Publish Content</label>
                  </div>
                </div>
              </div>

              <!-- Research -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-flask w-5 text-indigo-600 mr-2"></i>
                    Research
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-research" onchange="toggleGroup(this, 'group-research')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-research" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_research" data-group="group-research" {{ in_array('manage_research', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Research</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_research" data-group="group-research" {{ in_array('view_research', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Research</label>
                  </div>
                </div>
              </div>

              <!-- Events -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-calendar-alt w-5 text-purple-600 mr-2"></i>
                    Events
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-events" onchange="toggleGroup(this, 'group-events')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-events" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_events" data-group="group-events" {{ in_array('manage_events', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Events</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_events" data-group="group-events" {{ in_array('view_events', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Events</label>
                  </div>
                </div>
              </div>

              <!-- Support -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-ticket-alt w-5 text-red-600 mr-2"></i>
                    Support
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-support" onchange="toggleGroup(this, 'group-support')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-support" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="manage_tickets" data-group="group-support" {{ in_array('manage_tickets', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Manage Tickets</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_tickets" data-group="group-support" {{ in_array('view_tickets', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Tickets</label>
                  </div>
                </div>
              </div>

              <!-- Reports -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-chart-bar w-5 text-cyan-600 mr-2"></i>
                    Reports & Data
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-reports" onchange="toggleGroup(this, 'group-reports')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-reports" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_reports" data-group="group-reports" {{ in_array('view_reports', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Reports</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="export_data" data-group="group-reports" {{ in_array('export_data', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">Export Data</label>
                  </div>
                </div>
              </div>

              <!-- System -->
              <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <div class="flex items-center justify-between mb-3">
                  <h5 class="font-semibold text-slate-800 flex items-center">
                    <i class="fas fa-cog w-5 text-slate-600 mr-2"></i>
                    System
                  </h5>
                  <div class="flex items-center bg-white px-3 py-1 rounded-lg border border-slate-200">
                    <input type="checkbox" id="group-system" onchange="toggleGroup(this, 'group-system')" class="w-3.5 h-3.5 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label for="group-system" class="ml-2 text-xs font-medium text-slate-700 cursor-pointer">Select All</label>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="system_settings" data-group="group-system" {{ in_array('system_settings', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">System Settings</label>
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" name="permissions[]" value="view_logs" data-group="group-system" {{ in_array('view_logs', old('permissions', [])) ? 'checked' : '' }} class="permission-checkbox w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500">
                    <label class="ml-2 text-sm text-slate-700">View Logs</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.roles.index') }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">
            Cancel
          </a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">
            Create Role
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
// Toggle all permissions (master checkbox)
function toggleAllPermissions(masterCheckbox) {
  const isChecked = masterCheckbox.checked;
  
  // Check/uncheck all permission checkboxes
  document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
    checkbox.checked = isChecked;
  });
  
  // Check/uncheck all group checkboxes
  document.querySelectorAll('[id^="group-"]').forEach(groupCheckbox => {
    groupCheckbox.checked = isChecked;
    groupCheckbox.indeterminate = false;
  });
}

// Toggle permissions by group
function toggleGroup(groupCheckbox, groupName) {
  const isChecked = groupCheckbox.checked;
  
  // Check/uncheck all checkboxes in this group
  document.querySelectorAll(`[data-group="${groupName}"]`).forEach(checkbox => {
    checkbox.checked = isChecked;
  });
  
  groupCheckbox.indeterminate = false;
  
  // Update master checkbox state
  updateMasterCheckbox();
}

// Update master checkbox based on individual permissions
function updateMasterCheckbox() {
  const allCheckboxes = document.querySelectorAll('.permission-checkbox');
  const checkedCheckboxes = document.querySelectorAll('.permission-checkbox:checked');
  const masterCheckbox = document.getElementById('selectAllMaster');
  
  if (checkedCheckboxes.length === 0) {
    masterCheckbox.checked = false;
    masterCheckbox.indeterminate = false;
  } else if (checkedCheckboxes.length === allCheckboxes.length) {
    masterCheckbox.checked = true;
    masterCheckbox.indeterminate = false;
  } else {
    masterCheckbox.checked = false;
    masterCheckbox.indeterminate = true;
  }
}

// Update group checkbox based on its permissions
function updateGroupCheckbox(groupName) {
  const groupCheckboxes = document.querySelectorAll(`[data-group="${groupName}"]`);
  const checkedGroupCheckboxes = document.querySelectorAll(`[data-group="${groupName}"]:checked`);
  const groupToggle = document.getElementById(groupName);
  
  if (checkedGroupCheckboxes.length === 0) {
    groupToggle.checked = false;
    groupToggle.indeterminate = false;
  } else if (checkedGroupCheckboxes.length === groupCheckboxes.length) {
    groupToggle.checked = true;
    groupToggle.indeterminate = false;
  } else {
    groupToggle.checked = false;
    groupToggle.indeterminate = true;
  }
}

// Add event listeners to all permission checkboxes
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const groupName = this.getAttribute('data-group');
      updateGroupCheckbox(groupName);
      updateMasterCheckbox();
    });
  });
  
  // Initialize checkbox states on page load
  const allGroups = ['group-user-management', 'group-appointments', 'group-patients', 'group-fundraising', 'group-content', 'group-research', 'group-events', 'group-support', 'group-reports', 'group-system'];
  allGroups.forEach(group => updateGroupCheckbox(group));
  updateMasterCheckbox();
});
</script>
@endpush
@endsection