@extends('layouts.master')

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

@section('style-plugins')
<link rel="stylesheet" href="{{ asset('assets/plugins/emoji/dist/style.css') }}">
@endsection

@section('style-custom')
<style>
    .card-scrollable {
        height: 70vh;
        overflow: auto;
    }
    .keyword-link {
        cursor: pointer;
        color: #adb5bd;
    }
    .keyword-active {
        color: white;
    }
    .keyword-link:hover {
        color: white;
    }
</style>
@endsection

@section('header', 'Manajemen User')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 col-lg-8">
            <div class="card card-outline card-success">
                <div class="card-header">
                    <h3 class="card-title">Tambah User</h3>
                    <div class="card-tools">
                        {{-- <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                            <i class="fas fa-minus"></i>
                        </button> --}}
                    </div>
                </div>
                <form class="form-horizontal" action="{{ url('users/simpan') }}" method="post" id="form-add-user">
                <div class="card-body">
                    @csrf
                    <div class="form-group row">
                        <label for="username" class="col-sm-3 col-form-label text-right">Username : </label>
                        <div class="col-sm-6">
                            <input type="text" name="username" id="username" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="nama" class="col-sm-3 col-form-label text-right">Nama : </label>
                        <div class="col-sm-9">
                            <input type="text" name="nama" id="nama" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="password" class="col-sm-3 col-form-label text-right">Password : </label>
                        <div class="col-sm-6">
                            <input type="password" name="password" id="password" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="password_confirmation" class="col-sm-3 col-form-label text-right">Konfirmasi Password : </label>
                        <div class="col-sm-6">
                            <input type="password" name="password_confirmation" id="password_confirmation" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputRoles" class="col-sm-3 col-form-label text-right">Role : </label>
                        <div class="col-sm-6">
                            <select name="role" id="inputRole" class="form-control">
                                @foreach (App\Models\Role::all() as $role)
                                    <option value="{{ $role->id }}" {{ ($role->name=='pegawai'?'selected':'') }}>{{ $role->display_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{{ url('users') }}" class="btn btn-sm btn-default"> <i class="fas fa-window-close"></i> Batal </a>
                    <button type="submit" class="btn btn-sm btn-warning" id="simpan"><i class="fas fa-save"></i> Simpan </button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-plugins')
<script src="{{ asset('assets/plugins/emoji/dist/jquery.emojiarea.js') }}"></script>
<script src="{{ asset('assets/plugins/autosize/autosize.js') }}"></script>
<script src="{{ asset('assets/js/helper.js') }}"></script>
<!-- Validation -->
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-validation/localization/messages_id.js') }}"></script>
@endsection

@section('script-custom')
    <script lang="text/javascript">
    $(function () {
        $("#form-add-user").validate({
            errorElement: "span",
            rules: {
                username: {
                    minlength: 5,
                    required: true,
                    remote: {
                        url: "{{ url('users/ajax/cek-username') }}",
                        type: "post",
                        data: {
                            username: function () {
                                return $("#username").val();
                            },
                            _token: "{{ csrf_token() }}"
                        }
                    }
                },
                nama: {
                    required: true
                },
                password: {
                    minlength: 5,
                    required: true
                },
                password_confirmation: {
                    minlength: 5,
                    required: true,
                    equalTo: "#password"
                },
                role: {
                    required: true
                },
            },
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('div').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
    </script>
@endsection