{{-- 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('savemoreparticipant') }}" id="apparatus-form">
            @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}}" />
            <input type="hidden" name="orderid" value="{{$orderid}}" />
            <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" 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 for="contingent" class="col-md-4 col-form-label ">{{ __('School Name') }}</label>

                <div class="col-md-8">
                    <input type="text" class="form-control" id="contingent" name="contingent" placeholder="Enter School"
                        minlength="2" maxlength="50"
                        onkeypress="return (event.charCode === 32) || (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)"
                        required />
                    @if ($errors->has('contingent'))
                    <span class="text-danger">{{ $errors->first('contingent') }}</span>
                    @endif
                </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">Category</label>
                <div class="col-md-8">
                    <select class="form-control" id="category" name="category" required>
                        <option value="">Category</option>
                        <option value="Category A">Category A(L3,L4)</option>
                        <option value="Category B">Category B(L5,L6,L7)</option>
                        <option value="Category C">Category C(L8,L9,L10)</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-4 text-left">Choose Apparatus</label>
                <div class="col-md-8 text-left">
                    <div>
                        <label><input type="checkbox" name="apparatus[]" value="6"> Vault</label>
                    </div>
                    <div>
                        <label><input type="checkbox" name="apparatus[]" value="7"> Uneven</label>
                    </div>
                    <div>
                        <label><input type="checkbox" name="apparatus[]" value="8"> Balance
                            Beam</label>
                    </div>
                    <div>
                        <label><input type="checkbox" name="apparatus[]" value="9"> Floor</label>
                    </div>
                </div>
                <p id="error-message" style="color: red; display: none;">You must select at least 2
                    or exactly 4 apparatus.</p>
            </div>
            <div class="form-group row mb-0">
                <div class="col-md-8 offset-md-4">
                    <input type="submit" class="btn btn-primary" id="submit-button" 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')
@section('scripts')
<script>
    document.getElementById('apparatus-form').addEventListener('submit', function (event) {
        const checkboxes = document.querySelectorAll('input[name="apparatus[]"]:checked');
        const errorMessage = document.getElementById('error-message');

        if (checkboxes.length === 2 || checkboxes.length === 4) {
            errorMessage.style.display = 'none';
            // Form will be submitted if validation passes
        } else {
            errorMessage.style.display = 'block';
            event.preventDefault(); // Prevent form submission
        }
    });
</script>
@endsection