@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}}</h4>
        </div>
        <div class="col-md-6 p-2">
            @if(!(isset($team->mode) && $team->mode == 'hierarchical'))
            <button class="btn btn-success float-end add-child-btn" myid="root" myname="Top" title="Add child">Add Manager</button>
            @endif
            <a href="/teams" class="btn btn-dark float-end me-2">Back</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('team.part', ['myid' => 'root', 'players' => $players, 'actions' => (isset($team->mode) && $team->mode == 'hierarchical') ? 'no' : 'yes' ])
                    </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="/team/addchild">
            @csrf
            <input type="hidden" name="team_id" id="terrytory-team_id" value="{{$team->id}}">
            <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="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>
                                @foreach($users as $id => $user)
                                <option value="{{$id}}">{{$user}}</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($){
        $('#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'));
            $('#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"))
            $('#add-clild-modal .modal-title').html('Edit ' + data.is_vacant?'Vacant':data.owner_info.name)
            $('#terrytory-id').val(data.id)
            $('#terrytory-owner').val(data.owner)
            $('#terrytory-parent_id').val(data.parent_id);
            $('#add-clild-modal').modal("show")
        });
        $(document).on('click', '.delete-btn', function(){
            window.location.href = "/team/player_delete?id=" + $(this).attr('myid');
        });
        
    });
</script>
<!-- end demo js-->
@endsection