<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" {{ Metronic::printAttrs('html') }} {{ Metronic::printClasses('html') }}>

<head>
    <meta charset="utf-8" />

    {{-- Title Section --}}
    <title>{{ config('app.name') }} | @yield('title', $page_title ?? '')</title>

    {{-- Meta Data --}}
    <meta name="description" content="@yield('page_description', $page_description ?? '')" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    {{-- Favicon --}}
    <link rel="shortcut icon" href="{{ asset('media/logos/favicon.ico') }}" />

    {{-- Fonts --}}
    {{ Metronic::getGoogleFontsInclude() }}

    {{-- Global Theme Styles (used by all pages) --}}
    @foreach(config('layout.resources.css') as $style)
    <link href="{{ config('layout.self.rtl') ? asset(Metronic::rtlCssPath($style)) : asset($style) }}" rel="stylesheet" type="text/css" />
    @endforeach

    {{-- Layout Themes (used by all pages) --}}
    @foreach (Metronic::initThemes() as $theme)
    <link href="{{ config('layout.self.rtl') ? asset(Metronic::rtlCssPath($theme)) : asset($theme) }}" rel="stylesheet" type="text/css" />
    @endforeach

    {{-- Includable CSS --}}
    @yield('styles')
</head>

<body {{ Metronic::printAttrs('body') }} {{ Metronic::printClasses('body') }}>


    <div class="d-flex flex-column flex-root">
        <!--begin::Login-->
        <div class="login login-4 login-signin-on d-flex flex-row-fluid" id="kt_login">
            <div class="d-flex flex-center flex-row-fluid bgi-size-cover bgi-position-top bgi-no-repeat" style="background-image: url('{{ asset("media/bg/bg-1.jpg") }}');">
                <div class="login-form text-center p-7 position-relative overflow-hidden" style="width:500px">
                    <div class="card card-custom">
                        <div class="card-header">
                            <div class="card-title">
                                <a href="#">
                                    <img src="media/logos/iglogo.jpg" class="max-h-75px" alt="" />
                                </a>
                            </div>
                            <div class="card-toolbar">
                                <span class="text-dark-75 font-weight-bolder font-size-h3">{{ __('REGISTER') }}</span>
                            </div>
                        </div>
                        @if(session()->has('error'))
                        <div class="alert alert-danger">
                            {{ session()->get('error') }}
                        </div>
                        @endif
                        <div class="card-body">
                            <div class="row text-center"><strong>{{$eventdata[0]->Name}}</strong>
                            </div>
                            <div class="row text-center">&nbsp;
                            </div>
                            <form method="POST" action="{{ route('gymnastadd') }}">
                                @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="{{ $trials[0]->participant_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('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>
                        </div>
                    </div>
                    <!--end::Login Sign in form-->
                </div>
            </div>
        </div>
        <!--end::Login-->
    </div>


    {{-- Global Config (global config for global JS scripts) --}}
    <script>
        var KTAppSettings = {
            "breakpoints": {
                "sm": 576,
                "md": 768,
                "lg": 992,
                "xl": 1200,
                "xxl": 1200
            },
            "colors": {
                "theme": {
                    "base": {
                        "white": "#ffffff",
                        "primary": "#8950FC",
                        "secondary": "#E5EAEE",
                        "success": "#1BC5BD",
                        "info": "#6993FF",
                        "warning": "#FFA800",
                        "danger": "#F64E60",
                        "light": "#F3F6F9",
                        "dark": "#212121"
                    },
                    "light": {
                        "white": "#ffffff",
                        "primary": "#EEE5FF",
                        "secondary": "#ECF0F3",
                        "success": "#C9F7F5",
                        "info": "#E1E9FF",
                        "warning": "#FFF4DE",
                        "danger": "#FFE2E5",
                        "light": "#F3F6F9",
                        "dark": "#D6D6E0"
                    },
                    "inverse": {
                        "white": "#ffffff",
                        "primary": "#ffffff",
                        "secondary": "#212121",
                        "success": "#ffffff",
                        "info": "#ffffff",
                        "warning": "#ffffff",
                        "danger": "#ffffff",
                        "light": "#464E5F",
                        "dark": "#ffffff"
                    }
                },
                "gray": {
                    "gray-100": "#F3F6F9",
                    "gray-200": "#ECF0F3",
                    "gray-300": "#E5EAEE",
                    "gray-400": "#D6D6E0",
                    "gray-500": "#B5B5C3",
                    "gray-600": "#80808F",
                    "gray-700": "#464E5F",
                    "gray-800": "#1B283F",
                    "gray-900": "#212121"
                }
            },
            "font-family": "Poppins"
        };
    </script>


    {{-- 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 > 2014) {
                document.getElementById('dobmsg').innerHTML = '<font color="red">Age should 8 years and above.</font>';
                $('#dob').val('');
            } else if (birthyear == 2014) {
                $('#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>

</body>

</html>