@extends('layouts.master')

@section('content')
<style>
    .radio-label {
        position: absolute;
        margin: -2px 0px 0px 7px;
        cursor: pointer;
    }
    .radio {
        margin-top: -4px;
    }
    #DOB{
        cursor: pointer;
        background-color: #ffff;
    }
</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.Register Player') }}</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('Register Player') }}</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="createPlayer-form">
                    <h3 class="card-title">{{ trans('player.Personal Information') }}</h3>
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            @csrf
                            <div class="form-col-1">
                                {{ Form::label('mobile_no', trans('player.CONTACT'), ['class' => 'required']) }}
                                {{ Form::text('mobile_no', '', ['id' => 'mobile_no', 'class' => 'form-control', 'placeholder' => trans('player.CONTACT')]) }}
                                <span id="mobile_no-error" class="error-help-block"></span>
                            </div>
                            <!-- <div class="form-col-1">
                                {{ Form::label('username', trans('player.Player Name'), ['class' => 'required']) }}
                                {{ Form::text('username', '', ['id' => 'username', 'class' => 'form-control', 'placeholder' => trans('player.Player Name')]) }}
                                <span id="username-error" class="error-help-block"></span>
                            </div> -->
                            @if($internal_player)
                            <div class="form-col-1">
                                {{ Form::label('internal_player',  trans('player.Internal/External'), ['class' => 'required'])}}
                                {{ Form::select('internal_player', $player_type, '', ['class' => 'form-control select2', 'id' => 'internal_player', 'placeholder' => 'Select']) }}
                                <span id="internal_player-error" class="error-help-block"></span>
                            </div>
                            @endif
                            <!-- <div class="form-col-1">
                                {{ Form::label('email_id', trans('player.EMAIL'), ['class' => 'required']) }}
                                {{ Form::text('email_id', '', ['id' => 'email_id', 'class' => 'form-control', 'placeholder' => trans('player.EMAIL')]) }}
                                <span id="email_id-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('password', trans('player.PASSWORD'), ['class' => 'required']) }}
                                {{ Form::password('password',['id' => 'password', 'class' => 'form-control', 'placeholder' => trans('player.PASSWORD')]) }}
                                <span id="password-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('password_confirmation', trans('player.CONFIRM_PASSWORD'), ['class' => 'required']) }}
                                {{ Form::password('password_confirmation',['id' => 'password_confirmation', 'class' => 'form-control', 'placeholder' => trans('player.CONFIRM_PASSWORD')]) }}
                                <span id="password_confirmation-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('GENDER',  trans('player.Gender'), ['class' => 'required'])}}
                                {{ Form::select('GENDER', $gender, '', ['class' => 'form-control select2', 'id' => 'GENDER', 'placeholder' => 'Select']) }}
                                <span id="GENDER-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('DateOfBirth', trans('player.DateOfBirth'), ['class' => 'required']) }}
                                {{ Form::text('DOB', '', ['class' => 'form-control', 'id' => 'DOB', 'readonly' => 'readonly']) }}
                                <span id="DOB-error" class="error-help-block"></span>
                            </div> -->

                        </div>
                    </div>
                    <!-- <h3 class="card-title">{{ trans('player.Contact Information') }}</h3>
                    <div class="card-primary card-form-1">
                        <div class="card-body">
                            <div class="form-col-1">
                                {{ Form::label('FIRST_NAME', trans('player.FIRST_NAME'), ['class' => 'required']) }}
                                {{ Form::text('FIRST_NAME', '', ['id' => 'FIRST_NAME', 'class' => 'form-control', 'placeholder' => trans('player.FIRST_NAME')]) }}
                                <span id="FIRST_NAME-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('LAST_NAME', trans('player.LAST_NAME'), ['class' => 'required']) }}
                                {{ Form::text('LAST_NAME', '', ['id' => 'LAST_NAME', 'class' => 'form-control', 'placeholder' => trans('player.LAST_NAME')]) }}
                                <span id="LAST_NAME-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('mobile_no', trans('player.CONTACT'), ['class' => 'required']) }}
                                {{ Form::text('mobile_no', '', ['id' => 'mobile_no', 'class' => 'form-control', 'placeholder' => trans('player.CONTACT')]) }}
                                <span id="mobile_no-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('COUNTRY',  trans('player.COUNTRY'), ['class' => 'required'])}}
                                {{ Form::select('COUNTRY', $countries, '', ['class' => 'form-control select2', 'id' => 'COUNTRY', 'placeholder' => 'Select']) }}
                                <span id="COUNTRY-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('CITY', trans('player.CITY'), ['class' => 'required']) }}
                                {{ Form::text('CITY', '', ['id' => 'CITY', 'class' => 'form-control', 'placeholder' => trans('player.CITY')]) }}
                                <span id="CITY-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('STREET', trans('player.STREET'), ['class' => 'required']) }}
                                {{ Form::text('STREET', '', ['id' => 'STREET', 'class' => 'form-control', 'placeholder' => trans('player.STREET')]) }}
                                <span id="STREET-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('ADDRESS', trans('player.ADDRESS'), ['class' => 'required']) }}
                                {{ Form::text('ADDRESS', '', ['id' => 'ADDRESS', 'class' => 'form-control', 'placeholder' => trans('player.ADDRESS')]) }}
                                <span id="ADDRESS-error" class="error-help-block"></span>
                            </div>
                            <div class="form-col-1">
                                {{ Form::label('pincode', trans('player.Pincode'), ['class' => 'required']) }}
                                {{ Form::text('pincode', '', ['id' => 'pincode', 'class' => 'form-control', 'placeholder' => trans('player.Pincode')]) }}
                                <span id="pincode-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="createPlayer-form-submit">{{ trans('game.Create') }}</button>
                                <button class="btn btn-default"
                                    id="createPlayer-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">
   $('#DOB').daterangepicker({
        singleDatePicker: true,
        maxDate: moment().add(1, 'years'),
        showDropdowns: true,
        locale: {
            format: 'YYYY-MM-DD'
        }
    });
    $('#DOB').val('');

    $(document).on('change', '.form-control', function(){
        $(this).closest('div').find('.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', '#createPlayer-form-submit', function (e) {
       
        e.preventDefault();

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

        $.ajax({
            type: 'POST',
            url: "{{ route('player.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",
                    });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                    return;
                }
                $('.error-help-block').html('');
                $('#createPlayer-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', '#createPlayer-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
        });
    });

</script>
@stop