@extends('layouts.master')

@section('content')

<style>
    .error {
        color: #FF0000;
    }

    .form-col-1.ratio {
        position: relative;
    }
    .rejected,#descReason-error,#ipCriteria-error,.error {
        color: red;
    }
</style>
<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('defaultSettings.Rummy Hand Challenge 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('Rummy Hand Challenge LB Settings') }}</li>
                    </ol>
                </div>
    <!-- /.col -->
    </div> 
    <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
    </div>

    <section class="content">
        <div class="card" id="filterDiv">
            

            <div class="card" id="filterDiv">
            <div class="card-header">
                <form id="rummy-handchallenge-form" >
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                           @csrf
                           <div class="form-col-1">
                            {{ Form::label('rummyHandLimit',  trans('defaultSettings.rummyHandLimit'), ['class' => 'required'])}}<br>
                            {{ Form::text('rummyHandLimit',$rummyHandLimit, ['class' => 'form-control number', 'id' => 'rummyHandLimit', 'maxlength' => '3']) }}
                            <span id="rummyHandLimit-error" class="error-help-block"></span>
                            </div>
                        </div>
                    </div>
                    </form>
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="button_sec" id="form-buttons">
                                <button class="btn btn-primary" id="rummy-handchallenge-form-submit">{{ trans('layout.Submit') }}</button>
                                <button class="btn btn-default" id="rummy-handchallenge-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>
               
            </div>

            <div class="card" id="filterDiv">
            <div class="card-header">
                <form id="rummy-handchallenge-date-form" >
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                           @csrf
                           <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>
                            </div>
                            <div class="form-col-1" style="margin-top:3%;">
                            <button class="btn btn-default" id="rummy-handchallenge-form-add">{{ trans('layout.Add Date') }}</button>
                            </div>
                            <div class="form-col-1">
                            {{ Form::label('Date', trans('defaultSettings.Date'), ['class' => 'required']) }}
                            {{ Form::textarea('dateRange', '', ['id' => 'dateRange', 'class' => 'form-control', 'rows' => 3, 'cols' => 40]) }}
                            <span id="dateRange-error" class="error-help-block"></span>
                            </div>
                        </div>
                    </div>
                    </form>
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="button_sec" id="date-form-buttons">
                                <button class="btn btn-primary" id="rummy-handchallenge-date-form-submit">{{ trans('layout.Submit') }}</button>
                                <button class="btn btn-default" id="rummy-handchallenge-date-form-clear">{{ trans('layout.Clear') }}</button>
                            </div>
                            <div class="button_sec" id="date-form-loader" style="display:none">
                                <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                            </div>
                        </div>
                    </div>
               
            </div>

            <div class="card">
            <div class="card-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                        <th class="text-center">{{ trans('defaultSettings.Date') }}</th>
                        <th class="text-center">{{ trans('defaultSettings.Action') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        <!-- card-body -->
        </div>
           
        <!-- /.content-header -->
    </section>
 
</div>


@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">
        $('#startDate, #endDate').daterangepicker({
        singleDatePicker: true,
       // timePicker: true,
        minDate: moment(),
        maxDate: moment().add(2, 'years'),
        locale: {
            format: 'DD/MM/YYYY'

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

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

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

            table = $('#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": [0]
            },
                {
                    "className": 'text-center',
                    "targets": [0,1]
                },
              
                ],
                "ajax": {
                    "url": "{{ url('leaderboardSettings/rummyhandchallenge/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();
                    }
                }
            });

    

      function deleteDate(date){
        swal({
            title: " {{ trans('defaultSettings.Alert')  }} ",
            text: "{{ trans('defaultSettings.dateAlertmsg') }}",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willdelete) => {
            if (willdelete) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ url('leaderboardSettings/rummyhandchallenge/delete') }}",
                    method: "POST",
                    dataType: 'json',
                    data: {
                        date: date,
                    },
                    success: function(response) {
                        if (response.success == true) {
                            $('#table').DataTable().ajax.reload();
                            swal("{{ trans('defaultSettings.dateDeleteSuccess') }}", {
                                icon: "success",
                            });
                        } else {
                            swal("{{ trans('layout.Something went wrong') }}", {
                                icon: "warning",
                            });
                        }
                    },
                    error: function() {
                        swal("{{ trans('layout.Something went wrong') }}", {
                            icon: "warning",
                        });
                    },
                });
            } else {

            }
       });
    }

    $('#rummy-handchallenge-form-submit').click(function() {
        var formData = new FormData($('#rummy-handchallenge-form')[0]);

        $.ajax({
            type: 'POST',
            url: "{{ url('leaderboardSettings/rummyhandchallenge/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 true;
                }
                if (status == 200) {
                    swal(message, {
                        icon: "success",
                    });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                    return true;
                }
                $('.error-help-block').html('');
               window.location.replace(window.location.href);
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#form-buttons").show();
            }
        });
    });

    $('#rummy-handchallenge-date-form-submit').click(function() {
        var formData = new FormData($('#rummy-handchallenge-date-form')[0]);

        $.ajax({
            type: 'POST',
            url: "{{ url('leaderboardSettings/rummyhandchallenge/storeDate') }}",
            data: formData,
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function() {
                $("#date-form-buttons").hide();
                $("#date-form-loader").show();
            },
            success: function(response) {
                var message = response.msg;
                var status = response.status;
                if (status == 422) {
                    showErrorMessage(message);
                    return true;
                }
                if (status == 200) {
                    swal(message, {
                        icon: "success",
                    });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                    return true;
                }
                $('.error-help-block').html('');
               window.location.replace(window.location.href);
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#date-form-loader").hide();
                $("#date-form-buttons").show();
            }
        });
    });

    $(document).on('click', '#rummy-handchallenge-form-add', function(e) {
        event.preventDefault();

        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var dateRange = $('#dateRange').val();


        var newdateRange = dateRange+startDate+' - '+endDate+',';

        $('#dateRange').val(newdateRange);


    });

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

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






   

   

    $(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;
        }
    });
</script>
@stop