@extends('layouts.master')

@section('content')
<style>
.radio-label {
    position: absolute;
    margin: -2px 0px 0px 7px;
    cursor: pointer;
}
.radio {
    margin-top: -4px;
}
</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('breadcrumbs.Edit Game') }}</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('Edit Game') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <form id="createGame-form">
                    <h3 class="card-title">{{ trans('game.Game Configuration') }}</h3> 
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            @csrf
                            {{ Form::hidden('id', $hidden) }}
                            <div class="form-col-1">
                                {{ Form::label('TABLE_NAME', trans('game.Table name'), ['class' => 'required']) }}
                                {{ Form::text('tableName', $tableName, ['id' => 'TABLE_NAME', 'class' => 'form-control', 'placeholder' => trans('game.Table name')]) }}
                                <span id="tableName-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('GAME_TYPE',  trans('game.Game type'), ['class' => 'required'])}}
                                {{ Form::select('gameType', $gameType, $gameTypeValue, ['class' => 'form-control select2', 'id' => 'GAME_TYPE', 'placeholder' => 'Select']) }}                            
                                <span id="gameType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('VARIATION',  trans('game.Variation'), ['class' => 'required'])}}
                                {{ Form::select('variation', $gameVariation, $gameVariationValue, ['class' => 'form-control select2', 'id' => 'VARIATION']) }}
                                <span id="variation-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('CURRENCY_TYPE',  trans('game.Currency type'), ['class' => 'required'])}}
                                {{ Form::select('currencyType', $currencyType, $currencyTypeValue, ['class' => 'form-control select2', 'id' => 'CURRENCY_TYPE', 'placeholder' => 'Select']) }}                            
                                <span id="currencyType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('CARD_DECK',  trans('game.Card deck'), ['class' => 'required'])}}
                                {{ Form::select('cardDeck', $cardDeck, $cardDeckValue, ['class' => 'form-control select2', 'id' => 'CARD_DECK', 'placeholder' => 'Select']) }}                            
                                <span id="cardDeck-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('NO_PLAYERS',  trans('game.No. of players'), ['class' => 'required'])}}
                                {{ Form::select('noPlayers', $noPlayers, $noPlayersValue, ['class' => 'form-control select2', 'id' => 'NO_PLAYERS']) }}
                                <span id="noPlayers-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('STATUS',  trans('game.Status'), ['class' => 'required'])}}
                                {{ Form::select('status', $status, $statusValue, ['class' => 'form-control select2', 'id' => 'STATUS', 'placeholder' => 'Select']) }}                            
                                <span id="status-error" class="error-help-block"></span>
                            </div>
                        </div>
                    </div>
                    <h3 class="card-title">{{ trans('game.Finance settings') }}</h3> 
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="form-col-1">
                                {{ Form::label('BET', trans('game.Point value'), ['class' => 'required', 'id' => 'point-value']) }}
                                {{ Form::label('BET', trans('game.Entry fee'), ['class' => 'required', 'id' => 'entry-fee']) }}
                                {{ Form::number('bet', $bet, ['id' => 'BET', 'class' => 'form-control number', 'min' => '0', 'step' => '0.1']) }}
                                <span id="bet-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('RAKE',  trans('game.Rake percentage (%)'), ['class' => 'required'])}}
                                {{ Form::number('rake', $rake, ['class' => 'form-control number', 'id' => 'RAKE', 'min' => '0',  'max' => '100']) }}
                                <span id="rake-error" class="error-help-block"></span>
                            </div>
                            
                            <div class="form-col-1 buy-in">
                                {{ Form::label('MINIUM_BUYIN',  trans('game.Minimum (Buy-in)'), ['class' => 'required'])}}
                                {{ Form::number('minimumBuyin', $minimumBuyin, ['class' => 'form-control number', 'id' => 'MINIUM_BUYIN', 'min' => '0', 'readonly' => 'true']) }}
                                <span id="minimumBuyin-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1 buy-in">
                                {{ Form::label('MAXIMUM_BUYIN',  trans('game.Maximum (Buy-in)'), ['class' => 'required'])}}
                                {{ Form::number('maximumBuyin', $maximumBuyin, ['class' => 'form-control number', 'id' => 'MAXIMUM_BUYIN', 'min' => '0', 'readonly' => 'true']) }}
                                <span id="maximumBuyin-error" class="error-help-block"></span>
                            </div>
                        </div>
                    </div>
                    
                    
                    <h3 id="prizing-settings" class="card-title">{{ trans('game.Prize settings') }}</h3> 
                    <div class="card-primary card-form-1" id="pools-prizing">
                        <div class="card-body">
                            <div class="form-col-1">
                                {{ Form::label('POOLS_PRIZE_VALUE',  trans('game.Prize value'), ['class' => 'required'])}}
                                {{ Form::number('poolsPrizeValue', $prizeValue, ['class' => 'form-control number', 'id' => 'POOLS_PRIZE_VALUE', 'min' => '0', 'readonly' => 'true']) }}
                                <span id="poolsPrizeValue-error" class="error-help-block"></span>
                            </div>
                        </div>
                    </div>

                    <div class="card-primary card-form-1" id="deals-prizing">
                        <div class="card-body">
                            <div class="form-col-1">
                                {{ Form::label('DEALS_PRIZE_VALUE',  trans('game.Prize value'), ['class' => 'required'])}}
                                {{ Form::number('dealsPrizeValue', $prizeValue, ['class' => 'form-control number', 'id' => 'DEALS_PRIZE_VALUE', 'min' => '0', 'readonly' => 'true']) }}
                                <span id="dealsPrizeValue-error" class="error-help-block"></span>
                            </div>
                            
                            <div class="form-col-1">
                                {{ Form::label('PRIZE_TYPE',  trans('game.Prize type'), ['class' => 'required'])}}
                                <div class="radio">
                                    <label><input type="radio" name="prizeType" value="1" @if($prizeType == '1') checked @endif ><span class="radio-label">Fixed</span></label>
                                </div>
                                <div class="radio">
                                    <label><input type="radio" name="prizeType" value="2"  @if($prizeType == '2') checked @endif><span class="radio-label">Percentage</span></label>
                                </div>
                                <span id="prizeType-error" class="error-help-block"></span>
                            </div>

                            <div class="form-col-1"></div>

                            <div class="form-col-1">
                                {{ Form::label('NO_WINNERS',  trans('game.No. of winners'), ['class' => 'required'])}}
                                {{ Form::select('noWinners', $winners,$winnersValue, ['class' => 'form-control select2', 'id' => 'NO_WINNERS', 'placeholder' => 'Select']) }}
                                <span id="noWinners-error" class="error-help-block"></span>
                                <br><br>
                                <div id="WINNER_PRIZES">
                                    @if($winnersValue != '')
                                        {!! $winnersPrize !!}
                                    @endif
                                </div>
                            </div>

                        </div>
                    </div>
                    
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="button_sec" id="form-buttons">
                                <button class="btn btn-primary" id="createGame-form-submit">{{ trans('layout.Update') }}</button>
                                <button class="btn btn-default" id="createGame-form-clear">{{ trans('layout.Reset') }}</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>
                </form>
            </div>
            <!-- /.card-body -->
        </div>        
    </section>
</div>
@endsection
@section('javascript')
@include('datatablejs')

<script type="text/javascript">
    // $('#prizing-settings, #pools-prizing, #deals-prizing').hide();
    $(document).on('change', '.form-control', function(){
        $(this).closest('div').find('.error-help-block').html('');
    });
    $(document).on('change', '.number', function(){
        var num = $(this).val();
        if(num < 0.1){
            $(this).val('');
        }
    });
    $(document).on('change', '#GAME_TYPE', function() {
        var gameType = $("#GAME_TYPE").val();
        if (gameType.length != 1) {
            $("#GAME_TYPE-error").html('Please select the game type');
            return;
        }

        $("#GAME_TYPE-error").html('');

        var variationOptions1 = {
            "JOKER": "JOKER"
        };
        var variationOptions2 = {
            "101": "101",
            "201": "201"
        };
        var variationOptions3 = {
            "BO2": "2",
            "BO3": "3"
        };

        var noPlayerOptions1 = {
            "2": "2",
            "6": "6"
        };
        var noPlayerOptions2 = {
            "2": "2",
            "6": "6"
        };
        var noPlayerOptions3 = {
            "2": "2"
        };

        if(gameType == 1){
            var variationOptions = variationOptions1;
            var noPlayerOptions = noPlayerOptions1;
            $('#point-value, .buy-in').show();
            $('#entry-fee, #prizing-settings, #pools-prizing, #deals-prizing').hide();
        }else if(gameType == 2){
            var variationOptions = variationOptions2;
            var noPlayerOptions = noPlayerOptions2;
            $('#point-value, .buy-in, #deals-prizing').hide();
            $('#entry-fee, #prizing-settings, #pools-prizing').show();
        }else{
            var variationOptions = variationOptions3;
            var noPlayerOptions = noPlayerOptions3;
            $('#point-value, .buy-in, #pools-prizing').hide();
            $('#entry-fee, #prizing-settings, #deals-prizing').show();
        }

        var $el = $("#VARIATION");
        $el.empty(); // remove old options
        $.each(variationOptions, function(key,value) {
        $el.append($("<option></option>")
            .attr("value", value).text(key));
        });
        var $el = $("#NO_PLAYERS");
        $el.empty();
        $.each(noPlayerOptions, function(key,value) {
        $el.append($("<option></option>")
            .attr("value", value).text(key));
        });
        
        $('#VARIATION, #NO_PLAYERS, #NO_WINNERS').select2('destroy');

        $('#VARIATION, #NO_PLAYERS, #BET, #RAKE, #MINIUM_BUYIN, #MAXIMUM_BUYIN, #POOLS_PRIZE_VALUE, #DEALS_PRIZE_VALUE, #NO_WINNERS, #WINNER_PRIZE_1, #WINNER_PRIZE_2').val('');

        $('#VARIATION, #NO_PLAYERS, #NO_WINNERS').select2({
            placeholder: "Select",
            allowClear: true
        });
        
        $('#WINNER_PRIZES, .error-help-block').html('');
    });

    $("#NO_PLAYERS, #BET").change(function(){
        var gameType = $("#GAME_TYPE").val();
        var bet = $("#BET").val();
        var noPlayers = $("#NO_PLAYERS").val();
        if(!isNaN(bet) && (gameType == 1)){
            var minbuyin = bet*80;
            var maxbuyin = minbuyin*10;
            $("#MINIUM_BUYIN").val(minbuyin);	
            $("#MAXIMUM_BUYIN").val(maxbuyin);
        }
        if(!isNaN(bet) && !isNaN(noPlayers) && (gameType != 1)){
            var prizeValue = bet*noPlayers;
            $("#POOLS_PRIZE_VALUE").val(prizeValue);
            $("#DEALS_PRIZE_VALUE").val(prizeValue);
        }
    });

    $("#NO_WINNERS").change(function(){
        var content = '';
        var num = $(this).val();
        if(num >= 1){
            for(var i=1;i<=num;i++){
                content += '<span style="position: absolute;margin: 8px;">'+i+'.</span><input name="winnerPrize_'+i+'" type="number" min ="0" class="form-control number" id="WINNER_PRIZE_'+i+'" style="padding-left: 20px;" /><span id="winnerPrize_'+i+'-error" class="error-help-block"></span><br>';
            }
        }
        $('#WINNER_PRIZES').html(content);
    });

    $('input[name=PRIZE_TYPE]').change(function(){
        $('#WINNER_PRIZE_1').val('');
        $('#WINNER_PRIZE_2').val('');
    });

    function showErrorMessage(message){
        $('.error-help-block').html('');
        $.each(message, function(k, v) {
            $("#"+k+"-error").html(v);
        });
        return;
    }

    $(document).on('click', '#createGame-form-submit', function(e) {
        e.preventDefault();
        
        var formData = new FormData($('#createGame-form')[0]);

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

    $(document).on('click', '#createGame-form-clear', function(e) {
        e.preventDefault();
        window.location.replace(window.location.href);
    });

    
    //Edit view init
    if({{$gameTypeValue}} == 1){
        $('#point-value, .buy-in').show();
        $('#entry-fee, #prizing-settings, #pools-prizing, #deals-prizing').hide();
    }else if({{$gameTypeValue}} == 2){
        $('#point-value, .buy-in, #deals-prizing').hide();
        $('#entry-fee, #prizing-settings, #pools-prizing').show();
    }else{
        $('#point-value, .buy-in, #pools-prizing').hide();
        $('#entry-fee, #prizing-settings, #deals-prizing').show();
    }
</script>
@stop