@extends('layouts.admin')
@section('title', 'Add Measurement - ' . $customer->full_name)
@section('page-title', 'Add Measurement')
@section('content')
<div class="max-w-3xl">
    <div class="mb-4"><a href="{{ route('customers.show', $customer) }}" class="text-sm text-slate-600 hover:text-slate-900">&larr; {{ $customer->full_name }}</a></div>
    <form action="{{ route('customers.measurement-profiles.store', $customer) }}" method="POST" class="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        @csrf
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label for="measurement_template_id" class="block text-sm font-medium text-slate-700">Template *</label>
                <select name="measurement_template_id" id="measurement_template_id" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                    <option value="">Select template</option>
                    @foreach($templates as $t)<option value="{{ $t->id }}" {{ old('measurement_template_id') == $t->id ? 'selected' : '' }}>{{ $t->template_name }} ({{ $t->garment_type }})</option>@endforeach
                </select>
            </div>
            <div>
                <label for="date_taken" class="block text-sm font-medium text-slate-700">Date taken *</label>
                <input type="date" name="date_taken" id="date_taken" value="{{ old('date_taken', now()->format('Y-m-d')) }}" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
            </div>
            <div class="sm:col-span-2">
                <label for="notes" class="block text-sm font-medium text-slate-700">Notes</label>
                <textarea name="notes" id="notes" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">{{ old('notes') }}</textarea>
            </div>
            <div class="sm:col-span-2">
                <label for="fitting_remarks" class="block text-sm font-medium text-slate-700">Fitting remarks</label>
                <textarea name="fitting_remarks" id="fitting_remarks" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">{{ old('fitting_remarks') }}</textarea>
            </div>
        </div>
        @if($templates->isNotEmpty())
        @php $selectedTemplateId = old('measurement_template_id', $templates->first()->id); $selectedTemplate = $templates->firstWhere('id', (int)$selectedTemplateId) ?? $templates->first(); @endphp
        <div class="border-t border-slate-200 pt-6">
            <h3 class="text-sm font-semibold text-slate-800 mb-3">Measurements for template: {{ $selectedTemplate->template_name }}</h3>
            <div class="grid gap-4 sm:grid-cols-2">
                @foreach($selectedTemplate->fields as $field)
                <div>
                    <label for="val_{{ $field->id }}" class="block text-sm font-medium text-slate-700">{{ $field->label }}{{ $field->is_required ? ' *' : '' }} @if($field->unit)<span class="text-slate-500">({{ $field->unit }})</span>@endif</label>
                    <input type="{{ $field->input_type === 'decimal' ? 'number' : $field->input_type }}" step="{{ $field->input_type === 'decimal' ? '0.01' : '1' }}" name="values[{{ $field->id }}]" id="val_{{ $field->id }}" value="{{ $sourceProfile?->getValueByFieldId($field->id) ?? old('values.'.$field->id) }}" {{ $field->is_required ? 'required' : '' }} class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                </div>
                @endforeach
            </div>
            @if($selectedTemplate->fields->isEmpty())<p class="mt-2 text-sm text-amber-600">This template has no fields. Add fields in Measurement Templates → Edit.</p>@endif
        </div>
        @endif
        <div class="flex gap-3">
            <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Save Measurement</button>
            <a href="{{ route('customers.measurement-profiles.index', $customer) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
        </div>
    </form>
</div>
@endsection