@extends('layouts.master')

@section('title', 'Task Manager')

@section('content')
    <div class="container mt-4">
        <h2>Task List</h2>

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (Auth::user()->isAdmin())
            <div class="mb-3">
                <a href="{{ route('tasks.create') }}" class="btn btn-primary">Create New Task</a>
            </div>
        @endif
        <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive"
            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
            <thead>
                <tr>
                    <th>Task Name</th>
                    <th>Assigned To</th>
                    <th>Team</th>
                    <th>Status</th>
                    <th>Deadline</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="myTable">
                @foreach ($tasks as $task)
                    <tr>
                        <td>{{ $task->task_name }}</td>
                        <td>
                            @foreach ($task->assignedUsers as $user)
                                <span class="badge bg-primary">{{ $user->name }}</span>
                            @endforeach
                        </td>
                        <td>{{ $task->team->name ?? 'N/A' }}</td>
                        <td>
                            <span class="badge bg-{{ $task->statusBadgeColor }}">{{ $task->status }}</span>
                        </td>
                        <td>{{ $task->deadline->format('M d, Y') }}</td>
                        <td>
                            <div class="d-flex gap-2">
                                <!-- View Button -->
                                <button class="btn btn-sm btn-info view-task-btn" data-bs-toggle="modal"
                                    data-bs-target="#taskModal" data-task-name="{{ $task->task_name }}"
                                    data-task-detail="{{ $task->task_detail }}"
                                    data-assigned-users="{{ json_encode($task->assignedUsers) }}"
                                    data-team="{{ $task->team->name ?? 'N/A' }}" data-status="{{ $task->status }}"
                                    data-deadline="{{ $task->deadline->format('M d, Y') }}"
                                    data-start-date="{{ $task->start_date?->format('M d, Y') ?? 'N/A' }}"
                                    data-end-date="{{ $task->end_date?->format('M d, Y') ?? 'N/A' }}"
                                    data-duration-days="{{ $task->duration_days }}"
                                    data-duration-hours="{{ $task->duration_hours }}"
                                    data-duration-minutes="{{ $task->duration_minutes }}">
                                    View
                                </button>
                                <a href="{{ route('tasks.edit', $task->id) }}" class="btn btn-sm btn-primary">Edit</a>
                                @if (Auth::user()->isAdmin())
                                <form action="{{ route('tasks.destroy', $task->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger"
                                        onclick="return confirm('Are you sure you want to delete this task?')">
                                        Delete
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Task Details Modal -->
    <div class="modal fade" id="taskModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Task Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Task Name:</strong> <span id="modalTaskName"></span></p>
                            <p><strong>Status:</strong> <span id="modalStatus" class="badge"></span></p>
                            <p><strong>Team:</strong> <span id="modalTeam"></span></p>
                            <p><strong>Assigned To:</strong> <span id="modalAssignedUsers"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Deadline:</strong> <span id="modalDeadline"></span></p>
                            <p><strong>Start Date:</strong> <span id="modalStartDate"></span></p>
                            <p><strong>End Date:</strong> <span id="modalEndDate"></span></p>
                            <p><strong>Duration:</strong> <span id="modalDuration"></span></p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <strong>Task Details:</strong>
                        <p id="modalTaskDetail" class="mt-2"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const viewButtons = document.querySelectorAll('.view-task-btn');

            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Parse the JSON data for assigned users
                    const users = JSON.parse(this.dataset.assignedUsers);
                    const assignedUsersContainer = document.getElementById('modalAssignedUsers');

                    // Clear previous badges
                    assignedUsersContainer.innerHTML = '';

                    // Create badges for each user
                    users.forEach(user => {
                        const badge = document.createElement('span');
                        badge.className = 'badge bg-primary me-1';
                        badge.textContent = user.name;
                        assignedUsersContainer.appendChild(badge);
                    });

                    if (users.length === 0) {
                        assignedUsersContainer.innerHTML = '<span class="text-muted">N/A</span>';
                    }

                    // Update other modal content
                    document.getElementById('modalTaskName').textContent = this.dataset.taskName;
                    document.getElementById('modalTaskDetail').textContent = this.dataset
                        .taskDetail;
                    document.getElementById('modalTeam').textContent = this.dataset.team;

                    // Status badge
                    const statusBadge = document.getElementById('modalStatus');
                    statusBadge.textContent = this.dataset.status;
                    statusBadge.className = 'badge bg-' + getStatusColor(this.dataset.status);

                    // Dates and duration
                    document.getElementById('modalDeadline').textContent = this.dataset.deadline;
                    document.getElementById('modalStartDate').textContent = this.dataset.startDate;
                    document.getElementById('modalEndDate').textContent = this.dataset.endDate;

                    const days = this.dataset.durationDays || 0;
                    const hours = this.dataset.durationHours || 0;
                    const minutes = this.dataset.durationMinutes || 0;
                    document.getElementById('modalDuration').textContent =
                        `${days} days, ${hours} hours, ${minutes} minutes`;
                });
            });

            function getStatusColor(status) {
                switch (status) {
                    case 'Pending':
                        return 'warning';
                    case 'In Progress':
                        return 'info';
                    case 'Completed':
                        return 'success';
                    case 'Cancelled':
                        return 'danger';
                    default:
                        return 'secondary';
                }
            }
        });
    </script>

    <style>
        .modal-body strong {
            min-width: 100px;
            display: inline-block;
        }
    </style>
@endsection