@extends('layouts.vertical', ["page_title"=> "Datatables"])

@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">

    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">{{$title}} Management</h4>
        </div>
        <div class="col-md-6 p-2">
            <a href="{{$base_url}}/import" class="btn btn-dark waves-effect waves-light float-end">Import</a>
            <a href="{{$base_url}}/export" class="btn btn-dark waves-effect waves-light float-end me-2">Export</a>
            <a href="{{$base_url}}/populatetypedata" class="btn btn-dark waves-effect waves-light float-end me-2">Repopulate Positions</a>
        </div>
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="custom-dd dd" id="nestable_list_1">
                        @include('hierarchy.part', ['myid' => $myid, 'items' => $items])           
                    </div>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->


<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="/hierarchy/addchild">
            @csrf
            <input type="hidden" name="parent_id" id="terrytory-parent_id" value="">
            <input type="hidden" name="id" id="terrytory-id" value="">
            <input type="hidden" name="previous_owner" id="terrytory-previous_owner" 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-2">
                            <label for="position" class="form-label">Position</label>
                            <select class="form-control" id="terrytory-position" name="code" required>
                                <option value=""> -- Select Type -- </option>
                                @foreach($positions as $code => $position)
                                <option value="{{$code}}">{{$position}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="mb-2">
                            <label for="terrytory-owner" class="form-label">User</label>
                            <select class="form-control" id="terrytory-owner" name="owner" required>
                                <option value=""> -- Select User -- </option>
                                <option value="vacant"> Vacant </option>
                                <option value="addnew"> Add New </option>
                                @foreach($users as $id => $user)
                                <option value="{{$id}}">{{$user}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row" id="terrytory-new-user">
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="terrytory-employee_code" class="form-label">Employee Code</label>
                            <input type="text" class="form-control" id="terrytory-employee_code" name="employee_code">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="terrytory-email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="terrytory-email" name="email">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="terrytory-firstname" class="form-label">Firstname</label>
                            <input type="text" class="form-control" id="terrytory-firstname" name="firstname">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="terrytory-lastname" class="form-label">Lastname</label>
                            <input type="text" class="form-control" id="terrytory-lastname" name="lastname">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="terrytory-roles" class="form-label">Roles</label>
                            <select class="form-control" id="terrytory-roles" name="roles">
                                <option value=""> -- Select Roles -- </option>
                                @foreach($roles as $id => $role)
                                <option value="{{$id}}">{{$role}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="terrytory-channels" class="form-label">Channels</label>
                            <select class="form-control" id="terrytory-channels" name="channels">
                                <option value=""> -- Select Channels -- </option>
                                @foreach($channels as $id => $channel)
                                <option value="{{$id}}">{{$channel}}</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 id="move-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="tomove-add-form" enctype="multipart/form-data" action="/hierarchy/moveunder">
            @csrf
            <input type="hidden" name="parent_id" id="tomove-parent_id" value="">
            <input type="hidden" name="id" id="tomove-id" value="">
            <input type="hidden" name="previous_owner" id="tomove-previous_owner" value="">
            <div class="modal-header">
                <h4 class="modal-title">Move this position to another </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-2">
                            <label for="position" class="form-label">Position</label>
                            <select class="form-control" id="terrytory-position" name="code" required>
                                <option value=""> -- Select Type -- </option>
                                @foreach($positions as $code => $position)
                                <option value="{{$code}}">{{$position}}</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 -->


<style type="text/css">
    .dd-list .dd-item button {
        color: #ffffff;
        width: auto;
        height: 26px;
        font-size: 13px;
        margin: -3px 0 0 5px;
    }

    button.dd-collapse, button.dd-expand {
        color: #6c757d!important;
        font-size: 25px!important;
        margin: 5px 0 0 0!important;
        width: 40px!important;
    }

    .dd {
        max-width: 100%;
    }
    
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="{{asset('assets/libs/nestable2/nestable2.min.js')}}"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#terrytory-new-user').hide();
        $('#nestable_list_1').nestable({
            group: 1
        }).on('change', this.updateOutput); 
        $('.dd-handle').on('mousedown', function (event) { event.preventDefault(); return false; });
        
        $(document).on('click', '.add-child-btn', function(){
            $('#add-clild-modal .modal-title').html('Add New Child for ' + $(this).attr('myname'))
            $('#terrytory-parent_id').val($(this).attr('myid'));
            $('#terrytory-id').val('');
            $('#terrytory-position option:not(:selected)').removeAttr('disabled')
            $('#hierarchy-add-form').trigger("reset");
            //$('#terrytory-id').val(data.id);
            $('#add-clild-modal').modal("show")
        });
        $('#terrytory-owner').change(function(){
            if($(this).val() == 'addnew') {
                $('#terrytory-new-user').show();
                $('#terrytory-new-user input').prop('required',true);
            } else {
                $('#terrytory-new-user').hide();
                $('#terrytory-new-user input').removeAttr('required');
            }
        });
        $(document).on('click', '.edit-btn', function(){
            $('#hierarchy-add-form').trigger("reset");
            let data = JSON.parse($(this).attr("mydata"))
            $('#add-clild-modal .modal-title').html('Edit ' + data.name)
            $('#terrytory-id').val(data.id);
            $('#terrytory-parent_id').val(data.parent_id);
            $('#terrytory-previous_owner').val(data.owner);
            //$('#terrytory-name').val(data.name)
            //$('#terrytory-code').val(data.code)
            $('#terrytory-position').val(data.code)
            $('#terrytory-designation').val(data.designation)
            $('#terrytory-type').val(data.type)
            $('#terrytory-owner').val(data.owner)
            $('#terrytory-position option:not(:selected)').attr('disabled', true);
            $('#add-clild-modal').modal("show")
        });
        $(document).on('click', '.move-btn', function(){
            $('#tomove-add-form').trigger("reset");
            let data = JSON.parse($(this).attr("mydata"))
            $('#move-modal .modal-title').html('Move "' + data.name + '"" to another position')
            $('#tomove-id').val(data.id);
            $('#tomove-parent_id').val(data.parent_id);
            $('#tomove-previous_owner').val(data.owner);
            $('#move-modal').modal("show")
        });
        $(document).on('click', '.delete-btn', function(){
            console.log("/hierarchy/delete?id=" + $(this).attr('myid'))
            window.location.href = "/hierarchy/delete?id=" + $(this).attr('myid');
        });
        
    });
</script>
<!-- end demo js-->
@endsection