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

@section('body')
<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">Customers with Septage and Septic Tank</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" style="width:150px; 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 value="ac" selected>ACTIVE</option>
                        <option value="dc">DISCONNECTED</option>
                        <option value="ia">INACTIVE</option>
                    </select>
                </div>

                <div class="pull-right box-tools" style="width:120px; margin-right:3px">
                    <select id="filter-by-septic" class="form-control select2 select2-hidden-accessible" data-placeholder="SEPTIC TANK" style="width: 100%;" aria-hidden="true">
                        <option value="" selected></option>
                        <option value="with">WITH</option>
                        <option value="without">WITHOUT</option>
                    </select>
                </div>

                <div class="pull-right box-tools" style="width:150px; margin-right:3px">
                    <select id="filter-by-septage" class="form-control select2 select2-hidden-accessible" data-placeholder="SEPTAGE STATUS" style="width: 100%;" aria-hidden="true">
                        <option value="" selected></option>
                        <option value="ac">ACTIVE</option>
                        <option value="ia">INACTIVE</option>
                    </select>
                </div>
                <div class="pull-right box-tools" style="width:120px; margin-right:3px">
                    <select id="filter-by-book" class="form-control select2 select2-hidden-accessible" data-placeholder="BOOK NO." style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($books AS $b)
                        <option value="{{ $b->id }}">{{ $b->code }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pull-right box-tools" style="width:150px; margin-right:3px">
                    <select id="filter-by-class" class="form-control select2 select2-hidden-accessible" data-placeholder="ACCOUNT CLASS" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($class AS $c)
                        <option value="{{ $c->class }}">{{ $c->class }}</option>
                        @endforeach
                    </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-septage" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                        	<th width="10%">ACCOUNT NO.</th>
                        	<th width="20%">CUSTOMER NAME</th>
                        	<th width="35%">ADDRESS</th>
                        	<th width="5%">CLASS</th>
                        	<th width="5%">BOOK</th>
                            <th width="6%">STATUS</th>
                        	<th width="8%" class="text-center">HAS SEPTAGE</th>
                        	<th width="8%" class="text-center">W/ SEPTIC TANK</th>
                        	<th width="3%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {
        function callBack(table){
            $('.enable-septage').click(function(){
                let acct_id = $(this).closest('tr').data('acct-id');

                $.confirm({
                    draggable: true,
                    title: false,
                    type: 'blue',
                    content: '<p class="text-center"><i class="fa fa-fw fa-question text-bold text-primary" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Are you sure you want to <strong class='text-green'>ACTIVATE</strong> the customer <strong>SEPTAGE STATUS?</strong></p>",
                    buttons: {
                        yes: {
                            text: '<small>[ENTER]</small> Yes',
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: function(){
                
                                $.ajax({
                                    url: $app_url + '/csr/other-settings/update-septage',
                                    data: { 
                                        'acct_id': acct_id,
                                        'action' : 'enable'
                                    },
                                    method: 'post',
                                    success: function(res) {
                                        $.confirm({
                                            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>' +
                                                    "<p class='text-center'>Customer's <strong>SEPTAGE STATUS</strong> was successfully updated.</p>",
                                            buttons: {
                                                yes: {
                                                    text: '<small>[ENTER]</small> got it!',
                                                    btnClass: 'btn-success',
                                                    keys: ['enter'],
                                                    action: function(){
                                                        table.ajax.reload(null, false);
                                                    }
                                                }
                                            }
                                        });
                                    },
                                    error: function(data) {
                                        
                                    }
                                });
                            }
                        },
                        no: {
                            text: '<small>[ESC]</small> No',
                            btnClass: 'btn-default',
                            keys: ['esc'],
                        }
                    }
                });
            });

            $('.disable-septage').click(function(){
                var acct_id = $(this).closest('tr').data('acct-id');

                $.confirm({
                    draggable: true,
                    title: false,
                    type: 'blue',
                    content: '<p class="text-center"><i class="fa fa-fw fa-question text-bold text-primary" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Are you sure you want to <strong class='text-red'>DEACTIVATE</strong> the customer <strong>SEPTAGE STATUS?</strong></p>",
                    buttons: {
                        yes: {
                            text: '<small>[ENTER]</small> Yes',
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: function(){
                
                                $.ajax({
                                    url: $app_url + '/csr/other-settings/update-septage',
                                    data: { 
                                        'acct_id': acct_id,
                                        'action' : 'disable'
                                    },
                                    method: 'post',
                                    success: function(res) {
                                        $.confirm({
                                            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>' +
                                                    "<p class='text-center'>Customer's <strong>SEPTAGE STATUS</strong> was successfully updated.</p>",
                                            buttons: {
                                                yes: {
                                                    text: '<small>[ENTER]</small> got it!',
                                                    btnClass: 'btn-success',
                                                    keys: ['enter'],
                                                    action: function(){
                                                        table.ajax.reload(null, false);
                                                    }
                                                }
                                            }
                                        });
                                    },
                                    error: function(data) {
                                        
                                    }
                                });
                            }
                        },
                        no: {
                            text: '<small>[ESC]</small> No',
                            btnClass: 'btn-default',
                            keys: ['esc'],
                        }
                    }
                });
            });

            $('.enable-septic').click(function(){
                let acct_id = $(this).closest('tr').data('acct-id');

                $.confirm({
                    draggable: true,
                    title: false,
                    type: 'blue',
                    content: '<p class="text-center"><i class="fa fa-fw fa-question text-bold text-primary" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Are you sure you want to <strong class='text-green'>ACTIVATE</strong> the customer <strong>SEPTIC TANK STATUS?</strong></p>",
                    buttons: {
                        yes: {
                            text: '<small>[ENTER]</small> Yes',
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: function(){
                
                                $.ajax({
                                    url: $app_url + '/csr/other-settings/update-septic',
                                    data: { 
                                        'acct_id': acct_id,
                                        'action' : 'enable'
                                    },
                                    method: 'post',
                                    success: function(res) {
                                        $.confirm({
                                            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>' +
                                                    "<p class='text-center'>Customer's <strong>SEPTIC TANK STATUS</strong> was successfully updated.</p>",
                                            buttons: {
                                                yes: {
                                                    text: '<small>[ENTER]</small> got it!',
                                                    btnClass: 'btn-success',
                                                    keys: ['enter'],
                                                    action: function(){
                                                        table.ajax.reload(null, false);
                                                    }
                                                }
                                            }
                                        });
                                    },
                                    error: function(data) {
                                        
                                    }
                                });
                            }
                        },
                        no: {
                            text: '<small>[ESC]</small> No',
                            btnClass: 'btn-default',
                            keys: ['esc'],
                        }
                    }
                });
            });
            
            $('.disable-septic').click(function(){
                var acct_id = $(this).closest('tr').data('acct-id');

                $.confirm({
                    draggable: true,
                    title: false,
                    type: 'blue',
                    content: '<p class="text-center"><i class="fa fa-fw fa-question text-bold text-primary" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Are you sure you want to <strong class='text-red'>DEACTIVATE</strong> the customer <strong>SEPTIC TANK STATUS?</strong></p>",
                    buttons: {
                        yes: {
                            text: '<small>[ENTER]</small> Yes',
                            btnClass: 'btn-primary',
                            keys: ['enter'],
                            action: function(){
                
                                $.ajax({
                                    url: $app_url + '/csr/other-settings/update-septic',
                                    data: { 
                                        'acct_id': acct_id,
                                        'action' : 'disable'
                                    },
                                    method: 'post',
                                    success: function(res) {
                                        $.confirm({
                                            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>' +
                                                    "<p class='text-center'>Customer's <strong>SEPTIC TANK STATUS</strong> was successfully updated.</p>",
                                            buttons: {
                                                yes: {
                                                    text: '<small>[ENTER]</small> got it!',
                                                    btnClass: 'btn-success',
                                                    keys: ['enter'],
                                                    action: function(){
                                                        table.ajax.reload(null, false);
                                                    }
                                                }
                                            }
                                        });
                                    },
                                    error: function(data) {
                                        
                                    }
                                });
                            }
                        },
                        no: {
                            text: '<small>[ESC]</small> No',
                            btnClass: 'btn-default',
                            keys: ['esc'],
                        }
                    }
                });
            });
        }

		$dt = $('#table-septage').DataTable({
			processing: true,
			serverSide: true,
			targets: 'no-sort',
        	bSort: false,
			ajax: {
                url: $app_url + '/csr/other-settings/load-dt',
                data: function(d) {
                	d.status       = $('#filter-by-status option:selected').val(),
                    d.has_septage  = $('#filter-by-septage option:selected').val(),
                    d.with_septic  = $('#filter-by-septic option:selected').val(),
                    d.book         = $('#filter-by-book option:selected').val(),
                    d.class        = $('#filter-by-class option:selected').val()
                }
            },
			columns: [
				{ data: 'acct_number', 		name: 'acct_number',    orderable: false},
                { data: 'cust_name',        name: 'cust_name',      orderable: false},
                { data: 'address',          name: 'address',        orderable: false,       searchable: false,  className: 'text-uppercase' },
                { data: 'class',            name: 'class',          orderable: false,       searchable: false },
                { data: 'book',             name: 'book',           orderable: false,       searchable: false },
                { data: 'status',           name: 'status',         orderable: false,       searchable: false },
                { data: 'has_septage',      name: 'has_septage',    orderable: false,       searchable: false,  className: 'text-center' },
                { data: 'with_septic',      name: 'with_septic',    orderable: false,       searchable: false,  className: 'text-center' },
                { data: 'action',           name: 'action',         orderable: false,       searchable: false },
			],
            createdRow: function(row, data, dataIndex) {
                $(row).attr('data-acct-id', data.id);
            },
            columnDefs: [{
                targets: 2,
                render: function(data, type, row) {
                    if(data.length > 50) {
                        return data.substr(0,50) + '...';
                    } else {
                        return data;
                    }
                }
            }],
            fnDrawCallback: function( oSettings ) {
                callBack($dt);
            }
		});

        $('#table-septage_filter input').unbind();
        $('#table-septage_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                $dt.search($(this).val()).draw();
            }
        });

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

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

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

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

        $('#filter-by-class').on('change', function() {
            $dt.search($('#table-septage_filter input').val()).draw();
        });
	});
</script>
@endsection