@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('Edit Flowchart'))

@section('content')
@include('partials.flash-messages')

<div class="row row-cards">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header">
                <h3 class="card-title">{{ __('Edit Flowchart') }}</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('flowcharts.update', $flowchart) }}" id="flowchartForm">
                    @csrf
                    @method('PUT')

                    <!-- Step 1: Project Info -->
                    <div class="mb-4">
                        <h5 class="text-muted">Step 1: Project Information</h5>
                        <div class="mb-3">
                            <label class="form-label">Project</label>
                            {{-- <select name="project_id" class="form-select">
                                <option value="">No Project</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" {{ $project->id == $flowchart->project_id ? 'selected' : '' }}>
                                        {{ $project->description }}
                                    </option>
                                @endforeach
                            </select> --}}
                            {{-- For edit.blade.php in flowcharts --}}
                            <input list="projects" id="project_search" name="project_id" class="form-control"
                                placeholder="Select project..."
                                value="{{ old('project_id', $flowchart->project_id) }}">
                            <datalist id="projects">
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}">{{ $project->description }}</option>
                                @endforeach
                            </datalist>
                            @if($flowchart->project_id)
                                <div class="mt-1 text-muted" style="font-size: 13px;">
                                    <strong>Current:</strong>
                                    {{ optional($projects->firstWhere('id', $flowchart->project_id))->description ?? '-' }}
                                </div>
                            @endif
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Flowchart Title</label>
                            <input type="text" name="title" class="form-control" value="{{ $flowchart->title }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" rows="3" class="form-control">{{ $flowchart->description }}</textarea>
                        </div>
                    </div>

                    <!-- Step 2: Nodes -->
                    <div class="card p-4">
                        <div class="row">
                            <!-- Step 2: Nodes -->
                            <div class="col-md-6 mb-4">
                                <h5 class="text-muted">Step 2: Add Nodes</h5>
                                <div id="nodes-wrapper" class="border rounded p-3 mb-2">
                                    @php
                                        $parsed = json_decode($flowchart->content, true);
                                        $nodes = $parsed['nodes'] ?? [];
                                    @endphp
                                    @foreach($nodes as $i => $node)
                                        <div class="node-group mb-2 d-flex gap-2 justify-content-between align-items-center">
                                            <strong class="node-number">{{ $i + 1 }}</strong>
                                            <input type="text" name="nodes[{{ $i }}][label]" class="form-control" placeholder="Label" value="{{ $node['label'] }}">
                                            <select name="nodes[{{ $i }}][type]" class="form-select">
                                                <option value="start" {{ $node['type'] === 'start' ? 'selected' : '' }}>Start</option>
                                                <option value="process" {{ $node['type'] === 'process' ? 'selected' : '' }}>Process</option>
                                                <option value="option" {{ $node['type'] === 'option' ? 'selected' : '' }}>Option</option>
                                                <option value="end" {{ $node['type'] === 'end' ? 'selected' : '' }}>End</option>
                                            </select>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removeElement(this)">✖</button>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addNode()">+ Add Node</button>
                            </div>

                            <!-- Step 3: Edges -->
                            <div class="col-md-6 mb-4">
                                <h5 class="text-muted">Step 3: Connect Nodes (Edges)</h5>
                                <div id="edges-wrapper" class="border rounded p-3 mb-3">
                                    @php $edges = $parsed['edges'] ?? []; @endphp
                                    @foreach($edges as $i => $edge)
                                        <div class="edge-group mb-2 d-flex gap-2 align-items-center" data-edge-id="{{ $i }}">
                                            <input type="number" name="edges[{{ $i }}][from]" class="form-control" value="{{ $edge['from'] }}" placeholder="From ID">
                                            <input type="number" name="edges[{{ $i }}][to]" class="form-control" value="{{ $edge['to'] }}" placeholder="To ID">
                                            <input type="text" name="edges[{{ $i }}][text]" class="form-control" value="{{ $edge['text'] ?? '' }}" placeholder="Optional Text">
                                            <button type="button" class="btn btn-sm btn-danger" onclick="removeElement(this)">✖</button>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addEdge()">+ Add Edge</button>
                            </div>

                            <!-- Hidden JSON content -->
                            <input type="hidden" name="content" id="content-json">
                        </div>
                    </div>


                    <div class="mt-4 text-end">
                        <a href="{{ route('flowcharts.index') }}" class="btn btn-outline-secondary mx-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush

<script>
let nodeIndex = {{ count($nodes) }};
let edgeIndex = {{ count($edges) }};

function addNode() {
    const wrapper = document.getElementById('nodes-wrapper');
    const nodeGroup = document.createElement('div');
    nodeGroup.className = 'node-group mb-2 d-flex gap-2 align-items-center justify-content-between';

    nodeGroup.innerHTML = `
        <strong class="node-number"></strong>
        <input type="text" class="form-control" placeholder="Label">
        <select class="form-select">
            <option value="start">Start</option>
            <option value="process">Process</option>
            <option value="end">End</option>
        </select>
        <button type="button" class="btn btn-sm btn-danger" onclick="removeElement(this)">✖</button>
    `;
    wrapper.appendChild(nodeGroup);
    updateNodeIndexes();
}

function updateNodeIndexes() {
    const wrapper = document.getElementById('nodes-wrapper');
    const groups = wrapper.querySelectorAll('.node-group');
    groups.forEach((group, i) => {
        group.querySelector('.node-number').textContent = `${i + 1}`;
        group.querySelector('input').name = `nodes[${i}][label]`;
        group.querySelector('select').name = `nodes[${i}][type]`;
    });
}

function removeElement(button) {
    const group = button.closest('.node-group, .edge-group');
    if (group) {
        group.remove();
        if (group.classList.contains('node-group')) {
            updateNodeIndexes();
        }
    }
}

function addEdge() {
    const wrapper = document.getElementById('edges-wrapper');
    const edgeId = edgeIndex++;

    const edgeHTML = `
        <div class="edge-group mb-2 d-flex gap-2 align-items-center" data-edge-id="${edgeId}">
            <input type="number" name="edges[${edgeId}][from]" class="form-control" placeholder="From ID">
            <input type="number" name="edges[${edgeId}][to]" class="form-control" placeholder="To ID">
            <input type="text" name="edges[${edgeId}][text]" class="form-control" placeholder="Optional Text">
            <button type="button" class="btn btn-sm btn-danger" onclick="removeElement(this)">✖</button>
        </div>
    `;
    wrapper.insertAdjacentHTML('beforeend', edgeHTML);
}

document.getElementById('flowchartForm').addEventListener('submit', function (e) {
    const nodes = [];
    const edges = [];

    document.querySelectorAll('.node-group').forEach((group, i) => {
        const label = group.querySelector('input')?.value;
        const type = group.querySelector('select')?.value;
        if (label && type) {
            nodes.push({ id: i + 1, label, type });
        }
    });

    document.querySelectorAll('.edge-group').forEach((group) => {
        const inputs = group.querySelectorAll('input');
        const from = parseInt(inputs[0]?.value);
        const to = parseInt(inputs[1]?.value);
        const text = inputs[2]?.value;
        if (!isNaN(from) && !isNaN(to)) {
            edges.push({ from, to, text });
        }
    });

    document.getElementById('content-json').value = JSON.stringify({ nodes, edges });
});
</script>
@endsection