@extends('tester.layout')

@section('content')
<style>
    .table tbody tr td:last-child {
        text-align: center !important;
    }
</style>

<div class="container-fluid">
    <h3>Tasks</h3>

    <!-- Start - Task Table -->
    <div class="col-xl-12 mt-4">
        
            <div class="card-header border-0">
                <h4 class="card-title">Completed Tasks</h4>
            </div>

            <div class="card-body table-card-body px-0 pt-0 pb-1">
                <div class="table-responsive check-wrapper">
                    <table id="datatable" class="table table-sm table-bottom-borderless">
                        <thead class="table-primary text-nowrap">
                            <tr>
                                <th>#</th>
                                <th>Project</th>
                                <th>Task</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Completed Date</th>
                                <th>Time</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody class="text-nowrap">
                            @foreach($tasks as $index => $task)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $task->project->project_type ?? 'N/A' }}</td>
                                    <td>{{ $task->title }}</td>
                                    <td>{{ \Carbon\Carbon::parse($task->start_date)->format('Y-m-d') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($task->end_date)->format('Y-m-d') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($task->completed_date)->format('Y-m-d') }}</td>
                                    
                                      @php
                                        $timeParts = explode(':', $task->total_time); // [hours, minutes, seconds]
                                        $hours = (int) $timeParts[0];
                                        $minutes = (int) $timeParts[1];

                                        $days = intdiv($hours, 24);
                                        $remainingHours = $hours % 24;
                                      @endphp

                                    <td>
                                        {{ $days }} days {{ $remainingHours }} hrs {{ $minutes }} mins
                                    </td>

                                    
                                    <td>
                                        <button 
                                            class="btn btn-sm btn-primary" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#reopenModal{{ $task->id }}">
                                            Reopen
                                        </button>
                                    </td>
                                </tr>

                                <!-- Reopen Modal -->
                                <div class="modal fade" id="reopenModal{{ $task->id }}" tabindex="-1" aria-labelledby="reopenModalLabel{{ $task->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <form action="{{ route('reopen_task', $task->id) }}" method="POST">
                                                @csrf
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="reopenModalLabel{{ $task->id }}">Reopen Task</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>

                                                <div class="modal-body">
                                                    <!-- Reason -->
                                                    <div class="mb-3">
                                                        <label for="reason{{ $task->id }}" class="form-label">Reason for Reopen</label>
                                                        <textarea 
                                                            class="form-control" 
                                                            id="reason{{ $task->id }}" 
                                                            name="reason" 
                                                            rows="3" 
                                                            required></textarea>
                                                    </div>

                                                    <!-- Assigned To -->
                                                    <div class="mb-3">
                                                        <label for="reopen_assigned_to" class="form-label fw-bold">Assign To</label>
                                                        <select 
                                                            name="assigned_to" 
                                                            id="reopen_assigned_to" 
                                                            class="form-select"
                                                            required>
                                                            <option value="">-- Select User --</option>
                                                            @foreach($users as $user)
                                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-success">Submit</button>
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        
    </div>
    <!-- End - Task Table -->
</div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#datatable').DataTable({
            language: {
                paginate: {
                    previous: '<i class="fa-solid fa-angle-left"></i>',
                    next: '<i class="fa-solid fa-angle-right"></i>'
                }
            }
        });
    });
</script>
@endsection