@extends('layouts.winemaker')

@section('title', 'Plan Fertilisation')

@push('styles')
<style>
    .planned-task-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
    .planned-task-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    .row-checklist { display: grid; gap: 0.75rem; max-height: 480px; overflow-y: auto; }
    .row-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid #dce5f3; border-radius: 10px; background: #f8fafc; }
    .row-item input { transform: scale(1.1); }
    .row-item span { font-weight: 600; color: #1a365d; }
    form label { display: block; font-weight: 600; color: #1a365d; margin-bottom: 0.4rem; }
    form input, form textarea { width: 100%; border-radius: 8px; border: 1px solid #cbd5e1; padding: 0.6rem 0.75rem; margin-bottom: 0.85rem; }
    .btn-primary { border: none; border-radius: 8px; padding: 0.9rem 1.2rem; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; width: 100%; }
</style>
@endpush

@section('content')
<div class="planned-task-layout" data-page="plan-fertilisation" data-store-url="{{ route('plannedtasks.storeBulk') }}">
    <section class="planned-task-card">
        <h2 style="margin-bottom:1rem; color:#1a365d;">Affected rows</h2>
        <div class="row-checklist">
            @foreach ($rows as $row)
                <label class="row-item">
                    <input type="checkbox" name="rows[]" value="{{ $row->id }}" form="planned-task-form" {{ in_array($row->id, $selectedRowIds->all()) ? 'checked' : '' }}>
                    <span>#{{ $row->id }} — {{ $row->location ?? 'N/A' }}</span>
                    <small style="margin-left:auto; color:#64748b;">{{ $row->varietyVariation?->grapeVariety?->variety_name ?? 'Unassigned' }}</small>
                </label>
            @endforeach
        </div>
    </section>

    <section class="planned-task-card">
        <h2 style="margin-bottom:1rem; color:#1a365d;">Fertilisation details</h2>
        <form id="planned-task-form" data-role="planned-task-form">
            @if ($plannedDate)
                <p style="margin-bottom:0.85rem; color:#1a365d;"><strong>Planned date:</strong> {{ $plannedDate }}</p>
            @endif
            <label>Substance
                <input type="text" name="details[substance]" placeholder="Fertiliser name" required>
            </label>
            <label>Concentration (%)
                <input type="number" name="details[concentration]" min="0" step="0.01">
            </label>
            <label>Amount (kg)
                <input type="number" name="details[amount]" min="0" step="0.01">
            </label>
            <label>Notes
                <textarea name="note" rows="3" placeholder="Optional notes"></textarea>
            </label>
            <button type="submit" class="btn-primary">Create fertilisation plan</button>
        </form>
    </section>
</div>
@endsection