@extends('layouts.master')

@section('content')

<style>
    .pointer{
        cursor: pointer;
    }
    .promoBonus{
        margin: auto;
    }        
    .select2-container--default.select2-container--disabled .select2-selection--single {
        background: none;
    }
    #startDate, #endDate{
        cursor: pointer;
    }
    .swal-title {
        font-size: 17px;
    }
</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.Edit MKGT Bonus') }}</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-1"></div>
                <div class="col-sm-5">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">{{ Breadcrumbs::render('Edit MKGT Bonus') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card">
            <div class="card-header">
                <form id="newBonus-form">
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            @csrf
                            {{ Form::hidden('id', $hidden) }}
                            <input type="hidden" name="bonusType" value="{{ $bonusType }}">
                            <div class="form-col-1">
                                {{ Form::label('bonusType', trans('marketing.Bonus Type'), ['class' => 'required']) }}
                                {{ Form::select('bonusType', $bonusTypeList, $bonusType, ['id' => 'bonusType', 'class' => 'form-control select2']) }}
                                <span id="bonusType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('bonusCode', trans('marketing.Bonus Code'), ['class' => 'required']) }}
                                {{ Form::text('bonusCode', $bonusCode, ['id' => 'bonusCode', 'class' => 'form-control','maxlength' => 10]) }}
                                <span id="bonusCode-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('bonusDependency', trans('marketing.Bonus Dependency'), ['class' => 'required']) }}
                                {{ Form::text('bonusDependency', $bonusDependency, ['id' => 'bonusDependency', 'class' => 'form-control','readonly' => 'true']) }}
                                <span id="bonusDependency-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('bonusDescription', trans('marketing.Bonus Description'), ['class' => 'required']) }}
                                {{ Form::text('bonusDescription',  $bonusDescription, ['id' => 'bonusDescription', 'class' => 'form-control']) }}
                                <span id="bonusDescription-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('startDate', trans('marketing.Start Date'), ['class' => 'required']) }}
                                {{ Form::text('startDate', '', ['class' => 'form-control', 'id' => 'startDate', 'readonly' => 'readonly']) }}
                                <span id="startDate-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('endDate', trans('marketing.End Date'), ['class' => 'required']) }}
                                {{ Form::text('endDate', '', ['class' => 'form-control', 'id' => 'endDate', 'readonly' => 'readonly']) }}
                                <span id="endDate-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('applicability', trans('marketing.Applicability'), ['class' => 'required']) }}<br>
                                <label class="radio"><input type="radio" name="applicability" value="0" @if($applicability ==0) checked @endif><span class="radio-label">{{ trans('marketing.All') }}</span></label>
					            &nbsp;&nbsp;&nbsp;<label class="radio"><input type="radio" name="applicability" value="1" @if($applicability ==1) checked @endif><span class="radio-label">{{ trans('marketing.Targeted') }}</span></label><br>
                                <span id="applicability-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1"><br>
                                <label onClick="showTournament()"><input type="checkbox" id="tournamentTickets" name="tournamentTickets" value="1" @if($tournamentTickets == 1) checked @endif><span class="radio-label pointer">{{trans('marketing.Do you want to send tournament ticket?')}}</span></label>
                            </div>
                            <div class="form-col-1 tournamentTickets" style="display:none">
                                {{ Form::label('tournament', trans('marketing.Tournament')) }}
                                {{ Form::select('tournament', $tournamentList, $tournament, ['id' => 'tournament', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="tournament-error" class="error-help-block"></span>
                            </div>
<div class="promoBonus">
    <input type="hidden" id="marginRow" name="marginRow" value="{{ $rowCount }}">
<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>
    @php $i=0; @endphp
    @foreach($rowsData as $rowData)
    @php ++$i; @endphp
    <tr id="margin_row_{{$i}}">
        <td>
            <div>
            <input name="minAmount_{{$i}}" type="text" id="minAmount_{{$i}}" class="form-control number" value="{{ $rowData['minAmount_'.$i] }}" maxlength="5">
            <span id="minAmount_{{$i}}-error" class="error-help-block"></span>
            </div>
        </td>
        <td>
            <div>
            <input name="maxAmount_{{$i}}" type="text" id="maxAmount_{{$i}}" class="form-control number" value="{{$rowData['maxAmount_'.$i]}}" maxlength="5">
            <span id="maxAmount_{{$i}}-error" class="error-help-block"></span>
            </div>
        </td>
        <td>
            <div>
            <input name="bonus_{{$i}}" type="text" id="bonus_{{$i}}" class="form-control number" value="{{$rowData['bonus_'.$i]}}" maxlength="3">
            <span id="bonus_{{$i}}-error" class="error-help-block"></span>
            </div>
        </td>
        <td>
            <div>
            <input name="maxBonusAmount_{{$i}}" type="text" id="maxBonusAmount_{{$i}}" class="form-control number" value="{{$rowData['maxBonusAmount_'.$i]}}" maxlength="5">
            <span id="maxBonusAmount_{{$i}}-error" class="error-help-block"></span>
            </div>
        </td>
        <td style="width: 77px;">
            <div>
            <input name="wager_{{$i}}" type="text" id="wager_{{$i}}" class="form-control number" value="{{$rowData['wager_'.$i]}}" maxlength="2">
            <span id="wager_{{$i}}-error" class="error-help-block"></span>
            </div>
        </td>
        <td style="width: 77px;">
            <div>
            <input name="relese_{{$i}}" type="text" id="relese_{{$i}}" class="form-control number" value="{{$rowData['relese_'.$i]}}" maxlength="2">
            <span id="relese_{{$i}}-error" class="error-help-block"></span>
            </div>
        </td>
    </tr>
    @endforeach
</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" @if($rowCount == 1) style="display:none" @endif>{{ trans('marketing.Remove Margins') }}</button>
        </td>
    </tr>
</tbody>
</table>
<table width="30%" cellpadding="5" cellspacing="5" style="margin: 10px auto 10px auto;">
<tbody>
    <tr>
        <td width="50%">{{ trans('marketing.Make it default') }}: &nbsp;&nbsp;&nbsp;</td>
        <td>
            <div>
                {{ Form::select('default', $defaultList, $makeDefault, ['id' => 'default', 'class' => 'form-control select2']) }}
                <span id="default-error" class="error-help-block"></span>
            </div>
        </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="5" value="{{ $wagerShare }}">
            <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="5" value="{{ $instantCash }}">
            <span id="instantCash-error" class="error-help-block"></span>
            </div>
        </td>
        <td>% {{ trans('marketing.Instant cash') }}</td>
    </tr>
</tbody>
</table>
<div class="text-center" id="percentage"><span id="percentage-error" class="error-help-block"></span></div>
</div>
<div class="card-primary card-form-1">
    <div class="card-body">
        <div class="container" id="uploadDiv">
            <br>
            <label class="required">{{trans('marketing.Upload Excel file')}}</label> <a href="{{ asset('img/Players_Sample_excel.xlsx') }}">Sample File</a><br>
            <div class="form-col-1">
                <label>User list upload for <b id="showBonusCode"></b></label>
                <input type="file" class="form-control" id="uploadedFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"><br>
                <button class="btn btn-primary" id="uploadFile">{{ trans('marketing.Upload') }}</button>
            </div>
            <span id="uploadData-error" class="error-help-block"></span><br>
            <b id="totalResult">@if($usersCount != 0)Imported Total Records: {{$usersCount}} @endif</b>
        </div>
    </div>
</div>
                        </div>
                    </div>
                </form>
                <div class="card-primary card-form-1">
                    <div class="card-body text-center"><br>
                        <div class="button_sec" id="form-buttons">
                            <button class="btn btn-primary" id="newBonus-form-submit">{{ trans('marketing.Update Bonus') }}</button>
                            <a class="btn btn-primary" href="{{ route('mkgtbonus') }}">{{ trans('marketing.Cancel Bonus') }}</a>
                        </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>
            <!-- /.card-body -->
        </div>

    </section>

</div>
@endsection
@section('javascript')
@include('datatablejs')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
<script type="text/javascript">

    $("#bonusType").select2({disabled:true});

    $('#startDate, #endDate').daterangepicker({
        singleDatePicker: true,
		timePicker: true,
		minDate: moment(),
		maxDate: moment().add(2, 'years'),
		locale: {
			format: 'YYYY-MM-DD HH:mm:00'
		}
    });

    $('#startDate').val('{{ $startDate }}');
    $('#endDate').val('{{ $endDate }}');

    function showTournament(){
        if($("input[name='tournamentTickets']:checked").val() == 1){
            $('.tournamentTickets').show();
            $("[for=tournament]").addClass("required");
        }else{
            $("[for=tournament]").removeClass("required");
            $('.tournamentTickets').hide();
        }
    }
    showTournament();

    var row = {{ $i }};
    $('#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);
    });

    
    $(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;
	}

    @if($usersCount != 0)
    var uploadData = 'oldData';
    @else 
    var uploadData = '';
    @endif

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

        if(($("input:radio[name='applicability']:checked").val() == 1) && (uploadData == '')){
            swal('Kindly upload a file to proceed or uncheck the upload Excel file option', {
                icon: "warning",
            });
            return;
        }

		var formData = new FormData($('#newBonus-form')[0]);
        formData.append('uploadData', uploadData);

		$.ajax({
			type: 'POST',
			url: "{{ route('mkgtbonus.update') }}",
			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.replace("{{ route('mkgtbonus') }}");
				} 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('');
    });

    $("input:radio[name='applicability']").change(function() {
        if($("input[name='applicability']:checked").val() == 1){
            $('#uploadDiv, #totalResult').show();
        }else{
            $('#uploadDiv, #totalResult').hide();
        }
    });
    $("input:radio[name='applicability']").trigger('change');

    $("#bonusCode").change(function () {
        var value = $(this).val();
        if (value != '') {
           $("#showBonusCode").html(value);
        } else{
            $("#showBonusCode").html('');
        } 
    });
    
    $("#default").change(function () {
        var value = $(this).val();
        var defaultBonus = '{{ $defaultBonus }}';
        if ((value == 1) && (defaultBonus != '')) {
            swal({
                title: defaultBonus+" has already marked as default.",
                text: "Do you wish to override it?",
                icon: "warning",
                buttons: ["No", "Yes"],
                dangerMode: true,
            })
            .then((willActive) => {
                if (willActive) {

                } else {
                    $("#default").val('0').trigger('change');
                }
            });
        }
    });

    $("#uploadedFile").change(function () {
        $("#exceltable, #totalResult, #uploadData-error").html('');
        $("#importedData").val('');
        uploadData = '';
    });

    $('#uploadFile').click(function (evt) {
        evt.preventDefault();

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;
        /*Checks whether the file is a valid excel file*/  
        if (regex.test($("#uploadedFile").val().toLowerCase())) {
            var xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/  
            if ($("#uploadedFile").val().toLowerCase().indexOf(".xlsx") > 0) {  
                xlsxflag = true;  
            }  
            /*Checks whether the browser supports HTML5*/  
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();  
                reader.onload = function (e) {
                    var data = e.target.result;  
                    /*Converts the excel data in to object*/  
                    if (xlsxflag) {  
                        var workbook = XLSX.read(data, { type: 'binary' });  
                    }  
                    else {  
                        var workbook = XLS.read(data, { type: 'binary' });  
                    }  
                    /*Gets all the sheetnames of excel in to a variable*/  
                    var sheet_name_list = workbook.SheetNames;  
    
                    var cnt = 0; /*This is used for restricting the script to consider only first sheet of excel*/  
                    sheet_name_list.forEach(function (y) { /*Iterate through all sheets*/  
                        /*Convert the cell value to Json*/  
                        if (xlsxflag) {
                            var exceljson = XLSX.utils.sheet_to_json(workbook.Sheets[y]);  
                        }
                        else {
                            var exceljson = XLS.utils.sheet_to_row_object_array(workbook.Sheets[y]);  
                        }

                        if (exceljson.length > 0 && cnt == 0) {
                            $('#totalResult').html('Imported Total Records: '+exceljson.length);
                            // BindTable(exceljson, '#exceltable');
                            uploadData = JSON.stringify(exceljson);
                            cnt++;
                        }else{
                            swal('Please upload a valid Excel file!', {
                                icon: "warning",
                            });
                        }

                    });  
                    $('#exceltable').show();  
                }
                if (xlsxflag) {/*If excel file is .xlsx extension than creates a Array Buffer from excel*/  
                    reader.readAsArrayBuffer($("#uploadedFile")[0].files[0]);  
                }
                else {
                    reader.readAsBinaryString($("#uploadedFile")[0].files[0]);  
                }
            }
            else {
                swal('Sorry! Your browser does not support HTML5!', {
                    icon: "warning",
                });
            }  
        }  
        else {
            swal('Upload a valid format!', {
                icon: "warning",
            });
        }  
    });
</script>
@stop