@extends('admin.layout')

@section('content')

<style>
    .table tbody tr td:last-child {
        text-align: center !important;
    }
</style>
<div class="container-fluid">

    
    <!-- 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="datatables display table table-striped" style="min-width: 845px">
                        <thead class="table-primary text-nowrap">
                            <tr>
                                <th>#</th>
                                <th>Project</th>
                                <th>Task</th>
                                <th>Status</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 }}</td>
                                    <td>{{ $task->title }}</td>
                                   <td>
                                                    @if($task->status == 'reopened')
                                                        <span class="badge bg-warning text-dark">Reopened</span>
                                                    @else
                                                        <span class="badge bg-success">Completed</span>
                                                    @endif
                                                </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>
                                      <td>{{$task->total_time}}
                                    <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" style="font-weight: 600;">Assign To</label>
                            <select name="assigned_to" id="reopen_assigned_to" required
                                style="border: 2px solid #13253fff; 
                                    border-radius: 8px; 
                                    padding: 6px 10px; 
                                    font-size: 0.9rem; 
                                    background-color: #f8f9fa; 
                                    transition: all 0.3s ease;">
                                <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