@extends('templates.structure')
@section('custom_css')

<!-- Select2 -->
{{-- <link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}"> --}}
@endsection
@section('content')

<div class="row">
    <div class="col-md-8">
        <!-- general form elements disabled -->
        <div class="card">
            {{-- <div class="card-header">
                <h3 class="card-title">Form User</h3>
            </div> --}}
            <!-- /.card-header -->
            <form role="form" id="form">
                <div class="card-body">
                    <!-- text input -->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" name="name" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>Locations</label>
                                    <div class="form-check" style="margin-left:20px">
                                        <input class="form-check-input" type="radio" name="location_ids[]" id="exampleRadios1" value="*">
                                        <label class="form-check-label" for="exampleRadios1">
                                            All
                                        </label>
                                    </div>
                                    <div class="form-check" style="margin-left:20px">
                                        <input class="form-check-input" type="radio" name="location_ids[]" id="exampleRadios2" value="0">
                                        <label class="form-check-label" for="exampleRadios2">
                                            Custom
                                        </label>
                                    </div>
                                    <div class="collapse" id="collapseExample">
                                        {!!$unity_locations!!}
                                    </div>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                                <div class="form-group" style="padding-left:25px">
                                    <label>Menu List</label>

                                    {!!$unity_menu_tree!!}
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>
                    <!-- text input -->
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>
        <!-- /.card -->
    </div>
</div>
<!-- /.row -->
@endsection

@section('custom_js')
<!-- Select2 -->
{{-- <script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script> --}}
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    $(function () {

        $('[type="radio"][name="location_ids[]"]').on('change', function(){
            let valudRadio = $( '[type="radio"][name="location_ids[]"]:checked').val();
            // console.log(valudRadio)
            if(valudRadio == '*'){
                $('#collapseExample').collapse('hide')
            } 
            if(valudRadio == '0'){
                $('#collapseExample').collapse('show')
            }
        });
        //Initialize Select2 Elements
        // $('[name="user_group"]').select2()

        $('#treeList :checkbox').change(function (){
            $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
            if (this.checked) {
                $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);
            } else {
                $(this).parentsUntil('#treeList', 'ul').each(function(){
                    var $this = $(this);
                    var childSelected = $this.find(':checkbox:checked').length;
                    if (!childSelected) {
                        $this.prev(':checkbox').prop('checked', false);
                    }
                });
            }
        });

        $( "#form" ).submit(function( e ) {
            e.preventDefault()
            axios.post('{{route("groups.store")}}', $(this).serialize(), config) .then(function (response) {
                        console.log(response);
                        window.location = response.data.additional.redirect;

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                $('[name="'+index+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });

                        if(error.response.data.data.message.permissions != undefined){
                            $('#treeList').after('<label id="permissions-error" class="newerror" for="permissions">'+error.response.data.data.message.permissions[0]+'</label>')
                        }
                        if(error.response.data.data.message.location_ids != undefined){
                            $('#collapseExample').after('<label id="permissions-error" class="newerror" for="locations">'+error.response.data.data.message.location_ids[0]+'</label>')
                        }

                    });
        })
    })
</script>
@endsection