{% extends 'base.html' %}
{% load static %}
{% load permission_filters %}

{% block title %}User Permissions - {{ user.get_full_name }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        <span>🛡️</span>
                        User Permissions
                    </h1>
                    <p class="mt-2 text-sm text-gray-600">
                        Manage permissions for {{ user.get_full_name }} ({{ user.get_role_display }})
                    </p>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'users:admin_list' %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                        <span>←</span>
                        Back to Staff List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- User Info Card -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center space-x-6">
                <div class="flex-shrink-0 h-16 w-16">
                    {% if user.profile_image %}
                        <img class="h-16 w-16 rounded-full object-cover" src="{{ user.profile_image.url }}" alt="">
                    {% else %}
                        <div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center">
                            <span class="text-xl font-medium text-gray-600">{{ user.get_initials }}</span>
                        </div>
                    {% endif %}
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-medium text-gray-900">{{ user.get_full_name }}</h3>
                    <p class="text-sm text-gray-500">{{ user.email }}</p>
                    <p class="text-sm text-gray-500">{{ user.phone_number }}</p>
                    <div class="mt-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ user.get_role_display }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
        <div class="bg-{% if message.tags == 'error' %}red{% else %}green{% endif %}-50 border border-{% if message.tags == 'error' %}red{% else %}green{% endif %}-200 rounded-md p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-{% if message.tags == 'error' %}exclamation-triangle{% else %}check-circle{% endif %} text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-700">{{ message }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    {% endif %}

    <!-- Permissions Form -->
    <form method="post" class="space-y-6">
        {% csrf_token %}
        
        <!-- Permission Legend -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <h4 class="text-sm font-medium text-blue-900 mb-2">Permission Legend</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                    <div class="w-4 h-4 bg-green-500 rounded mr-2"></div>
                    <span class="text-blue-800">Allowed - User can perform this action</span>
                </div>
                <div class="flex items-center">
                    <div class="w-4 h-4 bg-red-500 rounded mr-2"></div>
                    <span class="text-blue-800">Denied - User cannot perform this action</span>
                </div>
            </div>
        </div>

        <!-- Dashboard Permissions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <i class="fas fa-tachometer-alt text-blue-600 mr-2"></i>
                    Dashboard
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Dashboard Overview -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Overview & Metrics</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="dashboard_access" 
                                       {% if current_permissions.dashboard_access or role_permissions.dashboard_access %}checked{% endif %}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">Access Dashboard</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="dashboard_overview_access" 
                                       {% if current_permissions.dashboard_overview_access or role_permissions.dashboard_overview_access %}checked{% endif %}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">View Overview Cards</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="dashboard_metrics_access" 
                                       {% if current_permissions.dashboard_metrics_access or role_permissions.dashboard_metrics_access %}checked{% endif %}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">View Key Metrics</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="dashboard_charts_access" 
                                       {% if current_permissions.dashboard_charts_access or role_permissions.dashboard_charts_access %}checked{% endif %}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">View Analytics Charts</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Clients Permissions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>👥</span>
                    Clients
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Client Management -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Client Management</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_access" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Access Clients Page</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_view_list_access" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">View Clients List</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_create_new_create" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Create New Client</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_edit_profile_edit" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Edit Client Profile</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_delete_client_delete" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Delete Client</span>
                            </label>
                        </div>
                    </div>

                    <!-- Client Information -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Client Information</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_view_details_access" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">View Client Details</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_loan_history_access" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">View Loan History</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_payment_history_access" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">View Payment History</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_kyc_documents_access" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Manage KYC Documents</span>
                            </label>
                        </div>
                    </div>

                    <!-- Client Operations -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Client Operations</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_assign_portfolio_assign" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Assign to Portfolio</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_registration_fee_manage" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Manage Registration Fees</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_status_change_edit" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Change Client Status</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="clients_export_data_export" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">Export Client Data</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Loans Permissions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>💵</span>
                    Loans
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Loan Management -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Loan Management</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_access" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Access Loans Page</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_view_list_access" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">View Loans List</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_create_application_create" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Create Loan Application</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_edit_application_edit" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Edit Loan Application</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_delete_loan_delete" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Delete Loan</span>
                            </label>
                        </div>
                    </div>

                    <!-- Loan Approval -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Loan Approval</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_approve_application_approve" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Approve Applications</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_reject_application_reject" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Reject Applications</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_disburse_funds_process" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Disburse Funds</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_modify_terms_edit" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Modify Loan Terms</span>
                            </label>
                        </div>
                    </div>

                    <!-- Loan Operations -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Loan Operations</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_rollover_loan_process" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Process Rollover</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_calculate_interest_calculate" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Calculate Interest</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_generate_receipt_generate" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Generate Receipt</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="loans_close_loan_close" class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500">
                                <span class="ml-2 text-sm text-gray-700">Close Loan</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- All Repayments Permissions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>💳</span>
                    All Repayments
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Payment Management -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Payment Management</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_access" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Access Repayments Page</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_view_list_access" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">View All Repayments</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_record_payment_create" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Record New Payment</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_edit_payment_edit" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Edit Payment</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_delete_payment_delete" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Delete Payment</span>
                            </label>
                        </div>
                    </div>

                    <!-- Payment Processing -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Payment Processing</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_verify_payment_verify" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Verify Payments</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_reconcile_mpesa_reconcile" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Reconcile M-Pesa</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_generate_receipt_generate" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Generate Receipt</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_bulk_import_import" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Bulk Import</span>
                            </label>
                        </div>
                    </div>

                    <!-- Payment Analytics -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Payment Analytics</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_view_analytics_access" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">View Analytics</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="repayments_export_data_export" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                <span class="ml-2 text-sm text-gray-700">Export Data</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Portfolio Permissions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <i class="fas fa-briefcase text-indigo-600 mr-2"></i>
                    Portfolio
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Portfolio Management -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Portfolio Management</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_access" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">Access Portfolio Page</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_view_overview_access" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">View Portfolio Overview</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_client_assignments_manage" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">Manage Assignments</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_reassign_clients_reassign" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">Reassign Clients</span>
                            </label>
                        </div>
                    </div>

                    <!-- Portfolio Analytics -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Portfolio Analytics</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_performance_metrics_access" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">Performance Metrics</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_view_analytics_access" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">View Analytics</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="portfolio_generate_reports_generate" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-700">Generate Reports</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports & Statements Permissions -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>📊</span>
                    Reports & Statements
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Reports Access -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Reports Access</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_statements_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Access Reports Page</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_loans_due_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Loans Due Report</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_delinquent_loans_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Delinquent Loans</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_processing_fees_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Processing Fees</span>
                            </label>
                        </div>
                    </div>

                    <!-- Financial Reports -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Financial Reports</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_interest_income_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Interest Income</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_registration_fees_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Registration Fees</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_collection_summary_access" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Collection Summary</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="reports_export_all_export" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Export Reports</span>
                            </label>
                        </div>
                    </div>

                    <!-- Statements -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Statements</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="statements_generate_loan_generate" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Generate Loan Statements</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="statements_generate_client_generate" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Generate Client Statements</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="statements_download_pdf_download" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Download PDF</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="statements_email_client_email" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                                <span class="ml-2 text-sm text-gray-700">Email to Clients</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Documents & Customer Documents -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>📁</span>
                    Documents & Customer Documents
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Document Management -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Document Management</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="documents_access" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Access Documents</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="documents_upload_files_upload" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Upload Documents</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="documents_download_files_download" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Download Documents</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="documents_delete_files_delete" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Delete Documents</span>
                            </label>
                        </div>
                    </div>

                    <!-- Customer Documents -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Customer Documents</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="customer_documents_access" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Access Customer Docs</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="customer_docs_upload_kyc_upload" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Upload KYC Documents</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="customer_docs_verify_identity_verify" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Verify Identity</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="customer_docs_approve_kyc_approve" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                                <span class="ml-2 text-sm text-gray-700">Approve KYC</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Receipts & Notifications -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>🧾</span>
                    Payment Receipts & Notifications
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Payment Receipts -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Payment Receipts</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="payment_receipts_access" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Access Receipts</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="receipts_generate_new_generate" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Generate Receipt</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="receipts_print_receipt_print" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Print Receipt</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="receipts_email_client_email" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Email to Client</span>
                            </label>
                        </div>
                    </div>

                    <!-- Notifications -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Notifications</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="notifications_access" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Access Notifications</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="notifications_send_individual_send" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Send Individual</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="notifications_send_bulk_send" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Send Bulk</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="notifications_manage_templates_manage" class="rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                                <span class="ml-2 text-sm text-gray-700">Manage Templates</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">
                    <span>⚙️</span>
                    Settings
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- General Settings -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">General Settings</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="settings_access" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Access Settings</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="settings_edit_system_edit" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Edit System Settings</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="settings_manage_users_manage" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Manage Users</span>
                            </label>
                        </div>
                    </div>

                    <!-- Branch Settings -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">Branch Settings</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="branch_settings_access" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Access Branch Settings</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="branch_edit_details_edit" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Edit Branch Details</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="branch_configure_mpesa_configure" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Configure M-Pesa</span>
                            </label>
                        </div>
                    </div>

                    <!-- System Settings -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 mb-3">System Settings</h4>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="checkbox" name="system_settings_access" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Access System Settings</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="system_database_management_manage" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Database Management</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="system_security_settings_configure" class="rounded border-gray-300 text-gray-600 focus:ring-gray-500">
                                <span class="ml-2 text-sm text-gray-700">Security Settings</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex justify-end space-x-3">
            <a href="{% url 'users:admin_list' %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                Cancel
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <span>💾</span>
                Save Permissions
            </button>
        </div>
    </form>
</div>

<script>
// Add any JavaScript for enhanced functionality
document.addEventListener('DOMContentLoaded', function() {
    // Add select all functionality for each section
    const sections = document.querySelectorAll('.bg-white.shadow.rounded-lg');
    
    sections.forEach(section => {
        const checkboxes = section.querySelectorAll('input[type="checkbox"]');
        
        // Add a "Select All" button to each section
        const header = section.querySelector('h3');
        if (header && checkboxes.length > 1) {
            const selectAllBtn = document.createElement('button');
            selectAllBtn.type = 'button';
            selectAllBtn.className = 'text-sm text-primary hover:text-primary-dark ml-4';
            selectAllBtn.textContent = 'Select All';
            
            selectAllBtn.addEventListener('click', function() {
                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                checkboxes.forEach(cb => cb.checked = !allChecked);
                selectAllBtn.textContent = allChecked ? 'Select All' : 'Deselect All';
            });
            
            header.appendChild(selectAllBtn);
        }
    });
});
</script>
{% endblock %}