@include('includes.admin.header')
@include('includes.admin.sidebar')
<link rel="stylesheet" href="/datepicker/dist/css/default/zebra_datepicker.min.css">
<script src="/datepicker/dist/zebra_datepicker.min.js"></script>
<script>
    $(document).ready(function(){
        $('#user-menu').addClass('active');
    });
</script>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           User Edit
            <small>From users</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Users</a></li>
            <li class="active">Edit user</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">Edit User</h3>
                </div><!-- /.box-header -->
                <div class="col-xs-12 hcenter" id="loading">
                        <img src="/images/loading.gif" />
                    </div>
               <form class="form-horizontal" id="register-form">
                   <div class="error" style="display: none">
                            
                        </div>
                  <div class="box-body">
					 <div class="form-group">
                      <label for="inputname3" class="col-sm-2 control-label">Name</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" name="name" id="name" placeholder="Name">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="inputphone3" class="col-sm-2 control-label">Phone</label>
                      <div class="col-sm-9">
                        <input type="phone" class="form-control" name="phone" id="phone" placeholder="Phone">
                      </div>
                    </div>
                    
                      
                      <div class="form-group">
                                    <label for="coach" class="col-sm-2 control-label">Active</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="active" id="active">
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                </div><!-- /.box-body -->
					
                  </div><!-- /.box-body -->
                  <div class="box-footer">
                    <button type="reset" class="btn btn-default">Cancel</button>
                    <button type="button" class="btn btn-info pull-right" id="btn-submit">Submit</button>
                  </div><!-- /.box-footer -->
                </form>
                
                
                <div class="col-xs-12 well">
                    <h3 class="col-xs-12">
                        Votes
                    </h3>
                    <div class="col-xs-12 hidden-xs">
                        <table class="table table-striped" id="existing_votes_container">
                            <thead>
                                <tr>
                                    <th>
                                        No. of Votes
                                    </th>
                                    <th>
                                        Expiry Date
                                    </th>
                                    <th>
                                        Payment Date
                                    </th>
                                    <th>
                                        Admin User
                                    </th>
                                    <th>
                                        Price
                                    </th>
                                    <th>
                                        
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>
                    <div class="col-xs-12" id="votes-container">
                        
                    </div>
                    <div class="col-xs-12 top-margin-big-2">
                        <label class="col-xs-12">
                            New Votes <button type="button" class="btn btn-danger pull-right btn-xs" id="btn-add"><i class="glyphicon glyphicon-plus"></i></button>
                        </label>
                    </div>
                    <div class="col-xs-12 top-margin no-padding" id="main-new-votes-container">
                        <div class="col-xs-12 new-votes-container">
                            <table class="table table-striped" id="new_votes_container">
                                <thead>
                                <tr>
                                    <th>
                                        No. of Votes
                                    </th>
                                    <th>
                                        Expiry Date
                                    </th>
                                    <th>
                                        Payment Date
                                    </th>
                                    <th>
                                        Admin User
                                    </th>
                                    <th>
                                        Price
                                    </th>
                                    <th>
                                        
                                    </th>
                                </tr>
                            </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <input type="text" class="form-control no_of_votes" placeholder="No. of Votes" />
                                        </td>
                                        <td>
                                            <input type="text" class="form-control datepicker expiry_date" placeholder="Expiry Date" />
                                        </td>
                                         <td>
                                            <input type="text" class="form-control payment_date datetimepicker" placeholder="Payment Date" readonly/>
                                        <td>
                                            
                                            <select class="form-control admin_user_id">
                                                @foreach ($users AS $user)
                                                <option value="{{$user->UUID}}">{{$user->name}}</option>
                                                @endforeach
                                            </select>
                                           
                                        </td>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control price" placeholder="Price" />
                                        </td>
                                        <td>
                                            
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                        </div>
                    </div>
                    <div class="col-xs-12 top-margin">
                        <div class="col-xs-12">
                            <button type="button" class="btn btn-success pull-right" id="add-votes">Add Votes</button>
                        </div>
                    </div>
                </div>
              </div><!-- /.box -->

             
            </div><!-- /.col -->
            
          </div><!-- /.row -->
          
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->
      
      <script>
            $(document).ready(function(){
                
                jQuery('.datetimepicker').datetimepicker({
                    format : 'd M Y H:i:s',
                    step : 15
                });
                $('.datepicker').Zebra_DatePicker({
                    format : 'd M Y'
                });
                $.get('/admin/user/{{$UUID}}',{"_token": "{{ csrf_token() }}"}, function(res){
                    $('#name').val(res.name);
                    $('#email').val(res.email);
                    $('#no_of_votes').val(res.no_of_votes);
                    $('#phone').val(res.phone);

                    $('#loading').hide();
                    $('#register-form').show();
                },'json');
                    
                $.get('/admin/user/{{$UUID}}/payments', function(res){
                    var html = '';
                    
                    $(res).each(function(i, value){
                        var paymentDate = value.payment_date_formatted;
                        if(value.payment_date_formatted == null)
                        {
                            paymentDate = value.created_at_formatted;
                        }
                        html+=  '<tr><td><input type="text" class="form-control" value="' + value.no_of_votes + '" placeholder="No. of Votes" readonly="readonly"/></td>';
                        html+=  '<td><input type="text" class="form-control expiry_date" placeholder="Expiry Date" value="' + value.expiry_date_formatted + '" readonly="readonly"/></td>';
                        html+=  '<td><input type="text" class="form-control payment_date" placeholder="Payment Date" value="' + paymentDate + '" readonly="readonly"/></td>';
                        html+=  '<td>';
                        html+=  '<select class="form-control admin_user_id">';
                        html+=  '<option value="">---Select Admin User---</option>';
                        @foreach ($users AS $user)
                            html+=  '<option value="{{$user->UUID}}"';
                            if (value.admin_user_id == "{{$user->UUID}}")
                            {
                                html+= ' selected="selected" ';        
                            }
                            html+= '>{{$user->name}}</option>';
                        @endforeach
                        html+=  '</select></td>';
                        html+=  '<td><input type="text" class="form-control price" placeholder="Price" value="' + value.payment_gross + '"/></td>';
                        html+=  '<td><button class="btn btn-danger col-xs-12 btn-delete" type="button" data-id="' + value.UUID + '">Delete</button></td></tr>';
                    });
                    $('#existing_votes_container').find('tbody').html(html);
                    
                }, 'json');
                
                $('#btn-submit').click(function(){
                    var current  = $(this);
                   // current.attr('disabled', 'disabled').text('Please Wait. Saving.....');
                    var data = $("#register-form").serializeArray();
                    $.post('/admin/user/update/{{$UUID}}',{data:data, "_token": "{{ csrf_token() }}"}, function(res, status){
                     
                        alert('User Updated Successfully');
                        window.location.href = '#body';
                        window.location.href = '/admin/user';
                    },'json')
                    .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                                html+= '<p>' + value + '</p>';
                        });
                        $('.error').html(html).show();
                        $('#btn-submit').html('Submit').removeAttr('disabled');
                        window.location.href = '#body';
                    },'json');;
                });
                
                $('#btn-add').click(function(i, value){
                    var html = '<tr><td><input type="text" class="form-control"  placeholder="No. of Votes"/></td>';
                        html+= '<td><input type="text" class="form-control expiry_date datepicker" placeholder="Expiry Date"  readonly="readonly"/></td>';
                        html+= '<td><input type="text" class="form-control payment_date datetimepicker"  placeholder="Payment Date" readonly="readonly"/></td>';
                        html+= '<td><input type="text" class="form-control admin_user" placeholder="Admin User" /></td>';
                        html+= '<td><input type="text" class="form-control price" placeholder="Price"/></td>';
                        html+= '<td><button class="btn btn-danger col-xs-12 btn-new-delete" type="button" >Delete</button></td></tr>';
                    $('#new_votes_container').find('tbody').append(html);
                    $('.datepicker').Zebra_DatePicker({
                        format : 'd M Y'
                    });
                    $('.datetimepicker').datetimepicker({
                        format : 'd M Y H:i:s',
                        step : 15
                    });
                });
                
                
            });
            
            $(document).on('click', '#add-votes', function(){
                    $('#add-votes').html('Adding Votes....').attr('disabled', 'disabled');
                    var data = new Object();
                    //data['user_id'] = '{{$UUID}}';
                    var count = 0;
                    data['votes'] = new Object();
                    $('.new-votes-container').each(function(index,value){
                        data['votes'][count] = new Object();
                        data['votes'][count]['no_of_votes'] = $(value).find('.no_of_votes').val();
                        data['votes'][count]['expiry_date'] = $(value).find('.expiry_date').val();
                        data['votes'][count]['payment_date'] = $(value).find('.payment_date').val();
                        data['votes'][count]['admin_user_id'] = $(value).find('.admin_user_id').val();
                        data['votes'][count]['price'] = $(value).find('.price').val();
                        count++;
                    });
                    addVotes(data);
                });
            
            function addVotes(data)
            {
                $.post('/admin/user/{{$UUID}}/votes/add',{'data': data, "_token": "{{ csrf_token() }}"}, function(i, value){
                        alert('Votes Added Suucessfully');
                        location.reload();
                      $('#add-votes').html('Submit').removeAttr('disabled');
                    },'json').fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                            html+= '<p>' + value + '</p>';
                        });
                        $('.error').html(html).show();
                        $('#add-votes').html('Submit').removeAttr('disabled');
                        window.location.href = '#body';
                    },'json');
            }
            
            
            $(document).on('click', '.btn-delete', function(res){
                var parent = $(this).parents('tr').first();
                var conf = confirm("Are you sure you want to delete this vote entry?");
                if(!conf)
                {
                    return;
                }
                
                var id =$(this).attr('data-id');
                
                $.ajax({
                        url: '/admin/vote/' + id + '/delete',
                        type: 'DELETE',
                        data:{"_token": "{{ csrf_token() }}"},
                        success: function(result) {
                            alert('Votes Deleted Successfully');
                            $(parent).remove();
                        },
                        error: function(xhr, textStatus, errorThrown){
                            alert('Something went wrong. Vote Not Deleted');
                         }
                    },'json');
            });
            
            $(document).on('click', '.btn-new-delete', function(res){
                var parent = $(this).parents('tr').first();
                var conf = confirm("Are you sure you want to delete this vote entry?");
                if(!conf)
                {
                    return;
                }
                $(parent).remove();
            });
        </script>
@include('includes.admin.footer')