@extends('app')

@section('content')
 
<div class = "row">   
    
    <div class="col-md-12" id = "hilbit-prime-rate">
        <div class="panel panel-default">

            <div class="panel-heading">
                <h3 class="panel-title">{{ ucfirst(trans('hilbit.maintain_prime_rate')) }}</h3>     
            </div>
      
            <div class="panel-body">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        Current Prime Rate: <span id="current-rate">{{$current_rate}}%</span><br>
                Effective Date: <span id="current-effective-date">{!! App\Helpers\DisplayHelper::formatDate($current_effective_date) !!}</span>
                    </div>
                </div>
                
                    
       
                @include('flash::message')
        
                @include('partials.alert')
                
                
                <hilbit-modal-confirm
                    trigger_element="recalc-schedules"
                                        trigger_parent_element="prime-rate-toolbar"
                                        action_function="hilbit_prime_rate.recalcSchedules"
                                        modal_title="{{ trans('hilbit.recalc_schedules') }}"
                                        confirm_prompt="Do you want to recalculate schedules now?"
                                        modal_id="hilbit-modal-confirm-recalc-schedules">       
                </hilbit-modal-confirm>
              
                <div id="prime-rate-toolbar" class="small-bottom-padding">
                      
                    <!-- bs-table styling to align buttons with search -->
                    <div class="fixed-table-toolbar">
                        <div class="bars">
                        
                            <div id="hilbit-modal-create-prime-rate">
                
                                {{-- Vue component --}}
                                <hilbit-modal-create    form_url="{{ url('api/prime-rate/create') }}"
                                                        form_title="Add new prime rate"
                                                        after_create="hilbit_prime_rate.afterAddNew"
                                                        v-bind:allow_creates="true"
                                                        alert_message_id="hilbit-alert-message-text">
                                </hilbit-modal-create>
                            </div>
                                
                            <button type = "button" class = "btn btn-success hidden" id="recalc-schedules"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> {{ trans('hilbit.recalc_schedules') }}</button>   
                            
                        </div>
                    </div>
                </div>                      
 
    
                <!-- Bootstrap table component -->
                <!-- data-toggle = "table" activates Bootstrap table -->
                
                <table data-toggle="table"
                       data-maintain-selected=true
                       data-height="575"
                       data-search="false"
                       data-advanced-search="false"
                       data-toolbar="#prime-rate-toolbar"
                       id="tbl-prime-rate"
                       data-undefined-text="">
                 
                    <thead>
                        <tr>
                            <th data-field="rate" data-align="right" data-halign="center">Rate</th>
                            <th data-field="created_at" data-align="center" data-halign="center">Date Changed</th>
                            <th data-field="effective_date" data-align="center" data-halign="center">Effective Date</th>
                        </tr>
                    </thead>
                          
                    <tbody>
                        @foreach ($prime_rates as $prime_rate)
                            <tr>
                                <td>{{ $prime_rate->rate }}%</td>
                                <td>{!! App\Helpers\DisplayHelper::formatDateTime($prime_rate->created_at) !!}</td>
                                <td>{!! App\Helpers\DisplayHelper::formatDate($prime_rate->effective_date) !!}</td>
                            </tr>
                        @endforeach
                    </tbody>
                  
                </table>
            </div>
                    
        </div>
       
    </div> <!-- End col-md-12 -->
            
</div> <!-- End Row -->
    
@stop

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

<script src = "{!! asset('js/hilbit-prime-rate-vue.js') !!}"></script>
    
<script>
 
var hilbit_prime_rate = hilbit_prime_rate || {};
    
hilbit_prime_rate = function()
{
    var promptRecalcSchedules = function()
    {
        $('#recalc-schedules').click();
    };
    
    
    var afterAddNew = function()
    {
        $.ajax({
            url: "{!! url('api/prime-rate') !!}",
            dataType: 'json'
        })
        .success( function(response)
        { 
            $('#tbl-prime-rate').bootstrapTable('load', response.rows);
            $('#current-rate').html(response.current_rate);
            $('#current-effective_date').html(response.effective_date);
            
            promptRecalcSchedules();
        
        })
        .fail( function(jqXHR, textStatus, errorThrown)
        {
            // in hilbit-global.js
            hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
        });    
    };

    var recalcSchedules = function()
    {
        window.location.href = "{{ url('recalc-schedules') }}";
    };
    
    
    return {afterAddNew : afterAddNew,
            recalcSchedules : recalcSchedules}
    
}();
    
</script>
    
@stop