{{-- resources/views/client/projects/index.blade.php --}}
@extends('client.layouts.client')
@section('title','My Projects')
@section('page-title','My Projects')

@section('client-content')

@if($projects->count())
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;">
    @foreach($projects as $p)
    <a href="{{ route('client.projects.show',$p) }}" class="card" style="text-decoration:none;display:flex;flex-direction:column;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
        {{-- Status bar --}}
        <div style="height:4px;background:{{ $p->status_color }};border-radius:12px 12px 0 0;"></div>
        <div style="padding:1.25rem;flex:1;display:flex;flex-direction:column;">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;margin-bottom:0.75rem;">
                <h3 style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);line-height:1.25;">{{ $p->title }}</h3>
                <span class="pill pill-{{ $p->status }}" style="flex-shrink:0;">{{ ucfirst(str_replace('_',' ',$p->status)) }}</span>
            </div>
            @if($p->description)
            <p style="font-size:0.78rem;color:#64748b;line-height:1.6;flex:1;margin-bottom:1rem;">{{ Str::limit($p->description,100) }}</p>
            @endif

            <div style="margin-top:auto;">
                {{-- Progress --}}
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.4rem;">
                    <span style="font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;">Progress</span>
                    <span style="font-size:0.72rem;font-weight:700;color:var(--ink);">{{ $p->progress }}%</span>
                </div>
                <div class="progress-track">
                    <div class="progress-fill" style="width:{{ $p->progress }}%;background:{{ $p->status_color }};"></div>
                </div>

                {{-- Meta row --}}
                <div style="display:flex;align-items:center;justify-content:space-between;margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid var(--border);">
                    <div style="display:flex;align-items:center;gap:0.35rem;">
                        @php $done = $p->milestones->where('completed_at','!=',null)->count(); $total = $p->milestones->count(); @endphp
                        @if($total > 0)
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#94a3b8" style="width:0.75rem;height:0.75rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                        <span style="font-size:0.68rem;color:#94a3b8;">{{ $done }}/{{ $total }} milestones</span>
                        @endif
                    </div>
                    @if($p->deadline)
                    <span style="font-size:0.68rem;color:{{ $p->deadline->isPast() && $p->status!=='completed' ? '#dc2626' : '#94a3b8' }};">
                        Due {{ $p->deadline->format('d M Y') }}
                    </span>
                    @endif
                </div>
            </div>
        </div>
    </a>
    @endforeach
</div>
@else
<div style="text-align:center;padding:4rem;border:1.5px dashed var(--border);border-radius:12px;">
    <p style="font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;margin-bottom:0.5rem;">No projects yet</p>
    <p style="font-size:0.85rem;color:#94a3b8;max-width:26rem;margin:0 auto;">Once KiruDev starts working on your project, it will appear here with real-time progress and milestone tracking.</p>
</div>
@endif

@endsection