@extends('layouts.main')

@section('content')
<div class="main-content">
    <h5 class="mb-3">
        <i class="bi bi-eye icon-animate" style="color: #28a745;"></i>
        <span class="heading">Project Task Details</span>
    </h5>
    <hr>

    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body">
            <table class="table table-bordered">
                <tr>
                    <th>Project Name</th>
                    <td>{{ $project->name }}</td>
                </tr>
                <tr>
                    <th>Start Date</th>
                    <td>{{ $startDate }}</td>
                </tr>
                <tr>
                    <th>End Date</th>
                    <td>{{ $endDate }}</td>
                </tr>
            </table>
        </div>
    </div>

    <h6 class="mt-4">Mapped Tasks</h6>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Task Title</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach($mappings as $map)
                <tr>
                    <td>{{ $map->task->title ?? 'N/A' }}</td>
                    <td>{{ $map->task->status->name ?? 'N/A' }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <a href="{{ route('project-task.index') }}" class="btn btn-secondary mt-3">Back</a>
</div>
@endsection