@extends('layouts.winemaker')

@section('title', 'Add Vineyard Row')

@section('content')
<div class="card" style="background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,0.08);max-width:720px;margin:0 auto;">
    <h1 style="font-size:1.6rem;color:#1a365d;margin-bottom:1.5rem;">Add Vineyard Row</h1>

    <form method="POST" action="{{ route('vineyard-rows.store') }}" style="display:grid;gap:1rem;">
        @csrf
        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Variation (optional)</span>
            <select name="variety_variation_id" style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;">
                <option value="" @selected(blank(old('variety_variation_id')))>No variation assigned</option>
                @foreach ($varietyVariations as $variation)
                    <option value="{{ $variation->id }}" @selected(old('variety_variation_id') == $variation->id)>
                        {{ $variation->grapeVariety?->variety_name ?? 'Unknown' }} — {{ ucfirst($variation->color) }}
                    </option>
                @endforeach
            </select>
        </label>

        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Vine count</span>
            <input type="number" name="vine_count" min="1" required style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;">
        </label>

        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Planting year</span>
            <input type="number" name="planting_year" min="1900" max="{{ date('Y') }}" required style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;">
        </label>

        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Area (ha)</span>
            <input type="number" name="area" step="0.01" min="0" style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;">
        </label>

        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Location (x,y)</span>
            <input type="text" name="location" maxlength="255" value="{{ old('location') }}" pattern="-?\d+,-?\d+" title='Use "<x>,<y>" with integers (e.g. 12,34).' placeholder="e.g. 12,34" style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;">
            <small style="display:block;margin-top:0.35rem;color:#475569;">Format: integers only, no spaces: &lt;x&gt;,&lt;y&gt; (e.g. 12,34).</small>
        </label>

        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Status</span>
            <select name="status" required style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="replanting">Replanting</option>
                <option value="discarded">Discarded</option>
            </select>
        </label>

        <label style="display:block;">
            <span style="display:block;font-weight:600;color:#1a365d;margin-bottom:0.35rem;">Notes</span>
            <textarea name="notes" rows="3" style="width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:0.75rem;"></textarea>
        </label>

        <div style="display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;">
            <a href="{{ route('vineyard-rows.index') }}" style="color:#475569;text-decoration:none;padding:0.6rem 1.2rem;border-radius:8px;background:#e2e8f0;font-weight:600;">Cancel</a>
            <button type="submit" style="background:#2563eb;color:#fff;padding:0.6rem 1.2rem;border-radius:8px;border:none;font-weight:600;">Save</button>
        </div>
    </form>
</div>
@endsection