@extends('layouts.master')
@section('stylesheets')
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
  @endsection

@section('content')

  @component('partials.breadcrumbs')
    @slot('breadcrumb')
      {!! Breadcrumbs::render('edit-users', $user->id) !!}
     
    @endslot
  @endcomponent

  <div class="row justify-content-center">
    <div class="col-sm-8">
      <div class="box box-success">
        <div class="box-header">
          @include('users.columns.edit-header')
        </div>
        <div class="box-body">
          @include('users.forms.edit')
        </div>
      </div>
    </div>
  </div>

@endsection

@section('javascripts')
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
  <script type="text/javascript">

  $(document).ready(function() {
      $('#users').DataTable({
        "order": [0, "asc"]
      });
  } );

  (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>
@endsection