@extends('layouts.main')

@section('title', 'My Workspaces - Prolytics Connect')

@section('content')
    <!-- start page content -->
    @if($assignedWorkspaces->count() > 0)
        @foreach($assignedWorkspaces as $workspace)
        <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">{{ strtoupper(substr($workspace->name, 0, 1)) }}</div>
                            <div class="block-heading">
                                <h3>Workspace: {{ $workspace->name }}</h3>
                                <h5 class="d-flex gap-2 align-items-center mb-0 d-none">
                                    <i class="settings-icon-sm"></i>
                                    {{ $workspace->description ?: 'No description available' }}
                                </h5>
                            </div>
                        </div>
                        <a href="#" class="btn btn-primary d-none">Create data Pipeline</a>
                    </div>
                    
                    @if($workspace->workspaceItems->count() > 0)
                    <div class="pipine-block-wrapper">
                        @foreach($workspace->workspaceItems as $index => $item)
                        <!-- Pipeline {{ $index + 1 }} -->
                        <div class="pipine-block mb-2">
                            <div class="d-flex align-items-center gap-4 justify-content-between pipine-block-inner">
                                <div class="pipine-block-info name-col">
                                    <strong>{{ ucfirst($item->type) }}:</strong> <span>{{ $item->name }}</span>
                                </div>
                                <div class="pipine-block-info">
                                    <strong>Last Activity Run:</strong> <span>{{ $item->last_activity_run }}</span>
                                </div>
                                <div class="pipine-block-info">
                                    <strong>Next Activity Run:</strong> <span>{{ $item->next_activity_run }}</span>
                                </div>
                                <div class="d-flex align-items-center gap-3">
                                    <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                        <i class="settings-icon-sm"></i> <strong>Schedule config</strong> 
                                    </a>
                                    <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                        <i class="trash-icon-sm"></i> <strong>Delete</strong> 
                                    </a>
                                    <a href="#collapse{{ $workspace->id }}_{{ $item->id }}" class="collapse-arrow-btn" data-bs-toggle="collapse" aria-expanded="false">
                                        <i class="down-arrow"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="collapse" id="collapse{{ $workspace->id }}_{{ $item->id }}">
                                <div class="table-wrapper">
                                    <hr />
                                    <table class="table gen-table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Activity Name</th>
                                                <th scope="col">Activity Status</th>
                                            <th scope="col">Run Start</th>
                                            <th scope="col">Duration</th>
                                            <th scope="col">Input</th>
                                            <th scope="col">Output</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $activities = $item->real_activities ?? $item->sample_activities ?? [];
                                        @endphp
                                        @forelse($activities as $activity)
                                        <tr>
                                            <td>{{ $activity['name'] }}</td>
                                            <td>
                                                <span class="badge 
                                                    @if($activity['status'] == 'Success') bg-success
                                                    @elseif($activity['status'] == 'Running') bg-primary
                                                    @elseif($activity['status'] == 'Failed') bg-danger
                                                    @elseif($activity['status'] == 'Queued') bg-warning
                                                    @elseif($activity['status'] == 'Cancelling') bg-info
                                                    @else bg-secondary
                                                    @endif">
                                                    {{ $activity['status'] }}
                                                </span>
                                            </td>
                                            <td>{{ $activity['last_run'] }}</td>
                                            <td>{{ $activity['duration'] }}</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">No activity data available</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-4">
                        <p class="text-muted">No items assigned to this workspace yet.</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    @else
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card mb-3">
                <div class="text-center py-5">
                    <i class="bx bx-grid-alt" style="font-size: 4rem; color: #ddd;"></i>
                    <h4 class="mt-3 text-muted">No Workspaces Assigned</h4>
                    <p class="text-muted">You don't have any workspaces assigned to your account yet.</p>
                    <p class="text-muted">Contact your administrator to get workspace access.</p>
                </div>
            </div>
        </div>
    </div>
    @endif
    <!-- end page content -->
@endsection
                    
                    <!-- Pipeline 3 -->
                    <div class="pipine-block mb-2">
                        <div class="d-flex align-items-center gap-4 justify-content-between pipine-block-inner">
                            <div class="pipine-block-info name-col">
                                <strong>Pipeline:</strong> <span>Get_Customer_info_Pipeline</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Last Activity Run:</strong> <span>09-16-2025 08:00 am</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Next Activity Run:</strong> <span>09-16-2025 08:00 pm</span>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="settings-icon-sm"></i> <strong>Schedule config</strong> 
                                </a>
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="trash-icon-sm"></i> <strong>Delete</strong> 
                                </a>
                                <a href="#collapse3" class="collapse-arrow-btn" data-bs-toggle="collapse" aria-expanded="false"><i class="down-arrow"></i></a>
                            </div>
                        </div>
                        <div class="collapse" id="collapse3">
                            <div class="table-wrapper">
                                <hr />
                                <table class="table gen-table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Activity Name</th>
                                            <th scope="col">Activity Status</th>
                                            <th scope="col">Run Start</th>
                                            <th scope="col">Duration</th>
                                            <th scope="col">Input</th>
                                            <th scope="col">Output</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <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">D</div>
                        <div class="block-heading">
                            <h3>Workspace: DemoWorkSpace.</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0"><i class="settings-icon-sm"></i>Workspace Settings</h5>
                        </div>
                    </div>
                    <a href="#" class="btn btn-primary d-none">Create data Pipeline</a>
                </div>
                <div class="pipine-block-wrapper">
                    <!-- Demo Pipeline 1 -->
                    <div class="pipine-block mb-2">
                        <div class="d-flex align-items-center gap-4 justify-content-between pipine-block-inner">
                            <div class="pipine-block-info name-col">
                                <strong>Pipeline:</strong> <span>Demo_Pipeline</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Last Activity Run:</strong> <span>09-16-2025 08:00 am</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Next Activity Run:</strong> <span>09-16-2025 08:00 pm</span>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="settings-icon-sm"></i> <strong>Schedule config</strong> 
                                </a>
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="trash-icon-sm"></i> <strong>Delete</strong> 
                                </a>
                                <a href="#collapse5" class="collapse-arrow-btn" data-bs-toggle="collapse" aria-expanded="false"><i class="down-arrow"></i></a>
                            </div>
                        </div>
                        <div class="collapse" id="collapse5">
                            <div class="table-wrapper">
                                <hr />
                                <table class="table gen-table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Activity Name</th>
                                            <th scope="col">Activity Status</th>
                                            <th scope="col">Run Start</th>
                                            <th scope="col">Duration</th>
                                            <th scope="col">Input</th>
                                            <th scope="col">Output</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Demo Pipeline 2 -->
                    <div class="pipine-block mb-2">
                        <div class="d-flex align-items-center gap-4 justify-content-between pipine-block-inner">
                            <div class="pipine-block-info name-col">
                                <strong>Pipeline:</strong> <span>Demo_Pipeline_02</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Last Activity Run:</strong> <span>09-16-2025 08:00 am</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Next Activity Run:</strong> <span>09-16-2025 08:00 pm</span>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="settings-icon-sm"></i> <strong>Schedule config</strong> 
                                </a>
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="trash-icon-sm"></i> <strong>Delete</strong> 
                                </a>
                                <a href="#collapse6" class="collapse-arrow-btn" data-bs-toggle="collapse" aria-expanded="false"><i class="down-arrow"></i></a>
                            </div>
                        </div>
                        <div class="collapse" id="collapse6">
                            <div class="table-wrapper">
                                <hr />
                                <table class="table gen-table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Activity Name</th>
                                            <th scope="col">Activity Status</th>
                                            <th scope="col">Run Start</th>
                                            <th scope="col">Duration</th>
                                            <th scope="col">Input</th>
                                            <th scope="col">Output</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Pipeline 3 -->
                    <div class="pipine-block mb-2">
                        <div class="d-flex align-items-center gap-4 justify-content-between pipine-block-inner">
                            <div class="pipine-block-info name-col">
                                <strong>Pipeline:</strong> <span>Employee_data_Pipeline</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Last Activity Run:</strong> <span>09-16-2025 08:00 am</span>
                            </div>
                            <div class="pipine-block-info">
                                <strong>Next Activity Run:</strong> <span>09-16-2025 08:00 pm</span>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="settings-icon-sm"></i> <strong>Schedule config</strong> 
                                </a>
                                <a href="#" class="pipine-block-info d-flex align-items-center gap-2">
                                    <i class="trash-icon-sm"></i> <strong>Delete</strong> 
                                </a>
                                <a href="#collapse4" class="collapse-arrow-btn" data-bs-toggle="collapse" aria-expanded="false"><i class="down-arrow"></i></a>
                            </div>
                        </div>
                        <div class="collapse" id="collapse4">
                            <div class="table-wrapper">
                                <hr />
                                <table class="table gen-table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Activity Name</th>
                                            <th scope="col">Activity Status</th>
                                            <th scope="col">Run Start</th>
                                            <th scope="col">Duration</th>
                                            <th scope="col">Input</th>
                                            <th scope="col">Output</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                        <tr>
                                            <td>Invoke Pipeline</td>
                                            <td>In Progress</td>
                                            <td>09-16-2025 08:00 am</td>
                                            <td>16s</td>
                                            <td><a href="#"><i class="input-icon"></i></a></td>
                                            <td><a href="#"><i class="output-icon"></i></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add event listeners for collapse arrows
            document.querySelectorAll('.collapse-arrow-btn').forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const icon = this.querySelector('i');
                    const target = this.getAttribute('href');
                    const collapseElement = document.querySelector(target);
                    
                    // Toggle the collapse
                    if (collapseElement.classList.contains('show')) {
                        collapseElement.classList.remove('show');
                        icon.className = 'down-arrow';
                    } else {
                        collapseElement.classList.add('show');
                        icon.className = 'up-arrow';
                    }
                });
            });
        });
    </script>
@endsection