@extends('layouts.admin.main')

@section('content')
<div class="mb-3">
    <h1 class="h3 d-inline align-middle">User</h1>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                    <a href="{{ route('admin.settings.users.index') }}" class="btn btn-sm btn-secondary"><i class="align-middle me-2" data-feather="table"></i>Daftar User</a>
                </div>
                <h4 class="card-title mb-0">Tambah User Baru</h4>
            </div>
            <div class="card-body">
                <form id="form-create-user" action="{{ route('admin.settings.users.store') }}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <div class="row mb-3">
                        <div class="col-md-3 col-12 form-group">
                            <label for="name" class="form-label">Nama</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                id="name" name="name" value="{{ old('name') }}" >
                            @error('name')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3 col-12 form-group">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control @error('username') is-invalid @enderror" 
                                id="username" name="username" value="{{ old('username') }}" >
                            @error('username')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3 col-12 form-group">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                id="password" name="password" value="{{ old('password') }}" >
                            @error('password')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <button type="reset" class="btn btn-sm btn-secondary mt-3"><i class="align-middle me-2" data-feather="refresh-ccw"></i>Reset</button>
                    <button type="submit" class="btn btn-sm btn-success mt-3"><i class="align-middle me-2" data-feather="save"></i>Simpan</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.22.1/jquery.validate.min.js" 
        integrity="sha512-aK+gwLBXdXY6QDrdpK6jYtTlIfzChVNqAh3V6D5c8nV8U9O5NvC/EJ44aAKj9moRsx7bAibHZbX0wvblVp8wSA==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function() {
        $("#form-create-user").validate({
            rules: {
                name: {
                    required: true,
                },
                password: {
                    required: true,
                    minlength: 8
                },
                username: {
                    required: true,
                }
            },
            messages: {
                name: {
                    required: "Nama harus diisi.",
                },
                password: {
                    required: "Password baru harus diisi.",
                    minlength: "Password minimal 8 karakter."
                },
                username: {
                    required: "Username harus diisi.",
                }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endpush