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

<style type="text/css">
    section.al-class{
        background : #FFF;
        padding    : 5px 20px 10px 20px;
        height     : 85%;
    }

    .select2-container--default 
    .select2-selection--single 
    .select2-selection__clear {
        display: none;
    }      

    div.dataTables_filter input {
        font-size: 14px !important;
    }

    #dcr__t-collection_filter{
        margin-top  : 10px; 
    }

    #dcr__col-date{
        font-size: 14px;
    }

    .box-tools{
        margin-top: 3px;
        padding-right: 3px;
    }

    h2.page-header{
        margin-bottom: 0px;
    }

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

    div.printable{
        display: none;
    }

    div.button-reports{
        margin-top: 10px;
    }

    div.button-reports a{
        font-family: Tahoma;
    }

    table th{
        border: 0 !important;
    }

    .bill-number-found{
        display: none;
    }
</style>

@section('body')
<section class="al-class">
    <div class="row" style="margin-bottom: 12px;">
        <div class="col-xs-12">                                                   
            <h2 class="page-header">
                Alter Classification
            </h2>                
        </div>
    </div>

    <div class="row" style="border-bottom: 0 !important;">
        <div class="col-xs-3">
            <div class="form-group">
                <label>Bill Number</label>
                <div class="input-group">
                    <input type="text" class="form-control" style="font-size: 16px;" id="bill-number">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default btn-flat" id="btn-clear">
                            Clear
                        </button>
                    </span>
                </div>    
            </div>            
        </div>  
        <div class="col-xs-2 bill-number-found">
            <div class="form-group">
                <label>New Classification</label>
                <div class="input-group">
                    <select class="form-control" id="new-classification">
                                            </select>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-success btn-flat" id="btn-submit">
                            Submit
                        </button>
                    </span>
                </div>    
            </div>            
        </div>                                                                              
    </div>       
    <div class="row bill-number-found">
        <div class="col-xs-3">
            <div class="form-group">
                <label>
                    <i class="fa fa-user"></i> Customer Name                            
                </label>
                <div>
                    <label style="font-weight: normal;" id="customer-name">&nbsp;</label>
                </div>
            </div> 
        </div>
    </div>      
    <div class="row bill-number-found">
        <div class="col-xs-3">
            <div class="form-group">
                <label>
                    <i class="fa fa-lock"></i> Account Number
                </label>
                <div>
                    <label style="font-weight: normal;" id="account-number">&nbsp;</label>
                </div>
            </div> 
        </div>
    </div>    
    <div class="row bill-number-found">
        <div class="col-xs-3">
            <div class="form-group">
                <label>
                    Bill Type
                </label>
                <div>
                    <label style="font-weight: normal;" id="bill-type">&nbsp;</label>
                </div>
            </div> 
        </div>
    </div> 
    <div class="row bill-number-found">
        <div class="col-xs-3">
            <div class="form-group">
                <label>
                    Bill Period
                </label>
                <div>
                    <label style="font-weight: normal;" id="bill-period">&nbsp;</label>
                </div>
            </div> 
        </div>
    </div>         
    <div class="row bill-number-found">
        <div class="col-xs-3">
            <div class="form-group">
                <label>
                    Classification
                </label>
                <div>
                    <label style="font-weight: normal;" id="account-class">&nbsp;</label>
                </div>
            </div> 
        </div>
    </div>             

</section>
@endsection


@section('scripts')
<script type="text/javascript">
    $(document).ready(function(){

        $("#btn-clear").click(function(){
            location.reload();
        });

        $("#bill-number").on("keyup", function(e){
            var $billNumber = $.trim($(this).val());
            if(e.which == 13){
                if($billNumber.length > 0){
                    ajaxcall($app_url+"/administrator/alter-classification-get-bill", "GET", {
                        bill_number : $billNumber
                    }, function(response){ 
                        if($.isEmptyObject(response)){
                            location.reload();
                        }else{
                            $("#customer-name").text(response.custname.toUpperCase());
                            $("#account-number").text(response.acct_number);
                            $("#bill-type").text(response.bill_type.toUpperCase());
                            $("#bill-period").text(response.bill_period);
                            $("#account-class").text(response.account_class);

                            $("#new-classification").val(response.account_class).change();
                            $(".bill-number-found").css("display","block");

                            $("#bill-number").prop("disabled", true);
                        }
                    }, true);
                }
            }
        });

        $("#btn-submit").click(function(){
            $.confirm({
                draggable : true,
                icon      : 'fa fa-question-circle text-danger',
                title     : 'Alter Classification',
                content   : "<div class='form-group passcode'>"
                                +"<label>"
                                    + 'Enter Passcode'
                                +"</label>"
                                +"<div>"
                                    +"<input type='password' id='alter-passcode' class='form-control'>"
                                +"</div>"
                            +"</div>",
                buttons   : {
                    Confirm : {
                        btnClass : 'btn-blue',
                        action : function(){
                            var $passcode = this.$content.find('input#alter-passcode').val();

                            if($passcode){
                                ajaxcall($app_url + '/passcode-al', 'POST', {
                                    passcode : $passcode
                                }, function(response){
                                    if(response == true){
                                        alterClassification();
                                    }
                                }, true);
                            }

                            return false;
                        }
                    },
                    Close  : {
                        // btnClass : 'btn-red'
                    }
                }
            });            
        });

        function alterClassification(){
            ajaxcall($app_url+"/administrator/alter-class-update", "POST", {
                bill_number    : $("#bill-number").val(),
                classification : $("#new-classification").val()
            }, function(response){ 
                if(response == "success"){
                    $.confirm({
                        draggable : true,
                        title     : "Alter Classification",
                        content   : "Successfully updated.",
                        buttons   : {
                            OK : function(){
                                location.reload();
                            }
                        }
                    });
                }
            }, true);            
        }

    });
</script>
@endsection