@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">User Management</a></li>
    <li class="breadcrumb-item active" aria-current="page">Add Roles</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Add Roles</h6>
        <form action="{{route('roles.store')}}" method="POST">
          @csrf
          <div class="form-group">
            <label for="exampleInputUsername1">Name*</label>
            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="name" autocomplete="off" placeholder="Name" value="{{old('name')}}">
            @error('name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
            @enderror
          </div>
          <div class="form-group">  
            <label for="permission">Permission* <span class="btn btn-outline-primary btn-xs select-all">Select All</span> <span class="btn btn-outline-primary btn-xs deselect-all">Deselect All</span></label>
            <select name="permission[]" id="permission" class="form-control @error('permission') is-invalid @enderror" multiple="multiple">
              @foreach ($permission as $permissions)
                  <option value="{{$permissions}}">{{$permissions}}</option>
              @endforeach
            </select>
            @error('permission')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
            @enderror
          </div>
          <button type="submit" class="btn btn-primary mr-2">Save</button>
          <a class="btn btn-light" href="{{route('roles.index')}}">Cancel</a>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/file-upload.js') }}"></script>
  <script>

    $(function() {
      'use strict'
      if ($("#permission").length) {
        $("#permission").select2();
      }
    });
    $('.select-all').click(function(){
      $('#permission').select2('destroy').find('option').prop('selected', 'selected').end().select2();
    });
    $('.deselect-all').click(function(){
      $('#permission').select2('destroy').find('option').prop('selected', false).end().select2();
    });
  </script>
@endpush