@extends('layouts.app')
@section('content')
    @if(!empty($permissions) && isset($permissions['poopix_permission']) && ($permissions['poopix_permission'] === 'true' || $permissions['poopix_permission'] === true))
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success panel-border">
                <div class="panel-heading">
                    <h3 class="panel-title"> Product Selections </h3>
                </div>
                <div class="panel-body mb-3">
                    <div class="col-md-12">
                        <p class="text-muted">
                            Selection Types are used to define contract details. Selections marked with <strong>*</strong> are inactive.
                        </p>
                    </div>
                    <div class="selections offset-md-3">
                        <div data-node="1" class="col-md-2 form-horizontal scrollbar node node1" style="border: solid black 1px; height: 300px;">
                            <form action="{{route('product.selections.add')}}" class="ajaxSubmit" id="node_1">
                                <label class="control-label">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="1" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_1">ADD</button>
                            </form>
                            <div class="content">
                                @foreach($selections as $selection)
                                    <div style='margin-top: 5px;'>
                                        <a class="pointer editIcon" onclick="sendModalAjax('{{route('product.selection.get')}}',{id: '{{$selection->id}}'},'selection_edit')"><i class='glyphicon glyphicon-edit editIcon' style='color: blue;'></i></a>
                                        <a class='selection pointer {{($selection->IsActive == 0)? "disabled":''}}' data-id="{{$selection->id}}">{{$selection->Name}} </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div data-node="2" class="col-md-2 form-horizontal scrollbar node node2" style="border: solid black 1px; height: 300px;">
                            <form action="{{route('product.selections.add')}}" id="node_2" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_2">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="2" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_2">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                        <div data-node="3" class="col-md-2 form-horizontal scrollbar node node3" style="border: solid black 1px; height: 300px;" id="node_3">
                            <form action="{{route('product.selections.add')}}" id="node_3" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_3">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="3" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_3">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                        <div data-node="4" class="col-md-2 form-horizontal scrollbar node node4" style="border: solid black 1px; height: 300px;" id="node_4">
                            <form action="{{route('product.selections.add')}}" id="node_4" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_4">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="4" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_4">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                        <div data-node="5" class="col-md-2 form-horizontal scrollbar node node5" style="border: solid black 1px; height: 300px;" id="node_5">
                            <form action="{{route('product.selections.add')}}" id="node_5" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_5">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="5" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_5">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                        <div data-node="6" class="col-md-2 form-horizontal scrollbar node node6" style="border: solid black 1px; height: 300px;" id="node_6" hidden>
                            <form action="{{route('product.selections.add')}}" id="node_6" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_6">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="6" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_6">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                        <div data-node="7" class="col-md-2 form-horizontal scrollbar node node7" style="border: solid black 1px; height: 300px;" id="node_7" hidden>
                            <form action="{{route('product.selections.add')}}" id="node_7" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_7">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="7" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_7">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                        <div data-node="8" class="col-md-2 form-horizontal scrollbar node node8" style="border: solid black 1px; height: 300px;" id="node_8" hidden>
                            <form action="{{route('product.selections.add')}}" id="node_8" class="ajaxSubmit" hidden>
                                <label class="control-label" id="node_8">Primary Feature</label>
                                <input type="text" name="Name" class="form-control" required>
                                <input type="text" name="NodeNum" value="8" hidden>
                                <input type="text" name="ParentNum" hidden>
                                <input type="hidden" name="OfficeID" value="{{$officeID}}">
                                <button type="submit" class="form-control submit_add btn btn-success" id="submit_8">ADD</button>
                            </form>
                            <div class="content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modals" id="selection_edit"></div>
    </div>
    @else
        <div class="alert alert-danger">
            <strong>Access Denied!</strong> You do not have permission to view this page.
        </div>
    @endif
@endsection


<script>
    function showNextNode(currentNodeNum) {
        // Hide nodes based on the current node number
        if (currentNodeNum >= 1 && currentNodeNum <= 4) {
            for (let i = 6; i <= 8; i++) {
                const nodeForm = document.getElementById(`node_${i}`);
                if (nodeForm) {
                    nodeForm.setAttribute('hidden', true);
                }
            }
        } else if (currentNodeNum === 5) {
            // Hide nodes 7 and 8 when clicking on node 5
            for (let i = 7; i <= 8; i++) {
                const nodeForm = document.getElementById(`node_${i}`);
                if (nodeForm) {
                    nodeForm.setAttribute('hidden', true);
                }
            }
        } else if (currentNodeNum === 6) {
            // Hide node 8 when clicking on node 6
            const nodeForm = document.getElementById('node_8');
            if (nodeForm) {
                nodeForm.setAttribute('hidden', true);
            }
        }

        // Increment to get the next node number
        const nextNodeNum = currentNodeNum + 1;

        // Show the next node's form
        const nextNodeForm = document.getElementById(`node_${nextNodeNum}`);
        if (nextNodeForm) {
            nextNodeForm.removeAttribute('hidden');
            nextNodeForm.querySelector('.content').style.display = 'block'; // Optional, show the content if necessary
        }
    }
</script>