@extends('web.layouts.base')

@section('titre', 'Rôles de l\'utilisateur')
@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">
    @if (count($errors) > 0)
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">
                <i class="fal fa-times"></i>
            </span>
        </button>
        <div class="d-flex flex-start w-100">
            <div class="mr-2 hidden-md-down">
                <span class="icon-stack icon-stack-lg">
                    <i class="base base-6 icon-stack-3x opacity-100 color-danger-500"></i>
                    <i class="base base-10 icon-stack-2x opacity-100 color-danger-300 fa-flip-vertical"></i>
                    <i class="fal fa-info icon-stack-1x opacity-100 color-white"></i>
                </span>
            </div>
            <div class="d-flex flex-fill">
                <div class="flex-fill">
                    <p class="h6">Erreur lors de l'enregistrement</p>
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li><code>{{ $error }}</code></li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    @endif
<div class="row">
    <div class="col-xl-12">
        <div id="panel-2" class="panel">
            <div class="panel-hdr">
                <h2>
                    Ajout d'un role </span>
                </h2>
                <div class="panel-toolbar">
                    <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10"
                        data-original-title="Réduire"></button>
                    <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip"
                        data-offset="0,10" data-original-title="Plein écran"></button>
                    <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10"
                        data-original-title="Close"></button>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <a href="{{ route('roles.index') }}" class="btn btn-outline-primary waves-effect waves-themed">
                        <i class="fal fa-reply"></i> Retour
                    </a>
                    {{-- <br> --}}
                </div>
                <div class="panel-content p-0">
                    <form class="needs-validation" novalidate action="{{ route('roles.store') }}" method="POST">
                        @csrf
                        {{-- @method('PUT') --}}
                        <div class="panel-content">
                            <div class="form-row form-group">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationCustom03">Nom du rôle de l'utilisateur<span
                                            class="text-danger">*</span></label>
                                    <input id="name" type="text"
                                        class="form-control @error('name') is-invalid @enderror" name="name"
                                        value="{{ old('name') }}" autocomplete="name" autofocus
                                        placeholder="Entrer le nom de l'role" 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 accorder à cette
                                        utilisateur <span class="text-danger">*</span></label>
                                    <br>
                                    <div class="form-group">
                                        @foreach($permission as $value)
                                        <label>{{ Form::checkbox('permission[]', $value->id, false, array('class' =>
                                            'name')) }}
                                            {{ $value->name }}</label>
                                        @endforeach
                                    </div>
                                    {{-- @foreach($permission as $value)
                                    <div class="custom-control custom-switch custom-control-inline">
                                        <input name="permission" type="checkbox" class="custom-control-input"
                                            id="{{ $value->id }}" value="{{ $value->id }}">
                                        <label class="custom-control-label" for="{{ $value->id }}">{{ $value->name
                                            }}</label>
                                    </div>
                                    @endforeach --}}
                                    @error('permission')
                                    <small id="permission" class="invalid-feedback form-text text-muted" role="alert">
                                        <span style="color: red">{{ $message }} 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">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>
</div>
</div>
</div>
@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