@extends('crm.layouts.app')

@section('title', 'Maintenance Log · '.$log->title)

@section('content')
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-8">

    <div class="sm:flex sm:items-start sm:justify-between mb-8">
        <div>
            <a href="{{ route('crm.equipment-maintenance.show', $log->equipment) }}" class="text-sm font-medium text-gray-500 hover:text-gray-700">
                &larr; {{ $log->equipment?->equipment_name ?? 'Equipment' }}
            </a>
            <h1 class="mt-2 text-2xl font-semibold text-gray-900">{{ $log->title }}</h1>
            <p class="mt-1 text-sm text-gray-600">
                {{ ucfirst(str_replace('_', ' ', $log->maintenance_type ?? 'maintenance')) }}
            </p>
        </div>
        <div class="mt-4 flex items-center gap-3 sm:mt-0">
            <span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-inset
                @if($log->status === 'completed') bg-green-50 text-green-700 ring-green-600/20
                @elseif($log->status === 'overdue') bg-red-50 text-red-700 ring-red-600/20
                @else bg-yellow-50 text-yellow-800 ring-yellow-600/20 @endif">
                {{ ucfirst($log->status ?? 'scheduled') }}
            </span>
            @if($log->status !== 'completed')
                <form method="POST" action="{{ route('crm.equipment-maintenance.log.complete', $log) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        Mark complete
                    </button>
                </form>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-md bg-green-50 p-4 text-sm font-medium text-green-800">{{ session('success') }}</div>
    @endif

    <div class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        <dl class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
            @foreach([
                'Scheduled' => $log->scheduled_date?->format('M j, Y'),
                'Completed' => $log->completed_date?->format('M j, Y'),
                'Assigned to' => $log->assignedTo?->name,
                'Completed by' => $log->completedBy?->name,
                'Cost' => $log->cost !== null ? '$'.number_format($log->cost, 2) : null,
                'Next due' => $log->next_due_date?->format('M j, Y'),
            ] as $label => $value)
                <div>
                    <dt class="text-sm text-gray-500">{{ $label }}</dt>
                    <dd class="mt-0.5 text-sm font-medium text-gray-900">{{ $value ?: '—' }}</dd>
                </div>
            @endforeach
        </dl>

        @if($log->description)
            <div class="mt-6 border-t border-gray-100 pt-4">
                <dt class="text-sm text-gray-500">Description</dt>
                <dd class="mt-1 whitespace-pre-line text-sm text-gray-900">{{ $log->description }}</dd>
            </div>
        @endif

        @if($log->completion_notes)
            <div class="mt-4 border-t border-gray-100 pt-4">
                <dt class="text-sm text-gray-500">Completion notes</dt>
                <dd class="mt-1 whitespace-pre-line text-sm text-gray-900">{{ $log->completion_notes }}</dd>
            </div>
        @endif

        @if(!empty($log->checklist))
            <div class="mt-4 border-t border-gray-100 pt-4">
                <dt class="text-sm text-gray-500 mb-2">Checklist</dt>
                <ul role="list" class="space-y-1">
                    @foreach($log->checklist as $item)
                        <li class="flex items-start gap-2 text-sm text-gray-900">
                            <span class="mt-0.5 text-gray-400">{{ ($item['done'] ?? false) ? '☑' : '☐' }}</span>
                            <span>{{ $item['label'] ?? $item['task'] ?? (is_string($item) ? $item : '') }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
</div>
@endsection