@extends('crm.layouts.app')

@section('styles')
  <link rel="stylesheet" href="{{asset('theme/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
  <link rel="stylesheet" href="{{asset('theme/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
@endsection

@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">

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

            <div class="card card-secondary">
                <div class="card-header">
                  <h3 class="card-title">{{__('Manage Roles')}}</h3>
                  @can('create-role', User::class)
                  <button type="button" class="btn btn-sm btn-primary float-right" data-toggle="modal" data-target="#addRole">{{__('New Role')}} </button>
                  @endcan
                </div>
                <div class="card-body">

                    @if($errors)
                        @foreach ($errors->all() as $error)
                            <div class="text text-danger">{{ $error }}</div>
                        @endforeach
                    @endif
                  <div class="table-responsive">  
                  <table id="roles" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                      <th>{{__('Sr.No')}}</th>
                      <th>{{__('Set Default')}}</th>
                      <th>{{__('Status')}}</th>
                      <th>{{__('Name')}}</th>
                      <th>{{__('Created At')}}</th>
                      <th>{{__('Updated At')}}</th>
                      <th>{{__('Actions')}}</th>

                    </tr>
                    </thead>
                    <tbody>
                       
                         
                            {{-- <td>
                              @if ($role->id != '1')
                                <form action="{{url('/user/role/default', $role)}}" method="post">
                                  @csrf
                                  @method('PUT')
                                  <label class="cl-switch cl-switch-green">
                                    <input type="checkbox" name="default_role" id="setDefault{{$role->id}}" value="yes"
                                    class="submit"
                                    @if ($role->default_role == 'yes')
                                        checked
                                    @endif>
                                    <span class="switcher"></span>
                                  </label>
                                  <label for="setDefault{{$role->id}}" class="label text-info">{{__('Set Default')}}</label>
                                  @if ($role->default_role == 'yes')
                                    <span class="badge badge-danger">{{__('Default Role')}}</span>
                                  @endif
                                </form>
                              @endif
                            </td> --}}
                           
                    </tbody>
                  </table>
                  </div>
                  <br>
                  <p><span class="text-danger">{{__('Note')}}:</span> {{__("If you 'inactive' any role, all the users with that role will also gets 'inactive' status and vice-versa.")}}
                    <br> 
                    {{__("If you 'delete' any role, all the users with that role will be assigned default user role and permissions as set by the admin for that default role.")}}
                   </p>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addSourceLabel">
                  <div class="modal-dialog" role="document">
                      <div class="modal-content bg-light-gray">
                          <!-- Modal content here -->
                      </div>
                  </div>
              </div>
              </div>


          </div>
        </div>
      </div>
    </section>
  </div>


<div class="modal fade" id="addRole" tabindex="-1" role="dialog" aria-labelledby="addRoleLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content bg-light-gray">
        <div class="modal-header bg-gray">
          <h5 class="modal-title" id="addRoleLabel">{{__('Add Role')}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{url('user/role/store')}}" method="POST">
            <div class="modal-body">
                @csrf
                <label for="">{{__('Enter a Unique Role')}}</label>
                <input type="text" name="name" data-validation="length" data-validation-length="2-25" class="form-control"/>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('Close')}}</button>
                <button type="submit" class="btn btn-info">{{__('Add')}}</button>
            </div>
        </form>
      </div>
    </div>
</div>
@endsection

@section('scripts')

@include('crm.user.roles_js')
<script>
  $(document).ready(function() {
    $('#roles').on('change', '.cl-switch', function() {
        var form = $(this).closest('form');
        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: form.serialize(),
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.error(error);
            }
        });
    });
});
</script>
@endsection