@extends('layouts.app')

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

@push('styles')
<style>
/* Base Layout */
.loadPages01 { 
    padding: 0;
    background: #f5f7fa;
}

.helpdesk-page01 {
    min-height: calc(100vh - 158px);
    height: calc(100vh - 158px);
    overflow-y: auto;
    background-color: #f5f7fa;
}

/* Page Header - Zoho Style */
.page-header-section {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    padding: 20px 32px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.main-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.2;
}

.header-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.zoho-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-template {
    background: #e0f2fe;
    color: #0369a1;
}

/* Action Toolbar */
.action-toolbar {
    display: flex;
    gap: 8px;
}

.btn-zoho {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-zoho:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn-zoho-primary {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-zoho-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* Meta Info Bar */
.meta-info-bar {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    flex-wrap: wrap;
}

.meta-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.meta-info-item i {
    font-size: 16px;
    color: #9ca3af;
}

.meta-info-item strong {
    color: #374151;
    font-weight: 500;
}

/* Main Content Area */
.content-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px;
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* Task List Section */
.section-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e8eaed;
    overflow: hidden;
}

.section-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e8eaed;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title-text {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-badge {
    background: #e5e7eb;
    color: #4b5563;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.section-body {
    padding: 0;
}

/* Task Item - Zoho Style */
.task-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s;
    cursor: pointer;
}

.task-item:hover {
    background: #f9fafb;
}

.task-item:last-child {
    border-bottom: none;
}

.task-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    flex-shrink: 0;
}

.task-content {
    flex: 1;
    min-width: 0;
}

.task-title-link {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}

.task-title-link:hover {
    color: #3b82f6;
}

.task-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.task-badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-id {
    color: #6b7280;
    font-size: 12px;
    font-family: monospace;
}

/* Sidebar Panels */
.info-panel {
    background: white;
    border-radius: 8px;
    border: 1px solid #e8eaed;
    padding: 20px;
}

.info-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.info-row {
    margin-bottom: 16px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

.info-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

/* Progress Bar - Zoho Style */
.progress-container {
    margin-top: 8px;
}

.progress-bar-zoho {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
}

/* Description Box */
.description-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

/* Empty State */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

.empty-text {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 20px;
}

/* Status Pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-section {
        padding: 16px 20px;
    }
    
    .content-container {
        padding: 16px 20px;
    }
    
    .header-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .action-toolbar {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Scrollbar Styling */
.helpdesk-page01::-webkit-scrollbar {
    width: 8px;
}

.helpdesk-page01::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.helpdesk-page01::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.helpdesk-page01::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
@endpush

@section('content')
<div class="loadPages01">
    <div class="col-lg-12 viewPage helpdesk-page01">
        
        <!-- PAGE HEADER -->
        <div class="page-header-section">
            <div class="header-title-row">
                <div class="title-with-icon">
                    <div class="title-icon">
                        <i class="las la-list-ul"></i>
                    </div>
                    <div>
                        <h1 class="main-title">{{ $taskList->title }}</h1>
                    </div>
                </div>
                
                <div class="action-toolbar">
                    @can('task_lists.edit')
                        <a href="{{ route('task-lists.edit', crypt_encrypt($taskList->id)) }}" 
                           class="btn-zoho">
                            <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-zoho btn-zoho-primary">
                            <i class="las la-plus"></i> Add Task
                        </a>
                    @endcan
                </div>
            </div>
            
            <div class="meta-info-bar">
                @if($taskList->is_template)
                    <span class="zoho-badge badge-template">
                        <i class="las la-bookmark"></i> Template
                    </span>
                @endif
                
                <div class="meta-info-item">
                    <i class="las la-tasks"></i>
                    <strong>{{ $taskList->tasks->count() }}</strong> Tasks
                </div>
                
                @if($taskList->category)
                    <div class="meta-info-item">
                        <i class="las la-folder"></i>
                        {{ $taskList->category->name }}
                    </div>
                @endif
                
                @if($taskList->due_date)
                    <div class="meta-info-item">
                        <i class="las la-calendar"></i>
                        Due: <strong>{{ $taskList->due_date->format('d M Y') }}</strong>
                    </div>
                @endif
                
                <div class="meta-info-item">
                    <i class="las la-user"></i>
                    {{ $taskList->creator->name ?? 'Unknown' }}
                </div>
            </div>
        </div>
        
        <!-- MAIN CONTENT -->
        <div class="content-container">
            <div class="content-grid">
                
                <!-- LEFT COLUMN - Tasks -->
                <div>
                    <div class="section-card">
                        <div class="section-header">
                            <h2 class="section-title-text">
                                <i class="las la-check-circle"></i>
                                Tasks
                                <span class="count-badge">{{ $taskList->tasks->count() }}</span>
                            </h2>
                        </div>
                        
                        <div class="section-body">
                            @if($taskList->tasks->count())
                                @foreach($taskList->mainTasks as $task)
                                    <div class="task-item">
                                        <div class="task-checkbox"></div>
                                        
                                        <div class="task-content">
                                            <a href="{{ route('tasks.show', crypt_encrypt($task->id)) }}" 
                                               class="task-title-link">
                                                {{ $task->title }}
                                            </a>
                                            
                                            <div class="task-meta">
                                                <span class="task-id">{{ $task->tsk_id }}</span>
                                                
                                                @if($task->status)
                                                    <span class="task-badge" 
                                                          style="background-color: {{ $task->status->color }}15; color: {{ $task->status->color }};">
                                                        {{ $task->status->name }}
                                                    </span>
                                                @endif
                                                
                                                @if($task->priority)
                                                    <span class="task-badge" 
                                                          style="background-color: {{ $task->priority->color }}15; color: {{ $task->priority->color }};">
                                                        {{ $task->priority->name }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="las la-tasks"></i>
                                    </div>
                                    <div class="empty-title">No tasks yet</div>
                                    <div class="empty-text">Get started by adding your first task</div>
                                    
                                    @can('task_lists.create')
                                        <a href="{{ route('tasks.create', ['task_list_id' => crypt_encrypt($taskList->id)]) }}" 
                                           class="btn-zoho btn-zoho-primary">
                                            <i class="las la-plus"></i> Add First Task
                                        </a>
                                    @endcan
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                
                <!-- RIGHT COLUMN - Details -->
                <div>
                    <!-- Progress Panel -->
                    <div class="info-panel" style="margin-bottom: 24px;">
                        <h3 class="info-panel-title">Progress</h3>
                        
                        <div class="progress-container">
                            <div class="progress-bar-zoho">
                                <div class="progress-fill" style="width: {{ $taskList->progress }}%"></div>
                            </div>
                            <div class="progress-text">
                                <span>{{ $taskList->tasks->where('status.state', 0)->count() }} of {{ $taskList->tasks->count() }} completed</span>
                                <span>{{ $taskList->progress }}%</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Details Panel -->
                    <div class="info-panel" style="margin-bottom: 24px;">
                        <h3 class="info-panel-title">Details</h3>
                        
                        @if($taskList->status)
                            <div class="info-row">
                                <div class="info-label">Status</div>
                                <div class="info-value">
                                    <span class="status-pill" style="background-color: {{ $taskList->status->color }}15; color: {{ $taskList->status->color }};">
                                        <span class="status-dot" style="background-color: {{ $taskList->status->color }};"></span>
                                        {{ $taskList->status->name }}
                                    </span>
                                </div>
                            </div>
                        @endif
                        
                        @if($taskList->priority)
                            <div class="info-row">
                                <div class="info-label">Priority</div>
                                <div class="info-value">
                                    <span class="status-pill" style="background-color: {{ $taskList->priority->color }}15; color: {{ $taskList->priority->color }};">
                                        <span class="status-dot" style="background-color: {{ $taskList->priority->color }};"></span>
                                        {{ $taskList->priority->name }}
                                    </span>
                                </div>
                            </div>
                        @endif
                        
                        @if($taskList->due_date)
                            <div class="info-row">
                                <div class="info-label">Due Date</div>
                                <div class="info-value">{{ $taskList->due_date->format('d M Y h:i A') }}</div>
                            </div>
                        @endif
                        
                        <div class="info-row">
                            <div class="info-label">Created</div>
                            <div class="info-value">{{ $taskList->created_at->format('d M Y h:i A') }}</div>
                        </div>
                        
                        <div class="info-row">
                            <div class="info-label">Created By</div>
                            <div class="info-value">{{ $taskList->creator->name ?? 'Unknown' }}</div>
                        </div>
                    </div>
                    
                    <!-- Description Panel -->
                    @if($taskList->description)
                        <div class="info-panel">
                            <h3 class="info-panel-title">Description</h3>
                            <div class="description-box">
                                {{ $taskList->description }}
                            </div>
                        </div>
                    @endif
                </div>
                
            </div>
        </div>
        
    </div>
</div>
@endsection