@extends("layouts.app")

@section("content")
    {{-- <div class="page-wrapper">
        <div class="page-content">   --}}
       @component('components.bread-crumb', [
                'parentName' => __('form.Forms'),
                'pageName' => __('form.FormRoles'),
                'pageUrl' => route('roles.index'),
            ])
            @endcomponent
        <div class="row">
            <form class="row" action="{{$action}}" method="post" id="submitForm">
                @csrf
                @if($role->id != null)
                    @method("put")
                @endif

                <div class="col-xl-12 mt-5 mx-auto">

                    <div class="card border-top border-0 border-4 border-primary">
                        <div class="card-body p-5">
                            <div class="card-title d-flex align-items-center">
                                <div><i class="bx bxs-user me-1 font-22 text-primary"></i>
                                </div>
                                <h5 class="mb-0 text-primary">{{__("form.roleData")}}</h5>
                            </div>
                            <hr>
                            <div class="row mb-3">
                                <label for="name" class="col-md-4 col-form-label text-md-end">{{ __('form.RoleName') }}</label>

                                <div class="col-md-6">
                                    <input dir="ltr" id="name" type="text" class="form-control pl-5" name="name" value="{{($role->name!=null)?$role->name:''}}" required autocomplete="name" autofocus>

                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="choices-multiple-remove-button" class="col-md-4 col-form-label text-md-start">{{ __('form.SelectPermissions') }}</label>
                                    <div class="col-2 ms-auto">
                                        <input type="checkbox" class="select-all"  /> @lang("form.SelectAll")
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <table class="table">
                                        <tbody>
                                            @foreach(__("Permission") as $key1 => $Values)
                                                <tr>
                                                    <td>
                                                        <input  type="checkbox" class="{{$key1}}" onchange="toggel(this,'{{$key1}}');">
                                                        <label >{{$key1}}</label>
                                                    </td>
                                                    @foreach($Values as $key2 => $value)
                                                        <td>
                                                            <input id="{{$value}}" type="checkbox" name="permissions[]" class="check {{$key1}}" value="{{$value}}" {{in_array($value,$role->permissions->pluck('name')->toArray())?'checked':''}} >
                                                            <label for="{{$value}}"> {{$key2}}</label>
                                                        </td>

                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 row">
                        <button  type="submit" class="mx-auto col-6  btn btn-primary px-5">{{__("form.save")}}</button>
                    </div>
                </div>
            </form>
        {{-- </div>
    </div> --}}
@endsection

@section("js")
        <script >
            $('.select-all').change(function(event) {

                if ($('.select-all').is(":checked"))
                    $('.check').attr("checked",true);
                else
                    $('.check').attr("checked", false);
            });

            function toggel(ele,name) {
                if($(ele).is(":checked"))
                    $(ele).closest('tr').find('.check').attr("checked",true);
                else
                    $(ele).closest('tr').find('.check').attr("checked",false);
            }
        </script>
@endsection