@extends('user.layouts.index')
@section('content')
<div class="container-fluid">
    <div class="side-body">
        <div class="page-title">
            <span class="title"></span>
            <div class="description"></div>
            <a href="#" data-toggle="modal" data-target="#create-modal" class="btn btn-default">
                <i class="glyphicon glyphicon-plus-sign"></i> Tambah User
            </a>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="card">
                    <!--<div class="card-header">s
                        <div class="card-title">
                            <div class="title">
                                
                            </div>
                        </div>
                    </div>-->
                    <div class="card-body">
                    <div class="sub-title">User</div>
                        <table class="datatable table table-striped" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Email</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            
                            @foreach($user as $users)
                                <tr>
                                    <td width="5%">{{ $no++ }}</td>
                                    <td>{{ $users->name }}</td>
                                    <td>{{ $users->email }}</td>
                                    <td width="5%">
                                        <a href="{{ url('user/users/'.$users->id) }}" class="btn btn-default">
                                            <i class="glyphicon glyphicon-folder-open"></i>
                                        </a>                                        
                                    </td>
                                </tr>
                            @endforeach    
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Create -->
<div class="modal fade" id="create-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="{{ url('user/users') }}" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </a>
                <h4 class="modal-title" id="myModalLabel">Tambah User</h4>
            </div>
            {!! Form::open(
                    array(
                        'url' => 'user/users',
                        'id' => 'create-user',
                        'class' => 'form-horizontal'
                    )
                )
            !!}      
            <div class="modal-body">
                <div class="alert alert-success info" style="display:none;">
                  <ul></ul>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label text-right">Nama</label>
                    <div class="col-sm-10">
                        <input name="name" value="{{ old('name') }}" type="text" class="form-control" id="name" placeholder="Nama">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input name="email" value="{{ old('email') }}" class="form-control" id="email" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input name="password" type="password" class="form-control" id="password" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password_confirmation " class="col-sm-2 control-label">Konfirmasi</label>
                    <div class="col-sm-10">
                        <input name="password_confirmation" type="password" class="form-control" id="password_confirmation" placeholder="Konfirmasi Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-primary">Reset</button>
                        <a href="{{ url('user/users') }}" class="btn btn-primary">Close</a>
                    </div>
                </div>  
            </div>

            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $(document).ready(function(){     
        var info = $('.info');

        $('#create-user').submit(function(event){
            event.preventDefault();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                cache: false
               
            }).done(function(data) {
                if(data.fail) {       
                    /*$.each(data.errors, function( index, value ) {                            
                        var errorDiv = '#'+index+'_errors';
                        var error = index;
                        $(errorDiv).addClass('required');
                        $(errorDiv).empty().append(value);      
                    });*/

                    $.each(data.errors, function(index, error) {
                        info.find('ul').append('<li>'+error+'</li>');
                    });

                    info.slideDown();
                    info.fadeTo(2000, 500).slideUp(500, function(){
                       info.hide().find('ul').empty();
                    });
                    
                } // fail
                if(data.success) {
                    alert('Sukses');  
                    //$('button:submit').attr('disabled', true);    
                    //$('button:reset').attr('disabled', true);
                    $('#create-user').trigger("reset");
                    $('#create-modal').modal('hide')
                    
                    $(location).prop('href',"{{ url('user/users') }}");  
                } // success         
            });
          
        return false;
        });     
    });
</script>
@endsection