@extends('layouts.vertical', ["page_title"=> "Add & Edit Products"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/nestable2/nestable2.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">   
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success mt-3">
        {{ session()->get('message') }}
    </div>
@endif
    <div class="row mt-3">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 p-2">
                            <h4 class="page-title">Bot Intents</h4>
                        </div>
                        <div class="col-md-6 p-2">
                            <button class="btn btn-success float-end add-child-btn" myid="root" myname="Top" title="Add child">Add Root Intent</button>
                        </div>
                        <div class="col-md-12">
                            <div class="custom-dd dd" id="nestable_list_1">
                                @include('commbotintent.part', ['myid' => 'root', 'items' => $items])           
                            </div>
                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
        </div>
    </div>


    <div id="add-clild-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" id="hierarchy-add-form" enctype="multipart/form-data" action="/commbotintent/addchild">
                @csrf
                <input type="hidden" name="bot_id" value="{{$bot_id}}">
                <input type="hidden" name="parent_id" id="intent-parent_id" value="">
                <input type="hidden" name="id" id="intent-id" value="">
                <input type="hidden" name="previous_parent" id="intent-previous_parent" value="">
                <div class="modal-header">
                    <h4 class="modal-title">Add new Child to </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-1">
                                <label for="field-1" class="form-label">Name (for identification)</label>
                                <input type="text" class="form-control" id="intent-name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-2">
                                <label for="field-1" class="form-label">Tags (comma seperated)</label>
                                <input type="text" class="form-control selectize-close-btn selectized" id="intent-tags" name="tags" required>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="mb-2">
                                <label for="field-2" class="form-label">Message</label>
                                <select class="form-control" id="intent-message" name="message" required>
                                    <option value=""> -- Select Message -- </option>
                                    @foreach($messages as $msg)
                                    <option value="{{$msg->id}}">{{$msg->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info waves-effect waves-light">Save changes</button>
                </div>
                </form>
            </div>
        </div>
    </div><!-- /.modal -->


</div>
<style type="text/css">
    .ms-container {max-width: 100%}
</style>
@endsection

@section('script')
<script src="{{asset('assets/libs/nestable2/nestable2.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('click', '.add-child-btn', function(){
            $('#intent-parent_id').val($(this).attr('myid'));
            $('#hierarchy-add-form').trigger("reset");
            $('#add-clild-modal').modal("show")
        });

        $(document).on('click', '.edit-btn', function(){
            $('#hierarchy-add-form').trigger("reset");
            let data = JSON.parse($(this).attr("mydata"))
            console.log(data)
            $('#intent-id').val(data.id)
            $('#intent-parent_id').val(data.parent_id);

            $('#intent-name').val(data.name)
            $('#intent-tags').val(data.tags)
            $('#intent-message').val(data.message)
            $('#intent-tags').val(data.tags)
            let bc = 1;
            for(let btn of data.buttons) {
                $('#button-id'+bc).val(btn.id)
                $('#button-title'+bc).val(btn.title)
                bc++;
            }
            // var selectize = tagsElement[0].selectize;
            // selectize.setValue(data.tags, false)
            // console.log(data.tags.split(","))
            $('#add-clild-modal').modal("show")
        });
        $(document).on('click', '.delete-btn', function(){
            window.location.href = "/commbotintent/delete?id=" + $(this).attr('myid');
        });
    });
</script>
@endsection