@extends('layouts.winemaker')

@section('title', 'Assign Plants')

@push('styles')
<style>
    .plants-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 2rem;
    }

    .rows-card,
    .variation-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .rows-list {
        display: grid;
        gap: 0.75rem;
        max-height: 420px;
        overflow-y: auto;
    }

    .row-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid #dce5f3;
        border-radius: 10px;
        background: #f8fafc;
    }

    .row-option input {
        transform: scale(1.1);
    }

    .row-label {
        font-weight: 600;
        color: #1a365d;
    }

    .row-variety {
        margin-left: auto;
        color: #64748b;
        font-size: 0.85rem;
    }

    .variation-card label {
        display: block;
        font-weight: 600;
        color: #1a365d;
        margin-bottom: 0.35rem;
    }

    .variation-card input,
    .variation-card select,
    .variation-card textarea {
        width: 100%;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    .btn-primary {
        background: #2563eb;
        color: #ffffff;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        padding: 0.8rem 1.1rem;
        cursor: pointer;
    }

    .toggle-link {
        background: none;
        border: none;
        color: #2563eb;
        font-weight: 600;
        cursor: pointer;
        padding: 0;
    }

    .hidden {
        display: none;
    }

    .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="plants-layout" data-page="vineyard-add-plants">
    <section class="rows-card">
        <h2 style="margin-bottom:1rem; color:#1a365d;">Affected rows</h2>
        <div class="rows-list">
            @foreach ($rows as $row)
            <label class="row-item">
                <input type="checkbox" name="rows[]" value="{{ $row->id }}" form="assign-plants-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>
        <form id="assign-plants-form" data-role="assign-plants-form" action="{{ route('vineyard.assignPlants') }}">
            <hr style="margin:1.5rem 0; border:none; border-top:1px solid #e2e8f0;">
            <label>Use existing variation
                <select name="variety_variation_id">
                    <option value="">Select a variation</option>
                    @foreach ($variationOptions as $option)
                        <option value="{{ $option['id'] }}">{{ $option['label'] }}</option>
                    @endforeach
                </select>
            </label>
            <p style="font-size:0.9rem; color:#475569;">Need a new variation? <button class="toggle-link" data-control="toggle-create">Create one</button></p>
            <button type="submit" class="btn-primary">Assign plants</button>
        </form>
    </section>

    <aside class="variation-card hidden" data-role="create-variation">
        <h3 style="margin-bottom:1rem; color:#1a365d;">Create variation</h3>
        <label>Associate with variety
            <input type="text" name="grape_variety_name" placeholder="Variety name" required>
        </label>
        <label>Color
            <input type="text" name="color" placeholder="Red"  required>
        </label>
        <label>Description
            <textarea name="description" rows="3"></textarea>
        </label >
        <label  style="visibility: hidden;">Typical sugar content (°NM)
            <input type="number"  name="typical_sugar_content" step="0.01" min="0">
        </label>
        <label style="visibility: hidden;">Typical alcohol (%)
            <input type="number" name="typical_alcohol" step="0.01" min="0">
        </label>
        <label style="visibility: hidden;">Ripening period
            <input type="text" name="ripening_period" placeholder="e.g. September - October">
        </label>
        <button class="btn-primary" type="button" data-control="submit-variation">Create variation</button>
    </aside>
</div>

@php
    $rowPayload = $rows->map(function ($row) {
        $variation = $row->varietyVariation;
        $grape = $variation?->grapeVariety;

        return [
            'id' => $row->id,
            'location' => $row->location,
            'status' => $row->status,
            'variety' => $variation
                ? ($grape ? sprintf('%s — %s', $grape->variety_name, ucfirst($variation->color)) : ucfirst($variation->color))
                : null,
        ];
    });
@endphp

<script type="application/json" id="add-plants-rows">@json($rowPayload)</script>
<script type="application/json" id="add-plants-api">@json([
    'createVariation' => route('api.variety-variations.create'),
])</script>
@endsection