@extends('layouts.app')
@section('title', 'BWSI')

@section('body')
<style type="text/css">
	label {
		margin-bottom: 0px;
	}
</style>

<div class="row" style="padding-left:5px; padding-right:5px">
	<div class="box-header with-border">
	  	<h3 class="box-title">Customer Mother Account</h3>
	  	<div class="box-tools pull-right">
	  		<a href="{{url('csr/customers')}}" class="btn btn-sm btn-flat btn-default"><i class="fa fa-reply"></i> Go Back</a>
	  		<a href="#" id="btn-edit-mother-account" data-cid="{{ $cust->cust_id }}" class="btn btn-sm btn-flat btn-success"><i class="fa fa-edit"></i> Edit Mother Account Info</a>
	  		<a href="#" id="btn-new-application" data-cid="{{ $cust->cust_id }}" class="btn btn-sm btn-flat btn-warning" title="Add a new service application under this customer."><i class="fa fa-plus-circle"></i> New Service Application</a>
	  	</div>
	</div>
</div>

<div class="row">
	<div class="col-xs-12">
		<div class="box box-default" style="height:112px; margin-bottom:10px">
            <div class="box-body">
            	<div class="row">
            		<div class="col-xs-3">
            			<label class="control-label">Customer Name</label>
            			@if($cust->cust_fname)
            				<p class="text-muted">{{ strtoupper($cust->cust_fname) }}</p>
            			@else
            				<p class="text-muted">
            					{{ strtoupper($cust->cust_bname) }} 
            					{!! $cust->contact_person ? "CP: " . strtoupper($cust->contact_person) : "" !!}
            				</p>
            			@endif
            		</div>
            		<div class="col-xs-2">
            			<label class="control-label">Birthdate</label>
            			<p class="text-muted">{{ $cust->cust_fname ? $cust->birthday : 'N/A' }}</p>
            		</div>
            		<div class="col-xs-3">
            			<div class="row">
            				<div class="col-xs-6">
		            			<label class="control-label">Landline No.</label>
		            			<p class="text-muted">{{ $cust->landline_number ? $cust->landline_number : '-' }}</p>
		            		</div>
		            		<div class="col-xs-6">
		            			<label class="control-label">Mobile No.</label>
		            			<p class="text-muted">{{ $cust->mobile_number ? $cust->mobile_number : '-' }}</p>
		            		</div>
            			</div>
            		</div>
            	</div>

            	<div class="row">
            		<div class="col-xs-5 form-group">
            			<label class="control-label">Billing Address</label>
            			<p class="text-muted">{{ strtoupper($cust->address) }}</p>
            		</div>
            		<div class="col-xs-3">
            			<label class="control-label">Email Address</label>
            			<p class="text-muted">{{ $cust->email_address ? $cust->email_address : '-' }}</p>
            		</div>
            	</div>
            </div>
        </div>
	</div>
	
	<div class="col-xs-12">
		<div class="box box-default">
			<div class="box-body">
				<table class="table table-hover table-bordered table-condensed table-dt">
				    <thead>
				      	<tr>
				            <th>Account No.</th>
				            <th>Class</th>
				            <th>Service Address</th>
				            <th>Book</th>
				            <th>Sequence</th>
				            <th>Meter No.</th>
				            <th>Status</th>
				      	</tr>
					</thead>
					<tbody>
						@foreach($accts as $ac)
						<tr>
							<td>
								<a href="#" class="account-number" data-aid="{{ $ac->acct_id }}">
									{{ $ac->acct_number }}
									<i class="fa fa-fw fa-mail-forward"></i>
								</a>
							</td>
							<td>{{ $ac->acct_class }} - {{ $ac->acct_subclass }}</td>
							<td>
								<a href="#" class="text-primary btn-edit-addr-service" data-acct-id="{{ $ac->acct_id }}">
									{{ strtoupper($ac->address) }}
									<i class="fa fa-fw fa-pencil"></i>
								</a> 
							</td>
							<td>{{ $ac->book_code }} ({{ $ac->book_desc }})</td>
							<td>{{ $ac->sequence }}</td>
							<td>{{ $ac->meter_no }}</td>
							<td>
															</td>
						</tr>
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn-new-application').on('click', function() {
			$cn = $.confirm({
				title: '',
				draggable: true,
				columnClass: 'x-large',
				content: function() {
					var self = this;

					return $.ajax({
						url: $app_url + '/csr/customers/account-new',
						type: 'get',
						dataType: 'html',
						data: {
							'cust_id' : $('#btn-new-application').data('cid')
						}
					}).done(function (response) {
						self.setContent(response);
					});
				},
				onContentReady: function() {
					$def_prid   = $('#hidden-def-prid').val();
				    $def_prdesc = $('#hidden-def-prdesc').val();
				    $def_ciid   = $('#hidden-def-ciid').val();
				    $def_cidesc = $('#hidden-def-cidesc').val();

					// Initiliaze first row of class and sub-class.
					$('.new-account-class').select2({
						dropdownParent: $('.jconfirm-scrollpane'),
			            allowClear: true
			        }).on('change', function() {
			            $(this).closest('tr').find('.new-account-subclass').val('').trigger('change');
			        }).on('select2:select', function(e) {
			            $(this).closest('tr').find('.new-account-subclass').select2('open');
			        });

					$('.new-account-subclass').select2({
						dropdownParent: $('.jconfirm-scrollpane'),
			            allowClear: true,
	                    ajax: {
	                        url: $app_url + '/acct-subclass',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                class: $(this).closest('tr').find('.new-account-class option:selected').val()
	                           	}
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.description ? item.sub_class.toUpperCase() + ' (' + item.description.toUpperCase() + ')' : item.sub_class.toUpperCase(),
	                                        id: item.sub_class,
	                                    }
	                                })
	                            };
	                        }
	                    }
			        }).on('change', function() {
			            // $(this).closest('tr').find('.new-account-province').val('').trigger('change');
			        }).on('select2:select', function(e) {
			            // $(this).closest('tr').find('.new-account-province').select2('open');
			        });

			        // Initialize first row of service address.
					$('.new-account-province').select2({
						dropdownParent: $('.jconfirm-scrollpane'),
			            allowClear: true,
			            ajax: {
			                url: $app_url + '/provinces',
			                delay: 200,
			                data: function (params) {
			                    return query = {
			                        search: params.term,
			                    }
			                },
			                processResults: function (data) {
			                    return {
			                        results: $.map(data, function (item) {
			                            return {
			                                text: item.name,
			                                id: item.id
			                            }
			                        })
			                    };
			                }
			            }
			        }).on('change', function() {
			            $(this).closest('tr').find('.new-account-city').val('').trigger('change');
			        }).on('select2:select', function(e) {
			            $(this).closest('tr').find('.new-account-city').select2('open');
			        });

			        $('.new-account-city').select2({
			        	dropdownParent: $('.jconfirm-scrollpane'),
			            allowClear: true,
			            ajax: {
			                url: $app_url + '/cities',
			                delay: 200,
			                data: function (params) {
			                    return query = {
			                        search: params.term,
			                        pid: $(this).closest('tr').find('.new-account-province option:selected').val()
			                    }
			                },
			                processResults: function (data) {
			                    return {
			                        results: $.map(data, function (item) {
			                            return {
			                                text: item.name,
			                                id: item.id
			                            }
			                        })
			                    };
			                }
			            }
			        }).on('change', function() {
			            $(this).closest('tr').find('.new-account-brgy').val('').trigger('change');
			        }).on('select2:select', function(e) {
			            $(this).closest('tr').find('.new-account-brgy').select2('open');
			        });

			        $('.new-account-brgy').select2({
			        	dropdownParent: $('.jconfirm-scrollpane'),
			            allowClear: true,
			            ajax: {
			                url: $app_url + '/brgys',
			                delay: 200,
			                data: function (params) {
			                    return query = {
			                        search: params.term,
			                        cid: $(this).closest('tr').find('.new-account-city option:selected').val()
			                    }
			                },
			                processResults: function (data) {
			                    return {
			                        results: $.map(data, function (item) {
			                            return {
			                                text: item.name,
			                                id: item.id
			                            }
			                        })
			                    };
			                }
			            }
			        }).on('select2:select', function(e) {
			            $(this).closest('tr').find('.new-account-address').focus();
			        });


	                $('#with_representative').on('change', function() {
						if($(this).prop('checked') == true) {
							$('#representative_name').val('').prop('disabled', false);
						} else {
							$('#representative_name').val('').prop('disabled', true);
						}
					});

	                $(".date-masked").inputmask("date", {
	                    mask: "y-1-1", 
	                    placeholder: "yyyy-mm-dd", 
	                    leapday: "-02-29", 
	                    separator: "-", 
	                    alias: "yyyy/mm/dd",
	                    onincomplete: function() {
	                        $(this).val(null);
	                    }
	                });

	                // Dynamic added service address row funtion.
	                $(document).on('click', '.new-account-row', function() {
						$('#table-accounts > tbody').append('<tr>' +
																'<td style="padding:2px">' +
																	'<select name="acct_class[]" class="form-control select2 select2-hidden-accessible new-account-class" data-placeholder="" style="width: 100%;" aria-hidden="true">' +
												                  		'<option></option>' +
												                  		'<option value="res" data-class="res">Residential</option>' +
												                  		'<option value="com" data-class="com">Commercial</option>' +
												                  		'<option value="ind" data-class="ind">Industrial</option>' +
												                  		'<option value="gov" data-class="gov">Government</option>' +
												                	'</select>' +
																'</td>' +
																'<td style="padding:2px">' +
																	'<select name="acct_subclass[]" class="form-control select2 select2-hidden-accessible new-account-subclass" data-placeholder="" style="width: 100%;" aria-hidden="true">' +
												                  		'<option></option>' +
												                	'</select>' +
																'</td>' +
																'<td style="padding:2px">' +
																	'<select name="province_id[]" class="form-control select2 select2-hidden-accessible new-account-province" data-placeholder="" style="width: 100%;" aria-hidden="true">' +
															      		'<option value="'+ $def_prid +'">'+ $def_prdesc +'</option>' +
															    	'</select>' +
																'</td>' +
																'<td style="padding:2px">' +
																	'<select name="city_id[]" class="form-control select2 select2-hidden-accessible new-account-city" data-placeholder="" style="width: 100%;" aria-hidden="true">' +
															      		'<option value="'+ $def_ciid +'">'+ $def_cidesc +'</option>' +
															    	'</select>' +
																'</td>' +
																'<td style="padding:2px">' +
																	'<select name="brgy_id[]" class="form-control select2 select2-hidden-accessible new-account-brgy" data-placeholder="" style="width: 100%;" aria-hidden="true">' +
															      		'<option></option>' +
															    	'</select>' +
																'</td>' +
																'<td style="padding:2px">' +
																	'<input name="address[]" class="form-control new-account-address" type="text">' +
																'</td>' +
																'<td style="padding:2px">' +
																	'<a class="btn btn-success new-account-row"><i class="fa fa-plus"></i></a>' +
																'</td>' +
															'</tr>');

						$(this).removeClass('btn-success')
							   .removeClass('new-account-row')
							   .addClass('btn-danger')
							   .addClass('rem-account-row')
							   .html('<i class="fa fa-trash"></i>');

						$('.new-account-class').select2({
							dropdownParent: $('.jconfirm-scrollpane'),
				            allowClear: true
				        }).on('change', function() {
				            $(this).closest('tr').find('.new-account-subclass').val('').trigger('change');
				        }).on('select2:select', function(e) {
				            $(this).closest('tr').find('.new-account-subclass').select2('open');
				        });

						$('.new-account-subclass').select2({
							dropdownParent: $('.jconfirm-scrollpane'),
				            allowClear: true,
		                    ajax: {
		                        url: $app_url + '/acct-subclass',
		                        delay: 200,
		                        data: function (params) {
		                            return query = {
		                                search: params.term,
		                                class: $(this).closest('tr').find('.new-account-class option:selected').val()
		                           	}
		                        },
		                        processResults: function (data) {
		                            return {
		                                results: $.map(data, function (item) {
		                                    return {
		                                        text: item.description ? item.sub_class.toUpperCase() + ' (' + item.description.toUpperCase() + ')' : item.sub_class.toUpperCase(),
		                                        id: item.sub_class,
		                                    }
		                                })
		                            };
		                        }
		                    }
				        }).on('change', function() {
				            // $(this).closest('tr').find('.new-account-province').val('').trigger('change');
				        }).on('select2:select', function(e) {
				            // $(this).closest('tr').find('.new-account-province').select2('open');
				        });

				        // Initialize first row of service address.
						$('.new-account-province').select2({
							dropdownParent: $('.jconfirm-scrollpane'),
				            allowClear: true,
				            ajax: {
				                url: $app_url + '/provinces',
				                delay: 200,
				                data: function (params) {
				                    return query = {
				                        search: params.term,
				                    }
				                },
				                processResults: function (data) {
				                    return {
				                        results: $.map(data, function (item) {
				                            return {
				                                text: item.name,
				                                id: item.id
				                            }
				                        })
				                    };
				                }
				            }
				        }).on('change', function() {
				            $(this).closest('tr').find('.new-account-city').val('').trigger('change');
				        }).on('select2:select', function(e) {
				            $(this).closest('tr').find('.new-account-city').select2('open');
				        });

				        $('.new-account-city').select2({
				        	dropdownParent: $('.jconfirm-scrollpane'),
				            allowClear: true,
				            ajax: {
				                url: $app_url + '/cities',
				                delay: 200,
				                data: function (params) {
				                    return query = {
				                        search: params.term,
				                        pid: $(this).closest('tr').find('.new-account-province option:selected').val()
				                    }
				                },
				                processResults: function (data) {
				                    return {
				                        results: $.map(data, function (item) {
				                            return {
				                                text: item.name,
				                                id: item.id
				                            }
				                        })
				                    };
				                }
				            }
				        }).on('change', function() {
				            $(this).closest('tr').find('.new-account-brgy').val('').trigger('change');
				        }).on('select2:select', function(e) {
				            $(this).closest('tr').find('.new-account-brgy').select2('open');
				        });

				        $('.new-account-brgy').select2({
				        	dropdownParent: $('.jconfirm-scrollpane'),
				            allowClear: true,
				            ajax: {
				                url: $app_url + '/brgys',
				                delay: 200,
				                data: function (params) {
				                    return query = {
				                        search: params.term,
				                        cid: $(this).closest('tr').find('.new-account-city option:selected').val()
				                    }
				                },
				                processResults: function (data) {
				                    return {
				                        results: $.map(data, function (item) {
				                            return {
				                                text: item.name,
				                                id: item.id
				                            }
				                        })
				                    };
				                }
				            }
				        }).on('select2:select', function(e) {
				            $(this).closest('tr').find('.new-account-address').focus();
				        });
					}).on('click', '.rem-account-row', function() {
						$(this).closest('tr').remove()
					});
				},
				buttons: {
					CLOSE: {
						// close
					},
					SAVE: {
						text: 'SAVE NEW SERVICE APPLICATION',
						btnClass: 'btn btn-success',
						action: function(e) {
							$('.form-group').removeClass('has-error');
							$cn.buttons.SAVE.disable();
							$cn.buttons.SAVE.setText('SAVING...');

							$.ajax({
								url: $app_url + '/csr/customers/account-new-save',
								method: 'post',
								data: $('#form-new-application').serialize()
							}).done(function (response) {
								document.location.href = $app_url + '/csr/application';
							}).fail(function (data) {
								if(data.responseJSON.err_type == "duplicate") {
									$.confirm({
			                            draggable: true,
			                            type: 'red',
			                            title: '',
			                            content: '<p class="text-center"><i class="fa fa-gg text-bold text-danger" style="font-size:54px"></i></p>' +
			                                    '<p class="text-center">'+ data.responseJSON.message +'</p>',
			                            buttons: {
			                                yes: {
			                                    text: 'got it!',
			                                    btnClass: 'btn-danger',
			                                    keys: ['enter', 'esc']
			                                }
			                            }
			                        });
								} else {
									$.each(result.responseJSON, function(field, message) {
										$('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
									});
								}
							}).always(function () {
								$cn.buttons.SAVE.enable();
								$cn.buttons.SAVE.setText('ADD NEW APPLICATION');
							});

							return false;
						}
					}
				}
			});
		});

		$('#btn-edit-mother-account').on('click', function() {
			$cn = $.confirm({
				title: '',
				draggable: true,
				columnClass: 'x-large',
				content: function() {
					var self = this;

					return $.ajax({
						url: $app_url + '/csr/customers/account-mother-edit',
						type: 'get',
						dataType: 'html',
						data: { 'cust_id' : $('#btn-new-application').data('cid') }
					}).done(function (response) {
						self.setContent(response);
					});
				},
				onContentReady: function() {
					//if($('#business_name').val() != "") {
	                	//$('.cust-fname').val(null).prop('disabled', true);
	                //} else {
	                	//$('.cust-bname').prop('disabled', false);
	                //}
	                $('#firstname').prop('disabled', true);
                	$('#middlename').prop('disabled', true);
                	$('#lastname').prop('disabled', true);
                	$('#suffix').prop('disabled', true);
                	$('#business_name').prop('disabled', true);

	                $('#province_id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/provinces',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                            }
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.name,
	                                        id: item.id
	                                    }
	                                })
	                            };
	                        }
	                    }
	                }).on('change', function() {
	                    $('#city_id').val('').trigger('change');
	                }).val($('#province_id').data('old-value')).trigger('change');

	                $('#city_id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/cities',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                pid: $('#province_id option:selected').val()
	                            }
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.name,
	                                        id: item.id
	                                    }
	                                })
	                            };
	                        }
	                    }
	                }).on('change', function() {
	                    $('#brgy_id').val('').trigger('change');
	                }).val($('#city_id').data('old-value')).trigger('change');

	                $('#brgy_id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/brgys',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                cid: $('#city_id option:selected').val()
	                            }
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.name,
	                                        id: item.id
	                                    }
	                                })
	                            };
	                        }
	                    }
	                }).val($('#brgy_id').data('old-value')).trigger('change');

	                $(".date-masked").inputmask("date", {
	                    mask: "y-1-1", 
	                    placeholder: "yyyy-mm-dd", 
	                    leapday: "-02-29", 
	                    separator: "-", 
	                    alias: "yyyy/mm/dd",
	                    onincomplete: function() {
	                        $(this).val(null).trigger('keyup');
	                    }
	                });

	                $('.cust-fname').keyup(function() {
	                	$fn = $('#firstname').val();
	                	$mn = $('#middlename').val();
	                	$ln = $('#lastname').val();
	                	$bd = $('#birthdate').val();

	                	if($fn != "" || $mn != "" || $ln != "" || $bd != "") {
	                		$('.cust-bname').val(null).prop('disabled', true);
	                	} else {
	                		$('.cust-bname').val(null).prop('disabled', false);
	                	}
	                });

	                $('.cust-bname').keyup(function() {
	                	$bn = $('#business_name').val();
	                	$cp = $('#contact_person').val();

	                	if($bn != "" || $cp != "") {
	                		$('.cust-fname').val(null).prop('disabled', true);
	                	} else {
	                		$('.cust-fname').val(null).prop('disabled', false);
	                	}
	                });

	                $("#hidden-edit-cust").click(function() {
						$editjc = $.alert({
                            title   : false,
                            content : 
                            		"<p class='text-center'><i class='fa fa-fw fa-question-circle text-bold text-danger' style='font-size:54px'></i></p>" +
			                        "<h4 class='text-center text-bold text-danger'>Enable Editing of Customer Information?</h4>" +
			                        "<hr style='margin-bottom:8px'>" +
                            		"<div class='form-horizontal cbp'>"
                                        +"<div class='form-group'>"
                                            +"<label class='control-label col-xs-3'>PASSWORD</label>"
                                            +"<div class='col-xs-9'>"
                                                +"<input type='password' id='edit-cust-pass' style='font-size:18px' class='form-control text-primary'>"
                                            +"</div>"
                                        +"</div>"                                                                              
                                     +"</div>",
                            type    : 'red',
                            draggable : true,
                            onContentReady : function(){
                                $('#edit-cust-pass').focus();
        						document.getElementById("hidden-edit-cust").style.pointerEvents = "auto";
                            },                           
                            buttons : {
                                NO :{
                            		keys : ['esc'],
                            		text : '<small>[ESC]</small> CANCEL'
                                },
                                YES : {
                                    text     : 'YES',
                                    btnClass : 'btn-red',
                                    action   : function(){
                                        var pw = $('#edit-cust-pass').val();

                                        if(pw){
                                        	$.ajax({
                                                url   : $app_url + '/admin-pw',
                                                type  : 'GET',
                                                data  : {
                                                    'pw' : pw
                                                },
                                                success : function(response){
                                                    if(response.status == 200){
                                                    	$('#firstname').prop('disabled', false);
                                                    	$('#middlename').prop('disabled', false);
                                                    	$('#lastname').prop('disabled', false);
                                                    	$('#suffix').prop('disabled', false);
                                                    	$('#business_name').prop('disabled', false);
		                        						document.getElementById("hidden-edit-cust").style.pointerEvents = "none";
		                        						$editjc.close();

		                        						$.alert({
											                draggable: true,
											                title: false,
											                type: 'green',
											                content: '<p class="text-center"><i class="fa fa-fw fa-check text-bold text-success" style="font-size:54px"></i></p>' +
											                        '<h4 class="text-center text-bold text-success">Authentication Successful</h4>' +
											                        '<hr style="margin-bottom:8px">' +
											                        '<p class="text-center">Editing of Customer Information is temporarily enabled!</p>',
											                buttons: {
											                    yes: {
											                        text: '<small>[ENTER]</small> GOT IT!',
											                        btnClass: 'btn-success',
											                        keys: ['enter']
											                    }
											                }
											            });
                                                    }else{
                                                        $.alert({
											                draggable: true,
											                title: false,
											                type: 'red',
											                content: '<p class="text-center"><i class="fa fa-fw fa-warning text-bold text-danger" style="font-size:54px"></i></p>' +
											                        '<h4 class="text-center text-bold text-danger">Authentication Failed</h4>' +
											                        '<hr style="margin-bottom:8px">' +
											                        '<p class="text-center">Please enter a the correct administrative password!</p>',
											                buttons: {
											                    yes: {
											                        text: '<small>[ENTER]</small> GOT IT!',
											                        btnClass: 'btn-danger',
											                        keys: ['enter'],
											                        action : function(){
											                        	$editjc.open();
											                        }
											                    }
											                }
											            });                                                       
                                                    }
                                                },
                                                error : function(xhr){
                                                    if(xhr.status != '422'){
                                                        $.alert({
                                                            title   : 'Oops, something went wrong!',
                                                            content : "<span style='font-size:20px' class='text-danger'>" 
                                                                        + xhr.status 
                                                                    + "</span>" + '&nbsp;&nbsp;' 
                                                                    + '<strong>'+xhr.statusText+'</strong>'
                                                                    + '<br />'
                                                                    + 'Refresh the page and try again.',
                                                            type    : 'red',
                                                            icon    : 'fa fa-warning',
                                                            draggable : true
                                                        });  
                                                    }   
                                                },
                                                beforeSend : function(){                                                    
                                                    showBoxLoadingState();
                                                },
                                                complete : function(){
                                                    removeBoxLoadingState();
                                                }
                                            }); 
                                        }
                                        else {
                                        	return false;
                                        }                                                          
                                    }
                                }
                            }
                        });
					});
				},
				buttons: {
					CLOSE: {
						// close
					},
					SAVE: {
						text: 'UPDATE CUSTOMER INFO',
						btnClass: 'btn btn-success',
						action: function(e) {
							$('.form-group').removeClass('has-error');
							$cn.buttons.SAVE.disable();
							$cn.buttons.SAVE.setText('UPDATING...');

							$.ajax({
								url: $app_url + '/csr/customers/account-mother-patch',
								method: 'post',
								data: {
									'cust_id'	     : $('#address').data('cid'),
									'firstname'		 : $('#firstname').val(),
									'middlename'	 : $('#middlename').val(),
									'lastname'		 : $('#lastname').val(),
									'suffix'		 : $('#suffix').val(),
									'business_name'  : $('#business_name').val(),
									'contact_person' : $('#contact_person').val(),
									'birthdate'		 : $('#birthdate').val(),
									'is_sc'			 : $('#is_sc').data('is-sc'),
									'sc_number'      : $('#sc_number').val(),
									'landline_no'	 : $('#landline_no').val(),
									'mobile_no'		 : $('#mobile_no').val(),
									'province_id'	 : $('#province_id').val(),
									'city_id'		 : $('#city_id').val(),
									'brgy_id'		 : $('#brgy_id').val(),
									'address'		 : $('#address').val()	
								}
							}).done(function (response) {
								$cn.close();
                                $.confirm({
                                    draggable: true,
                                    type: 'green',
                                    title: false,
                                    content: '<p class="text-center"><i class="fa fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Successfully updated customer information!</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-success',
                                            keys: ['enter', 'esc'],
                                            action: function() {
                                                location.reload();
                                            }
                                        }
                                    }
                                });
							}).fail(function (data) {
								switch(data.status) {
									case 422:
										$.each(data.responseJSON, function(k, v) {
											$('#'+k).closest('.form-group').addClass('has-error');
										});
									break;
								}
							}).always(function () {
								$cn.buttons.SAVE.enable();
								$cn.buttons.SAVE.setText('UPDATE CUSTOMER INFO');
							});

							return false;
						}
					}
				}
			});
		});

		$('.account-number').on('click', function() {
	        var $account_id         = $(this).data('aid');
	        window.location.href    = $app_url + '/csr/customers/account?aid=' + $account_id;
	    });

		$('.btn-edit-addr-service').click(function() {
	    	$acct_id = $(this).data('acct-id');

            $.confirm({
                title: '',
                draggable: true,
                columnClass: 'large',
                content: function() {
                    var self = this;

                    return $.ajax({
                        url: $app_url + '/csr/customers/account-edit-addr-service',
                        data: { 'acct_id' : $acct_id },
                        dataType: 'html',
                        method: 'get'
                    }).done(function(res) {
                        self.setContent(res);
                    }).fail(function() {
                        self.setContent('Something went wrong. Please try again or refresh the page.');
                    });
                },
                onContentReady: function() {
                    $('#province_id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/provinces',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                            }
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.name,
	                                        id: item.id
	                                    }
	                                })
	                            };
	                        }
	                    }
	                }).on('change', function() {
	                    $('#city_id').val('').trigger('change');
	                }).val($('#province_id').data('old-value')).trigger('change');

	                $('#city_id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/cities',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                pid: $('#province_id option:selected').val()
	                            }
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.name,
	                                        id: item.id
	                                    }
	                                })
	                            };
	                        }
	                    }
	                }).on('change', function() {
	                    $('#brgy_id').val('').trigger('change');
	                }).val($('#city_id').data('old-value')).trigger('change');

	                $('#brgy_id').select2({
	                    allowClear: true,
	                    dropdownParent: $('.jconfirm-scrollpane'),
	                    ajax: {
	                        url: $app_url + '/brgys',
	                        delay: 200,
	                        data: function (params) {
	                            return query = {
	                                search: params.term,
	                                cid: $('#city_id option:selected').val()
	                            }
	                        },
	                        processResults: function (data) {
	                            return {
	                                results: $.map(data, function (item) {
	                                    return {
	                                        text: item.name,
	                                        id: item.id
	                                    }
	                                })
	                            };
	                        }
	                    }
	                }).val($('#brgy_id').data('old-value')).trigger('change');
                },
                buttons: {
                    CANCEL: {
                        keys: ['esc']
                    },
                    UPDATE: {
                        text: "UPDATE SERVICE ADDRESS",
                        btnClass: 'btn btn-warning',
                        keys: ['enter'],
                        action: function() {
                            $('.form-group').removeClass('has-error');
                            $btn = this.buttons.UPDATE;
                            $btn.setText('UPDATING &nbsp; <i class="fa fa-refresh fa-spin"></i>');
                            $btn.disable();

                            $.ajax({
                                url: $app_url + '/csr/customers/account-patch-addr-service',
                                data: {
                                    'acct_id'		: $acct_id,
                                    'province_id'	: $('#province_id').val(),
                                    'city_id'		: $('#city_id').val(),
                                    'brgy_id'		: $('#brgy_id').val(),
                                    'address'		: $('#address').val(),
                                },
                                method: 'post'
                            }).done(function(res) {
                                location.reload();
                            }).fail(function(res) {
                            	console.log(res.responseJSON);
                            	$.each(res.responseJSON, function(k,v) {
                            		$('#'+k).closest('.form-group').addClass('has-error').prop('title', v);
                            	});

                            	$btn.setText('UPDATE SERVICE ADDRESS');
                            	$btn.enable();
                            });

                            return false;
                        }
                    }
                }
            });
        });
	});
</script>
@endsection