@extends('master.team-registration')

@push('footer.scripts')

    <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);

                    }

                });

            });

            $('#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();
                }
                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="0">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="0">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" 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">
                                                                <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 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 bellow, 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