@extends('layouts.master')

@section('content')

<style>
    .pointer{
        cursor: pointer;
        font-size: 17px;
    }
    button.btn.tab.active {
        background-color: #12171a;
        color: white;
        cursor: auto;
    }
    button.btn.tab {
        border: 1px solid #060706;
    }
    .card-body {
        overflow: visible;
    }
    .promoBonus, .chunkBonus{
        margin: auto;
        display: none;
    }
    table#template-table, table#active-table, table#expired-table {
        width: 100% !important;
    }
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ trans('marketing.MKGT Bonus Config') }}</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-3"></div>
                <div class="col-sm-3">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">{{ Breadcrumbs::render('MKGT Bonus Config') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card">
            <div class="card-header">
                <div class="text-center"><br>
                    <button class="btn tab active" id="newTemplate">{{ trans('marketing.Create New Template') }}</button>
                    <button class="btn tab" id="templateList">{{ trans('marketing.Template') }}</button>
                    <button class="btn tab" id="activeBonuses">{{ trans('marketing.Active Bonuses') }}</button>
                    <button class="btn tab" id="expiredBonuses">{{ trans('marketing.Expired Bonuses') }}</button>
                </div><br>
                <div  class="newTemplate">
                <form id="newTemplate-form">
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            @csrf                                
                            <div class="form-col-1">
                                {{ Form::label('bonusType', trans('marketing.Bonus Type'), ['class' => 'required']) }}
                                {{ Form::select('bonusType', $bonusTypeList, '4', ['id' => 'bonusType', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="bonusType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('templateName', trans('marketing.Template Name'), ['class' => 'required']) }}
                                {{ Form::text('templateName','', ['id' => 'templateName', 'class' => 'form-control','maxlength' => 10]) }}
                                <span id="templateName-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('bonusDependency', trans('marketing.Bonus Dependency'), ['class' => 'required']) }}
                                {{ Form::text('bonusDependency','', ['id' => 'bonusDependency', 'class' => 'form-control','readonly' => 'true']) }}
                                <span id="bonusDependency-error" class="error-help-block"></span>
                            </div>
<div class="promoBonus">
    <input type="hidden" id="marginRow" name="marginRow" value="1">
<table id="margin-table" cellpadding="5" cellspacing="5" style="margin-top: 35px;">
<thead>
    <tr>        
        <td align="center">{{ trans('marketing.Min P.Amt') }}</td>
        <td align="center">{{ trans('marketing.Max P.Amt') }}</td>
        <td align="center">{{ trans('marketing.Bonus%') }}</td>
        <td align="center">{{ trans('marketing.Max B.Amt') }}</td>
        <td align="center" colspan="2">{{ trans('marketing.Wager : Relese Ratio') }}</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <div>
            <input name="minAmount_1" type="text" id="minAmount_1" class="form-control number" maxlength="5">
            <span id="minAmount_1-error" class="error-help-block"></span>
            </div>
        </td>
        <td>
            <div>
            <input name="maxAmount_1" type="text" id="maxAmount_1" class="form-control number" maxlength="5">
            <span id="maxAmount_1-error" class="error-help-block"></span>
            </div>
        </td>
        <td>
            <div>
            <input name="bonus_1" type="text" id="bonus_1" class="form-control number" maxlength="3">
            <span id="bonus_1-error" class="error-help-block"></span>
            </div>
        </td>
        <td>
            <div>
            <input name="maxBonusAmount_1" type="text" id="maxBonusAmount_1" class="form-control number" maxlength="5">
            <span id="maxBonusAmount_1-error" class="error-help-block"></span>
            </div>
        </td>
        <td style="width: 77px;">
            <div>
            <input name="wager_1" type="text" id="wager_1" class="form-control number" value="10" maxlength="2">
            <span id="wager_1-error" class="error-help-block"></span>
            </div>
        </td>
        <td style="width: 77px;">
            <div>
            <input name="relese_1" type="text" id="relese_1" class="form-control number" value="1" maxlength="2">
            <span id="relese_1-error" class="error-help-block"></span>
            </div>
        </td>
    </tr>
</tbody>
</table>
<table cellpadding="5" cellspacing="5" style="margin-top: 20px;">
<tbody>
    <tr>
        <td>
            <button type="button" class="btn btn-primary" id="add-margin">{{ trans('marketing.Add Margins') }}</button>
            <button type="button" class="btn btn-primary" id="remove-margin" style="display:none">{{ trans('marketing.Remove Margins') }}</button>
        </td>
    </tr>
</tbody>
</table>
<table width="70%" cellpadding="5" cellspacing="5" style="margin: 10px auto 10px auto;">
<tbody>
    <tr>
        <td rowspan="2" class="text-right">{{ trans('marketing.Bonus split ratio') }}: &nbsp;&nbsp;&nbsp;</td>
        <td style="width: 77px;">
            <div>
            <input name="wagerShare" type="text" id="wagerShare" class="form-control number" maxlength="3" value="100">
            <span id="wagerShare-error" class="error-help-block"></span>
            </div>
        </td>
        <td>% {{ trans('marketing.Wagering Share') }}</td>
    </tr>
    <tr>
        <td style="width: 77px;">
            <div>
            <input name="instantCash" type="text" id="instantCash" class="form-control number" maxlength="3" value="0">
            <span id="instantCash-error" class="error-help-block"></span>
            </div>
        </td>
        <td>% {{ trans('marketing.Instant cash') }}</td>
    </tr>
    
    <tr>
        <td colspan="2">
            <span id="percentage-error" class="error-help-block"></span>
        </td>
    </tr>
</tbody>
</table>
</div>

                        </div>
                    </div>
                </form>
                <div class="card-primary card-form-1">
                    <div class="card-body text-center">
                        <div class="button_sec" id="form-buttons">
                            <button class="btn btn-primary add-form" id="newTemplate-form-submit">{{ trans('marketing.Insert Template') }}</button>
                        </div>
                        <div class="button_sec" id="form-loader" style="display:none">
                            <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>

        <div class="card templateList">
            <div class="card-body">
<table id="template-table" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="text-center">{{ trans('marketing.Template Name') }}</th>
            <th class="text-center">{{ trans('marketing.Dependency') }}</th>
            <th class="text-center">{{ trans('marketing.Min Purchase') }}</th>
            <th class="text-center">{{ trans('marketing.Max Bonus') }}</th>
            <th class="text-center">{{ trans('marketing.Wagering:Release') }}</th>
            <th class="text-center">{{ trans('marketing.Use') }}</th>
        </tr>
    </thead>
</table>
            </div>
            <!-- card-body -->
        </div>

        

        <div class="card activeBonuses">
            <div class="card-body">
<table id="active-table" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="text-center">{{ trans('marketing.Start Date') }}</th>
            <th class="text-center">{{ trans('marketing.End Date') }}</th>
            <th class="text-center">{{ trans('marketing.Bonus Code') }}</th>
            <th class="text-center">{{ trans('marketing.Min Purchase') }}</th>
            <th class="text-center">{{ trans('marketing.Max Bonus') }}</th>
            <th class="text-center">{{ trans('marketing.Wagering') }}</th>
            <th class="text-center">{{ trans('marketing.Tourney Ticket') }}</th>
            <th class="text-center">{{ trans('marketing.Status') }}</th>
            <th class="text-center">{{ trans('marketing.% Wagering Share') }}</th>
            <th class="text-center">{{ trans('marketing.% Instant Share') }}</th>
            <th class="text-center">{{ trans('marketing.Action') }}</th>
        </tr>
    </thead>
</table>
            </div>
            <!-- card-body -->
        </div>

        

        <div class="card expiredBonuses">
            <div class="card-body">
<table id="expired-table" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="text-center">{{ trans('marketing.Start Date') }}</th>
            <th class="text-center">{{ trans('marketing.End Date') }}</th>
            <th class="text-center">{{ trans('marketing.Bonus Code') }}</th>
            <th class="text-center">{{ trans('marketing.Min Purchase') }}</th>
            <th class="text-center">{{ trans('marketing.Max Bonus') }}</th>
            <th class="text-center">{{ trans('marketing.Wagering') }}</th>
            <th class="text-center">{{ trans('marketing.Tourney Ticket') }}</th>
            <th class="text-center">{{ trans('marketing.Status') }}</th>
            <th class="text-center">{{ trans('marketing.% Wagering Share') }}</th>
            <th class="text-center">{{ trans('marketing.% Instant Share') }}</th>
        </tr>
    </thead>
</table>
            </div>
            <!-- card-body -->
        </div>

        
    </section>

</div>
@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">

    $('.templateList,.activeBonuses,.expiredBonuses').hide();

    $('#newTemplate').click( function () {
        $('.templateList,.activeBonuses,.expiredBonuses').hide();
        $('.newTemplate').show();
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
    });
    $('#templateList').click( function () {
        $('.newTemplate,.activeBonuses,.expiredBonuses').hide();
        $('.templateList').show();
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
    });
    $('#activeBonuses').click( function () {
        $('.newTemplate,.templateList,.expiredBonuses').hide();
        $('.activeBonuses').show();
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
    });
    $('#expiredBonuses').click( function () {
        $('.newTemplate,.templateList,.activeBonuses').hide();
        $('.expiredBonuses').show();
        $('.btn.tab').removeClass('active');
        $(this).addClass('active');
    });

    var row = 1;
    $('#add-margin').click( function () {
        row++;
        var new_row = '<tr id="margin_row_'+row+'"><td><div><input name="minAmount_'+row+'" type="text" id="minAmount_'+row+'" class="form-control number" maxlength="5"><span id="minAmount_'+row+'-error" class="error-help-block"></span></div></td><td><div><input name="maxAmount_'+row+'" type="text" id="maxAmount_'+row+'" class="form-control number" maxlength="5"><span id="maxAmount_'+row+'-error" class="error-help-block"></span></div></td><td><div><input name="bonus_'+row+'" type="text" id="bonus_'+row+'" class="form-control number" maxlength="3"><span id="bonus_'+row+'-error" class="error-help-block"></span></div></td><td><div><input name="maxBonusAmount_'+row+'" type="text" id="maxBonusAmount_'+row+'" class="form-control number" maxlength="5"><span id="maxBonusAmount_'+row+'-error" class="error-help-block"></span></div></td><td><div><input name="wager_'+row+'" type="text" id="wager_'+row+'" class="form-control number" value="10" maxlength="2"><span id="wager_'+row+'-error" class="error-help-block"></span></div></td><td><div><input name="relese_'+row+'" type="text" id="relese_'+row+'" class="form-control number" value="1" maxlength="2"><span id="relese_'+row+'-error" class="error-help-block"></span></div></td></tr>';

        $("#margin-table tbody").append(new_row);
        $("#remove-margin").show();
        $("#marginRow").val(row);
    });

    $('#remove-margin').click( function () {
        $('#margin_row_'+row).remove();
        row--;
        if(row == 1){
            $('#remove-margin').hide();
        }
        $("#marginRow").val(row);
    });

    $('#bonusDependency').val('Purchase Amount');
    $('.promoBonus').show();

    $(document).on('keydown', '.number', function(event){
		if (event.shiftKey == true) {
			event.preventDefault();
			return;
		}
		if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190 || event.keyCode == 110) {
		} else {
			event.preventDefault();
			return;
		}

		if(($(this).val().length == 0) && (event.keyCode == 190 || event.keyCode == 110)){
			event.preventDefault();
			return;
		}

		if(($(this).val().indexOf('.') != -1) && (event.keyCode == 190 || event.keyCode == 110)){
			event.preventDefault();
			return;
		}
	});

	$(document).on('change', '.form-control', function(){
		$(this).closest('div').find('span.error-help-block').html('');
	});

	function showErrorMessage(message){
		$('.error-help-block').html('');
		var i = 1;
		var element = '';
		$.each(message, function(k, v) {
			$("#"+k+"-error").html(v);
			if(i == 1){
				element = "#"+k;
			}
			i++;
		});

		var topOffset = $(element).parent().offset();
		if(topOffset != undefined){
			$([document.documentElement, document.body]).animate({
				scrollTop: topOffset.top
			}, 1000);
		}

		return;
	}

    $(document).on('click', '#newTemplate-form-submit', function(e) {
		e.preventDefault();

		var formData = new FormData($('#newTemplate-form')[0]);

		$.ajax({
			type: 'POST',
			url: "{{ route('mkgtbonus.addTemplate') }}",
			data: formData,
			dataType: 'JSON',
			contentType: false,
			processData: false,
			beforeSend: function() {
				$("#form-buttons").hide();
				$("#form-loader").show();
			},
			success: function(response) {
				var message = response.msg;
				var status = response.status;
				if (status == 422) {
					showErrorMessage(message);
					return;
				}

				if (status == 200) {
                    swal(message, {
                        icon: "success",
                    });
					window.location.reload();
				} else {
					swal(message, {
						icon: "warning",
					});
				}
				$('.error-help-block').html('');
			},
			error: function() {
				swal("{{ trans('layout.Something went wrong') }}", {
				icon: "warning",
				});
			},
			complete: function() {
				$("#form-loader").hide();
				$("#form-buttons").show();
			}
		});
	});

    $("#wagerShare, #instantCash").change(function() {
        $('#percentage-error').html('');
    });

var templateTable;
var activeTable;
var expiredTable;
$(document).ready(function(){
    templateTable = $('#template-table').DataTable({
        "responsive": true,
        "pagingType": "numbers",
        "processing": true,
        "bDestroy": true,
        "serverSide": true,
        "searching": false,
        "aaSorting": [],
        "lengthMenu": [
            [20, 50, 100, 200],
            [20, 50, 100, 200]
        ],
        "columnDefs": [
            {
                "orderable": false,
                "targets": [2,3,4,5]
            },
            {
                "className": 'text-right',
                "targets": [2,3,4]
            },
            {
                "className": 'text-center',
                "targets": [0, 1, 4, 5]
            },
        ],
        "ajax": {
            "url": "{{ route('mkgtbonus.fetchTemplate') }}",
            "type": "GET",
            "data": function(d) {
                d.filter_date = '';
            },
            "error": function(e) {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
        },
        "drawCallback": function(response, settings) {
            var api = this.api();
            var rows = api.rows({
                page: 'current'
            }).nodes();
            if (rows.length > 0) {
                $('.dt-buttons').show();
            } else {
                $('.dt-buttons').hide();
            }
        }
    });

    
    activeTable = $('#active-table').DataTable({
        "responsive": true,
        "pagingType": "numbers",
        "processing": true,
        "bDestroy": true,
        "serverSide": true,
        "searching": false,
        "aaSorting": [],
        "lengthMenu": [
            [20, 50, 100, 200],
            [20, 50, 100, 200]
        ],
        "columnDefs": [
            {
                "orderable": false,
                "targets": [3,4,5,6,8,9,10]
            },
            {
                "className": 'text-right',
                "targets": [3,4,8,9]
            },
            {
                "className": 'text-center',
                "targets": [0, 1, 2, 5, 6, 7, 10]
            },
        ],
        "ajax": {
            "url": "{{ route('mkgtbonus.fetch') }}",
            "type": "GET",
            "data": function(d) {
                d.filter_date = '';
            },
            "error": function(e) {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
        },
        "drawCallback": function(response, settings) {
            var api = this.api();
            var rows = api.rows({
                page: 'current'
            }).nodes();
            if (rows.length > 0) {
                $('.dt-buttons').show();
            } else {
                $('.dt-buttons').hide();
            }
        }
    });
    
    expiredTable = $('#expired-table').DataTable({
        "responsive": true,
        "pagingType": "numbers",
        "processing": true,
        "bDestroy": true,
        "serverSide": true,
        "searching": false,
        "aaSorting": [],
        "lengthMenu": [
            [20, 100, 500, 1000],
            [20, 100, 500, 1000]
        ],
        "columnDefs": [
            {
                "orderable": false,
                "targets": [3,4,5,6,8,9]
            },
            {
                "className": 'text-right',
                "targets": [3,4,8,9]
            },
            {
                "className": 'text-center',
                "targets": [0, 1, 2, 5, 6, 7]
            },
        ],
        "ajax": {
            "url": "{{ route('mkgtbonus.expiredfetch') }}",
            "type": "GET",
            "data": function(d) {
                d.filter_date = '';
            },
            "error": function(e) {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
        },
        "drawCallback": function(response, settings) {
            var api = this.api();
            var rows = api.rows({
                page: 'current'
            }).nodes();
            if (rows.length > 0) {
                $('.dt-buttons').show();
            } else {
                $('.dt-buttons').hide();
            }
        }
    });
});

function deleteTemplate(id, name) {
    swal({
        title: "Are you sure?",
        text: "You want to delete this "+name+" template?",
        icon: "warning",
        buttons: ["No", "Yes"],
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('mkgtbonus.deleteTemplate') }}",
                method: "POST",
                dataType: 'json',
                data: {
                    id: id,
                },
                success: function(response) {
                    if (response.status == 200) {
                        $('select[name=template-table_length]').trigger('change');
                        swal("{{ trans('marketing.DeleteSuccess') }}", {
                            icon: "success",
                        });
                    } else {
                        swal("{{ trans('layout.Something went wrong') }}", {
                            icon: "warning",
                        });
                    }
                },
                error: function(e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            });
        } else {

        }
    });
}

function activeBonus(id, name) {
    swal({
        title: "Are you sure?",
        text: "You want to active this "+name+" bonus?",
        icon: "warning",
        buttons: ["No", "Yes"],
        dangerMode: true,
    })
    .then((willActive) => {
        if (willActive) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('mkgtbonus.active') }}",
                method: "POST",
                dataType: 'json',
                data: {
                    id: id,
                },
                success: function(response) {
                    if (response.status == 402) {
                        swal({
                            text: response.msg,
                            icon: "warning",
                            buttons: ["Close", "Edit"],
                            dangerMode: true,
                        })
                        .then((willEdit) => {
                            if (willEdit) {
                                window.location.replace("{{ route('mkgtbonus.edit', ['id' => '']) }}/"+id);
                            }
                        });
                    }else if (response.status == 200) {
                        $('select[name=active-table_length]').trigger('change');
                        swal(response.msg, {
                            icon: "success",
                        });
                    } else {
                        swal("{{ trans('layout.Something went wrong') }}", {
                            icon: "warning",
                        });
                    }
                },
                error: function(e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            });
        } else {

        }
    });
}

function expireBonus(id, name) {
    swal({
        title: "Are you sure?",
        text: "You want to expire this "+name+" bonus?",
        icon: "warning",
        buttons: ["No", "Yes"],
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('mkgtbonus.expired') }}",
                method: "POST",
                dataType: 'json',
                data: {
                    id: id,
                },
                success: function(response) {
                    if (response.status == 200) {
                        $('select[name=active-table_length]').trigger('change');
                        $('select[name=expired-table_length]').trigger('change');
                        swal(response.msg, {
                            icon: "success",
                        });
                    } else {
                        swal("{{ trans('layout.Something went wrong') }}", {
                            icon: "warning",
                        });
                    }
                },
                error: function(e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            });
        } else {

        }
    });
}
</script>
@stop