@extends('procurement::layouts.master')
@section('title','Purchase Planner')
@section('content')
<h1 class="h3 mb-4">Purchase Planner</h1>
<p class="text-muted mb-4">Estimate what a purchase would cost before committing to it — pick what you're planning for, then vary quantities on the next page and watch the total move.</p>

<form method="GET" action="{{ route('procurement.purchase-planner.show') }}" id="planner-form">
    <div class="card shadow mb-4"><div class="card-body">

        <div class="form-group">
            <label class="font-weight-bold">1. What is this purchase plan for?</label>
            <div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input scope-radio" type="radio" name="scope" id="scope-project-radio" value="project" checked>
                    <label class="form-check-label" for="scope-project-radio">A project</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input scope-radio" type="radio" name="scope" id="scope-projects-radio" value="projects">
                    <label class="form-check-label" for="scope-projects-radio">A group of projects</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input scope-radio" type="radio" name="scope" id="scope-custom-radio" value="custom">
                    <label class="form-check-label" for="scope-custom-radio">A custom parts list</label>
                </div>
            </div>
        </div>

        <div id="scope-project-picker" class="form-group">
            <label>Project <span class="text-danger">*</span></label>
            <select name="project_ids[]" id="single-project-select" class="form-control" style="max-width:400px">
                <option value="">— Select —</option>
                @foreach($projects as $p)
                <option value="{{ $p->id }}">{{ $p->name }}{{ $p->code ? ' ('.$p->code.')' : '' }}</option>
                @endforeach
            </select>
        </div>

        <div id="scope-projects-picker" class="form-group" style="display:none">
            <label>Projects <span class="text-danger">*</span></label>
            <div class="row">
                @foreach($projects as $p)
                <div class="col-md-4">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input project-check" name="project_ids[]" value="{{ $p->id }}" id="proj-{{ $p->id }}">
                        <label class="form-check-label" for="proj-{{ $p->id }}">{{ $p->name }}{{ $p->code ? ' ('.$p->code.')' : '' }}</label>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div id="qty-source-picker" class="form-group mb-0">
            <hr>
            <label class="font-weight-bold">2. Where does the quantity come from?</label>
            <div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input qty-source-radio" type="radio" name="qty_source" id="qty-source-run" value="run" checked>
                    <label class="form-check-label" for="qty-source-run">A production run</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input qty-source-radio" type="radio" name="qty_source" id="qty-source-custom" value="custom">
                    <label class="form-check-label" for="qty-source-custom">Custom quantity</label>
                </div>
            </div>
        </div>
    </div></div>

    @foreach($projects as $p)
    <div class="card shadow mb-3 project-qty-block" data-project="{{ $p->id }}" style="display:none">
        <div class="card-body row align-items-center">
            <div class="col-md-3"><strong>{{ $p->name }}</strong>{{ $p->code ? ' — '.$p->code : '' }}</div>
            <div class="col-md-5 source-run">
                <label class="mb-0 mr-2">Run</label>
                <select name="run_id[{{ $p->id }}]" class="form-control d-inline-block" style="width:auto;max-width:100%">
                    <option value="">— Select a run —</option>
                    @foreach($p->runs as $r)
                    <option value="{{ $r->id }}">{{ $r->run_number }} — target {{ $r->target_qty }} ({{ $r->status }})</option>
                    @endforeach
                </select>
                @if($p->runs->isEmpty())<small class="text-muted d-block mt-1">No runs recorded for this project yet.</small>@endif
            </div>
            <div class="col-md-5 source-custom" style="display:none">
                <label class="mb-0 mr-2">Quantity</label>
                <input type="number" name="qty[{{ $p->id }}]" class="form-control d-inline-block" style="width:120px" min="1" value="1">
            </div>
        </div>
    </div>
    @endforeach

    <button type="submit" class="btn btn-dark btn-lg"><i class="fas fa-calculator mr-1"></i> Build Plan</button>
</form>
@endsection

@push('scripts')
<script>
function scopeValue() {
    return document.querySelector('.scope-radio:checked').value;
}
function qtySourceValue() {
    return document.querySelector('.qty-source-radio:checked').value;
}

function selectedProjectIds() {
    var scope = scopeValue();
    if (scope === 'project') {
        var v = document.getElementById('single-project-select').value;
        return v ? [v] : [];
    }
    if (scope === 'projects') {
        return Array.prototype.map.call(document.querySelectorAll('.project-check:checked'), function (cb) { return cb.value; });
    }
    return [];
}

function refresh() {
    var scope = scopeValue();

    document.getElementById('scope-project-picker').style.display  = scope === 'project'  ? '' : 'none';
    document.getElementById('scope-projects-picker').style.display = scope === 'projects' ? '' : 'none';
    document.getElementById('qty-source-picker').style.display     = scope === 'custom'   ? 'none' : '';

    // Disable inputs belonging to hidden sections so they never leak into the query string —
    // same reasoning as the Log Build page: a hidden project's leftover value would otherwise
    // still get submitted alongside the one actually being planned.
    document.getElementById('single-project-select').disabled = scope !== 'project';
    document.querySelectorAll('.project-check').forEach(function (cb) { cb.disabled = scope !== 'projects'; });

    var ids = selectedProjectIds();
    var qtySource = qtySourceValue();

    document.querySelectorAll('.project-qty-block').forEach(function (block) {
        var visible = scope !== 'custom' && ids.indexOf(block.dataset.project) !== -1;
        block.style.display = visible ? '' : 'none';

        var runVisible = visible && qtySource === 'run';
        var customVisible = visible && qtySource === 'custom';
        block.querySelector('.source-run').style.display = runVisible ? '' : 'none';
        block.querySelector('.source-custom').style.display = customVisible ? '' : 'none';
        block.querySelector('.source-run select').disabled = !runVisible;
        block.querySelector('.source-custom input').disabled = !customVisible;
    });
}

document.querySelectorAll('.scope-radio, .qty-source-radio').forEach(function (el) { el.addEventListener('change', refresh); });
document.getElementById('single-project-select').addEventListener('change', refresh);
document.querySelectorAll('.project-check').forEach(function (cb) { cb.addEventListener('change', refresh); });
refresh();

document.getElementById('planner-form').addEventListener('submit', function (e) {
    var scope = scopeValue();
    if (scope === 'custom') return;

    var ids = selectedProjectIds();
    if (ids.length === 0) {
        e.preventDefault();
        alert('Select at least one project.');
        return;
    }
    var qtySource = qtySourceValue();
    var missing = ids.some(function (id) {
        var block = document.querySelector('.project-qty-block[data-project="' + id + '"]');
        if (!block) return true;
        if (qtySource === 'run') return !block.querySelector('.source-run select').value;
        return !block.querySelector('.source-custom input').value;
    });
    if (missing) {
        e.preventDefault();
        alert(qtySource === 'run' ? 'Select a run for every selected project.' : 'Enter a quantity for every selected project.');
    }
});
</script>
@endpush