@extends('layouts.panel')

@section('title','Kanban Board')

@section('content')
   <div class="content-header">
                    <div>
                        <h1 class="content-title">Kanban Board</h1>
                        <p class="text-tertiary">Görevleri sürükle-bırak ile yönetin</p>
                    </div>
                    <div class="flex items-center gap-3">
                        <select class="form-select" style="width: auto;">
                            <option>E-Ticaret Sitesi</option>
                            <option>Mobil Uygulama</option>
                            <option>Kurumsal Website</option>
                        </select>
                        <button class="btn btn-primary" data-modal="newColumnModal">
                            <i class="fas fa-plus"></i>
                            <span>Kolon Ekle</span>
                        </button>
                    </div>
                </div>

                <!-- Kanban Board -->
                <div class="kanban-container">
                    <!-- Kolon 1: Yapılacak -->
                    <div class="kanban-column" id="todoColumn">
                        <div class="column-header">
                            <div class="flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full bg-tertiary"></div>
                                <h3 class="column-title">Yapılacak</h3>
                            </div>
                            <div class="column-count">4</div>
                        </div>
                        <div class="kanban-cards" id="todoCards">
                            <!-- Kart 1 -->
                            <div class="kanban-card" draggable="true" id="card1">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-danger">Yüksek</span>
                                        <span class="badge badge-primary">Frontend</span>
                                    </div>
                                    <button class="btn-icon btn-outline" style="width: 24px; height: 24px; padding: 0;">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                </div>
                                <h4 class="card-title">Ana sayfa tasarımını tamamla</h4>
                                <p class="text-sm text-tertiary mb-3">Responsive tasarım ve mobil uyumluluk</p>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar" style="background-color: #3B82F6;">MA</div>
                                        <div class="avatar" style="background-color: #10B981;">AY</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-calendar-alt mr-1"></i>
                                        <span>15 Tem</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Kart 2 -->
                            <div class="kanban-card" draggable="true" id="card2">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-warning">Orta</span>
                                        <span class="badge badge-success">Backend</span>
                                    </div>
                                    <button class="btn-icon btn-outline" style="width: 24px; height: 24px; padding: 0;">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                </div>
                                <h4 class="card-title">API endpoint'leri oluştur</h4>
                                <p class="text-sm text-tertiary mb-3">Ürün ve kullanıcı API'ları</p>
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center gap-2">
                                        <div class="progress-container" style="width: 80px;">
                                            <div class="progress-bar" style="width: 40%"></div>
                                        </div>
                                        <span class="text-xs">2/5</span>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar">CD</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-calendar-alt mr-1"></i>
                                        <span>20 Tem</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Kart 3 -->
                            <div class="kanban-card" draggable="true" id="card3">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-success">Düşük</span>
                                        <span class="badge badge-info">Test</span>
                                    </div>
                                </div>
                                <h4 class="card-title">Unit test yaz</h4>
                                <p class="text-sm text-tertiary mb-3">Kullanıcı modülü testleri</p>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar" style="background-color: #8B5CF6;">ZK</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-calendar-alt mr-1"></i>
                                        <span>25 Tem</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-outline w-full mt-3" data-modal="newTaskModal">
                            <i class="fas fa-plus"></i>
                            <span>Görev Ekle</span>
                        </button>
                    </div>
                    
                    <!-- Kolon 2: Yapılıyor -->
                    <div class="kanban-column" id="doingColumn">
                        <div class="column-header">
                            <div class="flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full bg-primary"></div>
                                <h3 class="column-title">Yapılıyor</h3>
                            </div>
                            <div class="column-count">3</div>
                        </div>
                        <div class="kanban-cards" id="doingCards">
                            <!-- Kart 4 -->
                            <div class="kanban-card" draggable="true" id="card4">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-danger">Yüksek</span>
                                        <span class="badge badge-primary">Frontend</span>
                                    </div>
                                </div>
                                <h4 class="card-title">Ürün detay sayfası</h4>
                                <p class="text-sm text-tertiary mb-3">Galeri ve yorum bölümleri</p>
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center gap-2">
                                        <div class="progress-container" style="width: 80px;">
                                            <div class="progress-bar" style="width: 80%"></div>
                                        </div>
                                        <span class="text-xs">4/5</span>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar">AY</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-clock mr-1"></i>
                                        <span>2 gün kaldı</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Kart 5 -->
                            <div class="kanban-card" draggable="true" id="card5">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-warning">Orta</span>
                                        <span class="badge badge-success">Backend</span>
                                    </div>
                                </div>
                                <h4 class="card-title">Ödeme entegrasyonu</h4>
                                <p class="text-sm text-tertiary mb-3">Stripe API entegrasyonu</p>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar">CD</div>
                                        <div class="avatar" style="background-color: #06B6D4;">EA</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-clock mr-1"></i>
                                        <span>5 gün kaldı</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-outline w-full mt-3" data-modal="newTaskModal">
                            <i class="fas fa-plus"></i>
                            <span>Görev Ekle</span>
                        </button>
                    </div>
                    
                    <!-- Kolon 3: İncelemede -->
                    <div class="kanban-column" id="reviewColumn">
                        <div class="column-header">
                            <div class="flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full bg-warning"></div>
                                <h3 class="column-title">İncelemede</h3>
                            </div>
                            <div class="column-count">2</div>
                        </div>
                        <div class="kanban-cards" id="reviewCards">
                            <!-- Kart 6 -->
                            <div class="kanban-card" draggable="true" id="card6">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-warning">Orta</span>
                                        <span class="badge badge-primary">Frontend</span>
                                    </div>
                                </div>
                                <h4 class="card-title">Sepet sayfası tasarımı</h4>
                                <p class="text-sm text-tertiary mb-3">Responsive tasarım tamamlandı</p>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar">MA</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-clock mr-1"></i>
                                        <span>3 gündür bekliyor</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-outline w-full mt-3" data-modal="newTaskModal">
                            <i class="fas fa-plus"></i>
                            <span>Görev Ekle</span>
                        </button>
                    </div>
                    
                    <!-- Kolon 4: Tamamlandı -->
                    <div class="kanban-column" id="doneColumn">
                        <div class="column-header">
                            <div class="flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full bg-success"></div>
                                <h3 class="column-title">Tamamlandı</h3>
                            </div>
                            <div class="column-count">5</div>
                        </div>
                        <div class="kanban-cards" id="doneCards">
                            <!-- Kart 7 -->
                            <div class="kanban-card" draggable="true" id="card7">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-success">Düşük</span>
                                        <span class="badge badge-primary">Frontend</span>
                                    </div>
                                </div>
                                <h4 class="card-title">Login/Register sayfaları</h4>
                                <p class="text-sm text-tertiary mb-3">Tasarım ve validasyon tamamlandı</p>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar">AY</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-check-circle mr-1 text-success"></i>
                                        <span>Tamamlandı</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Kart 8 -->
                            <div class="kanban-card" draggable="true" id="card8">
                                <div class="flex justify-between items-start mb-2">
                                    <div class="flex items-center gap-2">
                                        <span class="badge badge-warning">Orta</span>
                                        <span class="badge badge-success">Backend</span>
                                    </div>
                                </div>
                                <h4 class="card-title">Kullanıcı authentication</h4>
                                <p class="text-sm text-tertiary mb-3">JWT token sistemi</p>
                                <div class="card-footer">
                                    <div class="flex">
                                        <div class="avatar">CD</div>
                                    </div>
                                    <div class="text-sm">
                                        <i class="far fa-check-circle mr-1 text-success"></i>
                                        <span>Tamamlandı</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-outline w-full mt-3" data-modal="newTaskModal">
                            <i class="fas fa-plus"></i>
                            <span>Görev Ekle</span>
                        </button>
                    </div>
                </div>
                
                <!-- Board İstatistikleri -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
                    <div class="card">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 rounded-lg bg-tertiary flex items-center justify-center">
                                <i class="fas fa-tasks text-primary"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">14</div>
                                <div class="text-tertiary">Toplam Görev</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
                                <i class="fas fa-play text-primary"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">3</div>
                                <div class="text-tertiary">Devam Eden</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center">
                                <i class="fas fa-search text-warning"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">2</div>
                                <div class="text-tertiary">İncelemede</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
                                <i class="fas fa-check text-success"></i>
                            </div>
                            <div>
                                <div class="text-2xl font-bold">5</div>
                                <div class="text-tertiary">Tamamlanan</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

@endsection