@extends('layouts.main')

@section('title', 'Assign Workspace')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
@endsection

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card mb-3">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #48cfc8;">
                            <i class="bx bx-layer"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Assign Workspace to {{ $user->name }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-layer"></i>
                                Microsoft Fabric Workspace Assignment (DataPipeline Items Only)
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        @if($apiConnected)
                            <span class="badge bg-success d-flex align-items-center">
                                <i class="bx bx-wifi"></i> API Connected
                            </span>
                        @else
                            <span class="badge bg-danger d-flex align-items-center">
                                <i class="bx bx-wifi-off"></i> API Not Connected
                            </span>
                        @endif
                        <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back to Companies
                        </a>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bx bx-error-circle me-2 fs-5"></i>
                            <div>
                                <strong>Error:</strong> {{ session('error') }}
                                @if(session('error_type') === 'token_error')
                                    <br><small class="text-muted">Please contact your system administrator to check Microsoft Fabric configuration.</small>
                                @endif
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('warning'))
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bx bx-exclamation-triangle me-2 fs-5"></i>
                            <div>
                                <strong>Warning:</strong> {{ session('warning') }}
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('conflicts'))
                    <div class="alert alert-warning" role="alert">
                        <div class="d-flex align-items-start">
                            <i class="bx bx-error-circle me-3 fs-4 mt-1"></i>
                            <div class="flex-grow-1">
                                <h5 class="alert-heading">Workspace Assignment Conflicts</h5>
                                <p class="mb-3">The following workspaces are already assigned to other companies:</p>
                                
                                @foreach(session('conflicts') as $workspaceId => $conflict)
                                    <div class="conflict-item border-start border-warning border-3 ps-3 mb-3">
                                        <h6 class="mb-1">{{ $conflict['workspace_name'] }}</h6>
                                        <p class="mb-1">Currently assigned to: <strong>{{ $conflict['company_name'] }}</strong></p>
                                        <small class="text-muted">Contact: {{ $conflict['company_email'] }}</small>
                                        <div class="mt-2">
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger unassign-workspace-btn" 
                                                    data-workspace-id="{{ $workspaceId }}"
                                                    data-workspace-name="{{ $conflict['workspace_name'] }}"
                                                    data-current-company="{{ $conflict['company_name'] }}">
                                                <i class="bx bx-x"></i> Unassign from {{ $conflict['company_name'] }}
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                                
                                <hr>
                                <p class="mb-0">
                                    <strong>Options:</strong>
                                    <br>• Contact the current company to coordinate workspace transfer
                                    <br>• Use the "Unassign" button to remove the workspace from the current company
                                    <br>• Or choose different workspaces that are not assigned
                                </p>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Token Error Handling -->
                @if(isset($tokenError))
                    <div class="alert alert-danger" role="alert">
                        <div class="d-flex align-items-start">
                            <i class="bx bx-error-circle me-3 fs-4 mt-1"></i>
                            <div>
                                <h5 class="alert-heading">Microsoft Fabric Connection Error</h5>
                                <p class="mb-2">{{ $tokenError }}</p>
                                <hr>
                                <p class="mb-0">
                                    <strong>What you can do:</strong>
                                    <br>• Contact your system administrator
                                    <br>• Verify Microsoft Fabric application is properly configured
                                    <br>• Check Azure Active Directory settings
                                </p>
                                @if(auth()->user()->hasRole('super-admin'))
                                    <div class="mt-3">
                                        <a href="{{ route('settings.index') }}" class="btn btn-outline-primary btn-sm">
                                            <i class="bx bx-cog"></i> Check Settings
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Debug info for development -->
                @if(app()->environment('local'))
                    <div class="alert alert-info">
                        <strong>Debug Info:</strong> 
                        User has {{ App\Models\Workspace::where('user_id', $user->id)->count() }} total workspaces, 
                        {{ App\Models\Workspace::where('user_id', $user->id)->whereHas('workspaceItems')->count() }} with items
                    </div>
                @endif

                <!-- User Information Card -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="heading-avatar me-3">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <h5 class="mb-1">{{ $user->name }}</h5>
                                <p class="text-muted mb-1">{{ $user->email }}</p>
                                <p class="text-muted mb-0">Company: {{ $user->company ?? 'Not Set' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Available Workspaces with Items -->
                <div class="alert alert-info d-flex align-items-center mb-4">
                    <i class="bx bx-info-circle me-2"></i>
                    <div>
                        <strong>Note:</strong> Only DataPipeline items are displayed for assignment. Other item types (like Notebooks, Reports, etc.) are not shown in this interface.
                    </div>
                </div>
                
                <form action="{{ route('workspace-assignment.assign', $user->id) }}" method="POST" id="workspaceAssignmentForm">
                    @csrf
                    <div class="pipine-block-wrapper">
                        @if(count($availableWorkspaces) > 0)
                            @foreach($availableWorkspaces as $index => $workspace)
                                @php
                                    // Check if any items in this workspace are assigned
                                    $hasAssignedItems = false;
                                    $allItemsAssigned = true;
                                    $totalItems = 0;
                                    $assignedItemsCount = 0;
                                    
                                    if (isset($workspace['items']) && count($workspace['items']) > 0) {
                                        $totalItems = count($workspace['items']);
                                        foreach ($workspace['items'] as $item) {
                                            if (isset($item['is_assigned']) && $item['is_assigned']) {
                                                $hasAssignedItems = true;
                                                $assignedItemsCount++;
                                            } else {
                                                $allItemsAssigned = false;
                                            }
                                        }
                                    } else {
                                        $allItemsAssigned = false;
                                    }
                                @endphp
                                <!-- Workspace Block -->
                                <div class="pipine-block mb-2">
                                    <div class="workspace-layout">
                                        <div class="workspace-checkbox">
                                            <div class="custom-checkbox">
                                                <input class="custom-checkbox-input workspace-checkbox" 
                                                       type="checkbox" 
                                                       id="workspace_{{ $workspace['id'] }}"
                                                       data-workspace-id="{{ $workspace['id'] }}"
                                                       onchange="toggleWorkspaceItems('{{ $workspace['id'] }}')"
                                                       {{ $hasAssignedItems ? 'checked' : '' }}
                                                       {{ isset($workspace['assigned_to_other']) && $workspace['assigned_to_other'] ? 'disabled' : '' }}>
                                                <label class="custom-checkbox-label" for="workspace_{{ $workspace['id'] }}">
                                                    <span class="custom-checkbox-indicator">
                                                        <i class="bx bx-check"></i>
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="workspace-name">
                                            <div class="pipine-block-info name-col">
                                                <strong class="text-dark">Workspace:</strong> <span class="text-dark" style="word-break: break-all; overflow-wrap: break-word;">{{ $workspace['name'] }}</span>
                                                @if($hasAssignedItems)
                                                    <span class="badge text-white ms-2" style="background: #48cfc8;">Has Assignments</span>
                                                
                                                @elseif(isset($workspace['assigned_to_other']) && $workspace['assigned_to_other'])
                                                    <span class="badge bg-danger text-white ms-2" title="Assigned to {{ $workspace['assigned_to_other']['company_name'] }}">
                                                        <i class="bx bx-lock"></i> Assigned to Other Company
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="workspace-type">
                                            <div class="pipine-block-info text-center">
                                                <strong class="text-dark">TYPE:</strong><br>
                                                <span class="text-dark">{{ $workspace['type'] }}</span>
                                            </div>
                                        </div>
                                        <div class="workspace-capacity">
                                            <div class="pipine-block-info text-center">
                                                <strong class="text-dark">CAPACITY:</strong><br>
                                                <span class="text-dark">{{ $workspace['capacity'] }}</span>
                                            </div>
                                        </div>
                                        <div class="workspace-arrow">
                                            <a href="#collapse{{ $index }}" class="collapse-arrow-btn" data-bs-toggle="collapse" aria-expanded="{{ $hasAssignedItems ? 'true' : 'false' }}">
                                                <i class="bx bx-chevron-down"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="collapse {{ $hasAssignedItems ? 'show' : '' }}" id="collapse{{ $index }}">
                                        <div class="table-wrapper">
                                            <hr />
                                            @if(isset($workspace['items']) && count($workspace['items']) > 0)
                                                <table class="table gen-table">
                                                    <thead style="background: #48cfc8; color: white;">
                                                        <tr>
                                                            <th scope="col" width="50">
                                                                <div class="custom-checkbox">
                                                                    <input class="custom-checkbox-input select-all-items" 
                                                                           type="checkbox" 
                                                                           id="selectAll_{{ $workspace['id'] }}"
                                                                           onchange="toggleAllItems('{{ $workspace['id'] }}')"
                                                                           {{ $allItemsAssigned ? 'checked' : '' }}>
                                                                    <label class="custom-checkbox-label" for="selectAll_{{ $workspace['id'] }}">
                                                                        <span class="custom-checkbox-indicator">
                                                                            <i class="bx bx-check"></i>
                                                                        </span>
                                                                    </label>
                                                                </div>
                                                            </th>
                                                            <th scope="col">Item Name</th>
                                                            <th scope="col">Item Type</th>
                                                            <th scope="col">Item ID</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($workspace['items'] as $item)
                                                            <tr>
                                                                <td>
                                                                    <div class="custom-checkbox">
                                                                        <input class="custom-checkbox-input item-checkbox" 
                                                                               type="checkbox" 
                                                                               name="selected_items[]"
                                                                               value="{{ $item['id'] }}"
                                                                               id="item_{{ $item['id'] }}"
                                                                               data-workspace-id="{{ $workspace['id'] }}"
                                                                               onchange="updateWorkspaceCheckbox('{{ $workspace['id'] }}')"
                                                                               {{ isset($item['is_assigned']) && $item['is_assigned'] ? 'checked' : '' }}>
                                                                        <label class="custom-checkbox-label" for="item_{{ $item['id'] }}">
                                                                            <span class="custom-checkbox-indicator">
                                                                                <i class="bx bx-check"></i>
                                                                            </span>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                                <td class="text-dark" style="word-break: break-all; overflow-wrap: break-word; max-width: 300px;">
                                                                    {{ $item['displayName'] ?? $item['name'] ?? 'Unnamed Item' }}
                                                                    @if(isset($item['is_assigned']) && $item['is_assigned'])
                                                                        <span class="badge text-white ms-2" style="background: #48cfc8;">Already Assigned</span>
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    <span class="badge text-white" style="background: #48cfc8;">{{ $item['type'] ?? 'Unknown' }}</span>
                                                                </td>
                                                                <td>
                                                                    <small class="text-muted">{{ $item['id'] ?? 'N/A' }}</small>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <div class="text-center py-4">
                                                    <i class="bx bx-package mb-3" style="font-size: 2rem; opacity: 0.3;"></i>
                                                    <h6 class="text-muted">No Items Found</h6>
                                                    <p class="text-muted">This workspace doesn't contain any items yet.</p>
                                                </div>
                                            @endif

                                            {{-- Lakehouse Assignment --}}
                                            <div class="mt-3 pt-3 border-top">
                                                <label class="form-label fw-semibold text-dark mb-1">
                                                    <i class="bx bx-data me-1" style="color:#48cfc8;"></i> Assign Lakehouse
                                                </label>
                                                @if(!empty($workspace['lakehouses']))
                                                    @php $lhSelectId = 'lh_select_' . $loop->index; @endphp
                                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                                        <select id="{{ $lhSelectId }}"
                                                                class="form-select form-select-sm w-auto"
                                                                style="min-width:220px; max-width:400px;"
                                                                data-workspace-fabric-id="{{ $workspace['id'] }}"
                                                                data-lakehouses='@json($workspace['lakehouses'])'
                                                                {{ isset($workspace['assigned_to_other']) && $workspace['assigned_to_other'] ? 'disabled' : '' }}>
                                                            <option value="">— Use Global Default —</option>
                                                            @foreach($workspace['lakehouses'] as $lh)
                                                                <option value="{{ $lh['id'] }}" data-name="{{ $lh['name'] }}"
                                                                    {{ ($workspace['assigned_lakehouse_id'] ?? '') === $lh['id'] ? 'selected' : '' }}>
                                                                    {{ $lh['name'] }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @unless(isset($workspace['assigned_to_other']) && $workspace['assigned_to_other'])
                                                        <button type="button"
                                                                class="btn btn-sm btn-save-lakehouse"
                                                                style="background:#48cfc8; color:#fff; white-space:nowrap;"
                                                                data-select-id="{{ $lhSelectId }}"
                                                                data-save-url="{{ route('workspace-assignment.save-lakehouse', $user->id) }}">
                                                            <i class="bx bx-save me-1"></i> Save
                                                        </button>
                                                        <span class="lh-save-feedback text-success small d-none"></span>
                                                        @endunless
                                                    </div>
                                                    <small class="text-muted d-block mt-1">
                                                        Select a Lakehouse for Copy Jobs and Notebooks in this workspace. Leave as default to use the global Lakehouse.
                                                    </small>
                                                @else
                                                    <p class="text-muted small mb-0">
                                                        <i class="bx bx-info-circle me-1"></i>
                                                        No Lakehouses found in this Fabric workspace. The global default will be used.
                                                    </p>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="text-center py-5">
                                <div class="empty-state">
                                    @if(isset($tokenError))
                                        <i class="bx bx-error-circle mb-3 text-danger" style="font-size: 3rem;"></i>
                                        <h5 class="text-danger">Microsoft Fabric Connection Failed</h5>
                                        <p class="text-muted">
                                            Unable to connect to Microsoft Fabric due to authentication issues.
                                            <br>Please contact your administrator to resolve this issue.
                                        </p>
                                    @else
                                        <i class="bx bx-layer mb-3" style="font-size: 3rem; opacity: 0.3;"></i>
                                        <h5 class="text-muted">No Workspaces Available</h5>
                                        <p class="text-muted">
                                            @if($apiConnected)
                                                No workspaces are currently available from Microsoft Fabric API.
                                            @else
                                                Unable to connect to Microsoft Fabric API. Please check the configuration.
                                            @endif
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Save Changes Button -->
                    <div class="d-flex justify-content-end mt-4">
                        <button type="submit" class="btn btn-lg" style="background: #48cfc8; border-color: #48cfc8; color: white;">
                            <i class="bx bx-save"></i> Save Changes
                        </button>
                    </div>
                </form>

                <!-- Workspace Assignment Rules Information -->
                <div class="card border-info mt-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="bx bx-info-circle me-2"></i>Workspace Assignment Rules</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-muted">Assignment Rules:</h6>
                                <ul class="list-unstyled">
                                    <li><i class="bx bx-check text-success me-2"></i>Each workspace can only be assigned to one company</li>
                                    <li><i class="bx bx-shield text-warning me-2"></i>Workspaces assigned to other companies are disabled</li>
                                    <li><i class="bx bx-refresh text-info me-2"></i>Use "Unassign" to free up workspaces when needed</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted">Status Indicators:</h6>
                                <ul class="list-unstyled">
                                    <li><span class="badge bg-success me-2">Available</span>Workspace can be assigned</li>
                                    <li><span class="badge bg-danger me-2">Assigned to Other Company</span>Already taken</li>
                                    <li><span class="badge bg-primary me-2">Has Assignments</span>Currently yours</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Console log for debugging
    console.log('Workspace assignment page loaded');
    
    // Auto-refresh every 5 minutes to get latest workspace data
    setTimeout(function() {
        location.reload();
    }, 300000); // 5 minutes

    // Add loading state to save button
    const form = document.getElementById('workspaceAssignmentForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('Form submitted');
            const saveButton = this.querySelector('button[type="submit"]');
            if (saveButton) {
                saveButton.innerHTML = '<i class="bx bx-loader bx-spin"></i> Saving Changes...';
                saveButton.disabled = true;
            }
            
            // Log selected items for debugging
            const selectedItems = this.querySelectorAll('input[name="selected_items[]"]:checked');
            console.log('Selected items count:', selectedItems.length);
            
            // Prevent multiple submissions
            this.style.pointerEvents = 'none';
        });
    }

    // Handle collapse arrows
    document.querySelectorAll('.collapse-arrow-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            const icon = button.querySelector('i');
            const isExpanded = button.getAttribute('aria-expanded') === 'true';
            
            if (isExpanded) {
                icon.style.transform = 'rotate(0deg)';
            } else {
                icon.style.transform = 'rotate(180deg)';
            }
        });
    });
});

// Toggle all items in a workspace when workspace checkbox is clicked
function toggleWorkspaceItems(workspaceId) {
    const workspaceCheckbox = document.getElementById('workspace_' + workspaceId);
    const itemCheckboxes = document.querySelectorAll('input[data-workspace-id="' + workspaceId + '"].item-checkbox');
    const selectAllCheckbox = document.getElementById('selectAll_' + workspaceId);
    
    itemCheckboxes.forEach(function(checkbox) {
        checkbox.checked = workspaceCheckbox.checked;
    });
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = workspaceCheckbox.checked;
    }
}

// Toggle all items when "select all" checkbox in table header is clicked
function toggleAllItems(workspaceId) {
    const selectAllCheckbox = document.getElementById('selectAll_' + workspaceId);
    const itemCheckboxes = document.querySelectorAll('input[data-workspace-id="' + workspaceId + '"].item-checkbox');
    const workspaceCheckbox = document.getElementById('workspace_' + workspaceId);
    
    itemCheckboxes.forEach(function(checkbox) {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    // Update workspace checkbox based on item selection
    updateWorkspaceCheckbox(workspaceId);
}

// Update workspace checkbox state based on individual item selections
function updateWorkspaceCheckbox(workspaceId) {
    const itemCheckboxes = document.querySelectorAll('input[data-workspace-id="' + workspaceId + '"].item-checkbox');
    const selectAllCheckbox = document.getElementById('selectAll_' + workspaceId);
    const workspaceCheckbox = document.getElementById('workspace_' + workspaceId);
    
    const checkedItems = document.querySelectorAll('input[data-workspace-id="' + workspaceId + '"].item-checkbox:checked');
    const totalItems = itemCheckboxes.length;
    const checkedCount = checkedItems.length;
    
    // Update workspace checkbox
    if (checkedCount === 0) {
        workspaceCheckbox.checked = false;
        workspaceCheckbox.indeterminate = false;
        // Update icon for indeterminate state
        const workspaceIcon = workspaceCheckbox.parentElement.querySelector('i');
        workspaceIcon.className = 'bx bx-check';
    } else if (checkedCount === totalItems) {
        workspaceCheckbox.checked = true;
        workspaceCheckbox.indeterminate = false;
        // Update icon for checked state
        const workspaceIcon = workspaceCheckbox.parentElement.querySelector('i');
        workspaceIcon.className = 'bx bx-check';
    } else {
        workspaceCheckbox.checked = false;
        workspaceCheckbox.indeterminate = true;
        // Update icon for indeterminate state
        const workspaceIcon = workspaceCheckbox.parentElement.querySelector('i');
        workspaceIcon.className = 'bx bx-minus';
    }
    
    // Update select all checkbox in table header
    if (selectAllCheckbox) {
        if (checkedCount === 0) {
            selectAllCheckbox.checked = false;
            selectAllCheckbox.indeterminate = false;
            const selectAllIcon = selectAllCheckbox.parentElement.querySelector('i');
            selectAllIcon.className = 'bx bx-check';
        } else if (checkedCount === totalItems) {
            selectAllCheckbox.checked = true;
            selectAllCheckbox.indeterminate = false;
            const selectAllIcon = selectAllCheckbox.parentElement.querySelector('i');
            selectAllIcon.className = 'bx bx-check';
        } else {
            selectAllCheckbox.checked = false;
            selectAllCheckbox.indeterminate = true;
            const selectAllIcon = selectAllCheckbox.parentElement.querySelector('i');
            selectAllIcon.className = 'bx bx-minus';
        }
    }
}

// Initialize page state when document is ready
document.addEventListener('DOMContentLoaded', function() {
    // Update all workspace checkboxes based on initial state
    @foreach($availableWorkspaces as $workspace)
        updateWorkspaceCheckbox('{{ $workspace['id'] }}');
    @endforeach
    
    // Handle unassign workspace buttons
    document.querySelectorAll('.unassign-workspace-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            const workspaceId = this.getAttribute('data-workspace-id');
            const workspaceName = this.getAttribute('data-workspace-name');
            const currentCompany = this.getAttribute('data-current-company');
            
            if (confirm(`Are you sure you want to unassign workspace "${workspaceName}" from "${currentCompany}"?\n\nThis will remove all workspace items from that company and make them available for reassignment.`)) {
                // Create form and submit unassign request
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ route("workspace-assignment.unassign", $user->id) }}';
                form.style.display = 'none';
                
                // CSRF token
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = '{{ csrf_token() }}';
                form.appendChild(csrfInput);
                
                // Workspace ID
                const workspaceInput = document.createElement('input');
                workspaceInput.type = 'hidden';
                workspaceInput.name = 'workspace_id';
                workspaceInput.value = workspaceId;
                form.appendChild(workspaceInput);
                
                // User ID (current user being assigned to)
                const userInput = document.createElement('input');
                userInput.type = 'hidden';
                userInput.name = 'user_id';
                userInput.value = '{{ $user->id }}';
                form.appendChild(userInput);
                
                document.body.appendChild(form);
                
                // Show loading state
                this.innerHTML = '<i class="bx bx-loader bx-spin"></i> Unassigning...';
                this.disabled = true;
                
                form.submit();
            }
        });
    });

    // Update arrow directions for initially opened accordions
    document.querySelectorAll('.collapse.show').forEach(function(collapseElement) {
        const collapseId = collapseElement.id;
        const toggleButton = document.querySelector('a[href="#' + collapseId + '"]');
        if (toggleButton) {
            const arrow = toggleButton.querySelector('i');
            if (arrow) {
                arrow.style.transform = 'rotate(180deg)';
            }
        }
    });
    
    // Add event listeners for accordion toggle to handle arrow rotation
    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function(toggleButton) {
        const targetId = toggleButton.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);
        const arrow = toggleButton.querySelector('i');
        
        if (targetElement && arrow) {
            targetElement.addEventListener('show.bs.collapse', function() {
                arrow.style.transform = 'rotate(180deg)';
            });
            
            targetElement.addEventListener('hide.bs.collapse', function() {
                arrow.style.transform = 'rotate(0deg)';
            });
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.btn-save-lakehouse').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const selectId  = btn.dataset.selectId;
            const saveUrl   = btn.dataset.saveUrl;
            const select    = document.getElementById(selectId);
            const feedback  = btn.parentElement.querySelector('.lh-save-feedback');

            const selectedOption       = select.options[select.selectedIndex];
            const lakehouseArtifactId  = selectedOption.value;
            const lakehouseName        = selectedOption.dataset.name || '';
            const fabricWorkspaceId    = select.dataset.workspaceFabricId;

            btn.disabled = true;
            btn.innerHTML = '<i class="bx bx-loader bx-spin me-1"></i> Saving…';

            fetch(saveUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                body: JSON.stringify({
                    fabric_workspace_id:  fabricWorkspaceId,
                    lakehouse_artifact_id: lakehouseArtifactId,
                    lakehouse_name:        lakehouseName,
                }),
            })
            .then(function (res) { return res.json(); })
            .then(function (data) {
                btn.disabled = false;
                btn.innerHTML = '<i class="bx bx-save me-1"></i> Save';

                feedback.textContent = data.message;
                feedback.classList.remove('d-none', 'text-danger');
                feedback.classList.add(data.success ? 'text-success' : 'text-danger');

                setTimeout(function () { feedback.classList.add('d-none'); }, 3000);
            })
            .catch(function () {
                btn.disabled = false;
                btn.innerHTML = '<i class="bx bx-save me-1"></i> Save';

                feedback.textContent = 'Request failed. Please try again.';
                feedback.classList.remove('d-none', 'text-success');
                feedback.classList.add('text-danger');

                setTimeout(function () { feedback.classList.add('d-none'); }, 3000);
            });
        });
    });
});
</script>
@endsection