@extends('layouts.app')

@section('title', isset($group) ? 'Edit Group' : 'Create Group')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-1">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">
                                <i class="fas fa-{{ isset($group) ? 'edit' : 'plus' }} me-1"></i>
                                {{ isset($group) ? 'Edit Group' : 'Create New Group' }}
                            </h5>
                            <small class="text-muted">{{ isset($group) ? 'Update group information and permissions' : 'Add a new user group with permissions' }}</small>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ route('groups.index') }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Group Form -->
    <div class="row">
        <div class="col-md-12">
            <div class="custom-card">
                <div class="custom-card-header py-1">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Group Information
                    </h6>
                </div>
                <div class="custom-card-body">
                    <form method="POST" action="{{ isset($group) ? route('groups.update', $group) : route('groups.store') }}" id="groupForm">
                        @csrf
                        @if(isset($group))
                            @method('PUT')
                        @endif

                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <label for="name" class="form-label mb-1">
                                    <i class="fas fa-layer-group me-1"></i>Group Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control custom-form-control @error('name') is-invalid @enderror" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name', $group->name ?? '') }}"
                                       placeholder="Enter group name"
                                       required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-2">
                                <label for="color" class="form-label mb-1">
                                    <i class="fas fa-palette me-1"></i>Group Color <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input type="color" 
                                           class="form-control form-control-color @error('color') is-invalid @enderror" 
                                           id="color" 
                                           name="color" 
                                           value="{{ old('color', $group->color ?? '#6c757d') }}"
                                           style="width: 60px; height: 38px;">
                                    <input type="text" 
                                           class="form-control custom-form-control @error('color') is-invalid @enderror" 
                                           value="{{ old('color', $group->color ?? '#6c757d') }}"
                                           placeholder="#6c757d"
                                           readonly>
                                </div>
                                @error('color')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mb-2">
                                <label for="description" class="form-label mb-1">
                                    <i class="fas fa-align-left me-1"></i>Description
                                </label>
                                <textarea class="form-control custom-form-control @error('description') is-invalid @enderror" 
                                          id="description" 
                                          name="description" 
                                          rows="2"
                                          placeholder="Enter group description">{{ old('description', $group->description ?? '') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="is_active" 
                                           name="is_active" 
                                           value="1"
                                           {{ old('is_active', $group->is_active ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        <i class="fas fa-check-circle me-1"></i>Active Group
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Permissions Section -->
                        <div class="row mt-2">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="custom-card-header py-1">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h6 class="mb-0">
                                                <i class="fas fa-shield-alt me-1"></i>
                                                Group Permissions
                                            </h6>
                                            <div class="d-flex gap-1 align-items-center">
                                                <div class="input-group input-group-sm" style="width: 200px;">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                    <input type="text" 
                                                           class="form-control form-control-sm" 
                                                           id="permissionSearch" 
                                                           placeholder="Search permissions..."
                                                           onkeyup="filterPermissions()">
                                                </div>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <button type="button" class="btn btn-outline-success btn-sm" onclick="grantAllPermissions()">
                                                        <i class="fas fa-check me-1"></i>Grant All
                                                    </button>
                                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="denyAllPermissions()">
                                                        <i class="fas fa-times me-1"></i>Deny All
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="custom-card-body">
                                        <div class="mb-2">
                                            <small class="text-muted">Select permissions for this group:</small>
                                        </div>

                                        <div class="border rounded p-2" style="max-height: 350px; overflow-y: auto;">
                                            @if($permissions->count() > 0)
                                                @foreach($permissions as $permission)
                                                    <div class="permission-item mb-2 p-2 border rounded permission-searchable" 
                                                         data-key="{{ strtolower($permission->permission_key) }}" 
                                                         data-description="{{ strtolower($permission->description) }}">
                                                        <div class="d-flex justify-content-between align-items-start mb-1">
                                                            <div>
                                                                <strong class="d-block">{{ $permission->permission_key }}</strong>
                                                                <small class="text-muted">{{ $permission->description }}</small>
                                                            </div>
                                                            <div class="btn-group btn-group-sm" role="group">
                                                                <input type="radio" 
                                                                       class="btn-check" 
                                                                       name="permissions[{{ $permission->id }}]" 
                                                                       id="permission_{{ $permission->id }}_grant" 
                                                                       value="1"
                                                                       {{ isset($groupPermissions) && isset($groupPermissions[$permission->id]) && $groupPermissions[$permission->id] ? 'checked' : '' }}
                                                                       autocomplete="off">
                                                                <label class="btn btn-outline-success btn-sm" for="permission_{{ $permission->id }}_grant">
                                                                    <i class="fas fa-check"></i>
                                                                </label>

                                                                <input type="radio" 
                                                                       class="btn-check" 
                                                                       name="permissions[{{ $permission->id }}]" 
                                                                       id="permission_{{ $permission->id }}_deny" 
                                                                       value="0"
                                                                       {{ isset($groupPermissions) && isset($groupPermissions[$permission->id]) && !$groupPermissions[$permission->id] ? 'checked' : '' }}
                                                                       autocomplete="off">
                                                                <label class="btn btn-outline-danger btn-sm" for="permission_{{ $permission->id }}_deny">
                                                                    <i class="fas fa-times"></i>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <p class="text-muted mb-0">No permissions available.</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Actions -->
    <div class="row mt-2">
        <div class="col-12">
            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('groups.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-times me-1"></i>Cancel
                </a>
                <button type="submit" form="groupForm" class="btn btn-success btn-sm">
                    <i class="fas fa-{{ isset($group) ? 'save' : 'plus' }} me-1"></i>{{ isset($group) ? 'Update Group' : 'Create Group' }}
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Color picker synchronization
    const colorInput = document.getElementById('color');
    const colorText = colorInput.nextElementSibling;
    
    colorInput.addEventListener('input', function() {
        colorText.value = this.value;
    });
    
    // Form validation
    const form = document.getElementById('groupForm');
    form.addEventListener('submit', function(e) {
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
        
        // Debug: Log form data
        const formData = new FormData(form);
        console.log('Form data being submitted:');
        for (let [key, value] of formData.entries()) {
            console.log(key + ': ' + value);
        }
        
        // Manually check permissions data
        console.log('=== PERMISSIONS DEBUG ===');
        const allPermissionInputs = document.querySelectorAll('input[name^="permissions"]');
        console.log('Total permission inputs found:', allPermissionInputs.length);
        
        allPermissionInputs.forEach((input, index) => {
            console.log(`Input ${index + 1}:`, {
                name: input.name,
                value: input.value,
                checked: input.checked,
                type: input.type
            });
        });
        
        const checkedPermissions = document.querySelectorAll('input[name^="permissions"]:checked');
        console.log('Checked permissions:', checkedPermissions.length);
        checkedPermissions.forEach((input, index) => {
            console.log(`Checked ${index + 1}:`, {
                name: input.name,
                value: input.value
            });
        });
        
        // Check if form has permissions data
        const permissionsData = {};
        checkedPermissions.forEach(input => {
            const permissionId = input.name.replace('permissions[', '').replace(']', '');
            permissionsData[permissionId] = input.value;
        });
        console.log('Permissions data object:', permissionsData);
        
        // Check if permissions are selected
        const selectedPermissions = document.querySelectorAll('input[name^="permissions"]:checked');
        console.log('Selected permissions count:', selectedPermissions.length);
        
        if (selectedPermissions.length === 0) {
            console.log('No permissions selected');
            if (!confirm('No permissions selected. Are you sure you want to create a group without permissions?')) {
                e.preventDefault();
                return;
            }
        } else {
            console.log('Selected permissions:');
            selectedPermissions.forEach(radio => {
                console.log('Permission:', radio.name, 'Value:', radio.value);
            });
            
            // Validate that all permissions have values
            const allPermissions = document.querySelectorAll('input[name^="permissions"]');
            const unselectedPermissions = [];
            
            allPermissions.forEach(radio => {
                if (!radio.checked) {
                    const permissionId = radio.name.replace('permissions[', '').replace(']', '');
                    unselectedPermissions.push(permissionId);
                }
            });
            
            if (unselectedPermissions.length > 0) {
                console.log('Unselected permissions:', unselectedPermissions);
            }
            
            
        }
    });
});

function grantAllPermissions() {
    document.querySelectorAll('input[name^="permissions"][value="1"]').forEach(radio => {
        radio.checked = true;
    });
}

function denyAllPermissions() {
    document.querySelectorAll('input[name^="permissions"][value="0"]').forEach(radio => {
        radio.checked = true;
    });
}

function filterPermissions() {
    const searchTerm = document.getElementById('permissionSearch').value.toLowerCase();
    const permissionItems = document.querySelectorAll('.permission-searchable');
    
    permissionItems.forEach(item => {
        const key = item.getAttribute('data-key');
        const description = item.getAttribute('data-description');
        
        if (key.includes(searchTerm) || description.includes(searchTerm)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}
</script>
@endsection