@extends('layout.adminapp')
@section('page-css')
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
  <link href="{{ asset('css/buttons.bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
    <link href="{{url('css/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{url('css/bootstrap-select/css/bootstrap-select.min.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('page-content')

      <section class="content mb-5">

        <div class="content-inner content-docs ">
          <div class="row">
    <div class="col-12">
      <div class="card mb-5">
        <div class="card-header">
        List of All Users
          <div class="float-right">
            <a   href="{!! route('ban.all') !!}" class="btn btn-sm btn-outline-tertiary ">
    <span class="btn-inner--icon"><i class="fas fa-ban"></i> Restrict All Users</span>
</a>
<a   href="{!! route('ban.grant.all') !!}" class="btn btn-sm btn-outline-warning ">
<span class="btn-inner--icon"><i class="fas fa-check"></i> Grant All Users Access</span>
</a>
            <button  data-toggle="collapse" href="#collapseExample" class="btn btn-sm btn-outline-primary btn-icon">
    <span class="btn-inner--icon"><i class="fas fa-plus"></i> Add</span>
</button>
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-4 mx-auto">
              @include('layout.alert')
            </div>
          </div>
          <div class="collapse" id="collapseExample">
<form action="{!! route('addusers') !!}" method="post">
  @csrf
  <div class="row">
    <div class="col-lg">
      <div class="form-group">
        <label for="">Name</label>
        <input type="text" required name="name" class="form-control">
      </div>
      <div class="form-group">
        <label for="">Email</label>
        <input type="email"  name="email" required class="form-control">
      </div>

      <div class="form-group">
        <label for="">Username</label>
        <input type="text"  name="username" class="form-control">
      </div>

      <div class="form-group">
        <label for="">Is He/She a Director</label>
        <select class="form-control" name="is_director">
          <option selected disabled hidden>--Select an Option--</option>
          <option value="1">Yes</option>
          <option value="0">No</option>
        </select>
      </div>

    </div>
    <div class="col-lg">
      <div class="form-group">
        <label for="">Department</label>

        <select class=" select2 form-control" required style="width:100%;" required name="dept" data-toggle="select2" data-placeholder="Choose ...">
  <option selected disabled hidden>--Select an Option--</option>
          @forelse ($dept as $key)
            <option value="{{ $key->name }}">{{ $key->name }}</option>
          @empty
          <option value="" disabled>  No Department Setup</option>
          @endforelse
				</select>
      </div>
      <div class="form-group">
        <label for="">Division</label>

        <select class=" select2 form-control" style="width:100%;"  name="division" data-toggle="select2" data-placeholder="Choose ...">
  <option selected disabled hidden>--Select an Option--</option>
          @forelse($division as $key)
                                            <option  value="{{$key->name}}">{{$key->name}}</option>
                                        @empty
                                            <option value="">No Division Setup</option>
                                        @endforelse
				</select>
      </div>
      <div class="form-group">
        <label for="">Contact Number</label>
        <input type="tel" required name="phone" class="form-control">
      </div>
      <div class="form-group">
        <label for="">Level</label>
        <select class="form-control" name="level" required>
          <option selected disabled hidden>--Select an Option--</option>
          <option value="MTN L1">MTN L1</option>
          <option value="MTN L2">MTN L2</option>
          <option value="MTN L3">MTN L3</option>
          <option value="MTN L3H">MTN L3H</option>
          <option value="MTN L4">MTN L4</option>
          <option value="MTN L5">MTN L5</option>
          <option value="ExtWF">ExtWF</option>
          <option value="Director">Director</option>
          <option value="N/A">N/A</option>
        </select>
      </div>
      <div class="form-group pt-4">
        <label for="">Employment Status</label>
        <select class="form-control" name="emp" required>
          <option selected disabled hidden>--Select an Option--</option>
          <option value="permanent">Permanent</option>
          <option value="Direct Contact">Direct Contact</option>
          <option value="Extended Workforce">Extended Workforce</option>
          <option value="NED">NED</option>
          <option value="INED">INED</option>
          <option value="ED">ED</option>

        </select>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button type="submit" class="btn btn-success col-lg-4" name="button">Submit</button>
  </div>
</form>
</div>
            {{$dataTable->table(['class' => 'table table-bordered table-striped table-centered table-hover w-100 dt-responsive nowrap mb-0',])}}
        </div>
      </div>
    </div>
          </div>
        </div>
@endsection

@section('page-js')
  <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js" charset="utf-8"></script>
  <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/buttons.print.min.js') }}"></script>
<script src="{{ asset('js/buttons.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/buttons.buttons.server-side.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
    {{$dataTable->scripts()}}
    <script src="{{url('css/select2/js/select2.min.js')}}"></script>
    <script src="{{url('css/bootstrap-select/js/bootstrap-select.min.js')}}"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('.select2').select2();
    });
    </script>
@endsection