@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.box-body{
        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; 
    }    

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0.5px 5px !important;
    }    

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #212121 !important;
    }    
</style>

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

<div class="row">
    <div class="col-xs-12">
        <div class="box box-success"> 
            <div class="box-body">
                @include('administrator.branches._datatable')
            </div>
        </div>
    </div> 
</div>
@endsection


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

        $('#select-company').change(function(){
            var compId = $(this).val();

            $.ajax({
                url  : $app_url + '/administrator/branches/get-branches',
                type : 'GET',
                data : {
                    'company_id' : compId
                },
                success : function(response){
                    var table = $('#t-branches > tbody');
                    table.empty();

                    $.each(response, function(index){
                        var r = response[index];     
                        add_row();
                        var row = table.find('tr:last');

                        row.data('branch-id', r.id);

                        row.find('td').find('input.branch-code').val(r.code);
                        row.find('td').find('input.branch-description').val(r.description);
                        row.find('td').find('input.branch-address').val(r.address);
                        row.find('td').find('input.contact-no').val(r.contact_no);
                        row.find('td').find('input.email').val(r.email);
                        row.find('td').find('input.tin').val(r.tin);
                        row.find('td.col-action').html(null).html(update_button());                        
                    });

                    add_row();
                },
                error : function(){

                },
                beforeSend : function(){
                    showBoxLoadingState();
                },
                complete : function(){
                    removeBoxLoadingState();
                }
            });
        });        

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

        $(document).on('focusout', '.inputs',function(e){
            $(this).css('background-color', '#fff');
        });    
        
        $(document).on('click', '.add-branch', function(){
            var row        = $(this).closest('tr');
            var company    = $('#select-company').val();
            var code       = row.find('td').find('input.branch-code').val();
            var desc       = row.find('td').find('input.branch-description').val();
            var address    = row.find('td').find('input.branch-address').val();
            var contact_no = row.find('td').find('input.contact-no').val();
            var email      = row.find('td').find('input.email').val();
            var tin        = row.find('td').find('input.tin').val();
            
            if(!code){
                $.alert({
                    title   : 'Branch code cannot be blank!',
                    content : 'Please enter branch code.',
                    type    : 'orange'
                });
                return false;                
            }

            if(!desc){
                $.alert({
                    title   : 'Description cannot be blank!',
                    content : 'Please enter branch description.',
                    type    : 'orange'
                });
                return false;                
            }                   

            $.ajax({
                url  : $app_url + '/administrator/branches/add-branch',
                type : 'POST',
                data : {
                    'company_id'  : company,
                    'description' : desc,
                    'code'        : code,
                    'address'     : address,
                    'contact_no'  : contact_no,
                    'email'       : email,
                    'tin'         : tin
                },
                success : function(response){
                    row.data('branch-id',   response);
                    row.find('td.col-action').html(null).html(update_button());
                    add_row();
                },
                error : function(){

                },
                beforeSend : function(){
                    showBoxLoadingState();
                },
                complete : function(){
                    removeBoxLoadingState();
                }
            });
        });             

        $(document).on('click', '.update-branch', function(){
            var row        = $(this).closest('tr');
            var id         = row.data('branch-id');
            var code       = row.find('td').find('input.branch-code').val();
            var desc       = row.find('td').find('input.branch-description').val();
            var address    = row.find('td').find('input.branch-address').val();
            var contact_no = row.find('td').find('input.contact-no').val();
            var email      = row.find('td').find('input.email').val();
            var tin        = row.find('td').find('input.tin').val();

            if(!code){
                $.alert({
                    title   : 'Branch code cannot be blank!',
                    content : 'Please enter branch code.',
                    type    : 'orange'
                });
                return false;                
            }  

            if(!desc){
                $.alert({
                    title   : 'Description cannot be blank!',
                    content : 'Please enter branch description.',
                    type    : 'orange'
                });
                return false;                
            }               

            $.ajax({
                url  : $app_url + '/administrator/branches/update-branch',
                type : 'POST',
                data : {
                    'id'          : id,
                    'description' : desc,
                    'code'        : code,
                    'address'     : address,
                    'contact_no'  : contact_no,
                    'email'       : email,
                    'tin'         : tin,
                },
                success : function(response){
                    $.alert({
                        title   : 'Branch Updated!',
                        content : 'You have successfully updated branch <strong>'+desc+'</strong>.',
                        type    : 'green'
                    });                      
                },
                error : function(){

                },
                beforeSend : function(){
                    showBoxLoadingState();
                },
                complete : function(){
                    removeBoxLoadingState();
                }
            });            
        });


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

        function add_row(){
            var code           = "<input type='text' class='form-control branch-code inputs'>";
            var description    = "<input type='text' class='form-control branch-description inputs'>";
            var address        = "<input type='text' class='form-control branch-address inputs'>";
            var contact_no     = "<input type='text' class='form-control contact-no inputs'>";
            var email          = "<input type='text' class='form-control email inputs'>";
            var tin            = "<input type='text' class='form-control tin inputs'>";
            var save           = "<button class='btn btn-success add-branch' title='Add Branch'><i class='fa fa-plus'></i>&nbsp;</button>";

            var row = "<tr>"
                            +"<td class='cellpad-top'>"
                                +code
                            +"</td>"
                            +"<td class='cellpad-top'>"
                                +description
                            +"</td>" 
                            +"<td class='cellpad-top'>"
                                +address
                            +"</td>"
                            +"<td class='cellpad-top'>"
                                +contact_no
                            +"</td>"       
                            +"<td class='cellpad-top'>"
                                +email
                            +"</td>"
                            +"<td class='cellpad-top'>"
                                +tin
                            +"</td>"                        
                            +"<td class='cellpad-top col-action'>"
                                +save
                            +"</td>"                                        
                        +"</tr>";                        

            record_found();
            $('#t-branches > tbody').append(row);
            $('#t-branches > tbody').find('tr:last').find('select').select2();
        }

        function update_button(){
            return "<button class='btn btn-primary update-branch' title='Update Branch'><i class='fa fa-pencil'></i>&nbsp;</button>";
        }        

        function record_found(){
            var len = $('#t-branches > tbody > tr').length;
            $('label#record-found').html('<span style="font-size:18px" class="text-primary">' + len + '</span> branch(es) found!');
        }    

        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