@extends('app')

@section('content')
 
    <div class = "row">
    
        @include('flash::message')
        
        @include('partials.alert')
    
        <div class="col-md-6" id = "hilbit-archive-agreements">
    
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">{{ ucfirst(trans('hilbit.archive_agreements')) }}</h3>         
                </div>
      
                <div class="panel-body">

                    <hilbit-modal-confirm   trigger_element="btn-do-archive"
                                            trigger_parent_element="archive-toolbar"
                                            action_function="hilbit_archive.archive"
                                            modal_title="{{ ucfirst(trans('hilbit.archive_agreements')) }}"
                                            confirm_prompt="{{ ucfirst(trans('hilbit.confirm_continue')) }}"
                                            modal_id="hilbit-modal-confirm-archive-agreements">       
                    </hilbit-modal-confirm>
                        
                    <div class="panel panel-info"><div class="panel-heading">{{ ucfirst(trans('hilbit.select_to_archive')) }}</div></div>
            
                    <div id="archive-toolbar" class="small-bottom-padding">
                        
                            <button type = "button" class = "btn btn-success" id="btn-do-archive"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> {{ trans('hilbit.archive_selected') }}</button>
                     
                    </div>
  
        
                      <!-- Bootstrap table component -->
                      <!-- data-toggle = "table" activates Bootstrap table -->
                      
                    <table data-toggle="table"
                             data-maintain-selected="true"
                             data-search="false"
                             data-advanced-search="false"
                             data-toolbar="#archive-toolbar"
                             id="tbl-archive"
                             data-undefined-text=""
                             data-id-field="id">
                            
                        <thead>
                            <tr>
                                <th data-field="archive" data-checkbox="true"></th>
                                <th data-field="id" data-visible="false">ID</th>
                                <th data-field="code">Agreement</th>
                                <th data-field="settlement" data-halign="center" data-align="right">Settlement</th>
                            </tr>
                        </thead>
                  
                    </table>
           
                </div>  <!-- End panel body -->       
            </div>      <!-- End panel -->
        </div>          <!-- End col-md-6 -->
        
        
        
        <div class="col-md-6" id = "hilbit-archive-complete">
    
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">{{ ucfirst(trans('hilbit.archived')) }}</h3>         
                </div>
      
                <div class="panel-body">
                             
                    <div class="panel panel-info"><div class="panel-heading">{{ ucfirst(trans('hilbit.archived_list')) }}</div></div>
            
                    <div id="archive-complete-toolbar" class="small-bottom-padding"></div>
  
        
                      <!-- Bootstrap table component -->
                      <!-- data-toggle = "table" activates Bootstrap table -->
                      
                    <table data-toggle="table"
                             data-maintain-selected="true"
                             data-search="false"
                             data-advanced-search="false"
                             data-toolbar="#archive-complete-toolbar"
                             id="tbl-archive-complete"
                             data-undefined-text="">
                            
                        <thead>
                            <tr>
                                <th data-field="code">Agreement</th>
                                <th data-field="status">Status</th>
                            </tr>
                        </thead>
                            
                  
                    </table>
           
                </div>  <!-- End panel body -->       
            </div>      <!-- End panel -->
        </div>          <!-- End col-md-6 -->
      
    </div>              <!-- End Row -->
    
@stop

@section('scripts')
    
<script src = "{!! asset('js/hilbit-vue.js') !!}"></script>

<script src = "{!! asset('js/hilbit-archive-vue.js') !!}"></script>
    
<script>
var hilbit_archive = hilbit_archive || {};
    
hilbit_archive = function()
{       
    
    var archive_button = $('#btn-do-archive');
    
    var archive = function()
    {
        var selected = $('#tbl-archive').bootstrapTable('getSelections');
        
        hilbit_archive.disableArchive();

        console.log(JSON.stringify(selected));
       
        $.ajax({
            method: "POST",
            url: "{!! url('archive') !!}",
            data: {'agreements': selected}
        })   
        .done(function(response)
        {
            if (response.message !== '')
            {
                hilbit.ui.alertMessage('hilbit-alert-message-text', response.message, 'success', true);
            }
            
            $('#tbl-archive-complete').bootstrapTable('load', response.rows);
            hilbit_archive.fetch();
        })
          
        .fail( function(jqXHR, textStatus, errorThrown)
        {
        // in hilbit-global.js
            hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
        }); 
    };
    
    
    var fetch = function()
    {
        $.ajax({
            url: "{!! url('api/archive') !!}",
            dataType: 'json'
        })
        .success( function(response)
        { 
            $('#tbl-archive').bootstrapTable('load', response.rows); 
        })
        .fail( function(jqXHR, textStatus, errorThrown)
        {
            // in hilbit-global.js
            hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
        });    
    };
    
    var enableArchive = function()
    {
        archive_button.prop( "disabled", false );       
    };
    
    
    var disableArchive = function()
    {
        archive_button.prop( "disabled", true );       
    };
    
    return {archive : archive,
            enableArchive: enableArchive,
            disableArchive: disableArchive,
            fetch: fetch}
}();


$(function () {

    hilbit_archive.fetch();
    hilbit_archive.disableArchive();
    
    
    $('#tbl-archive').on('check.bs.table', function (e, row, $element)
    {
        hilbit_archive.enableArchive();
        console.log($element);
    });
    
    $('#tbl-archive').on('check-all.bs.table', function (rows)
    {
        hilbit_archive.enableArchive();
    });
    
    $('#tbl-archive').on('uncheck.bs.table', function (e, row, $element)
    {
        var selected = $('#tbl-archive').bootstrapTable('getSelections');
        if (selected.length == 0)
        {
            hilbit_archive.disableArchive();
        }
    });
    
    $('#tbl-archive').on('uncheck-all.bs.table', function (rows)
    {
        hilbit_archive.disableArchive();
    });

});
        
    
</script>

    
@stop