@extends('layouts.index')
@section('title')
    Add User
@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ url('dashboard') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ url('users') }}" class="link">User</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Add
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Add User</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
          <div class="col-12">
              <div class="col-lg-6">
                  <div class="card">
                      <div class="card-body">
                          <form class="" action=" {{ route('users.store') }}" method="POST">
                              @csrf
                              <div class=" form-floating mb-3">
                                  <input type="text" name="name" value="{{ old('name') }}"
                                      class="form-control @error('name') is-invalid @enderror"
                                      placeholder="Nama Lengkap" />
                                  <label><i data-feather="user" class="feather-sm text-info fill-white me-2"></i><span
                                          class="border-start border-info ps-3">Fullname</span></label>
                                          @error('name')
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                          @enderror
                              </div>
                              <div class="form-floating mb-3">
                                  <input name="email" type="email" value="{{ old('email') }}"
                                      class="form-control @error('email') is-invalid @enderror" placeholder="Email" />
                                  <label><i data-feather="mail" class="feather-sm text-info fill-white me-2"></i><span
                                          class="border-start border-info ps-3">Email address</span></label>
                                        @error('email')
                                          <div class="invalid-feedback">
                                              {{$message}}
                                          </div>
                                        @enderror
                              </div>
                              <div class="form-floating mb-3">
                                  <input name="password" type="password" value="{{ old('password') }}"
                                      class="form-control @error('password') is-invalid @enderror" placeholder="password" />
                                  <label><i data-feather="key" class="feather-sm text-info fill-white me-2"></i><span
                                          class="border-start border-info ps-3">Password</span></label>
                                  @error('password')
                                    <div class="invalid-feedback">
                                        {{$message}}
                                    </div>
                                  @enderror
                              </div>
                              <div class="form-floating mb-3">
                                  <input name="password_confirmation" type="password" value="{{ old('password_confirmation') }}"
                                      class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="password_confirmation" />
                                  <label><i data-feather="key" class="feather-sm text-info fill-white me-2"></i><span
                                          class="border-start border-info ps-3">Password confirmation</span></label>
                              </div>
                              <div class="form-floating mb-3">
                                <select name="roles" class="form-select @error('roles') is-invalid @enderror">
                                    <option value="">-Choose Role-</option>
                                    @foreach($roles as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                    @endforeach
                                </select>
                                <label><i data-feather="key" class="feather-sm text-info fill-white me-2"></i><span
                                        class="border-start border-info ps-3">Role</span></label>
                                      @error('roles')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                      @enderror
                            </div>
                              <div class="d-md-flex align-items-center">
                                  <div class="mt-3 mt-md-0 ms-auto">
                                      <a href="{{ url('users') }}"
                                          class="
                                              btn btn-outline-info
                                              font-weight-medium
                                              rounded-pill
                                              px-4
                                              ">
                                          <div class="d-flex align-items-center">
                                              <i data-feather="arrow-left-circle" class="feather-sm fill-white me-2"></i>
                                              Back
                                          </div>
                                      </a>
                                      <button type="submit"
                                          class="
                                              btn btn-info
                                              font-weight-medium
                                              rounded-pill
                                              px-4
                                              ">
                                          <div class="d-flex align-items-center">
                                              <i data-feather="send" class="feather-sm fill-white me-2"></i>
                                              Save
                                          </div>
                                      </button>
                                  </div>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>

@endsection
@section('js')
    <script src="{{ asset('back') }}/extra-libs/prism/prism.js"></script>
@endsection