@extends('layouts.app')

@section('title', 'All Tasks')
@section('page-title', 'Team Tasks & Activities')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0"><i class="fas fa-tasks me-2"></i>All Tasks</h6>
        <a href="{{ route('leader.activities.create') }}" class="btn btn-sm btn-primary">
            <i class="fas fa-plus me-1"></i> Assign New Task
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Type</th>
                        <th>Subject</th>
                        <th>Client</th>
                        <th>Assigned To</th>
                        <th>Due Date</th>
                        <th>Study Materials</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($activities as $activity)
                    <tr>
                        <td>{{ $loop->iteration }}</br>
                            <small class="text-muted">ID: {{ $activity->id }}</small>
                        </td>
                        <td><span class="badge bg-{{ $activity->getActivityTypeBadge() }}">{{ strtoupper($activity->activity_type) }}</span></td>
                        <td>
                            <strong>{{ $activity->subject }}</strong>
                            @if($activity->description)
                                <br><small class="text-muted">{{ Str::limit($activity->description, 50) }}</small>
                            @endif
                        </td>
                        <td>
                            {{ $activity->client->company_name ?? 'N/A' }}
                            @if($activity->client && $activity->client->assignedTo)
                                <br><small class="text-muted">Assigned to: {{ $activity->client->assignedTo->name }}</small>
                            @endif
                        </td>
                        <td>{{ $activity->assignedTo->name ?? 'N/A' }}<br>
                            <small>Created by: {{ $activity->createdBy->name ?? 'N/A' }}</small>
                        </td>
                        <td class="{{ $activity->due_date < now() && $activity->status != 'completed' ? 'text-danger fw-bold' : '' }}">
                            {{ $activity->due_date->format('d M Y') }}
                            @if($activity->due_date < now() && $activity->status != 'completed')
                                <br><span class="badge bg-danger">OVERDUE</span>
                            @endif
                        </td>
                        
                        <!-- Study Materials Column -->
                        <td>
                            @if($activity->studyMaterials && $activity->studyMaterials->count() > 0)
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        <i class="fas fa-book"></i> {{ $activity->studyMaterials->count() }} Material(s)
                                    </button>
                                    <ul class="dropdown-menu">
                                        @foreach($activity->studyMaterials as $material)
                                            <li>
                                                <a class="dropdown-item" href="{{ route('study-materials.show', $material->id) }}" target="_blank">
                                                    <span class="badge bg-{{ $material->getCategoryBadge() }} me-1">
                                                        {{ ucfirst($material->category_type) }}
                                                    </span>
                                                    <i class="{{ $material->getTypeIcon() }} me-1"></i>
                                                    {{ Str::limit($material->title, 40) }}
                                                    @if($material->file_path)
                                                        <i class="fas fa-paperclip ms-1"></i>
                                                    @endif
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <!-- Small preview -->
                                <div class="mt-1">
                                    @foreach($activity->studyMaterials->take(2) as $material)
                                        <span class="badge bg-secondary" style="font-size: 0.65rem;">
                                            {{ Str::limit($material->title, 20) }}
                                        </span>
                                    @endforeach
                                    @if($activity->studyMaterials->count() > 2)
                                        <span class="badge bg-secondary">+{{ $activity->studyMaterials->count() - 2 }}</span>
                                    @endif
                                </div>
                            @else
                                <span class="text-muted">
                                    <i class="fas fa-book-open"></i> No materials
                                </span>
                                <button type="button" class="btn btn-sm btn-link p-0" onclick="linkMaterials({{ $activity->id }})">
                                    <i class="fas fa-plus-circle text-primary"></i> Link
                                </button>
                            @endif
                        </td>
                        
                        <!-- Status Column -->
                        <td>
                            @if($activity->status == 'completed')
                                <span class="badge bg-success">Completed</span>
                                @if($activity->completed_at)
                                    <br><small>{{ $activity->completed_at->format('d M Y') }}</small>
                                @endif
                            @elseif($activity->status == 'overdue')
                                <span class="badge bg-danger">Overdue</span>
                            @elseif($activity->status == 'in_progress')
                                <span class="badge bg-info">In Progress</span>
                            @else
                                <span class="badge bg-warning">Pending</span>
                            @endif
                        </td>
                        
                        <!-- Actions Column -->
                        <td>
                            <div class="btn-group-vertical btn-group-sm w-100">
                                <a href="{{ route('leader.activities.show', $activity->id) }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> View
                                </a>
                                <a href="{{ route('leader.activities.edit', $activity->id) }}" class="btn btn-sm btn-warning">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                                @if($activity->status != 'completed')
                                    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#completeModal{{ $activity->id }}">
                                        <i class="fas fa-check"></i> Complete
                                    </button>
                                @endif
                                <button type="button" class="btn btn-sm btn-secondary" onclick="linkMaterials({{ $activity->id }})">
                                    <i class="fas fa-link"></i> Link Materials
                                </button>
                            </div>
                        </td>
                    </tr>
                    
                    <!-- Complete Modal -->
                    <div class="modal fade" id="completeModal{{ $activity->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <form method="POST" action="{{ route('leader.activities.complete', $activity->id) }}">
                                @csrf
                                @method('PATCH')
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Complete Task: {{ $activity->subject }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label>Completion Notes</label>
                                            <textarea name="completion_notes" class="form-control" rows="3" placeholder="What was accomplished? Any follow-ups?"></textarea>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-success">Mark Complete</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center">
                            <div class="py-4">
                                <i class="fas fa-tasks fa-3x text-muted mb-3"></i>
                                <p class="text-muted mb-0">No tasks found.</p>
                                <a href="{{ route('leader.activities.create') }}" class="btn btn-primary btn-sm mt-2">Assign a Task</a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{ $activities->links() }}
    </div>
</div>
@push('scripts')
<script>
    function linkMaterials(activityId) {
        // Fetch available study materials
        fetch('/leader/activities/' + activityId + '/materials')
            .then(response => response.json())
            .then(materials => {
                if (materials.length === 0) {
                    alert('No study materials available. Please create some first.');
                    return;
                }
                
                // Create modal for selecting materials
                let modalHtml = `
                    <div class="modal fade" id="linkMaterialsModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Link Study Materials to Task</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <form id="linkMaterialsForm" method="POST" action="/leader/activities/${activityId}/materials/link">
                                    <div class="modal-body">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="_method" value="POST">
                                        <div class="row">
                                            ${materials.map(m => `
                                                <div class="col-md-6 mb-2">
                                                    <div class="form-check">
                                                        <input type="checkbox" name="material_ids[]" value="${m.id}" class="form-check-input" id="mat_${m.id}">
                                                        <label class="form-check-label" for="mat_${m.id}">
                                                            <span class="badge bg-${m.category_badge}">${m.category_type}</span>
                                                            <i class="${m.type_icon}"></i>
                                                            ${m.title.substring(0, 60)}${m.title.length > 60 ? '...' : ''}
                                                            ${m.file_path ? '<i class="fas fa-paperclip ms-1"></i>' : ''}
                                                        </label>
                                                    </div>
                                                </div>
                                            `).join('')}
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-primary">Link Selected Materials</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                `;
                
                // Remove existing modal if any
                let existingModal = document.getElementById('linkMaterialsModal');
                if (existingModal) {
                    existingModal.remove();
                }
                
                // Add modal to body
                document.body.insertAdjacentHTML('beforeend', modalHtml);
                
                // Show modal
                let modal = new bootstrap.Modal(document.getElementById('linkMaterialsModal'));
                modal.show();
                
                // Handle form submission
                document.getElementById('linkMaterialsForm').addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    fetch(this.action, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            material_ids: Array.from(document.querySelectorAll('input[name="material_ids[]"]:checked')).map(cb => cb.value)
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('Materials linked successfully!');
                            location.reload();
                        } else {
                            alert('Error: ' + (data.message || 'Could not link materials'));
                        }
                    });
                });
            });
    }
</script>
@endpush
@endsection