@extends('layouts.master')

@section('title', 'Users')

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

@section('plugin-styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css')}}">
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
{{-- <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}"> --}}
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="{{asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">
@endsection

@section('content')
<div class="col-md-8 col-sm-12">
    <div class="card card-warning">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-user-edit"></i> Edit User <strong>{{$user->nip}}</strong></h3>
            <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <form role="form" id="form-user" method="POST" action="{{ url('user/simpan') }}">
        {{ csrf_field() }}
        {{ method_field('patch') }}
        <input type="hidden" name="id" id="user-id" value="{{$user->id}}">
        <div class="card-body">
            <div class="form-group">
                <label for="inputNama">Nama :</label>
                <input type="text" class="form-control" id="inputNama" name="nama" placeholder="Nama" value="{{$user->nama}}">
            </div>
            <div class="form-group">
                <label for="inputPassword">Password :</label>
                <input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="inputPasswordUlang">Password Ulang :</label>
                <input type="password" class="form-control" id="inputPasswordUlang" name="passwordulang" placeholder="Password Ulang">
            </div>
            <div class="form-group">
                <label for="inputEmail">Email :</label>
                <input type="text" class="form-control" id="inputEmail" name="email" placeholder="Email" value="{{$user->email}}">
            </div>
            <div class="form-group">
                <label for="inputPhone">Telepon/HP :</label>
                <input type="text" class="form-control" id="inputPhone" name="phone" placeholder="Telepon" value="{{$user->phone}}">
            </div>
            <div class="form-group">
                <label>Group Kota :</label>
                <select id="kota" name="kota" class="form-control select2bs4" data-placeholder="Group Kota" data-dropdown-css-class="select2-danger" style="width: 100%;">
                    <option></option>
                    @foreach(Haji\Model\Kota::all() as $kota)
                        <option value="{{$kota->id}}" {{($user->kota_id==$kota->id)?'selected':''}}>{{$kota->keterangan}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Role Aplikasi :</label>
                <select id="role" name="role" class="form-control select2bs4" data-placeholder="Role Aplikasi" data-dropdown-css-class="select2-danger" style="width: 100%;">
                    @foreach(Haji\Model\Role::all() as $rolelist)
                        <option value="{{$rolelist->id}}" {{($user->hasRole($rolelist->name)?'selected':'')}}>{{$rolelist->display_name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group" id="premission-group">
                <label for="inputPhone">Permissions :</label>
                <div class="form-group">
                    <div class="icheck-success d-inline">
                        <input type="checkbox" id="checkboxLaporan" value="11" disabled="disabled" checked>
                        <label for="checkboxLaporan">
                            Cetak Laporan
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="icheck-success d-inline">
                        <input type="checkbox" id="checkboxTT" name="permissions[]" value="9" {{($user->can('cetak-tt')?'checked':'')}}>
                        <label for="checkboxTT">
                            Cetak Tanda Terima Permohonan
                        </label>
                    </div>
                </div>
                @foreach (Haji\Model\Permission::whereNotIn('id',[7,8,9,10,11])->get() as $perm)
                <div class="form-group" id="premission-group">
                    <div class="icheck-success d-inline">
                        <input type="checkbox" id="checkbox{{$perm->id}}" name="permissions[]" value="{{$perm->id}}" {{($user->can($perm->name)?'checked':'')}}>
                        <label for="checkbox{{$perm->id}}">
                            {{$perm->display_name}}
                        </label>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <a href="{{ url('user') }}" class="btn btn-default">Batal</a>
            <button type="submit" class="btn btn-warning float-right">Simpan</button>
        </div>
        <!-- /.card-footer-->
        </form>
    </div>
    <!-- /.card -->
</div>
@endsection

@section('plugin-scripts')
<!-- DataTables -->
<script src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>
<!-- Select2 -->
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<!-- Input Mask -->
<script src="{{asset('plugins/inputmask/min/jquery.inputmask.bundle.min.js')}}"></script>
<!-- JQuery Validate -->
<script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('plugins/jquery-validation/localization/messages_id.min.js') }}"></script>
@endsection

@section('custom-script')
<script type="text/javascript">
    $(function() {
        'use strict';
        $("#premission-group").hide();
        if ($('#role').val() == 2) {$("#premission-group").show();}
        $('.select2bs4').select2();
        $("[data-mask]").inputmask();
        $('#role').on('select2:select', function (e) {
            var data = e.params.data;
            if (data.id == 2) {
                $("#premission-group").show();
            } else {
                $("#premission-group").hide();
            }
        });

        $('#form-user').validate({
            ignore: [],
            rules: {
                'nama': {
                    required: true,
                },
                'password': {
                    minlength: 5
                },
                'passwordulang': {
                    minlength: 5,
                    equalTo: "#inputPassword",
                },
                'email': {
                    email: true
                },
                'phone': {
                    digits: true
                },
                'kota': {
                    required: true,
                },
                'role': {
                    required: true,
                }
            },
            highlight: function (input) {
                $(input).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function (input) {
                $(input).addClass('is-valid').removeClass('is-invalid');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.form-group').append(error);
            },
            errorClass : "error text-danger font-weight-light",
        });

        $(document).on("change", ".select2bs4", function() {
            $('#form-user').valid();
        });
    });
</script>
@endsection