@extends('layouts.app')

@section('title', $taskList->title)

@push('styles')
<style>
   .viewPageTabs .tab-content-box { height: calc(100vh - 100px); overflow: hidden!important; }
   .mail-view.personal-div01 { overflow: hidden!important; overflow-y: auto!important; border-bottom: 0!important; }
   .message-body { height: 34rem!important; }
   .home_1 { border-bottom: 0!important; }
   .task-item { border-left: 3px solid #dee2e6; padding-left: 15px; margin: 10px 0; }
   .task-item.completed { border-left-color: #28a745; background-color: #f8fff9; }
   .task-item.in-progress { border-left-color: #007bff; background-color: #f0f8ff; }
   .subtask-item { margin-left: 20px; border-left: 2px solid #e9ecef; padding-left: 10px; }
   .progress-sm { height: 15px; }
</style>
@endpush

@section('content')
<div class="loadPages01">
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      <div class="align-items-stretch">
         <div class="card bd-0 navtab-card01 viewPageTabs">
            <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab overflow-auto">
               <div id="azTab1" class="az-tab-pane active">
                  <div class="mail-view personal-div01 mx-2 bg-white">
                     <div class="message-body py-3 px-2">
                        <!-- Header with Actions -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                           <h5 class="mb-0 groupTitle">{{ $taskList->title }}
                              @if($taskList->is_template)
                                 <span class="badge badge-info ml-2">Template</span>
                              @endif
                           </h5>
                           <div class="action-buttons">
                              @can('task_lists.edit')
                              <a href="{{ route('task-lists.edit', crypt_encrypt($taskList->id)) }}" class="btn btn-sm btn-primary">
                                 <i class="las la-edit"></i> Edit
                              </a>
                              @endcan
                              @can('task_lists.create')
                              <a href="{{ route('tasks.create', ['task_list_id' => crypt_encrypt($taskList->id)]) }}" class="btn btn-sm btn-success ml-1">
                                 <i class="las la-plus"></i> Add Task
                              </a>
                              @endcan
                           </div>
                        </div>

                        <div class="row">
                           <!-- Left Side - Task List Details -->
                           <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                              <div class="group">
                                 <!-- Basic Information -->
                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Description:</label>
                                    <label class="col-lg-8">
                                       <p class="form-control-plaintext">{{ $taskList->description ?: 'No description' }}</p>
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Due Date:</label>
                                    <label class="col-lg-8">
                                       <p class="form-control-plaintext">
                                          {{ $taskList->due_date ? $taskList->due_date->format('M d, Y h:i A') : 'Not set' }}
                                       </p>
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Priority:</label>
                                    <label class="col-lg-8">
                                       @if($taskList->priority)
                                          <span class="badge" style="background-color: {{ $taskList->priority->color }}">
                                             {{ $taskList->priority->name }}
                                          </span>
                                       @else
                                          <p class="form-control-plaintext">Not set</p>
                                       @endif
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Status:</label>
                                    <label class="col-lg-8">
                                       @if($taskList->status)
                                          <span class="badge" style="background-color: {{ $taskList->status->color }}">
                                             {{ $taskList->status->name }}
                                          </span>
                                       @else
                                          <p class="form-control-plaintext">Not set</p>
                                       @endif
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Category:</label>
                                    <label class="col-lg-8">
                                       <p class="form-control-plaintext">{{ $taskList->category ? $taskList->category->name : 'Not set' }}</p>
                                    </label>
                                 </div>
                              </div>
                           </div>

                           <!-- Right Side - Progress & Metadata -->
                           <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                              <div class="group">
                                 <!-- Progress -->
                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Progress:</label>
                                    <label class="col-lg-8">
                                       <div class="progress progress-sm">
                                          <div class="progress-bar" role="progressbar" 
                                               style="width: {{ $taskList->progress }}%;" 
                                               aria-valuenow="{{ $taskList->progress }}" 
                                               aria-valuemin="0" aria-valuemax="100">
                                             {{ $taskList->progress }}%
                                          </div>
                                       </div>
                                       <small class="text-muted">{{ $taskList->tasks->where('status.state', 0)->count() }} of {{ $taskList->tasks->count() }} tasks completed</small>
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Total Tasks:</label>
                                    <label class="col-lg-8">
                                       <p class="form-control-plaintext">{{ $taskList->tasks->count() }}</p>
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Created By:</label>
                                    <label class="col-lg-8">
                                       <p class="form-control-plaintext">{{ $taskList->creator ? $taskList->creator->name : 'Unknown' }}</p>
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Created At:</label>
                                    <label class="col-lg-8">
                                       <p class="form-control-plaintext">{{ $taskList->created_at->format('M d, Y h:i A') }}</p>
                                    </label>
                                 </div>

                                 <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Status:</label>
                                    <label class="col-lg-8">
                                       @if($taskList->active)
                                          <span class="badge badge-success">Active</span>
                                       @else
                                          <span class="badge badge-danger">Inactive</span>
                                       @endif
                                    </label>
                                 </div>

                                 <!-- Associated Tickets -->
                                 {{-- <div class="row mb-2">
                                    <label class="col-lg-4 items-label">Linked Tickets:</label>
                                    <label class="col-lg-8">
                                       @if($taskList->tickets->count() > 0)
                                          @foreach($taskList->tickets as $ticket)
                                             <a href="{{ route('helpdesk.tickets.show', crypt_encrypt($ticket->id)) }}" class="badge badge-info mr-1">
                                                {{ $ticket->r_id }}
                                             </a>
                                          @endforeach
                                       @else
                                          <p class="form-control-plaintext">No linked tickets</p>
                                       @endif
                                    </label>
                                 </div> --}}
                              </div>
                           </div>
                        </div>

                        <!-- Tasks Section -->
                        <hr>
                        <h6 class="mb-3">Tasks ({{ $taskList->tasks->count() }})</h6>
                        
                        @if($taskList->tasks->count() > 0)
                           <div id="tasksContainer">
                              @foreach($taskList->mainTasks as $task)
                                 @include('admin.tasks.task-lists.components.task-item', ['task' => $task, 'level' => 0])
                              @endforeach
                           </div>
                        @else
                           <div class="text-center py-4">
                              <i class="las la-tasks la-3x text-muted"></i>
                              <p class="text-muted mt-2">No tasks yet</p>
                              @can('task_lists.create')
                              <a href="{{ route('tasks.create', ['task_list_id' => crypt_encrypt($taskList->id)]) }}" class="btn btn-sm btn-primary">
                                 <i class="las la-plus"></i> Add First Task
                              </a>
                              @endcan
                           </div>
                        @endif
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
   // Task status updates can be added here later
   console.log('Task list detail loaded');
});
</script>
@endpush