@extends('layouts.app')

@section('title', 'Edit Entry — ' . config('app.name'))

@section('content')
    <div class="mx-auto max-w-md rounded-lg border border-gray-200 bg-white p-8">
        <h1 class="mb-2 text-2xl font-bold">Edit entry</h1>
        <p class="mb-6 text-gray-600">{{ $kpi->name }}</p>

        <form method="POST" action="{{ route('kpi-entries.update', $entry) }}">
            @csrf
            @method('PUT')

            <div class="mb-4">
                <label for="entry_date" class="mb-1 block font-semibold">Date</label>
                <input id="entry_date" type="date" name="entry_date" value="{{ old('entry_date', $entry->entry_date->format('Y-m-d')) }}" required
                       class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/40">
                @error('entry_date')
                    <p class="mt-1 text-sm text-red-700">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                @include('kpis._entry-value-field', ['kpi' => $kpi, 'entry' => $entry])
            </div>

            <div class="mb-6">
                <label for="notes" class="mb-1 block font-semibold">Notes <span class="font-normal text-gray-500">(optional)</span></label>
                <textarea id="notes" name="notes" rows="3"
                          class="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/40">{{ old('notes', $entry->notes) }}</textarea>
                @error('notes')
                    <p class="mt-1 text-sm text-red-700">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex gap-2">
                <button type="submit" class="cursor-pointer rounded-md bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700">Save entry</button>
                <a href="{{ route('kpis.entries.index', $kpi) }}" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 hover:bg-gray-50">Cancel</a>
            </div>
        </form>
    </div>
@endsection