@extends('admin.admin_master')

@section('admin')
<div class="page-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="page-header-card">
                    <div class="page-header-content">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="page-icon me-3">
                                    <div class="avatar-md">
                                        <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ri-user-settings-line font-size-24"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="page-title mb-1">My Workflows</h4>
                                    <p class="page-subtitle text-muted mb-0">
                                        Manage and track your workflow tasks
                                    </p>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newWorkflowModal">+ New</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                @if(session('workflow_completed'))
                <!-- Workflow Completed Modal -->
                <div class="modal fade" id="workflowCompletedModal" tabindex="-1" aria-labelledby="workflowCompletedModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-success text-white">
                                <h5 class="modal-title" id="workflowCompletedModalLabel">Workflow Completed</h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>The workflow has been successfully completed!</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success" data-bs-dismiss="modal">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var completedModal = new bootstrap.Modal(document.getElementById('workflowCompletedModal'));
                    completedModal.show();
                });
                </script>
                @endif
        @include('workflow.partials.new-modal', ['allWorkflows' => \App\Models\Workflow::all()])
     
        <!-- Workflow Tasks Card Layout -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <h5 class="mb-3">My Workflow Tasks</h5>
                        <div class="d-flex flex-column gap-3">
                            @forelse($tasks as $task)
                                @if($task->status !== 'completed')
                                <div class="workflow-task-card card shadow-sm p-3 mb-2 w-100" style="min-width:600px;max-width:100%;">
                                    ...existing code...
                                </div>
                                @endif
                            @empty
                                <div class="card p-3 text-center w-100">No workflow tasks assigned to you.</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Documents and Their Tasks for Workflows I Created Table (Redesigned) -->
        <div class="card mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Workflows I Created</h5>
            </div>
            <div class="card-body">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Document Title</th>
                            <th>Workflow</th>
                            <th>Created At</th>
                            <th>View</th>
                            <th>Tasks</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $createdWorkflowIds = \App\Models\Workflow::where('created_by', auth()->id())->pluck('id');
                            $documents = \App\Models\Document::whereIn('workflow_id', $createdWorkflowIds)
                                ->with(['workflow', 'tasks.assignedUser', 'tasks.assignedRole', 'tasks.transition.fromStep', 'tasks.transition.toStep'])
                                ->orderByDesc('created_at')->get();
                        @endphp
                        @forelse($documents as $doc)
                        <tr>
                            <td>
                                <div class="fw-bold">{{ $doc->title }}</div>
                                <div class="text-muted small">{{ $doc->description }}</div>
                            </td>
                            <td>{{ $doc->workflow ? $doc->workflow->name : '-' }}</td>
                            <td>{{ $doc->created_at ? $doc->created_at->format('Y-m-d H:i') : '-' }}</td>
                            <td>
                                @if($doc->file_path)
                                    <a href="https://dev.switch.sc/spga/storage/app/public/{{ $doc->file_path }}" target="_blank" class="btn btn-outline-primary btn-sm">View</a>
                                @else
                                    <span class="text-muted">No file</span>
                                @endif
                            </td>
                            <td>
                                @if($doc->tasks && $doc->tasks->count())
                                    <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#tasksModal{{ $doc->id }}">
                                       Task
                                    </button>
                                    <!-- Modal for tasks -->
                                    <div class="modal fade" id="tasksModal{{ $doc->id }}" tabindex="-1" aria-labelledby="tasksModalLabel{{ $doc->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header bg-primary text-white d-flex justify-content-between align-items-center">
                                                    <h5 class="modal-title mb-0 text-white" id="tasksModalLabel{{ $doc->id }}">Tasks for: {{ $doc->title }}</h5>
                                                    <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <ul class="list-group">
                                                        @foreach($doc->tasks as $task)
                                                        <li class="list-group-item">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <div>
                                                                    <strong>Task #{{ $task->id }}</strong> -
                                                                    <span class="badge bg-{{ $task->status === 'completed' ? 'success' : ($task->status === 'in_progress' ? 'primary' : 'secondary') }}">{{ ucfirst($task->status) }}</span>
                                                                </div>
                                                                <div class="text-muted small">
                                                                    Assigned User: 
                                                                    @if($task->assignedUser)
                                                                        {{ $task->assignedUser->first_name ?? '' }} {{ $task->assignedUser->last_name ?? '' }}
                                                                        @if(empty($task->assignedUser->first_name) && empty($task->assignedUser->last_name))
                                                                            {{ $task->assignedUser->name }}
                                                                        @endif
                                                                    @else
                                                                        <span class="text-muted"></span>
                                                                    @endif |
                                                                    Assigned Role: {{ $task->assignedRole ? $task->assignedRole->name : '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mt-1">
                                                                @if($task->transition)
                                                                    <span class="text-muted">Transition: {{ $task->transition->name }} ({{ $task->transition->fromStep ? $task->transition->fromStep->name : 'Start' }} → {{ $task->transition->toStep ? $task->transition->toStep->name : '-' }})</span>
                                                                    @if($task->transition->is_end && $task->status !== 'completed')
                                                                        <!-- Show last transition action button if not completed -->
                                                                        <form method="POST" action="{{ route('workflow.tasks.transition', $task->id) }}" class="d-inline">
                                                                            @csrf
                                                                            <input type="hidden" name="transition_id" value="{{ $task->transition->id }}">
                                                                            <input type="hidden" name="comment" value="Final transition action">
                                                                            <button type="submit" class="btn btn-success btn-sm mt-1">Complete Workflow</button>
                                                                        </form>
                                                                    @elseif($task->transition->is_end && $task->status === 'completed')
                                                                        <span class="badge bg-success ms-2">Workflow Complete</span>
                                                                    @endif
                                                                @else
                                                                    <span class="text-muted">No transition info</span>
                                                                @endif
                                                            </div>
                                                        </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <span class="text-muted">No tasks</span>
                                @endif
                            </td>

                        @empty
                        <tr>
                            <td colspan="5" class="text-center">No documents found for workflows you created.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
<!-- View Document Modal -->
<div class="modal fade" id="viewDocumentModal" tabindex="-1" aria-labelledby="viewDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewDocumentModalLabel">Document Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6 id="docTitle"></h6>
                <p id="docDescription"></p>
                <div id="docPreview"></div>
                   <a id="docLink" href="#" target="_blank" ></a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var viewDocumentModal = document.getElementById('viewDocumentModal');
    viewDocumentModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var title = button.getAttribute('data-title');
        var description = button.getAttribute('data-description');
        var link = button.getAttribute('data-link');
        var filePath = button.getAttribute('data-filepath');
        document.getElementById('docTitle').textContent = title;
        document.getElementById('docDescription').textContent = description;
        document.getElementById('docLink').href = link;
        var preview = '';
        if (filePath) {
            var ext = filePath.split('.').pop().toLowerCase();
            if (['pdf'].includes(ext)) {
                preview = '<iframe src=\"' + filePath + '\" width=\"100%\" height=\"400px\"></iframe>';
            } else if (['jpg','jpeg','png','gif','bmp','webp'].includes(ext)) {
                preview = '<img src=\"' + filePath + '\" alt=\"Document Image\" style=\"max-width:100%;max-height:400px;\" />';
            } else {
                preview = '<a href=\"' + filePath + '\" target=\"_blank\">Download File</a>';
            }
        }
        document.getElementById('docPreview').innerHTML = preview;
    });
});
</script>
@endsection