@extends('layout.master')

@section('title', 'Add User')

@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 User</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 User</h6>
        <form action="{{route('users.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="exampleInputEmail1">Email address*</label>
            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" placeholder="Email" value="{{old('email')}}">
            @error('email')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password*</label>
            <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" id="password" autocomplete="off" placeholder="Password">
            @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
            @enderror
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Confirm Password*</label>
            <input type="password" class="form-control @error('c_password') is-invalid @enderror" name="c_password" id="c_password" autocomplete="off" placeholder="Password">
            @error('c_password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
          </div>
          <div class="form-group">  
            <label for="role">Role* <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="role" id="role" class="form-control @error('role') is-invalid @enderror" multiple="multiple">
              @foreach ($role as $roles)
                  <option value="{{$roles}}">{{$roles}}</option>
              @endforeach
            </select>
            @error('role')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
            @enderror
          </div>
          <hr>
          <button type="submit" class="btn btn-primary mr-2">Save</button>
          <a class="btn btn-light" href="{{route('users.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 ($("#role").length) {
        $("#role").select2();
      }
    });
    $('.select-all').click(function(){
      $('#role').select2('destroy').find('option').prop('selected', 'selected').end().select2();
    });
    $('.deselect-all').click(function(){
      $('#role').select2('destroy').find('option').prop('selected', false).end().select2();
    });
  </script>
@endpush