@extends('layouts.main')

@section('content')
    <div class="main-content">
        <h5 class="mb-3">
            <i class="bi bi-kanban icon-animate" style="color: #6f42c1;"> </i>
            <span class="heading">Mapped Project Tasks</span>
        </h5>

        <hr>
        <div class="card shadow-sm mb-4 border-0">
            <div class="card-body">
                <form method="GET" action="{{ route('project-task.index') }}" id="filterForm">
                    <div class="form-row">
                        <!-- Project List -->

               


                    <div class="form-group col-md-3">
                        <label><i class="fas fa-project-diagram text-info"></i> Project List</label>
                        {!! form_dropdown(
                            'project_list',
                            $data['project_id_list'],
                            request('project_list', []),
                            "multiple='multiple' class='form-control project-list-select2' id='project_list'"
                        ) !!}
                    </div>
                        <!-- Start Date -->
                        <div class="form-group col-md-2">
                            <label><i class="fas fa-calendar-alt text-success"></i> Start Date</label>
                           <input type="date" name="filter_start_date" value="{{ $data['start_date'] ?? '' }}" class="form-control rounded" />
                        </div>

                        <!-- End Date -->
                        <div class="form-group col-md-2">
                            <label><i class="fas fa-calendar-check text-danger"></i> End Date</label>
                            <input type="date" name="filter_end_date" value="{{ $data['end_date'] ?? '' }}" class="form-control rounded" />
                        </div>

                        <!-- Filter Button -->
                        <div class="form-group col-md-2" style="margin-top: 30px;">
                            <button type="submit" class="btn btn-primary btn-block rounded">
                                Apply
                            </button>
                        </div>
                         <div class="form-group col-md-2" style="margin-top: 30px;">
                            <a href="{{ route('project-task.index') }}" class="btn btn-secondary btn-block rounded">
                                Clear
                            </a>
                            
                        </div>

                    </div>
                </form>
            </div>
        </div>
        <hr>
        <a href="{{ route('project-task.create') }}" class="btn btn-primary mb-3">
            + Map New Task to Project
        </a>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Project Name</th>
                    <th>Start Date</th>
                    <th>End Date</th>

                    <th>Achieve Target (%)</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {{-- @foreach ($mappings as $group) --}}
                @forelse ($mappings as $group)
                    @php
                        $first = $group->first();
                        $projectName = $first->project->name ?? 'N/A';
                        $startDate = $first->start_date;
                        $endDate = $first->end_date;
                        $totalTasks = $group->count();
                        $completedTasks = $group
                            ->filter(function ($m) use ($completedStatusId) {
                                return $m->task->status_id == $completedStatusId;
                            })
                            ->count();
                        $percentage = $totalTasks > 0 ? round(($completedTasks / $totalTasks) * 100, 2) : 0;
                    @endphp
                    <tr>
                        <td>{{ $projectName }}</td>
                        <td>{{ $startDate }}</td>
                        <td>{{ $endDate }}</td>

                        <td>{{ $percentage }}%</td>
                        <td>
                            <a href="{{ route('project-task.edit', $first->project_id . '|' . $startDate . '|' . $endDate) }}"
                                class="btn btn-sm btn-warning">Edit</a>

                                <a href="{{ route('project-task.view', $first->project_id . '|' . $startDate . '|' . $endDate) }}"
        class="btn btn-sm btn-info">View</a>
                        </td>
                    </tr>
                    @empty
<tr>
    <td colspan="5" class="text-center text-muted">No mappings found for the selected filter.</td>
</tr>
                @endforelse
            </tbody>
        </table>

    </div>
@endsection
@section('onPageJs')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>

        $(function() {


        $('.project-list-select2').select2({
            placeholder: 'Select Projects',
            allowClear: true,
            width: '100%'
        });
    });

</script>


@endsection