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

@section('body')
<style type="text/css">
    #table-wmeters {
        text-transform: uppercase;
    }
</style>

<div class="box box-default">
	<div class="box-body">
		<div class="row">
			<div class="col-xs-12">
				<label class="text-primary" style="font-size:16px; margin-top:6px">Water Meters</label>

                <div class="pull-right box-tools">
                    <a href="#" class="btn btn-success btn-flat pull-right export-excel" style="margin-left:2px"><i class="fa fa-file-excel-o"></i> Export Excel</a>
                </div>

				<div class="pull-right box-tools">
                    <a href="#" id="new-wmeter" class="btn btn-default pull-right"><i class="fa fa-plus-circle text-success"></i> Add New Meter</a>
                </div>

                <div class="pull-right" style="width:180px; margin-right:3px">
                    <select id="filter-by-status" class="form-control select2 select2-hidden-accessible" data-placeholder="STATUS" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="installed">INSTALLED</option>
                        <option value="in stock">IN STOCK</option>
                    </select>
                </div>

                <div class="pull-right" style="width:180px; margin-right:3px">
                    <select id="filter-by-brand" class="form-control select2 select2-hidden-accessible" data-placeholder="BRAND" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="asiam">ASIAM</option>
                        <option value="acejet">ACEJET</option>
                    </select>
                </div>
			</div>
		</div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-hover table-condensed" id="table-wmeters">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="20%">Meter Brand</th>
                            <th width="20%">Meter No.</th>
                            <th width="10%">Meter Size</th>
                            <th width="10%">Max Reading</th>
                            <th width="5%">Status</th>
                            <th width="25%">Customer Name</th>
                        </tr>
                    </thead>
                </table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $dt = $('#table-wmeters').DataTable({
            deferred: true,
            processing: true,
            serverSide: true,
            ajax: {
            		url: $app_url + '/warehouse/water-meters/dt',
            		data: function(d) {
            			d.status = $('#filter-by-status option:selected').val();
            			d.brand = $('#filter-by-brand option:selected').val();
            		}
            	},
            columns: [
                { data: 'meter_brand', 	name: 'meter_brand',		orderable: false, searchable: false},
                { data: 'meter_no',    	name: 'wm.meter_no',    	orderable: false},
                { data: 'meter_size', 	name: 'wm.meter_size',  	orderable: false, searchable: false},
                { data: 'max_reading', 	name: 'wm.max_reading', 	orderable: false, searchable: false},
                { data: 'status', 		name: 'wm.status', 			orderable: false, searchable: false},
                { data: 'cust_name', 	name: 'cust_name', 			orderable: false}
            ]
        });

        $('#table-wmeters_filter input').unbind();
        $('#table-wmeters_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                $dt.search($(this).val()).draw();
            }
        });
        
        $('input[type="search"]').focus();

        $('#filter-by-status').on('change', function() {
            $dt.search($('#table-wmeters_filter input').val()).draw();
        });	

        $('#filter-by-brand').on('change', function() {
            $dt.search($('#table-wmeters_filter input').val()).draw();
        });	

        $('#new-wmeter').on('click', function() {
			$cn = $.confirm({
				title: '',
				draggable: true,
				columnClass: 'large',
				content: function() {
					var self = this;

					return $.ajax({
						url: $app_url + '/warehouse/water-meters/new',
						type: 'get',
						dataType: 'html',
					}).done(function (response) {
						self.setContent(response);
					});
				},
				onContentReady: function() {
					$('#brand_id, #meter_size').select2({
						allowClear: true,
                        dropdownParent: $('.jconfirm-scrollpane'),
                    }).on('change', function() {
                    	// code
                    });
				},
				buttons: {
					CLOSE: {
						// close
					},
					SAVE: {
						text: 'ADD METER',
						btnClass: 'btn btn-warning',
						action: function(e) {
							$('.form-group').removeClass('has-error');
							$cn.buttons.SAVE.disable();
							$cn.buttons.SAVE.setText('SAVING...');

							$.ajax({
								url: $app_url + '/warehouse/water-meters/save',
								method: 'post',
								data: {
									'brand_id'	    : $('#brand_id').val(),
									'meter_no'      : $('#meter_no').val(),
									'meter_size'    : $('#meter_size').val(),
									'max_reading'	: $('#max_reading').val()
								}
							}).done(function (data) {
								$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 added water meter!.</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');
										});

										if(data.responseJSON.others == true) {
                                            $('#msg-cont').html('');
											$('#msg-cont').append('<div class="alert alert-danger alert-dismissible">' +
								                	'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' +
								                	'<h4><i class="icon fa fa-warning"></i> Duplicate</h4>' +
								                	data.responseJSON.msg +
								            	'</div>')
										}
									break;
								}
							}).always(function () {
								$cn.buttons.SAVE.enable();
								$cn.buttons.SAVE.setText('ADD METER');
							});

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

        $('.export-excel').on('click', function() {
            $brand = $('#filter-by-brand').val();
            $status = $('#filter-by-status').val();

            if ($brand != "" || $status != "") {
                window.open($app_url + '/warehouse/water-meters/get-excel-water-meters?brand=' + $brand + '&status=' + $status);
            }
            else {
                $.confirm({
                    draggable: true,
                    title: false,
                    type: 'orange',
                    content: '<p class="text-center"><i class="fa fa-fw fa-warning text-bold text-warning" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Please select a filter!</p>",
                    buttons: {
                        yes: {
                            text: '<small>[ENTER]</small> got it!',
                            btnClass: 'btn-warning',
                            keys: ['enter']
                        }
                    }
                });
            }
        });
    });
</script>
@endsection