@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-4 col-md-5 col-sm-5 col-xs-12">
        <h4 class="page-title">{{ __('roles.edit_role') }} - {!! $role->name !!}</h4>
    </div>
    <div class="col-lg-8 col-sm-7 col-md-7 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}">{{ __('roles.dashboard') }}</a></li>
            <li><a href="{{ route('roles.index') }}">{{ __('roles.roles') }}</a></li>
            <li class="active">{{ __('roles.edit') }}</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <!--Flash messages at the top -->
        <div>@include('flash::message')</div>
        @if (count($errors) > 0)
        <div class="alert alert-danger">
            {{ __('roles.input_error') }}<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <div class="white-box">
            {{ Form::model($role, ['method' => 'PATCH','route' => ['roles.update', $role->id]]) }}
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        {{ Form::label('name',__('roles.name_of_role')) }}
                        {{ Form::text('name',null,['class' => 'form-control compulsory']) }}
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <h3 class="box-title">{{ __('roles.permissions') }}</h3>
                    <div class="table-responsive">
                        <table class="table color-table success-table table-sm">

                            @foreach($categories as $category)
                                <thead>
                                    <tr>
                                        <th># {{ __('roles.assign') }}</th>
                                        <th>{{ $category->name }} <span class="float-right">{{ __('roles.check_all') }} <input type="checkbox" id="check-all{{ $category->id }}"></span></th>
                                    </tr>
                                </thead>
                                @php
                                    $permissions = Streamline\Models\PermissionCategory::find($category->id)->permissions;
                                @endphp
                                <tbody>
                                    <tr>
                                        <td>

                                            <ul class="list-group">
                                                <li class="list-group-item list-group-item-success"><input type="checkbox" id="" class="viewing{{$category->id}}"> {{ __('roles.viewing') }} </li>
                                                <li class="list-group-item list-group-item-success"><input type="checkbox" id="" class="creating{{$category->id}}"> {{ __('roles.creating') }} </li>
                                                <li class="list-group-item list-group-item-info"><input type="checkbox" id="" class="editing{{$category->id}}"> {{ __('roles.editing') }}</li>
                                                <li class="list-group-item list-group-item-danger"><input type="checkbox" id="" class="deleting{{$category->id}}"> {{ __('roles.deleting') }}</li>
                                                <li class="list-group-item list-group-item-warning"><input type="checkbox" id="" class="othering{{$category->id}}"> {{ __('roles.other') }}</li>
                                            </ul>
                                        </td>
                                        <td>
                                            @foreach($permissions->chunk(3) AS $permission)
                                            <div class="row">
                                                @foreach($permission as $item)
                                                <div class="col-sm-4">
                                                    {{ Form::checkbox('permission[]', $item->id, in_array($item->id, $rolePermissions), array('class' => "permission{$category->id} {$item->crud}{$category->id}")) }}
                                                    {{ $item->description }}<a href="#" data-toggle="tooltip" rel="tooltip" data-placement="top" title="{{ $item->long_description }}" onclick="edit_permission_description('{{ $item->id }}', '{{ $item->description }}', '{{ $item->long_description }}')"> <i class="fa fa-info-circle"></i></a>
                                                </div>
                                                @endforeach
                                            </div>
                                            @endforeach
                                        </td>
                                    </tr>
                                </tbody>
                            @endforeach
                        </table>
                    </div>
                </div>

                <hr>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    {{ Form::button(__('roles.submit'),['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10']) }}
                    {{ Form::button(__('roles.cancel'),['type'=>'reset','class'=>'btn btn-default waves-effect waves-light']) }}
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- /.row -->

<div class="modal fade" id="modal_edit_permission" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel1">Edit Permission Description</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Permission Name</label>
                    <input class="form-control compulsory" id="permission_name" name="permission_name" type="text" readonly/>
                    <input id="permission_id" name="permission_id" type="hidden"/>
                </div>

                <div class="form-group">
                    <label>Permission Description</label>
                    <input class="form-control compulsory" id="permission_desc" name="permission_desc" type="text"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('patients.cancel') }}</button>
                <a class="btn btn-success" onclick="submit_permission_description()">{{ __('patients.save') }}</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
     $('document').ready(function () {

         $("[id^=check-all]").on('click', function () {

             var id = /\d+(?=\D*$)/.exec($(this).attr('id'));

             if ($('.permission' + id).is(':checked')) {
                 $('.permission' + id).removeAttr('checked');
             } else {
                 $('.permission' + id).prop("checked", true);
             }
         });

         $("[class^=viewing]").on('click', function () {
             var id = /\d+(?=\D*$)/.exec($(this).attr('class'));

             if ($('.view' + id).is(':checked')) {
                 $('.view' + id).removeAttr('checked');
             } else {
                 $('.view' + id).prop("checked", true);
             }
         });

         $("[class^=creating]").on('click', function () {
             var id = /\d+(?=\D*$)/.exec($(this).attr('class'));

             if ($('.create' + id).is(':checked')) {
                 $('.create' + id).removeAttr('checked');
             } else {
                 $('.create' + id).prop("checked", true);
             }
         });

         $("[class^=editing]").on('click', function () {
             var id = /\d+(?=\D*$)/.exec($(this).attr('class'));

             if ($('.edit' + id).is(':checked')) {
                 $('.edit' + id).removeAttr('checked');
             } else {
                 $('.edit' + id).prop("checked", true);
             }
         });

         $("[class^=deleting]").on('click', function () {
             var id = /\d+(?=\D*$)/.exec($(this).attr('class'));

             if ($('.delete' + id).is(':checked')) {
                 $('.delete' + id).removeAttr('checked');
             } else {
                 $('.delete' + id).prop("checked", true);
             }
         });

         $("[class^=othering]").on('click', function () {
             var id = /\d+(?=\D*$)/.exec($(this).attr('class'));

             if ($('.other' + id).is(':checked')) {
                 $('.other' + id).removeAttr('checked');
             } else {
                 $('.other' + id).prop("checked", true);
             }
         });

     });

     function edit_permission_description(id, name, description) {
         $('#permission_name').val(name);
         $('#permission_id').val(id);
         $('#permission_desc').val(description);

         $('#modal_edit_permission').modal('show');
     }

     function submit_permission_description() {
         let permission_id = $("#permission_id").val();
         let permission_desc = $("#permission_desc").val();

         if (permission_desc === "") {
             alert("Please make sure that you fill in a permission description");
             return false;
         }

         let data = {'permission_id':permission_id, 'permission_desc':permission_desc};

         $.ajax({
             method: 'POST',
             url: '/roles/edit_permission_desc',
             data: data,
             success: function(response){
                 if(response == 1){
                     // reload the page
                     window.location.reload();
                 } else {
                     alert("An error occurred");
                 }
             },
             error: function(jqXHR, textStatus, errorThrown) {
                 alert("error occurred");
                 console.log(JSON.stringify(jqXHR));
             }
         });
     }

</script>

@endpush('scripts')