@extends('backend.adminlayouts.master')

@section('body')
<h3 class="text-gray-700 text-3xl font-medium">Creeaza rol</h3>
<div class="md:grid md:grid-cols-4 md:gap-6 mt-10 mb-10">
    <div class="mt-5 md:mt-0 md:col-span-4">
        <form action="{{ route('roles.store') }}" method="POST">
            @csrf
            <div class="shadow overflow-hidden sm:rounded-md">
                <div class="px-4 py-5 bg-white sm:p-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Nume</label>
                        <input type="text" name="name" id="name" class="mt-1 block w-full focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" value="{{ old('name') }}">
                    </div>

                    <div class="mt-4">
                        <label for="permissions" class="block text-sm font-medium text-gray-700">Permisiuni</label>
                        <select name="permissions[]" id="permissions" class="mt-1 block w-full focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" multiple>
                            @foreach($permissions as $permission)
                            <option value="{{ $permission->id }}">{{ $permission->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex justify-end space-x-4 px-4 py-3 gap-3 bg-gray-50 sm:px-6 mt-8">
                        <a href="{{ route('roles.index') }}" class="px-6 py-2 bg-green-600 text-white font-medium text-xs uppercase rounded shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-900 transition duration-150 ease-in-out">Inapoi</a>
                        <button type="submit" class="px-6 py-2 bg-blue-700 text-white font-medium text-xs uppercase rounded shadow-md hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-900 transition duration-150 ease-in-out">Salveaza</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection