@include('includes.admin.header')
@include('includes.admin.sidebar')

<script>
    $(document).ready(function(){
        $('#polls-menu').addClass('active');
    });
</script>

<link rel="stylesheet" href="/datetimepicker/build/jquery.datetimepicker.min.css">
<script src="/datetimepicker/build/jquery.datetimepicker.full.js"></script>
<script src='/ckeditor/ckeditor.js' ></script>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Edit Decision Polls 
            <small></small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Decision Polls</a></li>
            <li class="active">Edit Decision Poll</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 Decision Poll</h3>
                        </div><!-- /.box-header -->
                        {!! Form::open(['class' => 'form-horizontal', 'method' => 'post']) !!}
                      
                        
                       
                       <div class='error'  style="@if ($errors->any()) display:block; @else display:none; @endif">
                         
                                {{ implode('', $errors->all('<div>:message</div>')) }}
                       </div>
                        
                        <div class="box-body">
                                <div class="form-group">
                                    <label for="inputname3" class="col-sm-2 control-label">Decision name</label>
                                    <div class="col-sm-9">
                                        {!! Form::text('data[name]', '', ['class' => 'form-control', 'placeholder' => 'Name', 'id' => 'name']); !!}
                                    </div>
                                </div>
                            <label class="col-xs-12">
                                Options (Options needs to be updated seperately)
                            </label>
                            <div class="col-xs-12 " id="options-container">
<!--                            <div class="form-group">
                                    <label for="inputname3" class="col-sm-2 control-label">Option 1</label>
                                    <div class="col-sm-9">
                                        {!! Form::textarea('data[option][]', '', ['class' => 'form-control', 'id' => 'option_s1', 'placeholder' => 'Option 1']); !!}
                                    </div>
                                </div>-->
                            </div>
                            
                            
                                <div class="form-group">
                                    <label for="inputname3" class="col-sm-2 control-label">Expiry Date</label>
                                    <div class="col-sm-9">
                                        {!! Form::text('data[expiry_date]', '', ['class' => 'form-control datepicker', 'placeholder' => 'Expiry Date', 'id' => 'expiry_date', 'readonly' => 'readonly']); !!}
                                    </div>
                                </div>
                            <div class="form-group">
                                    <label for="inputname3" class="col-sm-2 control-label">Default</label>
                                    <div class="col-sm-9">
                                        {!! Form::select('data[default_poll]', ['0' => 'Inactive', '1' => 'Active'],  '', ['class' => 'form-control', 'id' => 'default_poll']); !!}
                                    </div>
                                </div>
                                
                            </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 btn-save">Submit</button>
                            </div><!-- /.box-footer -->
                        {!! Form::close() !!}
              </div><!-- /.box -->

             
            </div><!-- /.col -->
            
          </div><!-- /.row -->
          
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->
      <script>
            $(document).ready(function(){
                $.datetimepicker.setLocale('en');

                    $('#expiry_date').datetimepicker({
                        format:'d M Y H:i',
                        formatTime:'H:i',
                        formatDate:'d M Y',
                        allowTimes:['00;00','00:30','01:00','01:30','02;00','02:30','03:00','03:30',
                                    '04;00','04:30','05:00','05:30','06;00','06:30','07:00','07:30',
                                    '08;00','08:30','09:00','09:30','10;00','10:30','11:00','11:30',
                                    '12;00','12:30','13:00','13:30','14;00','14:30','15:00','15:30',
                                    '16;00','16:30','17:00','17:30','18;00','18:30','19:00','19:30',
                                    '20;00','20:30','21:00','21:30','22;00','22:30','23:00','23:30']
                    });
                $.get('/admin/decision/polls/{{$UUID}}',{"_token": "{{ csrf_token() }}"}, function(res){
                        $('#name').val(res.name);
                        var expiryDateTimeArray = res.expiry_date.split(" ");
                        var expiryDateArray = expiryDateTimeArray[0].split("-");
                        var expiryTimeArray = expiryDateTimeArray[0].split(":");
                        $('#expiry_date').val(expiryDateArray[2] + '-' + expiryDateArray[1] + '-' + expiryDateArray[0] + ' ' + expiryDateTimeArray[1]);
                        $('#default_poll').val(res.default_poll);
                        
                      //  var html = '<div class="form-group"><div class="col-xs-12"><textarea name="data[option][]" class="form-control" id="option_' + count + '"></textarea>';
                        
                        count = 1;
                        $(res.options).each(function(i, value){
                            console.log(res.options);
                            count++;
 
                            var html = '<div class="form-group well option-container" data-UUID="' + value.UUID + '" data-count="' + count + '"><div class="col-xs-12" ><textarea data-UUID="' + value.UUID + '" name="data[option][]" class="form-control" id="option_' + count + '">' + value.options + '</textarea><button type="button" class="btn btn-success col-xs-12 top-margin btn-update-option" data-id="' + value.UUID + '">UPDATE OPTION</button></div></div>';
                            $('#options-container').append(html);
                            CKEDITOR.replace('option_' + count);

                        });
                    },'json');
                
               $('.btn-save').click(function(){
                    var data = new Object();
                    data['name'] = $('#name').val();
                    data['option'] = new Object();
//                    data['option'][$("#option1").attr("data-UUID")] = CKEDITOR.instances.option1.getData();
//                    data['option'][$("#option2").attr("data-UUID")] = CKEDITOR.instances.option2.getData();
//                    data['option'][$("#option3").attr("data-UUID")] = CKEDITOR.instances.option3.getData();
                    data['expiry_date'] = $('#expiry_date').val();
                    data['default_poll'] = $('#default_poll').val();
                    
                $.post('/admin/decision/polls/update/{{$UUID}}', {data:data, "_token": "{{ csrf_token() }}"}, function(res){
                    alert(res);
                    window.location.href = '/admin/decision/polls';
                },'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');
            });
        }); 
        
        $(document).on('click', '.btn-update-option', function(){
            $(this).text('Updating Option...').attr('disabled', 'disabled');
            var current = $(this);
            var id = $(this).attr('data-id');
            var parent = $(this).parents('.option-container').first();
            var count = $(parent).attr('data-count');
            var option = CKEDITOR.instances['option_' + count].getData();
            $.post('/admin/decision/polls/{{$UUID}}/option/' + id + '/update', {option:option, "_token": "{{ csrf_token() }}"}, function(res){
                alert(res);
                $(current).text('UPDATE OPTION').removeAttr('disabled');
            },'json').fail(function(xhr) {
                var html = '';
                var res = xhr.responseJSON;
                $(res).each(function(i, value){
                    html+= value;
                });
                $('.error').html(html).show();
                $(current).text('UPDATE OPTION').removeAttr('disabled');
                alert(html);
            },'json');
        });
          </script>
@include('includes.admin.footer')