@extends('dashboard.layouts.master')

@section('css')
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{trans('labels.roles')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">{{trans('labels.roles')}}</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('admin.partners.roles.update', $data->id)}}" method="post">
                        @method('patch')
                        @csrf
                        <div class="form-group">
                            <label>{{trans('labels.name')}}</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{old('name') ?? $data->name}}">
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            
                            <div id="accordion">
                                @foreach($option as $key => $permissions)

                                <div class="card mb-1">
                                    <div class="card-header p-3" id="heading{{$key}}">
                                        <h6 class="m-0 font-14">
                                            <input type="checkbox" class="checkit" id="check{{$key}}">
                                            <a href="#collapse{{$key}}" class="text-dark" data-toggle="collapse"
                                                    aria-expanded="true"
                                                    aria-controls="collapse{{$key}}">
                                                
                                                {{trans('labels.'.$key)}}
                                            </a>
                                        </h6>
                                    </div>

                                    <div id="collapse{{$key}}" class="collapse show"
                                            aria-labelledby="heading{{$key}}" data-parent="#accordion">
                                        <div class="card-body">
                                            @foreach($permissions as $permission)
                                                <div>
                                                    <label class="btn active">
                                                        <input type="checkbox" class="check{{$key}} checkChild" name="permissions[]" value="{{$permission['id']}}" @if(in_array($permission['id'], old('permissions') ?? []) || $data->hasPermissionTo($permission['id']) ) checked @endif> {{$permission['name']}}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary waves-effect waves-light" type="submit" aria-haspopup="true" aria-expanded="false">
                                {{trans('labels.edit')}}
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')
<script type="text/javascript">
    $('.checkit').on('click', function(){
        if($(this).is(":checked")){
            $("."+$(this).attr('id')).each(function(index) {
                $(this).prop('checked',true);
            });
        }else{
           $("."+$(this).attr('id')).each(function(index) {
                $(this).prop('checked',false);
            });
        }
    });

    $('.checkChild').on('click', function(){
        var identifier = $(this).attr('class').split(/\s+/)[0];
        if($(this).is(":checked")){
            $("."+identifier).each(function(index) {
                if(!$(this).is(":checked")){
                     $('#'+identifier).prop('checked', false);
                     return false;
                }else{
                    $('#'+identifier).prop('checked', true);
                }
            });
        }else{
           $('#'+identifier).prop('checked', false);
        }
    });

    $(document).ready(function() { 
        $('.checkit').each(function(index) {
            var identifier = $(this).attr('id');
            $("."+identifier).each(function(index) {
                if(!$(this).is(":checked")){
                     $('#'+identifier).prop('checked', false);
                     return false;
                }else{
                    $('#'+identifier).prop('checked', true);
                }
            });

        });
    });

</script>
@endsection