@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('Add 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">{{ __('Create New Flowchart') }}</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('flowcharts.store') }}" id="flowchartForm">
                    @csrf

                    <!-- Step 1: Project Info -->
                    <div class="mb-2">
                        <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="" {{ is_null($flowchart->project_id) ? 'selected' : '' }}>No Project</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" {{ $project->id == $flowchart->project_id ? 'selected' : '' }}>
                                        {{ $project->description }}
                                    </option>
                                @endforeach
                            </select> --}}
                            <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>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Flowchart Title</label>
                            <input type="text" name="title" class="form-control" placeholder="e.g. Onboarding Flow" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description" rows="3" class="form-control" placeholder="Optional"></textarea>
                        </div>
                    </div>
                    
                    {{-- <div class="mt-6"></div> --}}
 
                    <div class="mb-0">
                        <label class="form-label">Flow</label>       
                    </div>      

                    <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">
                                    <div class="node-group mb-2 d-flex gap-2 d-flex justify-content-between align-items-center">
                                        <strong class="node-number">1</strong>
                                        <input type="text" name="nodes[0][label]" class="form-control" placeholder="Label">
                                        <select name="nodes[0][type]" class="form-select">
                                            <option value="start">Start</option>
                                            <option value="process">Process</option>
                                            <option value="option">Option</option>
                                            <option value="end">End</option>
                                        </select>
                                    </div>
                                </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">
                                    <div class="edge-group mb-2 d-flex gap-2 align-items-center">
                                        <input type="number" name="edges[0][from]" class="form-control" placeholder="From ID">
                                        <input type="number" name="edges[0][to]" class="form-control" placeholder="To ID">
                                        <input type="text" name="edges[0][text]" class="form-control" placeholder="Optional Text">
                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeElement(this)">✖</button>
                                    </div>
                                </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>

                    <!-- Step 4: Submit -->
                    <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-success">Save</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 = 1;
let edgeIndex = 1;

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="option">Option</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}`;

        const input = group.querySelector('input');
        input.name = `nodes[${i}][label]`;

        const select = group.querySelector('select');
        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