@extends('master.team-registration')



@push('footer.scripts')


    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js" ></script>

    <script>

        $(function() {



            $(document).ready(function(){



                $('#check_legal_guardian').click(function(){

                    if($(this).is(":checked")){



                        $('#waiver_agreement_check_div').hide()

                        $('#waiver_agreement_check').prop('required', false);





                        $('#miner_waiver_agreement_check_div').show();

                        $('#miner_waiver_agreement_check').prop('required', true);

                    }else{



                        $('#miner_waiver_agreement_check_div').hide();

                        $('#miner_waiver_agreement_check').prop('required', false);



                        $('#waiver_agreement_check_div').show()

                        $('#waiver_agreement_check').prop('required', true);



                    }



                });
                
                $(".us_phone_format").mask("(999) 999-9999");
                $(".us_phone_format").on("blur", function() {
                    let last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
                    if( last.length == 5 ) {
                        let move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 );
                        let lastfour = last.substr(1,4);
                        let first = $(this).val().substr( 0, 9 );
                        $(this).val( first + move + '-' + lastfour );
                    }
                });



            });







            $('#member_type_id').change(function(){

                if( $(this).val() == '3' || $(this).val() == '4' ){

                    $('.team_runner_class').show();

                    $('#gender').show();

                }else if( $(this).val() == '6' ){

                    $('.team_runner_class').hide();

                    $('#gender').show();

                }

                else{

                    $('.team_runner_class').hide();

                    $('#gender').show();

                }
                
                if( $(this).val() == '5' ){
                    $('#shirt_size').attr('required', false);
                }else{
                    $('#shirt_size').attr('required', true);
                }

                reload_tshirts_dropdown($(this).val());





            });



            $('#event_id').change(function(){



                if( $(this).val() != '' ){



                    reload_event_teams($(this).val());

                    reload_experience_dropdown($(this).val());



                }else{

                    $('#team_id').html('<option value="">Team</option>');

                    $('#experience').html('<option value="0">This will be my __ year participating in</option>');

                }

            });





            function reload_experience_dropdown(event_id){



                $.ajax({

                    url : '{!! url("registration/yearsparticipation") !!}',

                    type: 'GET',

                    data : "event_id="+event_id,

                    dataType: 'html',

                    success:function(response) {

                        $('#experience').html(response);

                    },

                    error: function(jqXHR, textStatus, errorThrown) {

                        return false;

                    }

                });



            }



            function reload_event_teams(event_id){



                $.ajax({

                    url : '{!! url("registration/reloadeventteams") !!}',

                    type: 'GET',

                    data : "event_id="+event_id,

                    dataType: 'html',

                    success:function(response) {

                        $('#team_id').html(response);

                    },

                    error: function(jqXHR, textStatus, errorThrown) {

                        return false;

                    }

                });



            }





            function reload_tshirts_dropdown(member_type_id){



                $.ajax({

                    url : '{!! url("registration/reloadtshirts") !!}',

                    type: 'GET',

                    data : "member_type_id="+member_type_id,

                    dataType: 'html',

                    success:function(response) {

                        $('#shirt_size').html(response);

                    },

                    error: function(jqXHR, textStatus, errorThrown) {

                        return false;

                    }

                });



            }



        });



    </script>



@stop



@section('content')





    <main class="page__wrap header_height-top">



        <section class="sec_space">



            <div class="container">

                <div class="lead__wrap mb_2r">

                    <h2>Registration > Add runner/volunteer </h2>

                </div><!--/.lead__wrap-->

            </div><!--/.container-->



            <div class="registration__tabs-wrap">



                <ul class="nav nav__tabs">





                </ul><!--/.nav-tabs-->



                <div class="container">



                    <div class="tab-content">



                        <div class="tab-pane fade show active" id="tab1" role="tabpanel">

                            <div class="registration__tab-pane">



                                @if (count($errors) > 0)

                                    <div class="alert alert-danger">

                                        <button type="button" class="close" data-dismiss="alert"></button>

                                        <h4 class="alert-heading"><strong>Validation Errors!</strong></h4>

                                        <ul>

                                            @foreach ($errors->all() as $error)

                                                <li> {{ $error }}</li>

                                            @endforeach

                                        </ul>

                                    </div>

                                @endif



                                {!! Form::open(array('url' => 'registration/member', 'method'=>'POST', 'class'=> 'subscription_form')) !!}

                                    <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>



                                    <div class="row">



                                        <div class="col-md-12">



                                                    <div class="row justify-content-end">



                                                    <div class="col-sm-6">

                                                        <select class="form-control" id="event_id" name="event_id" required >

                                                            <option value="">Event*</option>

                                                            @foreach(list_events_race_active_list() as $event)

                                                                <option value="{{ $event->id }}" data-name="{{$event->event_short_name}}" {{{ ($event->id == $event_id)?'selected' :'' }}}>{{ $event->event_name }}</option>

                                                            @endforeach

                                                        </select>

                                                    </div><!--/.col-sm-6-->



                                                    <div class="col-sm-6">

                                                        <select class="form-control" id="team_id" name="team_id" required >

                                                            @if ($team_id != '')

                                                            {!! $teams !!}

                                                            @else

                                                            <option value="">Team*</option>

                                                            @endif

                                                        </select>

                                                    </div><!--/.col-sm-6-->



                                                    <div class="col-sm-6">

                                                        <select id="member_type_id" name="member_type_id" class="form-control" required>

                                                            <option value="">Type*</option>

                                                            @foreach(team_member_types() as $type)

                                                                @if ($type->id != '7')

                                                                <option value="{{ $type->id }}">{{ $type->name }}</option>

                                                                @endif

                                                            @endforeach

                                                        </select>

                                                    </div><!--/.col-sm-6-->

                                                        <div class="col-sm-6">



                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="text" name="first_name" class="form-control" placeholder="First Name*" required>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="text" name="last_name" class="form-control" placeholder="Last Name*" required>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="email" name="email" class="form-control" placeholder="Email address*" required>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="email" name="email2" class="form-control" placeholder="Verify email address*" required>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="password" minlength="8" maxlength="20" name="password" class="form-control margin-bottom-0" placeholder="Password" required>

                                                            <small>Password must be 8 to 20 characters long.</small>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="password" minlength="8" maxlength="20" name="password_confirmation" class="form-control" placeholder="Verify password" required>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="text" name="address" class="form-control margin-top-20" placeholder="Address">

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <select class="form-control margin-top-20" id="state" name="state" >

                                                                <option value="">State</option>

                                                                @foreach(list_us_states() as $state)

                                                                    <option value="{{ $state->code }}">{{ $state->code }}</option>

                                                                @endforeach

                                                            </select>

                                                        </div><!--/.col-sm-6-->





                                                        <div class="col-sm-6">

                                                            <input type="text" name="city" class="form-control" placeholder="City">

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="text" name="zipcode" class="form-control" placeholder="Zip code">

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="text" name="phone" class="form-control us_phone_format" placeholder="Telephone">

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <select id="experience" name="experience" class="form-control margin-bottom-0" required>

                                                                @if($event_name != '')

                                                                    @foreach($years_participation as $option)

                                                                        <option value="{{ $option->option_value }}">{{ $option->option_text }}</option>

                                                                    @endforeach

                                                                @else

                                                                    <option value="0">This will be my __ year participating in</option>

                                                                @endif

                                                            </select>

                                                            <small>2020 counts as a year of participation</small>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <select id="gender" name="gender" class="form-control margin-top-20">

                                                                <option value="">Gender</option>

                                                                <option value="Male">Male</option>

                                                                <option value="Female">Female</option>

                                                                <option value="Non-binary">Non-binary</option>

                                                            </select>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <select id="shirt_size" name="shirt_size" class="form-control margin-top-20" required="">

                                                                <option value="0">T-shirt size</option>

                                                                @foreach(list_tshirt_sizes() as $location)

                                                                    <option value="{{ $location->id }}">{{ $location->name }}</option>

                                                                @endforeach

                                                            </select>

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <input type="text" name="age" class="form-control team_runner_class" style="display: none;" placeholder="Age on race day">

                                                        </div><!--/.col-sm-6-->



                                                        <div class="col-sm-6">

                                                            <select id="time_10k" name="time_10k" class="form-control team_runner_class" style="display: none;">

                                                                <option value="0">Your Avg 10k Time (in minutes)</option>

                                                                @foreach(list_time_10k() as $location)

                                                                    <option value="{{ $location->id }}">{{ $location->value }}</option>

                                                                @endforeach

                                                            </select>

                                                        </div><!--/.col-sm-6-->

                                                        <div class="col-sm-6">

                                                            <input type="running_club" name="running_club" class="form-control team_runner_class" style="display: none;" placeholder="Affiliated Running Club">

                                                        </div><!--/.col-sm-6-->

                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-12"><h4>Emergency Contact Information</h4></div>

                                                        <div class="col-sm-6">

                                                            <input type="text" name="emergency_contact_first_name" class="form-control" placeholder="Emergency Contact First Name">

                                                        </div><!--/.col-sm-6-->

                                                        <div class="col-sm-6">

                                                            <input type="text" name="emergency_contact_last_name" class="form-control" placeholder="Emergency Contact Last Name">

                                                        </div><!--/.col-sm-6-->

                                                        <div class="col-sm-6">

                                                            <input type="text" name="emergency_contact_phone" class="form-control" placeholder="Emergency Contact Telephone">

                                                        </div><!--/.col-sm-6-->

                                                    </div>

                                                    <div class="row">

                                                        <div class="col-sm-12">

                                                            <div class="form-group">

                                                                <label class="control-label bold"></label>

                                                                <p><strong>Please read the following waiver carefully.</strong>

                                                                    By agreeing electronically, you acknowledge that you have both read and understood all text presented to you as part of the registration process.

                                                                </p>

                                                            </div>

                                                        </div><!--/.col-sm-12-->



                                                        <div class="col-sm-12">

                                                            <div class="form-group">

                                                                <label class="control-label bold"></label>

                                                                <div class="checkbox-list">

                                                                    <label class="checkbox-inline">

                                                                        <div class="checker"><span><input type="checkbox" id="check_legal_guardian" name="check_legal_guardian" value="1"></span> Check this box if you are a legal guardian registering a Minor (under 18)</div>

                                                                    </label>

                                                                </div>

                                                            </div>

                                                        </div><!--/.col-sm-12-->



                                                        <div id="waiver_agreement_check_div" class="col-sm-12">

                                                            <div class="form-group">

                                                                <label class="control-label bold"></label>

                                                                <div class="checkbox-list">

                                                                    <label class="checkbox-inline">

                                                                        <div class="checker"><span><input type="checkbox" id="waiver_agreement_check" name="waiver_agreement_check" required value="1"></span> I agree to the <a href="#" data-toggle="modal" data-target="#participantWaiverModal">Participant Waiver and Release of Liability, Assumption of Risk and Indemnity Agreement</a></div>

                                                                    </label>

                                                                </div>

                                                            </div>

                                                        </div><!--/.col-sm-12-->



                                                        <div id="miner_waiver_agreement_check_div" class="col-sm-12" style="display: none;">

                                                            <div class="form-group">

                                                                <label class="control-label bold"></label>

                                                                <div class="checkbox-list">

                                                                    <label class="checkbox-inline">

                                                                        <div class="checker">

                                                                            <span><input type="checkbox" id="miner_waiver_agreement_check" name="miner_waiver_agreement_check" value="1"></span>

                                                                            I agree to the <a href="javascript:void(0);" data-toggle="modal" data-target="#minorParticipantWaiverModal">Participant Waiver and Release of Liability, Assumption of Risk and Indemnity Agreement.</a> <br />

                                                                        </div>

                                                                    </label>

                                                                </div>

                                                            </div>

                                                        </div><!--/.col-sm-12-->



                                                        <div class="col-sm-12">

                                                            By entering my name below, I assert that I have reviewed and agree to all the waivers and agreements I have selected above.

                                                        </div>



                                                        <div class="col-sm-6">

                                                            <div class="form-group">

                                                                <label for="electronic_signature"><strong>Electronic Signature *</strong></label>

                                                                <input type="text" id="electronic_signature" name="electronic_signature" class="form-control" required>

                                                            </div>

                                                        </div><!--/.col-sm-6-->

                                                        <div class="col-sm-6"></div><!--/.col-sm-6-->



                                                        <div class="col-sm-12 text-left">

                                                            <button type="submit" class="btn btn-block btn-theme1">Submit</button>

                                                        </div><!--/.col-sm-6-->

                                                </div><!--/.row-->



                                        </div><!--/.col-md-6-->



                                    </div><!--/.row-->









                                </form>



                            </div><!--/.registration__tab-pane-->

                        </div><!--/.tab-pane-->







                    </div><!--/.tab-content-->



                </div><!--/.container-->



            </div><!--/.registration__tabs-wrap-->



        </section><!--/.end-section-->



    </main><!--/.page__wrap-->







    <!-- BEGIN INCLUDE MODAL  "PARTICIPANT WAIVER MODAL" -->

    <div class="modal fade" id="participantWaiverModal" tabindex="-1" role="basic" aria-hidden="true">

        <div class="modal-dialog modal-lg">

            <form class="modal-content horizontal-form">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                    <h4 class="modal-title">Participant waiver and release of liability, assumption of risk and indemnity agreement.</h4>

                </div>

                <div class="form-horizontal modal-body" role="form">

                    <div class="form-body waiver_modal_body_class" style="">

                        <div class="row">

                            <div class="col-md-12">

                                {!! get_waiver_information()->participant_waiver !!}

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn default" data-dismiss="modal">Close</button>

                </div>

            </form>

            <!-- /.modal-content -->

        </div>

        <!-- /.modal-dialog -->

    </div>

    <!-- END INCLUDE MODAL -->





    <!-- BEGIN INCLUDE MODAL  "MINOR PARTICIPANT WAIVER MODAL" -->

    <div class="modal fade" id="minorParticipantWaiverModal" tabindex="-1" role="basic" aria-hidden="true">

        <div class="modal-dialog modal-lg">

            <form class="modal-content horizontal-form">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                    <h4 class="modal-title">Minor Participant waiver and release of liability, assumption of risk and indemnity agreement.</h4>

                </div>

                <div class="form-horizontal modal-body" role="form">

                    <div class="form-body waiver_modal_body_class" style="">

                        <div class="row">

                            <div class="col-md-12">

                                {!! get_waiver_information()->minor_participant_waiver !!}

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn default" data-dismiss="modal">Close</button>

                </div>

            </form>

            <!-- /.modal-content -->

        </div>

        <!-- /.modal-dialog -->

    </div>

    <!-- END INCLUDE MODAL -->



@stop