@extends('adminlte::page')
@section('title', 'Roles')
@push('css')
    <style>
        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(18px);
            -ms-transform: translateX(18px);
            transform: translateX(18px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 22px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .checkIP {
            width: 20px;
        }
    </style>
@endpush
@section('content')
    @php
        $lang = app()->getLocale();
    @endphp

    <div class="top-header">
        <ol class="breadcrumb">
            <li><a href="#" >{{ __('auth.dashboard') }} / </a></li>
            <li><a href="{{ route('roles.index') }}"> {{ __('auth.role') }} / </a></li>
            <li><a href="#"> {{ __('auth.create') }}</a></li>
        </ol>
    </div>

        <!-- Main content -->
        <section class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">{{__('auth.role')}}</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            {!! Form::model($role, ['method' => 'PATCH','route' => ['roles.update', $role->id]]) !!}
                            <div class="card-body">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label required">{{__('auth.name')}}</label>
                                    <div class="col-sm-10">
                                        {!! Form::text('name',null,array('placeholder'=>__('auth.name'),'class'=>'form-control','required')) !!}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label required">{{__('auth.permissions')}}</label>
                                </div>
                                <br/><br/>
                                <div>
                                    @foreach ($groups as $j => $g)
                                    <div class="d-flex">
                                        <label for="" class="mr-2">{{ ucfirst($g->group) }}</label>
                                    </div>
                                    <div class="row">
                                    @foreach ($permission as $value)
                                        @if ($value->group == $g->group)
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <div class="input-group mb-3">
                                                        <div class="d-flex align-items-center">
                                                            <label class="switch">
                                                                {{ Form::checkbox('permissions[]', $value->id,in_array($value->id, $rolePermissions) ? true : false, ['class' => 'name ', 'id' => $value->id]) }}
                                                                <span class="slider round"></span>
                                                            </label>
                                                            <label class="ml-2" for="">{{ explode('.',$value->name)[1] }}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                    </div>
                                    @endforeach
                                </div>
                            </div>
    
                            <div class="card-footer text-right">
                                <a href="{{ route('roles.index')}}" class="btn btn-dark">{{__('auth.back')}}</a>
                                <button type="submit" class="btn btn-primary">{{__('auth.update')}}</button>
                            </div>
    
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </section>

@endsection

@section('js')
    <script>
        $(".check_all").change(function () {
            let this_ = $(this);
            let check = $(this).prop("checked");
            let val = '.' + this_.val();
            $(val + `:checkbox`).prop('checked', check);
        });

    </script>
@endsection