@extends('layouts.master')

@section('content')
<div class="content container-fluid">
    <!-- Page Header -->
    <x-page-header title="{{$title}}">
        <div class="col-auto float-right ml-auto">
            <a href="javascript:void(0)" class="btn add-btn" id="addTaskBtn"><i class="fa fa-plus"></i>Add Task</a>
        </div>
    </x-page-header>
    <!-- /Page Header -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped custom-table mb-0 datatable">
                <thead>
                    <tr>
                        <th>Task Name</th>
                        <th>Project</th>
                        <th>Assigned To</th>
                        <th>Description</th>
                        <th>File</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody id="task-list">
                    @foreach($tasks as $task)
                    <tr>
                        <td class="task-name">{{ $task->name }}</td>
                        <td class="project">{{ $task->project->name }}</td>
                        <td class="assigned-to">{{ $task->assignedEmployee->name }}</td>
                        <td class="description">{{ $task->description }}</td>
                        <td class="file-path">{{ $task->file_path }}</td>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input task-status" type="checkbox" id="taskStatus_{{ $task->id }}" {{ $task->completed ? 'checked' : '' }}>
                                <label class="form-check-label" for="taskStatus_{{ $task->id }}">Completed</label>
                            </div>
                        </td>
                        <td>
                            <!-- Add action buttons here (e.g., edit, delete) -->
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('modals')
<!-- Add Task Modal -->
<!-- Add Task Modal -->
<!-- Add Task Modal -->
<div id="addTaskModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Task</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addTaskForm">
                    <div class="form-group">
                        <label for="taskName">Task Name</label>
                        <input type="text" name="taskName" class="form-control" id="taskName" required>
                    </div>
                    <div class="form-group">
                        <label for="project">Select Project</label>
                        <select class="form-control" id="project" name="project">
                            <option value="">Select Project...</option>
                            @foreach($projects as $project)
                                <option value="{{ $project->id }}">{{ $project->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="assignTo">Select Employee</label>
                        <select class="form-control" id="assignTo" name="assignTo">
                            <option value="">Select Employee...</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="fileInput" name="fileInput" accept="image/*, .pdf, .docx">
                            <label class="custom-file-label" for="fileInput">Choose file</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="isActive" name="isActive" value="1" checked>
                            <label class="form-check-label" for="isActive">
                                Active
                            </label>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-2">Add Task</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endpush

@push('page-scripts')
<script>
    $(document).ready(function() {
        var addTaskModal = $('#addTaskModal');
        var addTaskBtn = $('#addTaskBtn');
        var taskList = $('#task-list');

        // Show add task modal when add task button is clicked
        addTaskBtn.on('click', function() {
            addTaskModal.modal('show');
        });

        // Handle form submission for adding a new task
        $('#addTaskForm').on('submit', function(event) {
            event.preventDefault();
            var taskName = $('#taskName').val();
            var assignTo = $('#assignTo').val();

            // Check if task name is not empty
            if (taskName.trim() === '') {
                alert('Please enter a task name.');
                return;
            }

            // Append the new task to the task list
            var newRow = $('<tr>').append(
                $('<td>').text(taskName),
                $('<td>').text(assignTo !== '' ? $('#assignTo option:selected').text() : 'Unassigned'),
                $('<td>').addClass('text-right').append(
                    $('<button>').addClass('btn btn-danger btn-sm delete-task').text('Delete')
                )
            );
            taskList.append(newRow);

            // Clear input fields and close the modal
            $('#taskName').val('');
            $('#assignTo').val('');
            addTaskModal.modal('hide');
        });

        // Handle delete task button click
        taskList.on('click', '.delete-task', function() {
            $(this).closest('tr').remove();
        });
    });
</script>
@endpush