@extends('web.layouts.base')

@section('titre')
Liste des rôles
@endsection

@section('styles')
<link href="{{ asset('dt/css/datagrid/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('dt/css/skins/skin-master.css') }}" rel="stylesheet" type="text/css">
<script src="{{ asset('assets/js/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/js/umd/popper.min.js') }}"></script>
<script src="{{ asset('assets/js/js/bootstrap.min.js') }}"></script>
@endsection

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Liste des rôles</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Liste des rôles</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Ajouter, Modifier & Supprimer</h4>
                    </div><!-- end card header -->

                    <div class="card-body">
                        <div id="customerList">
                            <div class="d-flex align-items-center g-4 mb-3">
                                @can('Liste des roles')
                                <div class="col-sm">
                                    <div>
                                        <a class="btn btn-outline-primary waves-effect waves-themed" type="button" href="{{ route('roles.index') }}"
                                            class="btn btn-primary"><i class="fas fa-reply"></i> Retour</a>
                                    </div>
                                </div>
                                <br>
                                @endcan
                            </div>
                            <div class="panel-container show">
                                <div class="panel-content p-0">
                                    <form class="needs-validation" novalidate action="{{ route('roles.update',$role->id) }}"
                                        method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="panel-content">
                                            <div class="form-row form-group">
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label" for="validationCustom03">Nom d'utilisateur <span
                                                            class="text-danger">*</span></label>
                                                    <input id="name" type="text"
                                                        class="form-control @error('name') is-invalid @enderror" name="name"
                                                        value="{{ $role->name }}" autocomplete="name" autofocus
                                                        placeholder="Entrer le nom de l'utilisateur" maxlength="25" required>
                                                    <div class="invalid-feedback">
                                                        Champs obligatoire
                                                    </div>
                                                    @error('name')
                                                    <small id="name" class="invalid-feedback form-text text-muted" role="alert"><span
                                                            style="color: red">{{ $message }}</span></small>
                                                    @enderror
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label" for="validationCustom03">Permission <span
                                                            class="text-danger">*</span></label>
                                                    <br>
                                                    @foreach($permission as $value)
                                                    <label class="form-check-inline form-check-primary mb-3">{{ Form::checkbox('permission[]', $value->id, in_array($value->id,
                                                        $rolePermissions) ? true : false, array('class' => 'form-check-input', 'id' =>
                                                        'permission')) }}
                                                        {{ $value->name }}</label>
                                                    @endforeach

                                                    <small id="permission" class="invalid-feedback form-text text-muted" role="alert">
                                                        <span style="color: red"> Champ obligatoire</span></small>
                                                    {{-- @enderror --}}
                                                    <div class="invalid-feedback">
                                                        Champs obligatoire
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="panel-content border-faded border-left-0 border-right-0 border-bottom-0 d-flex flex-row align-items-center">
                                            <button class="btn btn-primary ml-auto" type="submit" id="showtoast">Enregistrer</button>
                                        </div>
                                    </form>
                                    <script>
                                        // Example starter JavaScript for disabling form submissions if there are invalid fields
                                        (function () {
                                            'use strict';
                                            window.addEventListener('load', function () {
                                                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                                                var forms = document.getElementsByClassName('needs-validation');
                                                // Loop over them and prevent submission
                                                var validation = Array.prototype.filter.call(forms, function (form) {
                                                    form.addEventListener('submit', function (event) {
                                                        if (form.checkValidity() === false) {
                                                            event.preventDefault();
                                                            event.stopPropagation();
                                                        }
                                                        form.classList.add('was-validated');
                                                    }, false);
                                                });
                                            }, false);
                                        })();

                                    </script>
                                </div>
                            </div>

                        </div>
                    </div><!-- end card -->
                </div>
                <!-- end col -->
            </div>
            <!-- end col -->
        </div>
        <!-- end row -->
        @include('web.layouts.others.modale-suppression')
    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->
@endsection

@section('scripts')
{{-- <script src="{{ asset('assets/js/js/bootstrap.bundle.min.js') }}"></script> --}}
<script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>

<script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
<script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
<script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
<script src="{{ asset('assets/js/plugins.js') }}"></script>
<script src="{{ asset('assets/libs/prismjs/prism.js') }}"></script>
<script src="{{ asset('assets/js/app.js') }}"></script>
@endsection