@extends('layouts.app')
@section('title', 'Edit Check Measure')
@section('breadcrumb')<a href="{{ route('check_measure.index') }}" class="hover:text-white">Check Measure</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <a href="{{ route('check_measure.show', $checkMeasure) }}" class="hover:text-white">{{ $checkMeasure->job?->job_number }}</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">Edit</span>
    <!-- Checklist Items Management -->
    <div class="card p-5">
        <div class="flex items-center justify-between mb-4">
            <h3>Checklist Items</h3>
            @php $total = $checkMeasure->checklistItems->count(); $done = $checkMeasure->checklistItems->where('checked', true)->count(); @endphp
            <span class="text-sm text-slate-400">{{ $done }}/{{ $total }} completed</span>
        </div>
        @if($total > 0)
        <div class="progress-bar mb-4"><div class="progress-fill" style="width: {{ $total > 0 ? ($done / $total) * 100 : 0 }}%"></div></div>
        @endif
        <div class="space-y-1 mb-4">
            @forelse($checkMeasure->checklistItems as $item)
            <div class="flex items-center gap-3 py-2 border-b border-slate-700 last:border-0 group">
                <div class="w-5 h-5 rounded flex items-center justify-center flex-shrink-0 {{ $item->checked ? 'bg-green-700' : 'bg-slate-700' }}">
                    @if($item->checked)<i class="fas fa-check text-green-300" style="font-size:10px;"></i>@endif
                </div>
                <span class="text-sm flex-1 {{ $item->checked ? 'line-through text-slate-500' : 'text-white' }}">{{ $item->item }}</span>
                @if($item->initials)
                <span class="text-xs text-slate-500 flex-shrink-0">{{ $item->initials }} · {{ $item->checked_date?->format('d M') }}</span>
                @endif
                <form method="POST" action="{{ route('check_measure.checklist_delete', [$checkMeasure, $item]) }}"
                      class="opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
                      onsubmit="return confirm('Remove this checklist item?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-red-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                </form>
            </div>
            @empty
            <p class="text-sm text-slate-500 text-center py-3">No checklist items yet.</p>
            @endforelse
        </div>
        <form method="POST" action="{{ route('check_measure.checklist_add', $checkMeasure) }}" class="flex gap-2">
            @csrf
            <input type="text" name="item" class="input flex-1 text-sm" placeholder="Add a checklist item…" required>
            <button type="submit" class="btn btn-secondary btn-sm whitespace-nowrap">
                <i class="fas fa-plus mr-1"></i> Add Item
            </button>
        </form>
    </div>

@endsection

@section('content')
<div class="max-w-2xl mx-auto">
    <form method="POST" action="{{ route('check_measure.update', $checkMeasure) }}" class="space-y-6">
        @csrf
        @method('PUT')

        @if($errors->any())
        <div class="card p-4 border-red-500 bg-red-900/20">
            <ul class="text-red-400 text-sm space-y-1">@foreach($errors->all() as $e)<li><i class="fas fa-exclamation-circle mr-1"></i>{{ $e }}</li>@endforeach</ul>
        </div>
        @endif

        <div class="card p-5">
            <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-ruler-combined text-purple-400"></i> Check Measure Details</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm text-slate-400 mb-1">Job</label>
                    <input type="text" class="input bg-slate-800 text-slate-400" value="{{ $checkMeasure->job?->job_number }} — {{ $checkMeasure->job?->contact?->first_name }} {{ $checkMeasure->job?->contact?->last_name }}" disabled>
                    <input type="hidden" name="job_id" value="{{ $checkMeasure->job_id }}">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Measurer</label>
                    <select name="measurer_id" class="input">
                        <option value="">— Unassigned —</option>
                        @foreach($measurers as $u)
                        <option value="{{ $u->id }}" {{ $checkMeasure->measurer_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Scheduled Date</label>
                    <input type="date" name="scheduled_date" value="{{ old('scheduled_date', $checkMeasure->scheduled_date?->format('Y-m-d')) }}" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Delivery Date</label>
                    <input type="date" name="delivery_date" value="{{ old('delivery_date', $checkMeasure->delivery_date?->format('Y-m-d')) }}" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Arrival Time</label>
                    <input type="time" name="arrival_time" value="{{ old('arrival_time', $checkMeasure->arrival_time) }}" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Duration (minutes)</label>
                    <input type="number" name="duration_minutes" value="{{ old('duration_minutes', $checkMeasure->duration_minutes ?? 120) }}" step="15" min="15" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Benchtop Length (m)</label>
                    <input type="number" name="benchtop_length" value="{{ old('benchtop_length', $checkMeasure->benchtop_length) }}" step="0.01" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Ceiling Height (m)</label>
                    <input type="number" name="ceiling_height" value="{{ old('ceiling_height', $checkMeasure->ceiling_height) }}" step="0.01" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Cabinet Runs</label>
                    <input type="number" name="num_cabinet_runs" value="{{ old('num_cabinet_runs', $checkMeasure->num_cabinet_runs) }}" min="0" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Variations</label>
                    <input type="number" name="num_variations" value="{{ old('num_variations', $checkMeasure->num_variations) }}" min="0" class="input">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm text-slate-400 mb-1">Notes</label>
                    <textarea name="notes" rows="3" class="input">{{ old('notes', $checkMeasure->notes) }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm text-slate-400 mb-1">Next Step</label>
                    <input type="text" name="next_step" value="{{ old('next_step', $checkMeasure->next_step) }}" class="input" placeholder="e.g. Proceed to production">
                </div>
            </div>
        </div>

        <div class="flex items-center justify-between">
            <a href="{{ route('check_measure.show', $checkMeasure) }}" class="btn btn-secondary"><i class="fas fa-arrow-left mr-2"></i>Cancel</a>
            <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Changes</button>
        </div>
    </form>
</div>

    <!-- Checklist Items Management -->
    <div class="card p-5">
        <div class="flex items-center justify-between mb-4">
            <h3>Checklist Items</h3>
            @php $total = $checkMeasure->checklistItems->count(); $done = $checkMeasure->checklistItems->where('checked', true)->count(); @endphp
            <span class="text-sm text-slate-400">{{ $done }}/{{ $total }} completed</span>
        </div>
        @if($total > 0)
        <div class="progress-bar mb-4"><div class="progress-fill" style="width: {{ $total > 0 ? ($done / $total) * 100 : 0 }}%"></div></div>
        @endif
        <div class="space-y-1 mb-4">
            @forelse($checkMeasure->checklistItems as $item)
            <div class="flex items-center gap-3 py-2 border-b border-slate-700 last:border-0 group">
                <div class="w-5 h-5 rounded flex items-center justify-center flex-shrink-0 {{ $item->checked ? 'bg-green-700' : 'bg-slate-700' }}">
                    @if($item->checked)<i class="fas fa-check text-green-300" style="font-size:10px;"></i>@endif
                </div>
                <span class="text-sm flex-1 {{ $item->checked ? 'line-through text-slate-500' : 'text-white' }}">{{ $item->item }}</span>
                @if($item->initials)
                <span class="text-xs text-slate-500 flex-shrink-0">{{ $item->initials }} · {{ $item->checked_date?->format('d M') }}</span>
                @endif
                <form method="POST" action="{{ route('check_measure.checklist_delete', [$checkMeasure, $item]) }}"
                      class="opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
                      onsubmit="return confirm('Remove this checklist item?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-red-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                </form>
            </div>
            @empty
            <p class="text-sm text-slate-500 text-center py-3">No checklist items yet.</p>
            @endforelse
        </div>
        <form method="POST" action="{{ route('check_measure.checklist_add', $checkMeasure) }}" class="flex gap-2">
            @csrf
            <input type="text" name="item" class="input flex-1 text-sm" placeholder="Add a checklist item…" required>
            <button type="submit" class="btn btn-secondary btn-sm whitespace-nowrap">
                <i class="fas fa-plus mr-1"></i> Add Item
            </button>
        </form>
    </div>

@endsection