@extends('layouts.app')
@section('title', 'Project Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
@endpush

@section('content')

@php
    $actionsHtml = '<a class="final-btn final-btn-primary" href="'.route('projects.create').'"><i class="bi bi-plus-lg"></i> Create Project</a>';
@endphp

@include('components.page-header', [
    'title' => 'Engineering Project Control',
    'description' => 'Oversee all active and archived projects across your organization with real-time progress intelligence.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Projects' => '#'],
    'actions' => $actionsHtml,
    'stats' => [
        ['label' => 'Total Portfolios', 'value' => $projects->total(), 'icon' => 'bi-folder-fill', 'color' => 'var(--accent-cream)'],
        ['label' => 'Active Delivery', 'value' => count($projects->where('status', 'in_progress')), 'icon' => 'bi-play-circle-fill', 'color' => 'var(--accent-green)'],
        ['label' => 'Risk / Delayed', 'value' => count($projects->where('status', 'delayed')), 'icon' => 'bi-exclamation-triangle-fill', 'color' => '#ff4b4b']
    ]
])

<div class="final-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-briefcase"></i> Project Portfolio</h3>
        <span class="final-secondary-text" style="font-size: 10px; font-weight: 800; letter-spacing: 0.1em;">ORGANIZATIONAL ASSETS</span>
    </div>
    
    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th>Project Identity</th>
                    <th>Status</th>
                    <th>Task Load</th>
                    <th>Delivery Progress</th>
                    <th style="text-align: right;">Operations</th>
                </tr>
            </thead>
            <tbody>
                @forelse($projects as $project)
                <tr class="group">
                    <td>
                        <div style="font-weight: 800; font-size: 15px; color: var(--text-primary);">{{ $project->name }}</div>
                        <div style="font-size: 10px; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;">ID: #PJ-{{ str_pad($project->id, 4, '0', STR_PAD_LEFT) }}</div>
                    </td>
                    <td>
                        @php
                            $statusClass = match(strtolower($project->status)) {
                                'completed' => 'badge-whatsapp',
                                'in_progress' => 'badge-email',
                                'delayed' => 'badge-low',
                                default => 'badge-low'
                            };
                        @endphp
                        <span class="final-badge {{ $statusClass }}">{{ ucfirst($project->status) }}</span>
                    </td>
                    <td>
                        <span style="font-weight: 800; color: var(--text-primary);">{{ $project->tasks_count }}</span>
                        <span class="final-secondary-text" style="font-size: 10px; margin-left: 4px;">ACTIVE TASKS</span>
                    </td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div class="final-progress-bg" style="width: 120px;">
                                <div class="final-progress-fill" style="width: {{ $project->progress_percent }}%"></div>
                            </div>
                            <span style="font-weight: 800; font-size: 12px; color: var(--accent-color);">{{ $project->progress_percent }}%</span>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        <div style="display: flex; justify-content: flex-end; gap: 8px;">
                            <a href="{{ route('projects.edit', $project) }}" class="final-btn final-btn-secondary" style="padding: 6px 12px; font-size: 12px;">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            <form method="POST" action="{{ route('projects.destroy', $project) }}" style="display: inline;" onsubmit="return confirm('Archive this project?')">
                                @csrf @method('DELETE') 
                                <button class="final-btn final-btn-secondary" style="padding: 6px 12px; font-size: 12px; color: var(--danger-color); border-color: rgba(244, 63, 94, 0.1);">
                                    <i class="bi bi-archive"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty 
                <tr>
                    <td colspan="5">
                        <div class="final-empty-state">
                            <i class="bi bi-folder-x"></i>
                            <p>No organizational projects detected</p>
                        </div>
                    </td>
                </tr> 
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($projects->hasPages())
<div style="margin-top: 32px;">
    {{ $projects->links() }}
</div>
@endif

@endsection