@extends('layouts.app')

@section('title', 'Projek')

@section('content')
<div class="px-4 sm:px-0">
    <div class="flex justify-between items-center">
        <h3 class="text-3xl font-bold leading-tight text-gray-900">Senarai Projek</h3>
        <a href="{{ route('projects.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
            <i class="fas fa-plus mr-2"></i>Projek Baru
        </a>
    </div>
</div>

<div class="mt-8">
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <ul class="divide-y divide-gray-200">
            @forelse($projects as $project)
            <li class="px-4 py-4 sm:px-6 hover:bg-gray-50">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <a href="{{ route('projects.show', $project) }}" class="block">
                            <p class="text-lg font-medium text-indigo-600 truncate">{{ $project->name }}</p>
                            <div class="mt-2 sm:flex sm:justify-between">
                                <div class="sm:flex">
                                    <p class="flex items-center text-sm text-gray-500">
                                        <i class="fas fa-tasks mr-2"></i>
                                        {{ $project->tasks_count }} tasks
                                    </p>
                                    <p class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                                        <i class="fas fa-ticket-alt mr-2"></i>
                                        {{ number_format($project->used_tickets, 2) }} / {{ number_format($project->total_tickets, 2) }} tiket
                                    </p>
                                </div>
                            </div>
                            <div class="mt-3">
                                <div class="relative pt-1">
                                    <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                                        <div style="width:{{ min($project->progress_percentage, 100) }}%" 
                                             class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center 
                                             @if($project->progress_percentage >= 90) bg-red-500 
                                             @elseif($project->progress_percentage >= 70) bg-yellow-500 
                                             @else bg-green-500 @endif">
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">{{ number_format($project->progress_percentage, 1) }}% digunakan • Baki: {{ number_format($project->remaining_tickets, 2) }} tiket</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="ml-4 flex-shrink-0 flex space-x-2">
                        <a href="{{ route('projects.edit', $project) }}" class="text-indigo-600 hover:text-indigo-900">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('projects.archive', $project) }}" method="POST" class="inline">
                            @csrf
                            <button type="submit" class="text-yellow-600 hover:text-yellow-900" onclick="return confirm('Arkibkan projek ini?')">
                                <i class="fas fa-archive"></i>
                            </button>
                        </form>
                        <form action="{{ route('projects.destroy', $project) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Padam projek ini? Semua task akan turut dipadam.')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </li>
            @empty
            <li class="px-4 py-8 sm:px-6 text-center text-gray-500">
                Tiada projek. <a href="{{ route('projects.create') }}" class="text-indigo-600 hover:text-indigo-800">Cipta projek baru</a>
            </li>
            @endforelse
        </ul>
    </div>
</div>
@endsection