{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

<div class="card card-custom">
    <div class="card-header">
        <h3 class="card-title">
                    </h3>
    </div>
    <div class="card-body">
    <!--begin::Form-->
    <form method="POST" action="{{ route('registrationadd') }}">
        @csrf
        @isset($batch->id)
        {{ method_field('PATCH')}}
        @endisset
        @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Error!</strong>
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <input type="hidden" name="eventmodel_id" value="{{$eventdata[0]->id}}" />
        <input type="hidden" name="cFees" value="{{$eventdata[0]->cFees}}" />
        <div class="form-group row">
            <label for="participant_name" class="col-md-4 col-form-label ">{{ __('Club') }}</label>

            <div class="col-md-8">
                <input type="text" class="form-control" id="club" name="club" placeholder="Enter Club" value="" minlength="2" maxlength="50" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))" required />
                @if ($errors->has('participant_name'))
                <span class="text-danger">{{ $errors->first('participant_name') }}</span>
                @endif
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">{{ __('E-Mail') }}</label>

            <div class="col-md-8">
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>

                @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Phone</label>
            <div class="col-md-8">
                <input id="phone" type="number" minlength="10" data-maxlength="10" oninput="this.value=this.value.slice(0,this.dataset.maxlength)" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone_no') }}" required>
                @error('phone_no')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">City</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="City" name="City" placeholder="Enter City" minlength="2" maxlength="20" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))" required />
            </div>
        </div>
        <div class="form-group row">
            <label for="name" class="col-md-4 col-form-label ">{{ __('Gymnast Name') }}</label>

            <div class="col-md-8">
                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" minlength="2" maxlength="50" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))" required />
                @if ($errors->has('name'))
                <span class="text-danger">{{ $errors->first('name') }}</span>
                @endif
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">DOB</label>
            <div class="col-md-8">
                <input type="date" date="yyyy-MM-dd" class="form-control" id="dob" onchange="getlevel()" name="dob" required>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8" id="dobmsg"></div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">{{ __('Gender') }}</label>

            <div class="col-md-8">
                <div class="radio-inline">
                    <label class="radio radio-success">
                        <!-- <input type="radio" name="Gender" id="Gender" value="M" required checked />
                        <span></span>M</label> -->
                        <label class="radio radio-success">
                            <input type="radio" name="gender" id="gender" value="F" required />
                            <span></span>F</label>
                </div>
                @error('gender')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Aadhar</label>
            <div class="col-md-8">
                <input id="aadhaar" type="number" minlength="12" maxlength="12" data-maxlength="12" oninput="this.value=this.value.slice(0,this.dataset.maxlength)" class="form-control @error('aadhaar') is-invalid @enderror" name="aadhaar" value="{{ old('aadhaar') }}" required>
                @error('aadhaar')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4">Choose Level</label>
            <div class="col-md-8">
                <select name="level" id="level" class="form-control" required></select>
            </div>
        </div>
        <div class="form-group row mb-0">
            <div class="col-md-8 offset-md-4">
                <input type="submit" class="btn btn-primary" value="Submit">

            </div>
        </div>
    </form>
    <!--end::Form-->
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    function getlevel() {
        var dob = new Date($('#dob').val());
        var byear = dob.getFullYear();
        document.getElementById('dobmsg').innerHTML = '';       
        $('#level').empty();
        if (byear >= 2013 && byear <= 2014) {
            $('#level').append('<option value="Category A">Category A</option>');
        } else if (byear >= 2010 && byear <= 2012) {
            $('#level').append('<option value="Category B">Category B</option>');
        } else if (byear >= 2007 && byear <= 2009) {
            $('#level').append('<option value="Category C">Category C</option>');
        }
        ctrl = document.getElementById("level");
    }
</script>

<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
@endsection