{{-- resources/views/admin/client-projects/show.blade.php --}}
@extends('admin.layouts.admin')
@section('title', $clientProject->title)
@section('page-title', $clientProject->title)

@section('admin-content')

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.5rem;">
    <a href="{{ route('admin.client-projects.index') }}" style="font-size:0.8rem;color:#9ca3af;text-decoration:none;">← All Projects</a>
    <div style="display:flex;gap:0.5rem;">
        <a href="{{ route('admin.clients.show',$clientProject->client) }}" class="btn btn-outline btn-sm">View Client</a>
        <a href="{{ route('admin.client-projects.edit',$clientProject) }}" class="btn btn-outline btn-sm">Edit Project</a>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 340px;gap:1rem;align-items:start;">

    {{-- Project details --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">

        {{-- Header card --}}
        <div class="admin-card">
            <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;flex-wrap:wrap;">
                <span class="pill" style="background:{{ $clientProject->status_color }}18;color:{{ $clientProject->status_color }};font-size:0.65rem;">
                    {{ ucfirst(str_replace('_',' ',$clientProject->status)) }}
                </span>
                <span style="font-size:0.75rem;color:#6b7280;">Client: <strong>{{ $clientProject->client->display_name }}</strong></span>
                @if($clientProject->deadline)
                <span style="font-size:0.75rem;color:{{ $clientProject->deadline->isPast() && $clientProject->status !== 'completed' ? '#dc2626' : '#6b7280' }};">
                    Due: {{ $clientProject->deadline->format('d M Y') }}
                </span>
                @endif
            </div>

            @if($clientProject->description)
            <p style="font-size:0.85rem;color:#374151;line-height:1.7;margin-bottom:1rem;">{{ $clientProject->description }}</p>
            @endif

            {{-- Progress bar --}}
            <div>
                <div style="display:flex;justify-content:space-between;margin-bottom:0.4rem;">
                    <span style="font-size:0.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;">Progress</span>
                    <span style="font-size:0.78rem;font-weight:700;color:#0f0f14;">{{ $clientProject->progress }}% — {{ $clientProject->progress_label }}</span>
                </div>
                <div style="height:8px;background:#f3f4f6;border-radius:999px;overflow:hidden;">
                    <div style="height:100%;width:{{ $clientProject->progress }}%;background:{{ $clientProject->status_color }};border-radius:999px;transition:width 0.5s;"></div>
                </div>
            </div>

            @if($clientProject->tech_stack && count($clientProject->tech_stack))
            <div style="margin-top:1rem;display:flex;flex-wrap:wrap;gap:0.35rem;">
                @foreach($clientProject->tech_stack as $tech)
                <span style="background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:0.2rem 0.55rem;font-size:0.68rem;font-weight:500;color:#475569;">{{ $tech }}</span>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Milestones --}}
        <div class="admin-card">
            <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;margin-bottom:1rem;">Milestones</h3>

            @forelse($clientProject->milestones as $m)
            <div style="display:flex;align-items:flex-start;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid #f8fafc;">
                <div style="width:0.9rem;height:0.9rem;border-radius:999px;margin-top:0.1rem;flex-shrink:0;
                    background:{{ $m->isCompleted() ? '#059669' : ($m->isOverdue() ? '#dc2626' : '#e2e8f0') }};
                    border:2px solid {{ $m->isCompleted() ? '#059669' : ($m->isOverdue() ? '#dc2626' : '#d1d5db') }};
                    display:flex;align-items:center;justify-content:center;">
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;">
                        <span style="font-size:0.82rem;font-weight:600;color:#0f0f14;">{{ $m->title }}</span>
                        <div style="display:flex;align-items:center;gap:0.4rem;">
                            @if($m->due_date)
                            <span style="font-size:0.65rem;color:{{ $m->isOverdue() ? '#dc2626' : '#9ca3af' }};">
                                {{ $m->isOverdue() ? '⚠ ' : '' }}{{ $m->due_date->format('d M Y') }}
                            </span>
                            @endif
                            {{-- Toggle status --}}
                            <form action="{{ route('admin.client-projects.milestones.update',[$clientProject,$m]) }}" method="POST">
                                @csrf @method('PATCH')
                                <select name="status" onchange="this.form.submit()" class="form-field" style="padding:0.2rem 0.5rem;font-size:0.65rem;width:auto;">
                                    <option value="pending"     {{ $m->status==='pending'?'selected':'' }}>Pending</option>
                                    <option value="in_progress" {{ $m->status==='in_progress'?'selected':'' }}>In Progress</option>
                                    <option value="completed"   {{ $m->status==='completed'?'selected':'' }}>Completed</option>
                                </select>
                            </form>
                        </div>
                    </div>
                    @if($m->description)
                    <p style="font-size:0.75rem;color:#6b7280;margin-top:0.2rem;">{{ $m->description }}</p>
                    @endif
                </div>
            </div>
            @empty
            <p style="font-size:0.8rem;color:#9ca3af;text-align:center;padding:1rem 0;">No milestones yet. Add one below.</p>
            @endforelse

            {{-- Add milestone form --}}
            <div style="margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #f3f4f6;">
                <h4 style="font-size:0.82rem;font-weight:700;margin-bottom:0.75rem;">Add Milestone</h4>
                <form action="{{ route('admin.client-projects.milestones.store',$clientProject) }}" method="POST">
                    @csrf
                    <div style="display:grid;gap:0.6rem;">
                        <input type="text" name="title" placeholder="Milestone title…" class="form-field" required>
                        <textarea name="description" rows="2" class="form-field" placeholder="Optional description…"></textarea>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;">
                            <input type="date" name="due_date" class="form-field">
                            <select name="status" class="form-field">
                                <option value="pending">Pending</option>
                                <option value="in_progress">In Progress</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Add Milestone</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:0.85rem;">
        <div class="admin-card">
            <h3 style="font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;margin-bottom:0.85rem;">Project Info</h3>
            <dl style="display:grid;gap:0.5rem;">
                @foreach([
                    ['Client',     $clientProject->client->display_name],
                    ['Start Date', $clientProject->start_date?->format('d M Y') ?? '—'],
                    ['Deadline',   $clientProject->deadline?->format('d M Y') ?? '—'],
                    ['Budget',     $clientProject->budget ? '₦'.number_format($clientProject->budget,0) : '—'],
                    ['Paid',       $clientProject->paid_amount ? '₦'.number_format($clientProject->paid_amount,0) : '₦0'],
                    ['Live URL',   $clientProject->live_url ?? '—'],
                ] as [$label,$value])
                <div style="display:flex;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid #f9fafb;">
                    <dt style="font-size:0.68rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;">{{ $label }}</dt>
                    <dd style="font-size:0.75rem;color:#0f0f14;font-weight:500;max-width:150px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $value }}</dd>
                </div>
                @endforeach
            </dl>
        </div>

        <div style="display:flex;flex-direction:column;gap:0.5rem;">
            <a href="{{ route('admin.client-projects.edit',$clientProject) }}" class="btn btn-primary" style="justify-content:center;">Edit Project</a>
            <form action="{{ route('admin.client-projects.destroy',$clientProject) }}" method="POST" onsubmit="return confirm('Delete this project? This cannot be undone.')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger" style="width:100%;justify-content:center;">Delete Project</button>
            </form>
        </div>
    </div>
</div>

@endsection