@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card card-page">
                <div class="card-body">
                    <div class="row gy-12 g-xl-12">
                        <div class="col-xxl-12">
                            <div class="card card-xxl-stretch">
                                <div class="card-header border-0 pt-5 pb-3">
                                    <h3 class="card-title fw-bold text-gray-800 fs-2">Parent Role Assignment</h3>
                                    <a href="{{ url('users/list') }}" type="button" class="btn btn-secondary">
                                        <i class="fa fa-arrow-left me-2"></i>Back to Users
                                    </a>
                                </div>

                                <div class="card-body py-0">
                                    <!-- Search Section -->
                                    <div class="row mb-5">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="search" class="form-label fw-semibold">Search Parents</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="search" placeholder="Search by name, email, or mobile...">
                                                    <button class="btn btn-primary" type="button" id="searchBtn">
                                                        <i class="fa fa-search"></i>
                                                    </button>
                                                    <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="statusFilter" class="form-label fw-semibold">Status</label>
                                                <select class="form-select" id="statusFilter">
                                                    <option value="">All Status</option>
                                                    <option value="ACTIVE">Active</option>
                                                    <option value="INACTIVE">Inactive</option>
                                                    <option value="PENDING">Pending</option>
                                                    <option value="BLOCKED">Blocked</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="form-label fw-semibold">&nbsp;</label>
                                                <div class="d-grid">
                                                    <button class="btn btn-success" type="button" id="refreshBtn">
                                                        <i class="fa fa-refresh me-2"></i>Refresh
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Statistics Cards -->
                                    <div class="row mb-5">
                                        <div class="col-md-4">
                                            <div class="card bg-light-primary">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-50px me-3">
                                                            <div class="symbol-label bg-primary">
                                                                <i class="fa fa-users text-white fs-2"></i>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <h6 class="text-muted mb-1">Total Parents</h6>
                                                            <h4 class="fw-bold mb-0" id="totalParents">0</h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card bg-light-success">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-50px me-3">
                                                            <div class="symbol-label bg-success">
                                                                <i class="fa fa-user-plus text-white fs-2"></i>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <h6 class="text-muted mb-1">Multi-Role Parents</h6>
                                                            <h4 class="fw-bold mb-0" id="multiRoleParents">0</h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card bg-light-info">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-50px me-3">
                                                            <div class="symbol-label bg-info">
                                                                <i class="fa fa-user-check text-white fs-2"></i>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <h6 class="text-muted mb-1">Active Parents</h6>
                                                            <h4 class="fw-bold mb-0" id="activeParents">0</h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Results Table -->
                                    <div class="table-responsive">
                                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_parents">
                                            <thead>
                                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                    <th class="min-w-30px">ID</th>
                                                    <th class="min-w-125px">Name</th>
                                                    <th class="min-w-125px">Email</th>
                                                    <th class="min-w-125px">Mobile</th>
                                                    <th class="min-w-125px">Current Roles</th>
                                                    <th class="min-w-125px">Status</th>
                                                    <th class="min-w-125px">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="fw-semibold text-gray-600"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Role Assignment Modal -->
    @include('parent-role-assignment.assign-role-modal')

@endsection

@section('css')
<style>
    .search-highlight {
        background-color: #fff3cd;
        padding: 2px 4px;
        border-radius: 3px;
    }
    
    .role-badge {
        font-size: 0.75rem;
        margin-right: 4px;
        margin-bottom: 4px;
    }
    
    .statistics-card {
        transition: transform 0.2s ease-in-out;
    }
    
    .statistics-card:hover {
        transform: translateY(-2px);
    }
</style>
@endsection

@section('js')
<script>
    $(function() {
        // Initialize DataTable
        var table = $('#kt_table_parents').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ url('parent-role-assignment/parents') }}",
                data: function(d) {
                    d.search = $('#search').val();
                    d.status = $('#statusFilter').val();
                }
            },
            order: [[0, 'asc']],
            columns: [
                {data: 'ID', name: 'ID'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'mobile', name: 'mobile'},
                {data: 'current_roles', name: 'current_roles', orderable: false, searchable: false},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            pageLength: 25,
            responsive: true,
            language: {
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
                emptyTable: "No parent users found",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)"
            }
        });

        // Search functionality
        $('#searchBtn').on('click', function() {
            table.ajax.reload();
        });

        $('#search').on('keypress', function(e) {
            if (e.which == 13) { // Enter key
                table.ajax.reload();
            }
        });

        // Clear search
        $('#clearSearch').on('click', function() {
            $('#search').val('');
            $('#statusFilter').val('');
            table.ajax.reload();
        });

        // Status filter
        $('#statusFilter').on('change', function() {
            table.ajax.reload();
        });

        // Refresh button
        $('#refreshBtn').on('click', function() {
            table.ajax.reload();
            loadStatistics();
        });

        // Handle assign role button click
        $('#kt_table_parents').on('click', '.assign-role-btn', function(e) {
            e.preventDefault();
            console.log('Assign role button clicked!');
            
            var userId = $(this).data('user-id');
            var userName = $(this).data('user-name');
            
            console.log('User ID:', userId);
            console.log('User Name:', userName);
            
            // Load user details and available roles
            loadUserDetails(userId, userName);
        });

        // Load statistics on page load
        loadStatistics();

        // Function to load user details for modal
        function loadUserDetails(userId, userName) {
            $.ajax({
                url: "{{ url('parent-role-assignment/user-details') }}",
                type: 'POST',
                data: {
                    user_id: userId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.user && response.available_roles) {

                        // Populate roles dropdown
                        var rolesSelect = $('#roleIds');
                        rolesSelect.empty();
                        
                        response.available_roles.forEach(function(role) {
                            var option = $('<option></option>')
                                .val(role.id)
                                .text(role.name);
                            rolesSelect.append(option);
                        });
                        
                        // Load current roles
                        loadCurrentRoles(response.user);
                        
                        // Show modal
                        $('#assignRoleModal').modal('show');
                        // Populate modal with user details
                        $('#userId').val(response.user.id);
                        $('#userEmail').val(response.user.email);
                        $('#userStatus').val(response.user.status);
                        $('#userName').val(response.user.name);
                        $('#userMobile').val(response.user.mobile);

                    } else {
                        toastr.error('Failed to load user details');
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('An error occurred while loading user details');
                }
            });
        }

        // Function to load current roles for a user
        function loadCurrentRoles(user) {
            var container = $('#currentRolesContainer');
            
            if (user.multi_roles && Array.isArray(user.multi_roles) && user.multi_roles.length > 0) {
                var rolesHtml = '';
                user.multi_roles.forEach(function(roleId) {
                    // Get role name from the roles dropdown or use roleId as fallback
                    var roleName = roleId;
                    var roleOption = $('#roleIds option[value="' + roleId + '"]');
                    if (roleOption.length > 0) {
                        roleName = roleOption.text();
                    }
                    
                    rolesHtml += '<span class="role-badge role-' + roleName.toLowerCase() + '">' +
                        roleName + 
                        '<button type="button" class="role-remove-btn" data-role-id="' + roleId + '" title="Remove role">' +
                        '<i class="fa fa-times"></i></button>' +
                        '</span>';
                });
                container.html(rolesHtml);
            } else {
                container.html('<div class="alert alert-info mb-0">' +
                    '<i class="fa fa-info-circle me-2"></i>' +
                    'No additional roles assigned yet.' +
                    '</div>');
            }
        }

        // Function to load statistics
        function loadStatistics() {
            $.ajax({
                url: "{{ url('parent-role-assignment/statistics') }}",
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        $('#totalParents').text(response.data.total_parents || 0);
                        $('#multiRoleParents').text(response.data.multi_role_parents || 0);
                        $('#activeParents').text(response.data.active_parents || 0);
                    }
                },
                error: function() {
                    $('#totalParents').text('0');
                    $('#multiRoleParents').text('0');
                    $('#activeParents').text('0');
                }
            });
        }

        // Modal event handlers
        $('#assignRoleModal').on('show.bs.modal', function() {
            // Reset form when modal opens
            $('#assignRoleForm')[0].reset();
            
            // Initialize Select2 using the application's built-in system
            $('#roleIds').select2({
                dropdownParent: $('#assignRoleModal'),
                placeholder: 'Select roles to assign...',
                allowClear: true,
                width: '100%'
            });
        });

        // Quick action buttons for role selection
        $('#selectAllRoles').on('click', function() {
            $('#roleIds option').prop('selected', true);
            $('#roleIds').trigger('change');
        });

        $('#clearAllRoles').on('click', function() {
            $('#roleIds').val([]);
            $('#roleIds').trigger('change');
        });

        // Form submission for role assignment
        $('#assignRoleForm').on('submit', function(e) {
            e.preventDefault();
            
            var userId = $('#userId').val();
            var selectedRoles = $('#roleIds').val();
            
            if (!selectedRoles || selectedRoles.length === 0) {
                toastr.warning('Please select at least one role to assign.');
                return;
            }
            
            // Disable submit button
            $('#saveRolesBtn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-2"></i>Saving...');
            
            $.ajax({
                url: "{{ url('parent-role-assignment/assign-roles') }}",
                type: 'POST',
                data: {
                    user_id: userId,
                    role_ids: selectedRoles,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success('Roles assigned successfully!');
                        $('#assignRoleModal').modal('hide');
                        
                        // Refresh the table
                        table.ajax.reload();
                        
                        // Reload statistics
                        loadStatistics();
                    } else {
                        toastr.error(response.message || 'Failed to assign roles');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        // Validation errors
                        var errors = xhr.responseJSON.errors;
                        var errorMessage = '';
                        for (var field in errors) {
                            errorMessage += errors[field].join(', ') + ' ';
                        }
                        toastr.error(errorMessage);
                    } else {
                        toastr.error('An error occurred while assigning roles');
                    }
                },
                complete: function() {
                    // Re-enable submit button
                    $('#saveRolesBtn').prop('disabled', false).html('<i class="fa fa-save me-2"></i>Save Roles');
                }
            });
        });

        // Handle role removal
        $(document).on('click', '.role-remove-btn', function() {
            var roleName = $(this).data('role-id');
            var userId = $('#userId').val();
            
            $('#roleToRemove').text(roleName);
            $('#removeRoleModal').modal('show');
            
            // Store data for confirmation
            $('#removeRoleModal').data('user-id', userId);
            $('#removeRoleModal').data('role-id', roleName);
        });

        // Confirm role removal
        $('#confirmRemoveRole').on('click', function() {
            var userId = $('#removeRoleModal').data('user-id');
            var roleName = $('#removeRoleModal').data('role-id');
            
            $('#confirmRemoveRole').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-2"></i>Removing...');
            
            $.ajax({
                url: "{{ url('parent-role-assignment/remove-roles') }}",
                type: 'POST',
                data: {
                    user_id: userId,
                    role_ids: [roleName],
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success('Role removed successfully!');
                        $('#removeRoleModal').modal('hide');
                        
                        // Refresh user details in modal
                        loadUserDetails(userId);
                        
                        // Refresh the table
                        table.ajax.reload();
                        
                        // Reload statistics
                        loadStatistics();
                    } else {
                        toastr.error(response.message || 'Failed to remove role');
                    }
                },
                error: function() {
                    toastr.error('An error occurred while removing role');
                },
                complete: function() {
                    $('#confirmRemoveRole').prop('disabled', false).html('<i class="fa fa-trash me-2"></i>Remove Role');
                }
            });
        });

        // Handle role history button click
        $(document).on('click', '.role-history-btn', function() {
            var userId = $(this).data('user-id');
            loadRoleHistory(userId);
        });

        // Function to load role history
        function loadRoleHistory(userId) {
            var container = $('#roleHistoryContainer');
            container.html('<div class="text-center py-4">' +
                '<div class="spinner-border text-primary" role="status">' +
                '<span class="visually-hidden">Loading...</span></div>' +
                '<p class="mt-2">Loading role history...</p></div>');
            
            $('#roleHistoryModal').modal('show');
            
            $.ajax({
                url: "{{ url('parent-role-assignment/role-history') }}",
                type: 'POST',
                data: {
                    user_id: userId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success && response.history) {
                        var historyHtml = '';
                        
                        if (response.history.length > 0) {
                            response.history.forEach(function(item) {
                                var actionClass = item.action === 'removed' ? 'removed' : '';
                                var actionIcon = item.action === 'removed' ? 'fa-minus-circle text-danger' : 'fa-plus-circle text-success';
                                
                                historyHtml += '<div class="role-history-item ' + actionClass + '">' +
                                    '<div class="d-flex justify-content-between align-items-start">' +
                                    '<div>' +
                                    '<i class="fa ' + actionIcon + ' me-2"></i>' +
                                    '<strong>' + item.role + '</strong> ' + item.action +
                                    '</div>' +
                                    '<small class="text-muted">' + item.timestamp + '</small>' +
                                    '</div>' +
                                    '</div>';
                            });
                        } else {
                            historyHtml = '<div class="alert alert-info">No role history available.</div>';
                        }
                        
                        container.html(historyHtml);
                    } else {
                        container.html('<div class="alert alert-danger">Failed to load role history.</div>');
                    }
                },
                error: function() {
                    container.html('<div class="alert alert-danger">An error occurred while loading role history.</div>');
                }
            });
        }
    });
</script>
@endsection