@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

<style type="text/css">
    div.box-header.with-border h3.box-title{
        padding-left  : 5px;
        padding-right : 5px;
    }

    div.rates div.create{
        padding-bottom: 0 !important;
    }

    span.select2-selection__clear{
        display : none !important;
    }

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
    }      

</style>

@section('body')
{{-- <div class="row">
    <div class="box-header with-border">
        <h3 class="box-title">RATES</h3>
    </div>
</div> --}}

<div class="row rates">
    <div class="col-xs-5">
        <div class="box box-default">         
            <div class="box-body create">
                
                @include('administrator.rates._create')
            </div>
        </div>
    </div>   
    <div class="col-xs-7">
        <div class="box box-default">         
            <div class="box-body">
                <label class="text-primary" style="font-size:16px; margin-top:6px">Rates Details</label>
                <hr style="margin-top:6px; margin-bottom:8px">
                @include('administrator.rates._details')
            </div>
        </div>
    </div>           
</div>
@endsection


@section('scripts')   
    <script type="text/javascript">    
        $(document).ready(function(){
            $('#t-rheader').hide();
            branches();
            load_acct_class($('#select-branch').val());

            $('#select-branch').change(function(){
                var select    = $('#select-acctclass');
                var acctclass = $(this).find('option:selected').data('acctclass');
                var arr       = acctclass.split(',');

                select.find('option').not(':eq(0)').remove();
                for(i=0; i<arr.length; i++){
                    select.append("<option value='"+arr[i]+"'>"+arr[i]+"</option>");
                }

                $('#effectivity-date').val(null);
                $('#t-rates > tbody').empty();
            });

            $(document).on('focusin', '.inputs', function(e){
                $(this).css('background-color', '#ffff8d');
                $(this).select();
            });  

            $(document).on('focusout', '.inputs',function(e){
                $(this).css('background-color', '#fff');
            });             

            $('#select-acctclass').change(function(){
                var branch    = $('#select-branch').val();
                var acctclass = $('#select-acctclass').val();

                $.ajax({
                    url  : $app_url + '/reports/rates/get-rates',
                    type : 'GET',
                    data : {
                        'branch_id'  : branch,
                        'acct_class' : acctclass
                    },
                    success : function(response){
                        load_rates(response);
                        if($('#select-cutoff option:eq(1)').val()) {
                            $('#select-cutoff').val($('#select-cutoff option:eq(1)').val()).trigger('change');
                            $('#select-cutoff').prop('disabled', true);
                        }
                    },
                    error      : function(){},
                    beforeSend : function(){
                        showBoxLoadingState();
                    },
                    complete   : function(){
                        removeBoxLoadingState();
                    }
                });                
            });

            $('#select-cutoff').change(function(){
                var cutoff = $(this).val();
                var rows   = $('#t-rdetails > tbody > tr');

                var filter  = rows.filter('.'+cutoff).show();
                rows.not( filter ).hide();
            });

            function load_acct_class(bid) {
                $.ajax({
                    url: $app_url + '/acct-class',
                    type: 'get',
                    data: {
                        'branch_id': bid
                    },
                    success: function(response){
                        var select = $('#select-acctclass');

                        select.find('option').not(':eq(0)').remove();
                        $.each(response, function(index){
                            var r = response[index];
                            if (r.description) {
                                select.append("<option value='"+r.class+"-"+r.sub_class+"'>"+r.class+"-"+r.sub_class+" ("+r.description.toUpperCase()+")"+"</option>");
                            }
                            else {
                                select.append("<option value='"+r.class+"-"+r.sub_class+"'>"+r.class+"-"+r.sub_class+"</option>");
                            }
                            
                        });
                    }
                });
            }

            function load_rates(response){
                var table = $('#t-rdetails > tbody');
                table.empty();             

                var value = [];
                var text  = [];

                $.each(response, function(index){
                    var r = response[index];
                    var trclass = 'rate' + r.header_id;

                    value.push(trclass);                
                    text .push(r.cutoff);

                    table.append("<tr class='"+trclass+"'>"
                                    +"<td class='text-center cutoff'>"+r.cutoff+"</td>"
                                    +"<td class='text-right'>"+r.from+"</td>"
                                    +"<td class='text-right'>"+r.to+"</td>"
                                    +"<td class='text-center'>"+r.type.toUpperCase()+"</td>"
                                    +"<td class='text-right'>"
                                        +number_format(r.amount)
                                    +"</td>"
                                +"</tr>");
                });      
                
                $('#select-cutoff').find('option').not(':eq(0)').remove();

                value = $.unique(value);
                text  = $.unique(text);

                for(i=0; i<value.length; i++){
                    $('#select-cutoff').append("<option value='"+value[i]+"'>"+text[i]+"</option>");
                }
            }

            function branches(){
                $.ajax({
                    url  : $app_url + '/branches',
                    type : 'get',
                    data : {},
                    success : function(response){                
                        $.each(response, function(index){
                            var r = response[index];
                            $('#select-branch').append("<option value='"+r.id+"' data-acctclass='"+r.class+"'>"
                                                            +$.trim(r.description)
                                                      +"</option>");
                        });
                    },
                    error   : function(){},
                });
            } 

            function number_format(number){
                return numeral(number.toString().replace(/,/g, '')).format('0,0.00');
            }

            function cast(number){
                return Number(number.toString().replace(/,/g, ''));
            }                      

        });
    </script>
@endsection