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

<div class="card card-custom">
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <h3 class="card-label">{{ $eventdata[0]->Name }}
            </h3>
        </div>
        <div class="card-toolbar">
        </div>
        @if(session()->has('message'))
        <div class="alert alert-success">
            {{ session()->get('message') }}
        </div>
        @endif
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route('newparticipantadd') }}">
            @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="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">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">
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
{{-- Global Theme JS Bundle (used by all pages)  --}}
@foreach(config('layout.resources.js') as $script)
<script src="{{ asset($script) }}" type="text/javascript"></script>
@endforeach

{{-- Includable JS --}}
@yield('scripts')
<script type="text/javascript">
    function getlevel() {
        var dob = new Date($('#dob').val());
        var birthyear = dob.getFullYear();
        $('#level').empty();
        document.getElementById('dobmsg').innerHTML = '';
        if (birthyear > 2016) {
                document.getElementById('dobmsg').innerHTML = '<font color="red">Age should be 6 years and above.</font>';
                $('#dob').val('');
        } else if (birthyear >= 2014 && birthyear <= 2016) {
                $('#level').append('<option value="L1">Level 1</option>');
        } else if (birthyear == 2013) {
            $('#level').append('<option value="L2">Level 2</option>');
            $('#level').append('<option value="L1-Aboveage">Level 1-Aboveage</option>');
        } else if (birthyear == 2012) {
            $('#level').append('<option value="L3">Level 3</option>');
            $('#level').append('<option value="L1-Aboveage">Level 1-Aboveage</option>');
            $('#level').append('<option value="L2-Aboveage">Level 2-Aboveage</option>');
        } else if (birthyear == 2011 || birthyear == 2010) {
            $('#level').append('<option value="L4">Level 4</option>');
            $('#level').append('<option value="L1-Aboveage">Level 1-Aboveage</option>');
            $('#level').append('<option value="L2-Aboveage">Level 2-Aboveage</option>');
            $('#level').append('<option value="L3-Aboveage">Level 3-Aboveage</option>');
        } else if (birthyear >= 2007 && birthyear <= 2009) {
            $('#level').append('<option value="L5">Level 5</option>');
            $('#level').append('<option value="L1-Aboveage">Level 1-Aboveage</option>');
            $('#level').append('<option value="L2-Aboveage">Level 2-Aboveage</option>');
            $('#level').append('<option value="L3-Aboveage">Level 3-Aboveage</option>');
            $('#level').append('<option value="L4-Aboveage">Level 4-Aboveage</option>');
        } else {
            $('#level').append('<option value="L1-Aboveage">Level 1-Aboveage</option>');
            $('#level').append('<option value="L2-Aboveage">Level 2-Aboveage</option>');
            $('#level').append('<option value="L3-Aboveage">Level 3-Aboveage</option>');
            $('#level').append('<option value="L4-Aboveage">Level 4-Aboveage</option>');
            $('#level').append('<option value="L5-Aboveage">Level 5-Aboveage</option>');
        }

    }
</script>