@extends('layouts.customer')

@section('content')
<style type="text/css">
    div.btn-group{
            width: 100%;
            border-radius: 0.1rem;
            border: 1px solid #d7d7d7;
    }
    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 90%;
    }
    ul.multiselect-container.dropdown-menu.show {
        width: 100%;
    }
    .dropdown-toggle::after{
        margin-top: 7px;
        font-size: 17px;
    }
</style>
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Add Role</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                             <li class="breadcrumb-item">
                                <a href="{{url('/')}}/dashboard">Dashboard</a>
                            </li>
                            {{-- <li class="breadcrumb-item">
                                <a href="{{url('/')}}/staff">Staff List</a>
                            </li> --}}
                            <li class="breadcrumb-item active" aria-current="page">Add Role</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">

                {{--
                    <div class="row align-items-center my-4">
                        <div class="col">
                            <h2 class="h3 mb-0 page-title">{{ __('Add Role') }}</h2>
                        </div>
                        <div class="col-auto">
                            
                            <a href="{{route('roles.index')}}" class="btn btn-primary" style="color:white">
                                <span style="color:white"></span> {{ __('Back') }}
                            </a>
                        
                        </div>
                    </div> 
                --}}   

                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Role</h5>

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            {!! Form::open(['method' => 'POST', 'route' => ['user-roles.store', ['account'=>$account]]]) !!}
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <strong>{{ __('Name') }}:</strong>
                                            {!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <strong>{{ __('Display Name') }}:</strong>
                                            {!! Form::text('display_name', null, array('placeholder' => 'Display Name','class' => 'form-control')) !!}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        {{-- <div class="form-group">
                                            <strong>{{ __('Permission') }}:</strong>
                                            <br/>

                                            <div class="mt-4 mb-4">
                                                <div class="">
                                                    <div class="row">
                                                        @foreach( $permission as $key => $value )
                                                            <div class="col-3 col-xs-3">
                                                                <div class="form-group row mb-1">
                                                                    <label class="col-12 col-form-label">{{ $value->name }}</label>
                                                                    <div class="col-12">
                                                                        <div class="custom-switch custom-switch-primary mb-2 custom-switch-small">
                                                                            <input class="custom-switch-input" id="switchS{{$value->id}}" type="checkbox" name="permission[]" value="{{ $value->id }}" >
                                                                            <label class="custom-switch-btn" for="switchS{{$value->id}}"></label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}

                                        <strong>{{ __('Permission') }}:</strong> <br />
                                        <div class="mb-4">
                                            <div class="custom-control custom-checkbox mb-4">
                                                <input type="checkbox" class="custom-control-input" id="checkall-general" onclick="Checkall('general')">
                                                <label class="custom-control-label" for="checkall-general">Select All</label>
                                            </div>
                                        </div>
                                        <table class="table table-striped mb-0  mt-3">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>MODULE</th>
                                                    <th>PERMISSION</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach( $permission as $key => $items )
                                                    <tr>
                                                        <td>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="checkbox-{{ $key }}" onclick="CheckModule('checkbox-{{ $key }}')">
                                                                <label class="custom-control-label" for="checkbox-{{ $key }}"></label>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <label for="checkbox-{{ $key }}">
                                                               <strong>{{ strtoupper($key) }}</strong>
                                                            </label>
                                                        </td>

                                                        <td>
                                                            <div class="checkbox-{{ $key }}">
                                                                <div class="row">
                                                                    @foreach( $items as $k => $value )
                                                                        <div class="col-3 col-xs-3">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input checkbox-general" id="switchS{{$value->id}}" name="permission[]" value="{{ $value->id }}">
                                                                                <label class="custom-control-label" for="switchS{{$value->id}}">{{ str_replace( '_', ' ', $value->name ) }}</label>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                        <button type="submit" class="btn btn-warning">{{ __('Save') }}</button>
                                    </div>
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script type="text/javascript">
        function Checkall(module = null) {
            var ischecked = $("#checkall-"+module).prop('checked');
            if(ischecked == true) {
                $('.checkbox-'+module).prop('checked',true);
            } else {
                $('.checkbox-'+module).prop('checked',false);
            }
        }

        function CheckModule(cl = null) {
            var ischecked = $("#"+cl).prop('checked');
            if(ischecked == true) {
                $('.'+cl).find("input[type=checkbox]").prop('checked',true);
            } else {
                $('.'+cl).find("input[type=checkbox]").prop('checked',false);
            }
        }
    </script>
@endsection