@extends('layouts.main')

@section('title')
    {{ __('roles.edit') }}
@endsection

@section('page_title')
    {{ __('roles.edit') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('admin.roles.index'), 'label' => __('roles.title')],
        ['url' => '', 'label' => __('roles.edit')],
    ];
@endphp

@section('content')
    <div class="space-y-8">
        <!-- Header Section -->
        <div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-4 sm:p-6 border border-primary/20">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-user-edit text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700 truncate">{{ __('roles.edit_role', ['name' => ucfirst($role->name)]) }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('roles.edit_description') }}</p>
                    </div>
                </div>
                <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline whitespace-nowrap">{{ __('roles.back_to_roles') }}</span>
                    <span class="sm:hidden">{{ __('roles.back') }}</span>
                </a>
            </div>
        </div>

        <!-- Edit Role Form Card -->
        <div class="card">
            <div class="card-body">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-edit text-primary"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-700">{{ __('roles.role_information') }}</h3>
                        <p class="text-gray-600 text-sm">{{ __('roles.edit_description') }}</p>
                    </div>
                </div>
                
                <form action="{{ route('admin.roles.update', $role->id) }}" method="POST" class="space-y-6">
                    @csrf
                    @method('PUT')

                    <!-- Role Name Field -->
                    <div class="form-group">
                        <label for="name" class="form-label required">{{ __('roles.role_name') }}</label>
                        <div class="relative">
                            <input type="text" 
                                   id="name" 
                                   name="name" 
                                   class="form-control @error('name') is-invalid @enderror !pl-10 !mb-1" 
                                   value="{{ old('name', $role->name) }}" 
                                   placeholder="{{ __('roles.role_name_placeholder') }}"
                                   required 
                                   autofocus>
                            <i class="fas fa-tag absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @if(in_array($role->name, ['admin', 'user']))
                            <small class="text-red-600 !mt-1">{{ __('roles.core_role_warning') }}</small>
                        @else
                            <small class="text-gray-500 mt-1">{{ __('roles.role_name_help') }}</small>
                        @endif
                    </div>

                    <!-- Permissions Section -->
                    <div class="border-t pt-6">
                        <h4 class="text-lg font-semibold text-gray-700 mb-4 flex items-center justify-between">
                            <span>{{ __('roles.assign_permissions') }}</span>
                            <span class="text-sm font-normal text-gray-600">
                                {{ __('roles.permissions_selected', ['count' => count($rolePermissions)]) }}
                            </span>
                        </h4>
                        <p class="text-sm text-gray-600 mb-4">{{ __('roles.assign_permissions_description') }}</p>
                        
                        @if($permissions->isEmpty())
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                {{ __('roles.no_permissions_message') }}
                                <a href="{{ route('admin.roles.permissions') }}" class="font-semibold underline">{{ __('roles.create_permissions_first') }}</a>
                            </div>
                        @else
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                @foreach($permissions as $module => $modulePermissions)
                                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-lg transition-all duration-200">
                                        <div class="bg-gray-100">
                                            <!-- Module Header -->
                                            <div class="flex items-center space-x-3 mb-4 px-4 pt-4">
                                                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-folder text-primary"></i>
                                                </div>
                                                <div class="flex-1">
                                                    <h5 class="text-lg font-semibold text-gray-700">{{ ucfirst($module) }} {{ __('roles.module') }}</h5>
                                                    <p class="text-sm text-gray-500">{{ __('roles.permissions_count_label', ['count' => count($modulePermissions)]) }}</p>
                                                </div>
                                                <label class="flex items-center space-x-3 cursor-pointer hover:bg-gray-100 bg-white p-2 rounded transition">
                                                    <input type="checkbox" 
                                                           class="module-select-all h-4 w-4 text-primary border-gray-300 rounded-[2px] focus:ring-primary"
                                                           data-module="{{ $module }}">
                                                    <span class="text-sm text-gray-700">{{ __('roles.all') }}</span>
                                                </label>
                                            </div>

                                            <!-- Permissions List -->
                                            <div class="space-y-3 px-4 pb-4 pt-2 bg-white">
                                                @foreach($modulePermissions as $permission)
                                                    <label class="flex items-center space-x-3 cursor-pointer hover:bg-gray-100 bg-white p-2 rounded transition">
                                                        <input type="checkbox" 
                                                               name="permissions[]" 
                                                               value="{{ $permission->name }}"
                                                               {{ in_array($permission->name, old('permissions', $rolePermissions)) ? 'checked' : '' }}
                                                               class="permission-checkbox module-{{ $module }} h-4 w-4 text-primary border-gray-300 rounded-[2px] focus:ring-primary">
                                                        <span class="text-sm text-gray-700">{{ $permission->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    <!-- Role Stats -->
                    <div class="border-t pt-6">
                        <div class="flex items-center space-x-3 mb-6">
                            <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                <i class="fas fa-chart-bar text-primary"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-gray-700">{{ __('roles.role_statistics') }}</h4>
                                <p class="text-gray-600 text-sm">{{ __('roles.role_statistics_description') }}</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                                <div class="flex items-center space-x-4">
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-users text-blue-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">{{ __('roles.users_with_role') }}</p>
                                        <p class="text-2xl font-semibold text-blue-600">{{ $role->users->count() }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                                <div class="flex items-center space-x-4">
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-key text-green-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">{{ __('roles.total_permissions_label') }}</p>
                                        <p class="text-2xl font-semibold text-green-600">{{ $role->permissions->count() }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                                <div class="flex items-center space-x-4">
                                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-clock text-purple-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600">{{ __('roles.created') }}</p>
                                        <p class="text-lg font-semibold text-purple-600">{{ $role->created_at->format('M d, Y') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex items-center justify-end space-x-3 pt-6 border-t">
                        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times mr-2"></i>
                            {{ __('roles.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-2"></i>
                            {{ __('roles.update_role') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('JavaScript loaded - DOM ready');
    
    // Function to update select-all checkbox state
    function updateSelectAllState(module) {
        console.log('Updating select-all state for module:', module);
        
        // Find all permission checkboxes for this module
        const moduleCheckboxes = document.querySelectorAll(`input[class*="module-${module}"]`);
        const total = moduleCheckboxes.length;
        let checked = 0;
        
        moduleCheckboxes.forEach(function(checkbox) {
            if (checkbox.checked) checked++;
        });
        
        // Find the select-all checkbox for this module
        const selectAllCheckbox = document.querySelector(`input[data-module="${module}"]`);
        
        console.log(`Module: ${module}, Total: ${total}, Checked: ${checked}`);
        
        if (checked === total && total > 0) {
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = true;
                console.log(`Setting select-all to checked for module: ${module}`);
            }
        } else {
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = false;
                console.log(`Setting select-all to unchecked for module: ${module}`);
            }
        }
    }

    // Initialize select-all state on page load
    const selectAllCheckboxes = document.querySelectorAll('input[data-module]');
    selectAllCheckboxes.forEach(function(checkbox) {
        const module = checkbox.getAttribute('data-module');
        console.log('Initializing module:', module);
        updateSelectAllState(module);
    });

    // Select All functionality for each module
    selectAllCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const module = this.getAttribute('data-module');
            const isChecked = this.checked;
            console.log(`Select All clicked for module: ${module}, checked: ${isChecked}`);
            
            // Find all permission checkboxes for this module and update them
            const moduleCheckboxes = document.querySelectorAll(`input[class*="module-${module}"]`);
            moduleCheckboxes.forEach(function(permissionCheckbox) {
                permissionCheckbox.checked = isChecked;
                console.log(`Setting checkbox ${permissionCheckbox.value} to ${isChecked}`);
            });
        });
    });

    // Update select-all checkbox when individual checkboxes change
    const permissionCheckboxes = document.querySelectorAll('input[name="permissions[]"]');
    permissionCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const classes = this.className;
            const moduleMatch = classes.match(/module-(\w+)/);
            if (moduleMatch) {
                const module = moduleMatch[1];
                console.log(`Permission changed for module: ${module}`);
                updateSelectAllState(module);
            }
        });
    });
});
</script>