@extends('admin.layout.index')
@push('css-head')
@endpush
@section('content')
<!-- Page header -->
<div class="page-header page-header-light">
    <div class="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
        <div class="d-flex">
            <div class="breadcrumb">
                <a href="{{url('/admin')}}" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Dashboard</a>
                <a href="{{url('/admin/roles')}}" class="breadcrumb-item"> Roles</a>
                <span class="breadcrumb-item active">Create New</span>
            </div>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">
    <div class="card">
        <div class="card-body">
            @if (count($errors) > 0)
                <div class="alert alert-danger alert-no-border alert-txt-colored alert-close alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <strong>Whoops!</strong> There were some problems with your input.
                    <ul>
                      @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                      @endforeach
                    </ul>
                </div>
            @endif
            {!!Form::open(array('url'=>'admin/roles/store','method'=>'POST'))!!}
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Name" required="">
                </div>
                <br>
                @foreach($permissions as $key=>$row)
                <div class="card mb-1">
                    <div class="card-header header-elements-inline">
                        <h6 class="card-title">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input parent" id="check-{{$row['parent']->id}}" name="permissions[]" value="{{$row['parent']->id}}">
                                <label class="custom-control-label font-weight-semibold" for="check-{{$row['parent']->id}}">{{$row['parent']->display_name}}</label>
                            </div>
                        </h6>
                        <div class="header-elements">
                            @if(count($row['childs']) > 0)
                            <div class="custom-control custom-checkbox" onclick="checkAll(this);">
                                <input type="checkbox" class="custom-control-input" id="select-{{$key}}">
                                <label class="custom-control-label" for="select-{{$key}}">Select all</label>
                            </div>
                            @endif
                        </div>
                    </div>
                    @if(count($row['childs']) > 0)
                    <div class="card-body" style="padding: 10px 20px; background: #f9f9f9;">
                        <div class="row">
                            @foreach($row['childs'] as $child)
                            <div class="col-lg-4">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="check-{{$child->id}}" name="permissions[]" value="{{$child->id}}" onclick="checkParent(this);">
                                    <label class="custom-control-label font-weight-semibold" for="check-{{$child->id}}">{{$child->display_name}}</label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
                @endforeach.
                <br>
                <div class="text-right">
                    <a href="{{ url('admin/roles/create') }}" class="btn btn-secondary pull-left">
                        Refresh
                         <i class="icon-reload-alt ml-2"></i>
                    </a>
                    <button type="submit" class="btn btn-primary">Submit <i class="icon-paperplane ml-2"></i></button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- /content area -->
@endsection

@push('scripts')
<script type="text/javascript">
    function checkAll(now){
        var check = $(now).find('input[type = "checkbox"]').prop("checked");
        if(check == true){
            $(now).closest('.card').find('input[type = "checkbox"]').attr('checked', 'checked');
        }else{
            $(now).closest('.card').find('input[type = "checkbox"]').removeAttr('checked', 'checked');
        }
        
    }

    function checkParent(now){
        var check = $(now).prop("checked");
        if(check == true){ 
            var parent = $(now).closest('.card').find('.parent').prop("checked");
            if(parent == false){
                $(now).closest('.card').find('.parent').attr('checked', 'checked');
            }
        }
        
    }
</script>
@endpush