@extends('layouts.app')
@section('title', 'Installation')
@section('breadcrumb')<a href="{{ route('installation.index') }}" class="hover:text-white">Installation</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">{{ $installation->job?->job_number }}</span>@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-5">
        <div class="card p-5">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center gap-3 mb-1">
                        <h1>Installation — {{ $installation->job?->job_number }}</h1>
                        @php $sc = match($installation->status) { 'scheduled' => 'blue', 'in_progress' => 'yellow', 'completed' => 'green', 'on_hold' => 'orange', default => 'gray' }; @endphp
                        <span class="badge badge-{{ $sc }}">{{ ucwords(str_replace('_', ' ', $installation->status)) }}</span>
                    </div>
                    <p>{{ $installation->job?->contact?->full_name }}</p>
                </div>
                <div class="text-right">
                    <div class="text-3xl font-bold text-white">{{ $installation->progress_pct ?? 0 }}%</div>
                    <div class="text-xs text-slate-500">Overall progress</div>
                </div>
            </div>
            <div class="mt-4">
                <div class="progress-bar"><div class="progress-fill" style="width: {{ $installation->progress_pct ?? 0 }}%"></div></div>
            </div>
        </div>

        @if($installation->today_progress)
        <div class="card p-5">
            <h3 class="mb-2 flex items-center gap-2"><i class="fas fa-hard-hat text-yellow-400"></i> Today's Progress</h3>
            <p class="text-sm text-blue-300">{{ $installation->today_progress }}</p>
        </div>
        @endif

        <!-- Tasks -->
        <div class="card p-5">
            <h3 class="mb-4">Installation Tasks</h3>
            <div class="space-y-3">
                @forelse($installation->tasks as $task)
                <div class="p-3 rounded-lg" style="background: #0f172a;">
                    <div class="flex items-center justify-between mb-2">
                        <div>
                            <div class="text-sm font-medium text-white">{{ $task->task }}</div>
                            <div class="text-xs text-slate-500">{{ $task->room_area }} · {{ $task->assignedTo?->name ?? 'Unassigned' }}</div>
                        </div>
                        @php $sc = match($task->status) { 'completed' => 'green', 'in_progress' => 'yellow', 'pending' => 'gray', default => 'gray' }; @endphp
                        <span class="badge badge-{{ $sc }}">{{ ucwords(str_replace('_', ' ', $task->status)) }}</span>
                    </div>
                    <div class="progress-bar"><div class="progress-fill" style="width: {{ $task->progress_pct ?? 0 }}%; {{ $sc === 'green' ? 'background: #4ade80;' : '' }}"></div></div>
                    <div class="text-xs text-slate-500 mt-1">{{ $task->progress_pct ?? 0 }}% complete</div>
                </div>
                @empty
                <p class="text-sm text-slate-500 text-center py-4">No tasks assigned</p>
                @endforelse
            </div>
        </div>

        @if($installation->notes)
        <div class="card p-5">
            <h3 class="mb-2">Notes</h3>
            <p>{{ $installation->notes }}</p>
        </div>
        @endif
    </div>

    <div class="space-y-4">
        <div class="card p-5">
            <h3 class="mb-3">Installation Details</h3>
            <div class="space-y-3">
                <div><span class="text-xs text-slate-500">Lead Installer</span><div class="text-sm text-white">{{ $installation->leadInstaller?->name ?? '—' }}</div></div>
                <div><span class="text-xs text-slate-500">Start Date</span><div class="text-sm text-white">{{ $installation->start_date?->format('d M Y') ?? '—' }}</div></div>
                <div><span class="text-xs text-slate-500">Est. Completion</span><div class="text-sm text-white">{{ $installation->estimated_completion?->format('d M Y') ?? '—' }}</div></div>
                @if($installation->actual_completion)
                <div><span class="text-xs text-slate-500">Actual Completion</span><div class="text-sm text-green-400">{{ $installation->actual_completion->format('d M Y') }}</div></div>
                @endif
                <div><span class="text-xs text-slate-500">Working Hours</span><div class="text-sm text-white">{{ $installation->working_hours ?? '—' }}</div></div>
                <div><span class="text-xs text-slate-500">Days on Site</span><div class="text-sm text-white">{{ $installation->days_on_site ?? '—' }}</div></div>
                @if($installation->quality_score)
                <div><span class="text-xs text-slate-500">Quality Score</span><div class="text-sm text-green-400">{{ $installation->quality_score }}/100</div></div>
                @endif
            </div>
        </div>

        <div class="card p-5 space-y-2">
            @if($installation->status !== 'completed')
            <form method="POST" action="{{ route('installation.complete', $installation) }}">
                @csrf
                <button type="submit" class="btn btn-success w-full justify-center"
                        onclick="return confirm('Mark this installation as complete?')">
                    <i class="fas fa-check"></i> Mark Complete
                </button>
            </form>
            @else
            <div class="text-center text-sm text-green-400 py-2"><i class="fas fa-check-circle mr-1"></i> Completed {{ $installation->actual_completion?->format('d M Y') }}</div>
            @endif
            <a href="{{ route('installation.edit', $installation) }}" class="btn btn-secondary w-full justify-center">
                <i class="fas fa-edit"></i> Edit Installation
            </a>
        </div>

        @include('partials.document-panel', [
            'documents'        => $installation->documents,
            'documentableType' => 'Installation',
            'documentableId'   => $installation->id,
        ])
    </div>
</div>
@endsection