@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')
<style type="text/css">
	tr {
        font-size: 14px;
    }
	.table>tbody>tr>td {
		vertical-align: middle !important;
	}
	table.dataTable.table-condensed thead > tr > th {
		padding-right: 5px !important;
	}
</style>
@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 Penalty/Promo</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:160px; margin-left: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="ac" selected="true">ACTIVE</option>
                        <option value="dc">DISCONNECTED</option>
                        <option value="ia">INACTIVE</option>
                    </select>
                </div>

				<div class="pull-right box-tools" style="width:160px; margin-left: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:200px; margin-left:3px">
                    <select id="filter-by-promo" class="form-control select2 select2-hidden-accessible" data-placeholder="PROMO" style="width: 100%;" aria-hidden="true">
                        <option></option>
                      	@foreach($promo AS $p)
                        <option value="{{ $p->id }}">{{ strtoupper($p->promo_title) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="pull-right box-tools" style="width:180px">
                    <select id="filter-by-penalty" class="form-control select2 select2-hidden-accessible" data-placeholder="PENALTY" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="with">WITH PENALTY</option>
                        <option value="without">WITHOUT PENALTY</option>
                    </select>
                </div>

                
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-md-12">
				<table class="table table-condensed table-hover tbl-pp" id="table-penalty-promo" style="width:100%;">
					<thead>
						<tr>
							<th class="text-uppercase" width="10%">Account No.</th>
							<th class="text-uppercase" width="20%">Customer Name</th>
							<th class="text-uppercase" width="5%">Class</th>			
							<th class="text-uppercase" width="5%">Book</th>
							<th class="text-uppercase text-center" width="10%">Account Status</th>
							<th class="text-uppercase text-center" width="10%">Penalty</th>
							<th class="text-uppercase text-center" width="10%">Promo</th>
							<th width="10%"></th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function(){      
		function callBack(table){
			$('.disable-btn').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 update the customer penalty?</p>",
					buttons: {
						yes: {
							text: '<small>[ENTER]</small> Yes',
							btnClass: 'btn-primary',
							keys: ['enter'],
							action: function(){
								$.ajax({
				                    url: $app_url + '/csr/customers-penalty-promo/update-customer-penalty',
				                    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 penalty 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-btn').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 update the customer penalty?</p>",
					buttons: {
						yes: {
							text: '<small>[ENTER]</small> Yes',
							btnClass: 'btn-primary',
							keys: ['enter'],
							action: function(){
				
								$.ajax({
				                    url: $app_url + '/csr/customers-penalty-promo/update-customer-penalty',
				                    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 penalty 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-penalty-promo').DataTable({
			processing: true,
			serverSide: true,
			targets: 'no-sort',
        	bSort: false,
			ajax: {
                url: $app_url + '/csr/customers-penalty-promo/get-all',
                data: function(d) {
                	d.status 		= $('#filter-by-status option:selected').val(),
                    d.with_penalty  = $('#filter-by-penalty option:selected').val(),
                    d.with_promo	= $('#filter-by-promo option:selected').val(),
					d.book			= $('#filter-by-book option:selected').val()
                }
            },
			columns: [
				{ data: 'acct_no', 			name: 'acct_no', 		orderable: false},
				{ data: 'customer_name', 	name: 'customer_name', 	class:'text-uppercase', 	orderable: false},
				{ data: 'class', 			name: 'class', 			class: 'text-center', 		orderable: false, 		searchable: false },
				{ data: 'book', 			name: 'book', 			class: 'text-center', 		orderable: false, 		searchable: false },
				{ data: 'status', 			name: 'status', 		class: 'text-uppercase, text-center', orderable: false, 	searchable: false },
				{ data: 'wp', 				name: 'wp', 			class: 'text-uppercase, text-center', orderable: false, 	searchable: false },
				{ data: 'promo', 			name: 'promo', 			class: 'text-uppercase, text-center', orderable: false, 	searchable: false },
				{ data: 'action', 			name: 'action', 		className: 'text-center', 	orderable: false, 	searchable: false }
			],
			createdRow: function(row, data, dataIndex) {
                $(row).attr('data-acct-id', data.id);
            },
			fnDrawCallback: function( oSettings ) {
			    callBack($dt);
			}
		});

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

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

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

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

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

        $('.export-excel').on('click', function() {
        	$with_penalty = $('#filter-by-penalty option:selected').val();
			$with_promo   = $('#filter-by-promo option:selected').val();
			$cust_status  = $('#filter-by-status option:selected').val();
			
        	window.open($app_url + '/csr/customers-penalty-promo/get-excel-penalty-promo-cust?with_penalty=' + $with_penalty + '&with_promo=' + $with_promo + '&cust_status=' + $cust_status);
        });
	});
</script>
@endsection