@extends('layouts.admin')
@section('content')
<section class="content-header">
    <label>
        Data Account
    </label>
    <ol class="breadcrumb">
        <li>
            <a href="{{ url('admin/dashboard') }}"><i class="fa fa-line-chart"></i> Dashboard</a>
        </li>
        <li class="active">Account</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <button class="btn btn-info btn-sm" onclick="reload()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                    <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#md-fadd">
                        <i class="fa fa-plus"></i> Tambah
                    </button>

                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nama Lengkap</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-user"></li></span>
                                    <input type="text" class="form-control" placeholder="Nama Lengkap" id="src_name" name="src_name">
                                </div>    
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Role</label>
                                <div class="input-group">
                                    <span class="input-group-addon"><li class="fa fa-user"></li></span>
                                    <select class="form-control select2" style="width: 100%;" id="src_role" name="src_role">
                                        <option value="">- Pilih Role -</option>
                                        <option value="User">User</option>
                                        <option value="admin">Admin</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>                
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="box box-success">
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <table id="ajax-datatables" class="table table-bordered table-hover table-striped" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nama Lengkap</th>
                                        <th>Email</th>
                                        <th>No.Handphone</th>
                                        <th>Role</th>
                                        <th width="20%">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="md-fadd">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Tambah User</h4>
            </div>
            <form id="fadd" action="javascript:submitForm('fadd', 'reset', 'dt')" url="{{ route('createAccount') }}">
                @csrf()
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="nama-lengkap" class="form-label">Nama Lengkap<span class="require"></span></label>
                                <input type="text" id="fullname" name="fullname"
                                    class="form-control inp-fadd" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label >No.Handphone</label>
                                <input type="number" id="phone" name="phone" class="form-control inp-fadd" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" id="email" name="email" class="form-control inp-fadd" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Role<span class="require"></span></label>
                                    <select class="form-control select2 inp-fadd" id="role" name="role" style="width: 100%;">
                                        <option value="">- Pilih -</option>
                                        <option value="User">User</option>
                                        <option value="Admin">Admin</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="companyname-field" class="form-label">Username<span class="require"></span></label>
                                <input type="text" id="username" name="username" class="form-control inp-fadd" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="companyname-field" class="form-label">Password<span
                                        class="require"></span></label>
                                <input type="password" id="password" name="password"
                                    class="form-control inp-fadd" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                        <li class="fa fa-times"></li> Close
                    </button>
                    <button type="submit" class="btn btn-primary" id="btn-fadd">
                        <li class="fa fa-save"></li> Simpan
                    </button>
                </div>
            </form>

        </div>
        <!-- /.modal-content -->
    </div>
</div>

<div class="modal fade" id="md-fedit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Account</h4>
            </div>
            <form id="fedit" action="javascript:submitForm('fedit', 'reset', 'dt')" url="{{ route('updateAccount') }}">
                @csrf()
                <input type="hidden" id="idAccount" name="accoutId">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="nama-lengkap" class="form-label">Nama Lengkap<span
                                        class="require"></span></label>
                                <input type="text" id="efullname" name="fullname"
                                    class="form-control inp-fedit" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="no_hp" class="form-label">No.Hp</label>
                                <input type="number" id="ephone" name="phone"
                                    class="form-control inp-fedit" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label >Email</label>
                                <input type="email" id="eemail" name="email"
                                    class="form-control inp-fedit" />
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Role<span class="require"></span></label>
                                    <select class="form-control select2 inp-fadd" id="erole" name="role" style="width: 100%;">
                                        <option value="">- Pilih -</option>
                                        <option value="User">User</option>
                                        <option value="Admin">Admin</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">
                        <li class="fa fa-times"></li> Close
                    </button>
                    <button type="submit" class="btn btn-primary" id="btn-fedit">
                        <li class="fa fa-save"></li> Simpan
                    </button>
                </div>
            </form>

        </div>
        <!-- /.modal-content -->
    </div>
</div>

<div class="modal fade" id="md-password" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Reset Password <strong id="name_admin"></strong></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}" />
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Password</label>
                            <input type="text" class="form-control" id="reset_pass" name="reset_pass">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">                            
                    <li class="fa fa-times"></li> Close                   
                </button>
                <button type="submit" class="btn btn-primary" id="btn-pw" onclick="resetPass()"><li class="fa fa-save"></li> Simpan</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="md-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Hapus Account</h4>
            </div>
            <div class="modal-body">
                <p style="text-align: center">
                    <i class="fa fa-exclamation-triangle" style="font-size: 35px;color:#C23F44" ></i>&nbsp
                    <label style="font-size: 35px;"> Apakah anda yakin ? </label>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">                            
                    <li class="fa fa-times"></li> Close                   
                </button>
                <button type="submit" class="btn btn-danger" id="btn-del"  onclick="del()"><li class="fa fa-trash"></li> Proses</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<input type="hidden" id="getId">
<script>
    var table;
    $(document).ready(function() {
        $('#md-fadd').on('shown.bs.modal', function() {
            $("#fullname").focus();
        });

        $('#md-password').on('shown.bs.modal', function() {
            $("#reset_pass").focus();
        });


        $("#src_role").change(function() {
            table.ajax.reload(null, false);
        });

        $("#src_name").keypress(function(e) {
            if (e.which == 13) {
                table.ajax.reload(null, false);
            }
        });

        table = $('#ajax-datatables').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            responsive: true,
            ajax: {
                url: "{{ route('getAccount') }}",
                data: function(d) {
                    d.src_role = $('#src_role').val(),
                    d.src_name = $('#src_name').val()
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false

                },
                {
                    data: 'fullname',
                    name: 'fullname'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'role',
                    name: 'role'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });

    });

    function edit(id) {
        $('#idAccount').val(id);
        $.ajax({
            url: "{{ route('getByAccount') }}",
            type: "GET",
            data: {
                id
            },
            daraType: "json",
            cache: false,
            beforeSend: function() {
                $(".inp").attr("disabled", "disabled");
            },
            success: function(data) {
                $("#efullname").val(data.fullname);
                $("#ephone").val(data.phone);
                $("#eemail").val(data.email);
                $("#erole").val(data.role);
                $("#erole").trigger("change");
            },
            complete: function() {
                $(".inp").removeAttr("disabled");
            }
        });
    }

    function del() {
        var id = $("#getId").val();
        var _token = $("#_token").val();
        $.ajax({
            url: "{{route('deleteAccount')}}",
            type: "POST",
            data: {
                id,
                _token
            },
            daraType: "json",
            cache: false,
            beforeSend: function() {
                $("#btn-del").attr("disabled", "disabled");
                $("#btn-del").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
            },
            success: function(data) {
                if (data.status == "success") {
                    table.ajax.reload(null, false);
                    $('#md-delete').modal('toggle');
                }

                notif(data.message, data.status);
            },
            complete: function() {
                $("#btn-del").removeAttr("disabled");
                $("#btn-del").html("<li class='fa fa-trash'></li> Proses");
            }
        });
    }

        function resetPass() {
            var id = $("#getId").val();
            var password = $("#reset_pass").val();
            var _token = $("#_token").val();
            $.ajax({
                url: "{{route('resetPassword')}}",
                type: "POST",
                data: {
                    id,
                    password,
                    _token
                },
                daraType: "json",
                cache: false,
                beforeSend: function() {
                    $("#btn-pw").attr("disabled", "disabled");
                    $("#btn-pw").html("<i class='fa fa-spinner fa-pulse'></i> Loading...");
                },
                success: function(data) {
                    if (data.status == "success") {
                        table.ajax.reload(null, false);
                        $('#md-password').modal('toggle');
                    }

                    notif(data.message, data.status);
                },
                complete: function() {
                    $("#btn-pw").removeAttr("disabled");
                    $("#btn-pw").html("<li class='fa fa-save'></li> Simpan");
                }
            });
        }

    function reload() {
        table.ajax.reload(null, false);
        $("#src_name").val("");
        $("#src_role").val("");
        $("#src_role").trigger("change");

    }

    function getId(id) {
        $("#getId").val(id);
    }
</script>
@endsection