@extends('layouts.app')
@section('title', 'New Crop Plan')
@section('content')

<div class="row justify-content-center">
<div class="col-12 col-lg-8">

<div class="mb-4">
    <h1 class="h3 mb-1">New Crop Plan</h1>
    <p class="text-muted mb-0">Tell us what, where, and when — we'll assess feasibility, forecast yield, and check the market.</p>
</div>

@if($errors->any())
    <div class="alert alert-danger mb-3">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('crop-plans.store') }}" id="plan-form">
    @csrf
    <input type="hidden" name="crop" value="banana">
    <input type="hidden" name="location" id="hidden-location">
    <input type="hidden" name="planting_month" id="hidden-month">
  <input type="hidden" name="risk_tolerance" value="moderate">

    {{-- STEP 1: Crop --}}
    <div class="card border-0 mb-3">
        <div class="card-body p-4">
            <label class="form-label fw-semibold mb-3">Select Crop</label>
            <div class="row g-2">
                <div class="col-auto">
                    <div class="crop-tile selected" id="tile-banana" onclick="selectCrop('banana')">
                        <div class="crop-tile-icon">🍌</div>
                        <div class="crop-tile-name">Banana</div>
                    </div>
                </div>
                {{-- More crops can be added here later --}}
                <div class="col-auto">
                    <div class="crop-tile disabled" title="Coming soon">
                        <div class="crop-tile-icon">🌾</div>
                        <div class="crop-tile-name">Rice</div>
                        <div class="crop-tile-soon">Soon</div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="crop-tile disabled" title="Coming soon">
                        <div class="crop-tile-icon">🌽</div>
                        <div class="crop-tile-name">Maize</div>
                        <div class="crop-tile-soon">Soon</div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="crop-tile disabled" title="Coming soon">
                        <div class="crop-tile-icon">🥜</div>
                        <div class="crop-tile-name">Groundnut</div>
                        <div class="crop-tile-soon">Soon</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- STEP 2: Variety --}}
    <div class="card border-0 mb-3" id="variety-section">
        <div class="card-body p-4">
            <label class="form-label fw-semibold mb-1">Select Banana Variety</label>
            <p class="text-muted small mb-3">Choose your location first to see varieties available there</p>

            {{-- Location selectors --}}
            <div class="row g-3 mb-3">
                <div class="col-md-5">
                    <label class="form-label small text-muted">State</label>
                    <select class="form-select" id="state-select" onchange="loadDistricts()">
                        <option value="">Select state</option>
                        @foreach($states as $state)
                            <option value="{{ $state }}">{{ ucwords($state) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label small text-muted">District</label>
                    <select class="form-select" id="district-select" disabled onchange="loadVarieties()">
                        <option value="">Select state first</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <div id="location-status" class="text-muted small"></div>
                </div>
            </div>

            {{-- Varieties grid --}}
            <div id="varieties-container" style="display:none">
                <div class="text-muted small mb-2">Available varieties for your district:</div>
                <div id="varieties-grid" class="row g-2"></div>
                <input type="hidden" name="variety" id="hidden-variety">
            </div>

            <div id="no-varieties-msg" style="display:none">
                <div class="alert alert-warning mb-0">No suitable banana varieties found for this district.</div>
            </div>
        </div>
    </div>

    {{-- STEP 3: Planting Time + Name --}}
    <div class="card border-0 mb-3" id="planting-section" style="display:none">
        <div class="card-body p-4">
            <label class="form-label fw-semibold mb-3">Planting Details</label>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label small text-muted">Plan Name</label>
                    <input type="text" name="name" id="plan-name" class="form-control"
                           placeholder="e.g. Grand Naine — East Godavari 2026" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">Planting Month</label>
                    <select class="form-select" id="month-select" onchange="updateSummary()">
                        <option value="">Month</option>
                        @foreach(range(1,12) as $m)
                            <option value="{{ $m }}">{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">Planting Year</label>
                    <select class="form-select" id="year-select" onchange="updateSummary()">
                        @foreach([2025,2026,2027] as $y)
                            <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Growth info --}}
            <div id="growth-info" class="mt-3" style="display:none">
                <div class="row g-2">
                    <div class="col-4">
                        <div class="p-3 rounded-3 text-center" style="background:rgba(74,124,89,0.07);border:1px solid rgba(74,124,89,0.15)">
                            <div class="text-muted small">Planting</div>
                            <div class="fw-bold" id="info-plant" style="color:#2C1810"></div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-3 rounded-3 text-center" style="background:rgba(212,168,83,0.07);border:1px solid rgba(212,168,83,0.2)">
                            <div class="text-muted small">Growth Period</div>
                            <div class="fw-bold" id="info-growth" style="color:#2C1810"></div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-3 rounded-3 text-center" style="background:rgba(92,61,46,0.07);border:1px solid rgba(92,61,46,0.15)">
                            <div class="text-muted small">Expected Harvest</div>
                            <div class="fw-bold" id="info-harvest" style="color:#5C3D2E"></div>
                        </div>
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-4">
                        <div class="p-2 rounded-3 text-center bg-light">
                            <div class="text-muted small">Expected Yield</div>
                            <div class="fw-semibold small" id="info-yield"></div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-2 rounded-3 text-center bg-light">
                            <div class="text-muted small">Market Price</div>
                            <div class="fw-semibold small" id="info-price"></div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-2 rounded-3 text-center bg-light">
                            <div class="text-muted small">Est. Revenue/ha</div>
                            <div class="fw-semibold small" id="info-revenue" style="color:var(--crop-green)"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Submit --}}
    <div id="submit-section" style="display:none">
        <button type="submit" class="btn btn-primary btn-lg" id="submit-btn" disabled>
            <i class="bi bi-graph-up-arrow me-2"></i>Create Plan & Run Analysis
        </button>
        <a href="{{ route('crop-plans.index') }}" class="btn btn-outline-secondary btn-lg ms-2">Cancel</a>
    </div>

</form>
</div>
</div>

<style>
.crop-tile {
    width: 90px;
    padding: 0.8rem 0.5rem;
    border: 2px solid rgba(44,24,16,0.1);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    position: relative;
    user-select: none;
}
.crop-tile:hover:not(.disabled) {
    border-color: var(--crop-green, #4A7C59);
    transform: translateY(-2px);
}
.crop-tile.selected {
    border-color: var(--crop-green, #4A7C59);
    background: rgba(74,124,89,0.05);
    box-shadow: 0 0 0 3px rgba(74,124,89,0.15);
}
.crop-tile.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.crop-tile-icon { font-size: 1.8rem; margin-bottom: 0.3rem; }
.crop-tile-name { font-size: 0.78rem; font-weight: 600; color: #2C1810; }
.crop-tile-soon {
    position: absolute;
    top: -6px; right: -6px;
    background: #aaa;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
}

.variety-btn {
    border: 2px solid rgba(44,24,16,0.1);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    text-align: left;
    width: 100%;
}
.variety-btn:hover {
    border-color: var(--crop-green, #4A7C59);
}
.variety-btn.selected {
    border-color: var(--crop-green, #4A7C59);
    background: rgba(74,124,89,0.05);
}
.variety-name { font-size: 0.88rem; font-weight: 600; color: #2C1810; }
.variety-meta { font-size: 0.75rem; color: #6c757d; margin-top: 0.2rem; }
.badge-suitable { background: rgba(74,124,89,0.12); color: #2D6B3E; font-size: 0.68rem; padding: 2px 7px; border-radius: 6px; }
.badge-risky { background: rgba(212,168,83,0.18); color: #8A6020; font-size: 0.68rem; padding: 2px 7px; border-radius: 6px; }
</style>

<script>
const MONTHS = ['','January','February','March','April','May','June','July','August','September','October','November','December'];
let selectedVarietyData = null;

function selectCrop(crop) {
    // Only banana for now
}

function loadDistricts() {
    const state = document.getElementById('state-select').value;
    const distSelect = document.getElementById('district-select');

    distSelect.innerHTML = '<option value="">Loading...</option>';
    distSelect.disabled = true;
    document.getElementById('varieties-container').style.display = 'none';
    document.getElementById('no-varieties-msg').style.display = 'none';
    document.getElementById('planting-section').style.display = 'none';
    document.getElementById('submit-section').style.display = 'none';

    if (!state) return;

    fetch(`/api/banana/districts/${encodeURIComponent(state)}`)
        .then(r => r.json())
        .then(data => {
            distSelect.innerHTML = '<option value="">Select district</option>';
            (data.districts || []).forEach(d => {
                const opt = document.createElement('option');
                opt.value = d;
                opt.textContent = d.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
                distSelect.appendChild(opt);
            });
            distSelect.disabled = false;
        });
}

function loadVarieties() {
    const state    = document.getElementById('state-select').value;
    const district = document.getElementById('district-select').value;

    document.getElementById('varieties-container').style.display = 'none';
    document.getElementById('no-varieties-msg').style.display = 'none';
    document.getElementById('planting-section').style.display = 'none';
    document.getElementById('submit-section').style.display = 'none';

    if (!state || !district) return;

    document.getElementById('hidden-location').value = district;

    fetch(`/api/banana/varieties/${encodeURIComponent(state)}/${encodeURIComponent(district)}`)
        .then(r => r.json())
        .then(data => {
            const varieties = data.varieties || [];
            const grid = document.getElementById('varieties-grid');

            if (varieties.length === 0) {
                document.getElementById('no-varieties-msg').style.display = '';
                return;
            }

            grid.innerHTML = varieties.map((v, i) => `
                <div class="col-md-6">
                    <button type="button" class="variety-btn" id="vbtn-${i}"
                            onclick="selectVariety(${i})"
                            data-variety='${JSON.stringify(v).replace(/'/g, "&#39;")}'>
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="variety-name">${v.variety}</div>
                            <span class="${v.suitability === 'suitable' ? 'badge-suitable' : 'badge-risky'}">
                                ${v.suitability === 'suitable' ? '✓ Suitable' : '⚠ Risky'}
                            </span>
                        </div>
                        <div class="variety-meta">${v.variety_category || ''}</div>
                        <div class="variety-meta mt-1">
                            ${v.avg_yield_ton_ha ? `<span class="me-2">📦 ${v.avg_yield_ton_ha} t/ha</span>` : ''}
                            ${v.growth_days ? `<span class="me-2">⏱ ${v.growth_days} days</span>` : ''}
                            ${v.price_per_kg ? `<span>₹${v.price_per_kg}/kg</span>` : ''}
                        </div>
                    </button>
                </div>
            `).join('');

            document.getElementById('varieties-container').style.display = '';
        });
}

function selectVariety(idx) {
    document.querySelectorAll('.variety-btn').forEach(b => b.classList.remove('selected'));
    const btn = document.getElementById('vbtn-' + idx);
    btn.classList.add('selected');

    selectedVarietyData = JSON.parse(btn.dataset.variety);
    document.getElementById('hidden-variety').value = selectedVarietyData.variety;

    // Auto-set recommended month
    if (selectedVarietyData.planting_month) {
        document.getElementById('month-select').value = selectedVarietyData.planting_month;
        document.getElementById('hidden-month').value = selectedVarietyData.planting_month;
    }

    // Auto-fill name
    const district = document.getElementById('district-select').value;
    const distDisplay = district.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
    const year = document.getElementById('year-select').value;
    document.getElementById('plan-name').value = `${selectedVarietyData.variety} — ${distDisplay} ${year}`;

    document.getElementById('planting-section').style.display = '';
    document.getElementById('submit-section').style.display = '';
    updateSummary();
}

function updateSummary() {
    if (!selectedVarietyData) return;

    const month = parseInt(document.getElementById('month-select').value);
    const year  = parseInt(document.getElementById('year-select').value);

    document.getElementById('hidden-month').value = month || '';

    if (!month) {
        document.getElementById('growth-info').style.display = 'none';
        document.getElementById('submit-btn').disabled = true;
        return;
    }

    const growthDays = selectedVarietyData.growth_days || 300;
    const harvestDate = new Date(year, month - 1, 1);
    harvestDate.setDate(harvestDate.getDate() + growthDays);
    const harvestMonth = harvestDate.getMonth() + 1;
    const harvestYear  = harvestDate.getFullYear();

    document.getElementById('info-plant').textContent   = `${MONTHS[month]} ${year}`;
    document.getElementById('info-growth').textContent  = `${growthDays} days`;
    document.getElementById('info-harvest').textContent = `${MONTHS[harvestMonth]} ${harvestYear}`;
    document.getElementById('info-yield').textContent   = selectedVarietyData.avg_yield_ton_ha ? `${selectedVarietyData.avg_yield_ton_ha} t/ha` : '—';
    document.getElementById('info-price').textContent   = selectedVarietyData.price_per_kg ? `₹${selectedVarietyData.price_per_kg}/kg` : '—';

    if (selectedVarietyData.avg_yield_ton_ha && selectedVarietyData.price_per_kg) {
        const rev = selectedVarietyData.avg_yield_ton_ha * selectedVarietyData.price_per_kg * 1000;
        document.getElementById('info-revenue').textContent = '₹' + rev.toLocaleString('en-IN');
    } else {
        document.getElementById('info-revenue').textContent = '—';
    }

    document.getElementById('growth-info').style.display = '';
    document.getElementById('submit-btn').disabled = false;
}
</script>

@endsection