@extends('layouts.main')

@section('content')



<div class="container">

    <h5 class="mb-3">
            <i class="bi bi-kanban icon-animate" style="color: #6f42c1;"> </i>
            <span class="heading">Project Task Mapping</span>
        </h5>

        <hr>
        <a href="{{ route('project-task.index') }}" class="btn btn-secondary mb-3">
    ← Back to Mapped Tasks
</a>
    <form action="{{ route('project-task.store') }}" method="POST">
        @csrf

        <div class="form-group">
            <label for="project_id">Project Name</label>
            <select name="project_id" id="project_id" class="form-control" required>
                <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="start_date">Start Date</label>
            <input type="date" name="start_date" class="form-control" required>
        </div>

        <div class="form-group">
            <label for="end_date">End Date</label>
            <input type="date" name="end_date" class="form-control" required>
        </div>

        <div class="form-group">
            <label for="task_ids">Mapping Tasks</label>
            <select name="task_ids[]" id="task_ids" class="form-control " multiple required>
                <!-- Tasks will be populated dynamically -->
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Map Tasks</button>
    </form>
</div>
@endsection

@section('onPageJs')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- jQuery (required for Select2) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        $('#project_id').on('change', function() {
            const projectId = $(this).val();
            if (!projectId) return;

            $.ajax({
                url: '/get-incomplete-tasks/' + projectId,
                method: 'GET',
                success: function(data) {
                    console.log(data);
                    // alert("Project changed to: " + projectId);
                    $('#debug').html("Tasks loaded: " + data.length);
                    let $taskDropdown = $('#task_ids');
                    $taskDropdown.empty();

                    $.each(data, function(i, task) {
                        $taskDropdown.append(`<option value="${task.id}">${task.title}</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('Error loading tasks:', xhr.responseText);
                }
            });
        });
        $('#task_ids').select2({
        placeholder: "Select Tasks",
        allowClear: true,
        width: '100%'  // make it full width
    });
    });
      $(function() {


        $('.project-list-select2').select2({
            placeholder: 'Select Projects',
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endsection