@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::open(array('route'=>'roles.store','method'=>'POST','enctype'=>'multiple/form-data')) !!}
                            <div class="card-body">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label required">{{__('auth.title')}}</label>
                                    <div class="col-sm-10">
                                        {!! Form::text('title',null,array('placeholder'=>__('auth.title'),'class'=>'form-control','required')) !!}
                                    </div>
                                </div>
    
                                <div class="form-group row">
                                    <label class="col-sm-12 col-form-label required">{{__('auth.permissions')}}</label>
                                </div>

                                <br/><br/>

                                <div>
                                    @foreach($groups as $key=>$row)
                                    <div class="d-flex">
                                        <label for="" class="mr-2">{{ ucfirst($row->group) }}</label>
                                    </div>
                                    <div class="row">
                                        @foreach($permission as $value)
                                            @if($value->group == $row->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, false, array('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 class="form-group row">
                                    <label class="col-sm-12 col-form-label required">{{__('auth.permissions')}}</label>
                                </div>
                                <div class="form-group row">
    
                                    <div class="col-sm-12">
                                        <div class="vertical-tabs">
                                            <ul class="nav nav-tabs" role="tablist">
                                                @foreach($group_permission as $key=>$row)
                                                    <li class="nav-item {{$key===0?'active':''}}">
                                                        <a class="nav-link  {{$key===0?'active':''}}" data-toggle="tab" href="#page{{$key}}" role="tab"
                                                            aria-controls="home">
                                                            {{$row->group_name}}
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
    
                                            <div class="tab-content">
                                                @foreach($group_permission as $key=>$row)
                                                    <div class="tab-pane {{$key==0?'active':''}}" id="page{{$key}}" role="tabpanel">
                                                        <div class="sv-tab-panel app-height">
                                                            @php
                                                                $items = \Spatie\Permission\Models\Permission::where('group_name',$row->group_name)->get();
                                                                $string = preg_replace('/\s+/', '', $row->group_name);
                                                            @endphp
    
                                                            <div class="col-sm-12 check-style">{{ Form::checkbox('check_all_area1[]',  $string, false, array('class' =>'check_all' )) }}
                                                                {{__('auth.check_all')}}
                                                            </div>
    
                                                            @php
                                                                $permission = \Spatie\Permission\Models\Permission::where('group_name',$row->group_name)->get();
                                                            @endphp
    
                                                            @foreach($permission as $value)
                                                                <div class="col-sm-12 permission-style">
                                                                {{ Form::checkbox('permission[]', $value->id, false, array('class' =>$string)) }}
                                                                    @if($lang == 'en')
                                                                        {{ $value->name }}
                                                                    @else
                                                                        {{ $value->name_kh }}
                                                                    @endif
                                                            </div>
                                                            @endforeach
    
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
    
                                </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.save')}}</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