@extends('layouts.master')

@section('content')

<!-- 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('leaderboardsettings.Add Progressive LB Settings') }}</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('Add Progressive LB Settings') }}</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="progressivelb-form">
                    <h3 class="card-title">{{ trans('leadberboardsettings.Progressive LB Settings') }}</h3> 
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            @csrf
                             <div class="form-col-1">
                                {{ Form::label('leaderboardName', trans('leaderboardsettings.Leaderboard Name'), ['class' => 'required']) }}
                                {{ Form::text('leaderboardName', '', ['id' => 'leaderboardName', 'class' => 'form-control','maxlength'=>'100']) }}
                                <span id="leaderboardName-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('minStake', trans('leaderboardsettings.Stake Start'), ['class' => 'required']) }}
                                {{ Form::select('minStake', $minstake, '', ['id' => 'minStake', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="minStake-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('maxStake', trans('leaderboardsettings.Stake End'), ['class' => 'required']) }}
                                {{ Form::select('maxStake', $maxstake, '', ['id' => 'maxStake', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="maxStake-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('gameType', trans('leaderboardsettings.Game Type'), ['class' => 'required']) }}
                                {{ Form::select('gameType', $miniGameTypes, '', ['id' => 'gameType', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="gameType-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('rakePercentage', trans('leaderboardsettings.% Setting'), ['class' => 'required']) }}
                                {{ Form::text('rakePercentage', '', ['id' => 'rakePercentage', 'class' => 'form-control number','maxlength'=>'3']) }}
                                <span id="rakePercentage-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('minimumPoints', trans('leaderboardsettings.Minimum Points'), ['class' => 'required']) }}
                                {{ Form::text('minimumPoints', '', ['id' => 'minimumPoints', 'class' => 'form-control number','maxlength'=>'6']) }}
                                <span id="minimumPoints-error" class="error-help-block"></span>
                            </div>
                              <div class="form-col-1">
                                {{ Form::label('timeSlot', trans('leaderboardsettings.Time Slot'), ['class' => 'required']) }}
                                {{ Form::select('timeSlot', $timeSlot, '', ['id' => 'timeSlot', 'class' => 'form-control select2', 'placeholder' => 'Select' ]) }}
                                <span id="timeSlot-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('startDate', trans('leaderboardsettings.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('leaderboardsettings.End Date'), ['class' => 'required']) }}
                                {{ Form::text('endDate', '', ['class' => 'form-control disabled', 'id' => 'endDate', 'readonly' => 'readonly']) }}
                                <span id="endDate-error" class="error-help-block"></span><br>
                                <span id="startDateTime-error" class="error-help-block"></span>
                            </div>
                             <div class="form-col-1">
                                {{ Form::label('startTime', trans('leaderboardsettings.Start Time'), ['class' => 'required']) }}
                                {{ Form::text('startTime', '', ['class' => 'form-control', 'id' => 'startTime', 'readonly' => 'readonly']) }}
                                <span id="startTime-error" class="error-help-block"></span>

                            </div>
                            <div class="form-col-1">
                                {{ Form::label('endTime', trans('leaderboardsettings.End Time'), ['class' => 'required']) }}
                                {{ Form::text('endTime', '', ['class' => 'form-control', 'id' => 'endTime', 'readonly' => 'readonly']) }}
                                <span id="endTime-error" class="error-help-block"></span>
                            </div>
                             <div class="form-col-1">
                                {{ Form::label('status', trans('leaderboardsettings.Status'), ['class' => 'required']) }}
                                {{ Form::select('status', $status, '', ['id' => 'status', 'class' => 'form-control select2', 'placeholder' => 'Select']) }}
                                <span id="status-error" class="error-help-block"></span>
                            </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="form-submit">{{ trans('leaderboardsettings.Create') }}</button>
                                <button class="btn btn-default" id="form-clear">{{ trans('layout.Clear') }}</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')
<script type="text/javascript">

    $('#startDate, #endDate').daterangepicker({
        singleDatePicker: true,
       // timePicker: true,
        minDate: moment(),
        maxDate: moment().add(2, 'years'),
        locale: {
            format: 'YYYY-MM-DD '
        }
    });
     $('#startTime').daterangepicker({
            timePicker: true,
            singleDatePicker:true,
            //minDate: moment(),
            timePicker24Hour: false,
            timePickerIncrement: 1,
            timePickerSeconds: false,
            locale: {
                format: 'HH:mm:ss'
            }
        }).on('show.daterangepicker', function (ev, picker) {
            picker.container.find(".calendar-table").hide();
    });
    
    $('#startDate, #endDate').val('');
    $('#startTime, #endTime').val('');

   $("#startTime").on('apply.daterangepicker', function(ev, picker) {
    var time_slot = $('#timeSlot').val();
      if(time_slot!='')
      {
        setendtime();
      }
    });

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

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

    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', '#form-submit', function(e) {
        e.preventDefault();
        
        var formData = new FormData($('#progressivelb-form')[0]);

        $.ajax({
            type: 'POST',
            url: "{{ route('progressivelb.store') }}",
            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('progressivelb') }}");
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                }
                $('.error-help-block').html('');
                $('#form-clear').trigger('click');
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#form-buttons").show();
            }
        });
    });

    $(document).on('click', '#form-clear', function(e) {
        e.preventDefault();
        $('.error-help-block').html('');
        $('.select2').select2('destroy');
        $(this).closest('form').find("input[type=text], input[type=number], input[type=password], textarea, select").val('');
        $('.select2').select2({
            placeholder: "Select",
            allowClear: true
        });
    });

  function setendtime()
  {
   var startime = $('#startTime').val();
    var timeslot = $('#timeSlot').val();
    var timeduration = '';
    if(timeslot==6)
    {
        timeduration='05:59:59'

    }
     else if(timeslot==12)
    {
        timeduration='11:59:59'

    }
    else if(timeslot==24)
    {
        timeduration='23:59:59'

    }
    var endtime= moment(startime, 'HH:mm:ss').add( moment.duration(timeduration)).format('HH:mm:ss');
    $('#endTime').val(endtime);
  }

  $('#timeSlot').change(function() {
   var startime = $('#startTime').val();
      if(startime!='')
      {
        setendtime();
      }
       
    });
   
</script>
@stop