@extends('layouts.app')

@section('page_title', $project->name)

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">{{ $project->name }}</h4>
            <p class="text-muted small mb-0">{{ $project->description }}</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-light border" id="viewMembers"><i class="bi bi-people me-1"></i> Members
                ({{ $project->members->count() }})</button>
            <button class="btn btn-primary" id="addNewTask"><i class="bi bi-plus-lg me-1"></i> New Task</button>
        </div>
    </div>

    <div class="kanban-board d-flex gap-4 overflow-auto pb-4" style="min-height: calc(100vh - 250px);">
        @foreach (['todo', 'in_progress', 'in_review', 'done'] as $status)
            <div class="kanban-column flex-shrink-0" style="width: 300px;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="text-uppercase fw-bold small text-muted mb-0">
                        <i class="bi bi-circle-fill me-2"
                            style="font-size: 0.6rem; color: {{ $status == 'todo'
                                ? '#0d6efd'
                                : ($status == 'in_progress'
                                    ? '#ffc107'
                                    : ($status == 'in_review'
                                        ? '#6f42c1'
                                        : '#198754')) }}"></i>
                        {{ str_replace('_', ' ', $status) }}
                    </h6>
                    <span
                        class="badge bg-secondary-subtle text-secondary rounded-pill px-2">{{ $tasks[$status]->count() ?? 0 }}</span>
                </div>

                <div class="kanban-cards-container d-flex flex-column gap-3" id="kanban-{{ $status }}"
                    data-status="{{ $status }}">
                    @foreach ($tasks[$status] as $task)
                        <div class="card kanban-card border-0 shadow-sm cursor-grab open-task-details"
                            data-id="{{ $task->id }}">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between mb-2">
                                    <span
                                        class="badge bg-{{ $task->priority == 'high' ? 'danger' : ($task->priority == 'medium' ? 'warning' : 'info') }}-subtle text-{{ $task->priority == 'high' ? 'danger' : ($task->priority == 'medium' ? 'warning' : 'info') }} smaller px-2">
                                        {{ ucfirst($task->priority) }}
                                    </span>
                                    <div class="dropdown">
                                        <i class="bi bi-three-dots text-muted cursor-pointer" data-bs-toggle="dropdown"></i>
                                        <ul class="dropdown-menu shadow border-0 small">
                                            <li><a class="dropdown-item edit-task-btn" href="javascript:void(0)"
                                                    data-id="{{ $task->id }}"><i class="bi bi-pencil me-2"></i>
                                                    Edit</a></li>
                                            <li><a class="dropdown-item text-danger delete-task-btn"
                                                    href="javascript:void(0)" data-id="{{ $task->id }}"><i
                                                        class="bi bi-trash me-2"></i> Delete</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <h6 class="fw-bold fs-6 mb-2">{{ $task->title }}</h6>
                                <p class="text-muted smaller mb-3 line-clamp-2">{{ $task->description }}</p>

                                <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top">
                                    <div class="d-flex align-items-center">
                                        @if ($task->assignee)
                                            <img src="{{ $task->assignee->avatar ?? 'https://ui-avatars.com/api/?name=' . $task->assignee->name . '&background=random' }}"
                                                class="rounded-circle border" width="24" height="24"
                                                title="{{ $task->assignee->name }}">
                                        @else
                                            <div class="rounded-circle bg-light border text-muted d-flex align-items-center justify-content-center"
                                                style="width:24px; height:24px;" title="Unassigned">
                                                <i class="bi bi-person smaller"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="text-muted" style="font-size: 0.65rem;">
                                        @if ($task->due_date)
                                            <i class="bi bi-calendar-event me-1"></i> {{ $task->due_date->format('M d') }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>

    <!-- Task Detail Modal -->
    <div class="modal fade" id="taskDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="taskDetailTitle">Task Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 pt-2">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="mb-4">
                                <label class="small text-muted text-uppercase fw-bold mb-1">Description</label>
                                <p id="taskDetailDesc" class="mb-0"></p>
                            </div>

                            <div class="mb-4">
                                <h6 class="fw-bold mb-3"><i class="bi bi-chat-left-text me-2"></i> Comments</h6>
                                <div id="commentsList" class="mb-3"></div>
                                <div class="input-group">
                                    <input type="text" id="commentText" class="form-control"
                                        placeholder="Write a comment...">
                                    <button class="btn btn-primary" id="submitComment">Send</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 border-start">
                            <div class="mb-3">
                                <label class="small text-muted text-uppercase fw-bold d-block mb-1">Status</label>
                                <select id="taskDetailStatus" class="form-select form-select-sm">
                                    <option value="todo">To Do</option>
                                    <option value="in_progress">In Progress</option>
                                    <option value="in_review">In Review</option>
                                    <option value="done">Done</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="small text-muted text-uppercase fw-bold d-block mb-1">Priority</label>
                                <span id="taskDetailPriority" class="badge"></span>
                            </div>
                            <div class="mb-3">
                                <label class="small text-muted text-uppercase fw-bold d-block mb-1">Assignee</label>
                                <div id="taskDetailAssignee" class="d-flex align-items-center"></div>
                            </div>
                            <div class="mb-3 pt-3 border-top">
                                <label class="small text-muted text-uppercase fw-bold d-block mb-1">Time Logging</label>
                                <div class="p-2 bg-light rounded-3">
                                    <div class="d-flex justify-content-between small mb-1">
                                        <span>Actual: <b id="taskActualHours">0</b>h</span>
                                        <span>Est: <b id="taskEstHours">0</b>h</span>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary w-100 mt-2" data-bs-toggle="collapse"
                                        data-bs-target="#logTimeBox">Log Time</button>
                                    <div class="collapse mt-2" id="logTimeBox">
                                        <div class="input-group input-group-sm mb-1">
                                            <input type="number" id="logHours" class="form-control" placeholder="Hrs">
                                            <button class="btn btn-primary" id="submitTime">Log</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Task Modal -->
    <div class="modal fade" id="addTaskModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <form id="addTaskForm">
                    @csrf
                    <input type="hidden" name="project_id" value="{{ $project->id }}">
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold">Create New Task</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Title</label>
                            <input type="text" name="title" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Description</label>
                            <textarea name="description" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">Priority</label>
                                    <select name="priority" class="form-select">
                                        <option value="low">Low</option>
                                        <option value="medium" selected>Medium</option>
                                        <option value="high">High</option>
                                        <option value="critical">Critical</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">Due Date</label>
                                    <input type="date" name="due_date" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Task</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Members Modal -->
    <div class="modal fade" id="membersModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Project Members</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach ($project->members as $member)
                            <li class="list-group-item p-3 d-flex align-items-center">
                                <img src="{{ $member->avatar ?? 'https://ui-avatars.com/api/?name=' . $member->name }}"
                                    class="rounded-circle border me-3" width="40" height="40">
                                <div>
                                    <h6 class="mb-0 fw-bold small">{{ $member->name }}</h6>
                                    <span
                                        class="text-muted smaller">{{ ucfirst($member->pivot->role ?? 'Member') }}</span>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Task Modal -->
    <div class="modal fade" id="editTaskModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <form id="editTaskForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="editTaskId">
                    <div class="modal-header">
                        <h5 class="modal-title fw-bold">Edit Task</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Title</label>
                            <input type="text" name="title" id="editTaskTitle" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Description</label>
                            <textarea name="description" id="editTaskDesc" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">Status</label>
                                    <select name="status" id="editTaskStatus" class="form-select">
                                        <option value="todo">To Do</option>
                                        <option value="in_progress">In Progress</option>
                                        <option value="in_review">In Review</option>
                                        <option value="done">Done</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">Priority</label>
                                    <select name="priority" id="editTaskPriority" class="form-select">
                                        <option value="low">Low</option>
                                        <option value="medium">Medium</option>
                                        <option value="high">High</option>
                                        <option value="critical">Critical</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Task</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            .kanban-board {
                overflow-x: auto;
                scrollbar-width: thin;
            }

            .kanban-cards-container {
                min-height: 200px;
                border-radius: 0.5rem;
            }

            .kanban-card:active {
                cursor: grabbing !important;
                transform: scale(1.02);
            }

            .smaller {
                font-size: 0.65rem;
            }

            .cursor-grab {
                cursor: grab;
            }

            .line-clamp-2 {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .sortable-ghost {
                opacity: 0.4;
                background: #e9ecef !important;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
        <script>
            let currentTaskId = null;

            document.addEventListener('DOMContentLoaded', function() {
                const columns = ['todo', 'in_progress', 'in_review', 'done'];

                columns.forEach(status => {
                    const el = document.getElementById('kanban-' + status);
                    new Sortable(el, {
                        group: 'shared',
                        animation: 150,
                        ghostClass: 'sortable-ghost',
                        onEnd: function(evt) {
                            const taskId = evt.item.getAttribute('data-id');
                            const newStatus = evt.to.getAttribute('data-status');

                            $.post('{{ url('/project-tasks') }}/' + taskId + '/status', {
                                _token: '{{ csrf_token() }}',
                                status: newStatus
                            }, function(res) {
                                if (res.success) {
                                    Toast.fire({
                                        icon: 'success',
                                        title: 'Task updated to ' + newStatus
                                            .replace('_', ' ')
                                    });
                                }
                            }).fail(function(xhr) {
                                console.error('Failed to update status:', xhr.responseText);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error (' + xhr.status + ')',
                                    text: 'Failed to update task status: ' + (xhr
                                        .responseJSON ? xhr.responseJSON
                                        .message : xhr.statusText)
                                });
                                // Optionally revert the drag
                                location.reload();
                            });
                        }
                    });
                });

                // Task details
                $('.open-task-details').on('click', function(e) {
                    if ($(e.target).closest('.dropdown').length) return;

                    const id = $(this).data('id');
                    currentTaskId = id;

                    $.get('{{ url('/project-tasks') }}/' + id, function(task) {
                        $('#taskDetailTitle').text(task.title);
                        $('#taskDetailDesc').text(task.description || 'No description provided.');
                        $('#taskDetailStatus').val(task.status);
                        $('#taskDetailPriority').text(task.priority).attr('class', 'badge bg-' + (task
                            .priority == 'high' ? 'danger' : (task.priority == 'medium' ?
                                'warning' : 'info')) + '-subtle text-' + (task.priority ==
                            'high' ? 'danger' : (task.priority == 'medium' ? 'warning' : 'info')
                        ));
                        $('#taskActualHours').text(task.actual_hours || 0);
                        $('#taskEstHours').text(task.estimated_hours || 0);

                        // Assignee
                        if (task.assignee) {
                            $('#taskDetailAssignee').html(`
                                <img src="${task.assignee.avatar || 'https://ui-avatars.com/api/?name='+task.assignee.name}" class="rounded-circle border me-2" width="24" height="24">
                                <span class="small fw-medium">${task.assignee.name}</span>
                            `);
                        } else {
                            $('#taskDetailAssignee').html(
                                '<span class="text-muted small">Unassigned</span>');
                        }

                        // Comments
                        let commentsHtml = '';
                        task.comments.forEach(c => {
                            if (c.user) {
                                commentsHtml += `
                                    <div class="d-flex mb-3">
                                        <img src="${c.user.avatar || 'https://ui-avatars.com/api/?name='+c.user.name}" class="rounded-circle me-2" width="24" height="24">
                                        <div class="bg-light p-2 rounded-3 flex-grow-1">
                                            <div class="d-flex justify-content-between mb-1">
                                                <b class="smaller">${c.user.name}</b>
                                                <span class="text-muted" style="font-size:0.6rem;">${new Date(c.created_at).toLocaleDateString()}</span>
                                            </div>
                                            <p class="smaller mb-0">${c.comment}</p>
                                        </div>
                                    </div>
                                `;
                            }
                        });
                        $('#commentsList').html(commentsHtml ||
                            '<p class="smaller text-muted">No comments yet.</p>');

                        $('#taskDetailModal').modal('show');
                    });
                });

                // Add Comment
                $('#submitComment').on('click', function() {
                    const text = $('#commentText').val();
                    if (!text) return;

                    $.post('{{ url('/project-tasks') }}/' + currentTaskId + '/comments', {
                        _token: '{{ csrf_token() }}',
                        comment: text
                    }, function(c) {
                        $('#commentText').val('');
                        const newComment = `
                            <div class="d-flex mb-3">
                                <img src="${c.user.avatar || 'https://ui-avatars.com/api/?name='+c.user.name}" class="rounded-circle me-2" width="24" height="24">
                                <div class="bg-light p-2 rounded-3 flex-grow-1">
                                    <div class="d-flex justify-content-between mb-1">
                                        <b class="smaller">${c.user.name}</b>
                                        <span class="text-muted" style="font-size:0.6rem;">Just now</span>
                                    </div>
                                    <p class="smaller mb-0">${c.comment}</p>
                                </div>
                            </div>
                        `;
                        if ($('#commentsList p').length) $('#commentsList').empty();
                        $('#commentsList').append(newComment);
                    });
                });

                // Log Time
                $('#submitTime').on('click', function() {
                    const hrs = $('#logHours').val();
                    if (!hrs) return;

                    $.post('{{ url('/project-tasks') }}/' + currentTaskId + '/time-logs', {
                        _token: '{{ csrf_token() }}',
                        hours: hrs
                    }, function(log) {
                        $('#logHours').val('');
                        $('#logTimeBox').collapse('hide');
                        const newTotal = parseFloat($('#taskActualHours').text()) + parseFloat(hrs);
                        $('#taskActualHours').text(newTotal);
                        Toast.fire({
                            icon: 'success',
                            title: hrs + ' hours logged!'
                        });
                    });
                });

                // New Task
                $('#addNewTask').on('click', function() {
                    $('#addTaskModal').modal('show');
                });

                $('#addTaskForm').on('submit', function(e) {
                    e.preventDefault();
                    $.post('{{ url('/project-tasks') }}', $(this).serialize(), function(task) {
                        $('#addTaskModal').modal('hide');
                        location.reload();
                    });
                });

                // View Members
                $('#viewMembers').on('click', function() {
                    $('#membersModal').modal('show');
                });

                // Edit Task Button
                $(document).on('click', '.edit-task-btn', function(e) {
                    e.stopPropagation();
                    const id = $(this).data('id');
                    $.get('{{ url('/project-tasks') }}/' + id, function(task) {
                        $('#editTaskId').val(task.id);
                        $('#editTaskTitle').val(task.title);
                        $('#editTaskDesc').val(task.description);
                        $('#editTaskStatus').val(task.status);
                        $('#editTaskPriority').val(task.priority);
                        $('#editTaskModal').modal('show');
                    });
                });

                // Edit Task Form Submit
                $('#editTaskForm').on('submit', function(e) {
                    e.preventDefault();
                    const id = $('#editTaskId').val();
                    $.ajax({
                        url: '{{ url('/project-tasks') }}/' + id,
                        type: 'PUT',
                        data: $(this).serialize(),
                        success: function() {
                            $('#editTaskModal').modal('hide');
                            location.reload();
                        }
                    });
                });

                // Delete Task
                $(document).on('click', '.delete-task-btn', function(e) {
                    e.stopPropagation();
                    const id = $(this).data('id');
                    if (confirm('Are you sure you want to delete this task?')) {
                        $.ajax({
                            url: '{{ url('/project-tasks') }}/' + id,
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function() {
                                location.reload();
                            }
                        });
                    }
                });

                // Update Status from Detail Modal
                $('#taskDetailStatus').on('change', function() {
                    const status = $(this).val();
                    $.post('{{ url('/project-tasks') }}/' + currentTaskId + '/status', {
                        _token: '{{ csrf_token() }}',
                        status: status
                    }, function() {
                        location.reload();
                    });
                });
            });
        </script>
    @endpush
@endsection