@section('title', 'Módulo Roles')
@extends('layouts.panel')
@section('header')
    <div class="container-fluid iq-container">
        <div class="row">
            <div class="col-md-12">
                <div class="flex-wrap d-flex justify-content-between align-items-center" style="color: black">
                    <div>
                        <h1>Roles</h1>
                    </div>
                    @can('roles.create')
                        <div>

                            <a href="{{ route('role.create') }}" class="btn btn-primary" style="color: white; border-radius: 12px">
                                <svg width="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M7.33 2H16.66C20.06 2 22 3.92 22 7.33V16.67C22 20.06 20.07 22 16.67 22H7.33C3.92 22 2 20.06 2 16.67V7.33C2 3.92 3.92 2 7.33 2ZM12.82 12.83H15.66C16.12 12.82 16.49 12.45 16.49 11.99C16.49 11.53 16.12 11.16 15.66 11.16H12.82V8.34C12.82 7.88 12.45 7.51 11.99 7.51C11.53 7.51 11.16 7.88 11.16 8.34V11.16H8.33C8.11 11.16 7.9 11.25 7.74 11.4C7.59 11.56 7.5 11.769 7.5 11.99C7.5 12.45 7.87 12.82 8.33 12.83H11.16V15.66C11.16 16.12 11.53 16.49 11.99 16.49C12.45 16.49 12.82 16.12 12.82 15.66V12.83Z"
                                        fill="currentColor"></path>
                                </svg>
                                Registrar
                            </a>
                        </div>
                    @endcan
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div class="header-title">
                        <h4 class="card-title"> Lista De Roles </h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable" class="table table-striped" data-toggle="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($roles as $role)
                                    <tr>
                                        <td>
                                            @can('roles.show')
                                                <a href="{{ route('role.show', $role) }}" class="btn btn-primary"> 
                                                
                                                    <i data-feather='eye'></i>
                                                </a>
                                            @endcan
                                        </td>
                                        <td>{{ $role->name }}</td>

                                        <td class="text-center">
                                            <ul class="table-controls">
                                                <form action="{{ route('role.destroy', $role) }}" method="POST"
                                                    class="casino">
                                                    @csrf
                                                    @method('DELETE')
                                                    @can('roles.edit')
                                                        <a href="{{ route('role.edit', $role) }}" class="btn btn-primary"
                                                            data-bs-toggle="tooltip" data-bs-placement="top" title="Editar"
                                                            data-original-title="Edit">
                                                            <i data-feather='edit'></i>

                                                        
                                                        </a>
                                                    @endcan
                                                    @can('roles.destroy')
                                                        <button type="submit" class="btn btn-danger"
                                                            >
                                                        
                                                            <i data-feather='trash-2'></i></button>
                                                    @endcan
                                                </form>



                                            </ul>
                                        </td>
                                        {{-- <td class="text-center">
                                            <ul class="table-controls">
                                                <form action="{{ route('usuario.activar', $categorium) }}" method="POST"
                                                    class="casino formulario2">
                                                    @csrf
                                                    @method('POST')
                                                    <button type="submit"
                                                        class="btn btn-success {{ $categorium->estado == '1' ? 'disabled' : '' }}"
                                                        style="">activar</button>
                                                </form>
                                            </ul>
                                        </td> --}}
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('scripts')
    <script>
        $('.casino').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de eliminar este rol?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>
    @if (session('editar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Actualizo Satisfactoriamente!!'
            })
        </script>
    @endif


    @if (session('guardar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Guardo Satisfactoriamente!!'
            })
        </script>
    @endif
@endsection