@extends('layouts.master')
@section('title') Roles Management  @endsection
@section('css')

<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}">
<link rel="stylesheet" href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}">
<style>
#statuschange{
    width:80px;
}
.success-msg,.error-msg {
                    margin: 10px 0;
                    padding: 10px;
                    border-radius: 3px 3px 3px 3px;
                  }
                  .error-msg {
                    color: #D8000C;
                    background-color: #FFBABA;
                  }
                  .success-msg {
                    color: #270;
                    background-color: #DFF2BF;
                  }
</style>
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title') Roles Management @endslot
@can('Roles Create')
@slot('add_btn') <h4 class="card-title"><a style="margin-left: -28%;background:#314667;border:1px solid #314667;color:white;" href="{{ route('roles.create') }}"
        class="btn btn-primary waves-effect btn-label waves-light"><i class="bx bx-plus label-icon"></i>Add Role</a></h4> @endslot
@endcan
@endcomponent
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                   @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

        @if (Session::get('error'))
                                          <div class="error-msg alert">
                                              <button type="button" class="close" data-dismiss="alert">×</button>
                                              <i class="fa fa-times-circle"></i>
                                              {{ Session::get('error') }}
                                          </div>
                                      @endif

                                        <!-- For Success Messages -->
                                      @if (Session::get('success'))
                                      <div class="success-msg alert">
                                          <button type="button" class="close" data-dismiss="alert">×</button>
                                          <i class="fa fa-check"></i>
                                          {{ Session::get('success') }}
                                      </div>
                                      @endif


                <div class="table-responsive">

                    <table id="UsersList1" class="table">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th width="70%">Role</th>
                                @canany(['Roles Edit','Roles Delete'])
                                <th>Action</th>
                                @endcan
                            </tr>
                        </thead>
                        <tbody>
                        @if(!empty($roles))
                        @php $i = 1; @endphp
                        @foreach($roles as $row)
                        <tr>
                            <td>{{$i}}</td>
                            <td>{{$row->title}}</td>
                            @canany(['Roles Edit','Roles Delete'])
                            <td>
<!--
                             <a href="{{route('roles.edit', $row->id)}}"  class="btn btn-outline-secondary btn-sm edit" title="Edit"><i class="fas fa-pencil-alt"></i></a> -->


                              @if($row->id != '1')

                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="mdi mdi-dots-horizontal font-size-18"></i>
                                        </a>


                                        <div class="dropdown-menu dropdown-menu-right">
                                            @can('Roles Edit')
                                            <a class="dropdown-item" href="{{route('roles.edit', $row->id)}}"><i class="fas fa-pencil-alt text-success me-1"></i>&nbsp; Edit</a>
                                            @endcan
                                            @can('Roles Delete')
                                            <a class="dropdown-item" href="javascript:void(0);" data-id="{{$row->id}}" id="delete"><i class="fas fa-trash text-danger me-1"></i>&nbsp; Delete</a>
                                            @endcan
                                        </div>
                                    </div>

                                @endif
                              </td>
                              @endcan
                        </tr>
                        @php $i++ ; @endphp
                        @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- Plugins js -->
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>

<!-- Init js-->

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            $('#UsersList1').DataTable();
            $(document).on('click','#delete',function(){
                  var id = $(this).attr('data-id');
                  swal({
                         title: "Are you sure?",
                         text: "Once deleted, you will not be able to recover this role!",
                         icon: "warning",
                         buttons: true,
                         dangerMode: true,
                        })
                        .then((willDelete) => {
                                if (willDelete) {

                                       $.ajax({
                                type: "POST",
                                url: '{{route("roles.delete")}}',
                                data: {'id': id, "_token": "{{ csrf_token() }}"},
                                success: function(data){

                                    if(data.status == 1){

                                        $(".wrapper").css('pointer-events','auto');
                                        $(".wrapper").css('opacity',1);
                                         swal("Role has been deleted!", {
                                                 icon: "success",
                                            }).then(function(){
                                                location.reload();
                                            });
                                    }else{

                                        $(".wrapper").css('pointer-events','auto');
                                        $(".wrapper").css('opacity',1);
                                            swal("Role has not been deleted! something went wrong", {
                                                icon: "error",
                                           }).then(function(){
                                            location.reload();
                                         });
                                    }
                                    }
                                        });



                        } else {

                         }
                     });
            });
        } );
</script>

@endsection