@extends('layouts.app')

@section('title', $task->title)

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">{{ $task->title }}</h1>
        <p class="page-subtitle">{{ $task->type_label }} · <span style="{{ $task->is_overdue?'color:var(--danger);':'' }}">{{ $task->due_at ? $task->due_at->locale('id')->isoFormat('D MMMM YYYY, HH:mm') : 'Tanpa deadline' }}</span></p>
    </div>
    <div class="page-actions">
        @if(!in_array($task->status, ['done','cancelled']))
        <form method="POST" action="{{ route('tasks.complete', $task) }}">
            @csrf
            <button type="submit" class="btn btn-success">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                Tandai Selesai
            </button>
        </form>
        @endcan
        @can('edit tasks')
        <a href="{{ route('tasks.edit', $task) }}" class="btn btn-primary">Edit</a>
        @endcan
    </div>
</div>

<div style="display:grid;grid-template-columns:300px 1fr;gap:1.25rem;">

    {{-- Left --}}
    <div style="display:flex;flex-direction:column;gap:1rem;">
        <div class="card">
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:.875rem;">
                    <div>
                        <div class="text-small text-muted">Status</div>
                        <span class="badge badge-{{ $task->status_color }}" style="margin-top:.25rem;">{{ $task->status_label }}</span>
                        @if($task->is_overdue)<span class="badge badge-red" style="margin-left:.375rem;">Terlambat</span>@endif
                    </div>
                    <div>
                        <div class="text-small text-muted">Tipe</div>
                        <span class="badge badge-gray" style="margin-top:.25rem;">{{ $task->type_label }}</span>
                    </div>
                    <div>
                        <div class="text-small text-muted">Prioritas</div>
                        <span class="badge badge-{{ $task->priority==='high'?'red':($task->priority==='medium'?'yellow':'gray') }}" style="margin-top:.25rem;">{{ ucfirst($task->priority) }}</span>
                    </div>
                    <div>
                        <div class="text-small text-muted">Deadline</div>
                        <div style="font-size:.875rem;color:{{ $task->is_overdue?'var(--danger)':'var(--gray-800)' }};font-weight:500;margin-top:.25rem;">
                            {{ $task->due_at ? $task->due_at->locale('id')->isoFormat('D MMMM YYYY, HH:mm') : '—' }}
                        </div>
                    </div>
                    <div>
                        <div class="text-small text-muted">Assignee</div>
                        <div style="display:flex;align-items:center;gap:.5rem;margin-top:.25rem;">
                            <div style="width:24px;height:24px;border-radius:6px;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;">
                                {{ $task->assignedTo?->initials ?? '?' }}
                            </div>
                            <span style="font-size:.875rem;color:var(--gray-800);">{{ $task->assignedTo?->name ?? 'Belum diassign' }}</span>
                        </div>
                    </div>
                    <div>
                        <div class="text-small text-muted">Dibuat oleh</div>
                        <div style="font-size:.875rem;color:var(--gray-700);margin-top:.25rem;">{{ $task->createdBy?->name ?? '—' }} · {{ $task->created_at->locale('id')->isoFormat('D MMM YYYY') }}</div>
                    </div>
                    @if($task->completed_at)
                    <div>
                        <div class="text-small text-muted">Diselesaikan</div>
                        <div style="font-size:.875rem;color:var(--success);margin-top:.25rem;font-weight:500;">{{ $task->completed_at->locale('id')->isoFormat('D MMM YYYY, HH:mm') }}</div>
                    </div>
                    @endif
                </div>
                @if($task->description)
                <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gray-100);">
                    <div class="text-small text-muted">Deskripsi</div>
                    <p style="font-size:.875rem;color:var(--gray-700);line-height:1.6;margin-top:.375rem;">{{ $task->description }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Related --}}
        @if($task->contact || $task->deal)
        <div class="card">
            <div class="card-header"><span class="card-title">Terkait</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.75rem;">
                @if($task->contact)
                <div>
                    <div class="text-small text-muted" style="margin-bottom:.375rem;">Kontak</div>
                    <a href="{{ route('contacts.show', $task->contact) }}" style="display:flex;align-items:center;gap:.625rem;text-decoration:none;">
                        <div style="width:30px;height:30px;border-radius:8px;background:var(--primary-50);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;">
                            {{ strtoupper(substr($task->contact->name,0,2)) }}
                        </div>
                        <div>
                            <div style="font-size:.875rem;font-weight:500;color:var(--gray-800);">{{ $task->contact->name }}</div>
                            <div class="text-small text-muted">{{ $task->contact->phone }}</div>
                        </div>
                    </a>
                </div>
                @endif
                @if($task->deal)
                <div>
                    <div class="text-small text-muted" style="margin-bottom:.375rem;">Deal</div>
                    <a href="{{ route('deals.show', $task->deal) }}" style="display:flex;align-items:center;gap:.625rem;text-decoration:none;">
                        <div style="width:8px;height:8px;border-radius:50%;background:{{ $task->deal->stage->color ?? '#6366f1' }};flex-shrink:0;"></div>
                        <span style="font-size:.875rem;color:var(--gray-800);font-weight:500;">{{ $task->deal->title }}</span>
                    </a>
                </div>
                @endif
            </div>
        </div>
        @endif
    </div>

    {{-- Right — placeholder untuk future comments/log --}}
    <div class="card">
        <div class="card-header"><span class="card-title">Aktivitas</span></div>
        <div class="empty-state">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
            <p class="empty-state-text">Log aktivitas tugas akan muncul di sini</p>
        </div>
    </div>
</div>

@endsection