{{-- resources/views/todos/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Todo Saya - Pengingat Todo')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-list-task me-2"></i>NOTIFIKASI PENGINGAT</h2>
    <a href="{{ route('todos.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-2"></i>Tambah pengingat
    </a>
</div>

<!-- Filter dan Pencarian -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('todos.index') }}" class="row g-3">
            <div class="col-md-4">
                <label for="search" class="form-label">Cari</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Cari Pengingat...">
            </div>
            <div class="col-md-3">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>Semua</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Tertunda</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Selesai</option>
                    <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>Terlambat</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="priority" class="form-label">Prioritas</label>
                <select class="form-select" id="priority" name="priority">
                    <option value="all" {{ request('priority') == 'all' ? 'selected' : '' }}>Semua</option>
                    <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>Tinggi</option>
                    <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Sedang</option>
                    <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Rendah</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-outline-primary">
                        <i class="bi bi-search"></i> Filter
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Daftar Todo -->
@if($todos->count() > 0)
    <div class="row">
        @foreach($todos as $todo)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card todo-card priority-{{ $todo->priority }} 
                           {{ $todo->status === 'completed' ? 'todo-completed' : '' }}
                           {{ $todo->isOverdue() ? 'overdue' : '' }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="form-check">
                                <input class="form-check-input todo-checkbox" type="checkbox" 
                                       data-todo-id="{{ $todo->id }}"
                                       {{ $todo->status === 'completed' ? 'checked' : '' }}>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{{ route('todos.show', $todo) }}">
                                            <i class="bi bi-eye me-2"></i>Lihat
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('todos.edit', $todo) }}">
                                            <i class="bi bi-pencil me-2"></i>Edit
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <form action="{{ route('todos.destroy', $todo) }}" method="POST" 
                                              onsubmit="return confirm('Yakin ingin menghapus todo ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="dropdown-item text-danger">
                                                <i class="bi bi-trash me-2"></i>Hapus
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <h5 class="card-title">{{ $todo->title }}</h5>
                        
                        @if($todo->description)
                            <p class="card-text text-muted">{{ Str::limit($todo->description, 100) }}</p>
                        @endif

                        <div class="mb-3">
                            <small class="text-muted">
                                <i class="bi bi-calendar me-1"></i>
                                {{ \Carbon\Carbon::parse($todo->due_date)->format('d M Y') }}
                                <i class="bi bi-clock ms-2 me-1"></i>
                                {{ \Carbon\Carbon::parse($todo->due_time)->format('H:i') }}
                            </small>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <span class="badge bg-{{ $todo->getPriorityColor() }}">
                                {{ ucfirst(__($todo->priority)) }}
                            </span>
                            
                            @if($todo->isOverdue())
                                <span class="badge bg-danger">
                                    <i class="bi bi-exclamation-triangle me-1"></i>Terlambat
                                </span>
                            @elseif($todo->isDueToday())
                                <span class="badge bg-warning">
                                    <i class="bi bi-clock me-1"></i>Jatuh Tempo Hari Ini
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@else
    <div class="text-center py-5">
        <i class="bi bi-clipboard-x text-muted" style="font-size: 4rem;"></i>
        <h4 class="text-muted mt-3">Tidak ada pengingat</h4>
        <p class="text-muted">Buat pengingat pertamamu untuk memulai!</p>
        <a href="{{ route('todos.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-2"></i>Buat Pengingat
        </a>
    </div>
@endif
@endsection