@extends('master.team-registration')
<style>
    .registrant_container_div:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        border-bottom: currentColor 1px solid;
    }
    .add_new_registrant_div{ margin-top: 30px; margin-bottom: 30px;}
    .registrant_heading{ margin-top: 30px;}
    .remove_additional_registrant{ color: red !important; font-weight: bold !important; font-size: 24px !important;}

</style>
@push('footer.scripts')
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js" ></script>
    <script>

        let registrant_counter = 1;

        $(function () {

            $(document).ready(function () {

                $('input[type=radio][name=team_category_id]').change(function() {
                    if (this.value == '26') {
                        $('#family_information_div').fadeIn(500);
                        $('.family_first_input_field').attr('required', true);
                        $('.family_info_input').val('');
                    }
                    else  {
                        $('#family_information_div').fadeOut(500);
                        $('.family_first_input_field').attr('required', false);
                        $('.family_info_input').val('');
                    }
                });



                $('#add_more_registrant_container').on('change', '.additional_team_category_id_class', function (e) {

                    console.log( $(this).val() + ' -- ' + $(this).data('index') );

                    if ($(this).val() == '26') {
                        $('#family_information_div_'+$(this).data('index')).fadeIn(500);
                        $('.family_first_input_field_'+$(this).data('index')).attr('required', true);
                        $('.family_info_input_'+$(this).data('index')).val('');
                    }
                    else  {
                        $('#family_information_div_'+$(this).data('index')).fadeOut(500);
                        $('.family_first_input_field_'+$(this).data('index')).attr('required', false);
                        $('.family_info_input_'+$(this).data('index')).val('');
                    }


                });

                $('#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);

                    }

                });


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

                    registrant_counter = parseInt(registrant_counter) + 1;
                    const event_id = $(this).data('event-id');

                    //data : "event_id={{$event_id}}&index="+registrant_counter,
                    $.ajax({
                        url : '{!! url("registration/addmoreregisterant") !!}',
                        type: 'GET',
                        data: {
                            event_id: event_id, 
                            index: registrant_counter 
                        }, 
                        dataType: 'html',
                        success:function(response) {
                            $('#add_more_registrant_container').append(response);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            return false;
                        }

                    });

                });

                $('#add_more_registrant_container').on('click', 'a.remove_additional_registrant', function (e) {

                    let div_id = $(this).data('id');
                    $('#additional_registrant_div_'+div_id).remove();
                });
                
                $(".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 );
                    }
                });


            });


        });

    </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>Register For {{$event_name}} </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/postregisterindividual', 'method'=>'POST', 'class'=> 'subscription_form')) !!}


                                <input type="hidden" name="token_csrf" id="token_csrf" value="{{ csrf_token() }}"/>
                                <input type="hidden" name="event_id" id="event_id" value="{{ $event_id }}"/>
                                <input type="hidden" name="team_id" id="team_id" value="{{ $team_id }}"/>
                                <input type="hidden" name="member_type_id" id="member_type_id" value="8"/>


                                <div class="row">

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

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

                                                <h2>Registrant #1</h2>
                                                <h3>Basic Info</h3>

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

                                                    <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-->
                                                    
                                                    @if ($event_id ==9)
                                                    <div class="col-sm-6">
                                                        <input type="hidden" name="experience" value="0">
                                                    </div><!--/.col-sm-6-->

                                                    <div class="col-sm-6">
                                                        <input type="hidden" name="referral" value="">
                                                    </div><!--/.col-sm-6-->
                                                    @elseif ($event_id ==15)                                                    
                                                    <div class="col-sm-6">
                                                        <select id="referral" name="referral" required class="form-control">
                                                            <option value="">How did you hear about us*</option>
                                                            <option value="1">Past Participant</option>
                                                            <option value="2">Radio</option>
                                                            <option value="3">Social Media</option>
                                                            <option value="4">Poster / Magazine</option>
                                                            <option value="5">Other</option>
                                                        </select>
                                                    </div><!--/.col-sm-6-->
                                                    <div class="col-sm-6">&nbsp;</div>
                                                    @endif

                                                    <div class="col-md-12" style="margin-top: 30px;"><h3>Additional Information</h3></div>
                                                    <div class="col-sm-4">
                                                        <select id="gender" name="gender" required class="form-control">
                                                            <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-4-->

                                                    <div class="col-sm-4">
                                                        @if ($event_id ==9)
                                                        <input type="text" name="dob" class="form-control" placeholder="DOB" onfocus="(this.type='date')">
                                                        @else
                                                        <input type="number" name="dob" class="form-control" required placeholder="Age*">
                                                        @endif
                                                    </div><!--/.col-sm-4-->

                                                    <div class="col-sm-4">
                                                        <input type="text" name="phone" required class="form-control us_phone_format" placeholder="Phone*" >
                                                    </div><!--/.col-sm-4-->

                                                    <div class="col-md-12" style="margin-top: 30px;"><h3>Address</h3></div>
                                                    <div class="col-sm-6">
                                                        <input type="text" name="address" class="form-control margin-top-20" placeholder="Street Address*" required>
                                                    </div><!--/.col-sm-6-->

                                                    <div class="col-sm-6">
                                                        <select class="form-control margin-top-20" id="state" name="state" required>
                                                            <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*" required>
                                                    </div><!--/.col-sm-6-->

                                                    <div class="col-sm-6">
                                                        <input type="text" name="zipcode" class="form-control" placeholder="Zip code*" required>
                                                    </div><!--/.col-sm-6-->

                                                </div>

                                                <div class="row" style="margin-top: 30px;">
                                                    <div class="col-md-12"><h3>Ticket /Registration type</h3></div>
                                                    
                                                    @if($event_id == 13)
                                                    <div class="col-md-12">
                                                        * <strong>Early registration pricing -- in effect now through May 22 at 11:59 pm PST</strong>
                                                        <ul>
                                                            <li>All Butte Challenge (9 Buttes) - Adult : $60.00</li>
                                                            <li>All Butte Challenge (9 Buttes) - Youth ages 15 and younger: $15</li>
                                                            <li>Micro Butte Challenge (any one Butte) - Adult: $20</li>
                                                        </ul>
                                                        
                                                        * <strong>Regular Registration pricing -- Starts 05/23/ 25 at 12am PST</strong>
                                                        <ul>
                                                            <li>All Butte Challenge (9 Buttes) - Adult : $65.00</li>
                                                            <li>All Butte Challenge (9 Buttes) - Youth ages 15 and younger: $20</li>
                                                            <li>Micro Butte Challenge (any one Butte) - Adult: $25</li>
                                                        </ul>
                                                    </div>
                                                    @endif

                                                    @foreach(list_event_team_categories_from_registration($event_id) as $item)                                                        
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label class="control-label bold"></label>
                                                                <div class="checkbox-list">
                                                                    <label class="checkbox-inline">
                                                                        <div class="checker">
                                                                            <span><input type="radio"  id="team_category_id" name="team_category_id" value="{{$item->id}}" required=""></span>
                                                                            {{$item->name}}&nbsp;&nbsp;&nbsp;&nbsp;<strong>{{ get_event_category_price($item->id)  }}</strong>
                                                                            
                                                                            @if($event_id == 13 && get_event_category_late_price($item->id)!=null)
                                                                                <span style="text-decoration: line-through; color: #000;">{{ get_event_category_late_price($item->id) }}</span>&nbsp;
                                                                            @endif
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div><!--/.col-sm-12-->
                                                    @endforeach
                                                    <div style="clear: both;"></div>
                                                    <br/>
                                                    <div class="col-sm-12">
                                                    @if ($event_id ==14)
                                                    <p><em>*Registration is just for kids, but parents are welcome to join in the fun with their little ones.</em></p>
                                                    @else
                                                    <p><em>*Children in strollers are welcome to join at no additional cost.</em></p>
                                                    @endif
                                                    </div>
                                                </div>

                                                <div id="family_information_div" class="row" style="display: none; margin-top: 30px;">
                                                    <div class="col-md-12"><h3>Additional Family Members</h3></div>
                                                    <div class="col-sm-4">
                                                        <input type="text" name="family_first_name_1" class="form-control family_first_input_field family_info_input" placeholder="First Name*" >
                                                    </div><!--/.col-sm-4-->
                                                    <div class="col-sm-4">
                                                        <input type="text" name="family_last_name_1" class="form-control family_first_input_field family_info_input" placeholder="Last Name*" >
                                                    </div><!--/.col-sm-4-->
                                                    <div class="col-sm-4">
                                                        <input type="date" name="family_dob_1" class="form-control family_first_input_field family_info_input" placeholder="DOB*">
                                                    </div><!--/.col-sm-4-->

                                                    <div class="col-sm-4">
                                                        <input type="text" name="family_first_name_2" class="form-control family_info_input" placeholder="First Name" >
                                                    </div><!--/.col-sm-4-->
                                                    <div class="col-sm-4">
                                                        <input type="text" name="family_last_name_2" class="form-control family_info_input" placeholder="Last Name" >
                                                    </div><!--/.col-sm-4-->
                                                    <div class="col-sm-4">
                                                        <input type="date" name="family_dob_2" class="form-control family_info_input" placeholder="DOB">
                                                    </div><!--/.col-sm-4-->

                                                    <div class="col-sm-4">
                                                        <input type="text" name="family_first_name_3" class="form-control family_info_input" placeholder="First Name" >
                                                    </div><!--/.col-sm-4-->
                                                    <div class="col-sm-4">
                                                        <input type="text" name="family_last_name_3" class="form-control family_info_input" placeholder="Last Name" >
                                                    </div><!--/.col-sm-4-->
                                                    <div class="col-sm-4">
                                                        <input type="date" name="family_dob_3" class="form-control family_info_input" placeholder="DOB">
                                                    </div><!--/.col-sm-4-->                                                   
                                                </div>

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div id="add_more_registrant_container" class="col-md-12">

                                            </div>
                                        </div>

                                        <div class="row add_new_registrant_div" >
                                            <div class="col-sm-3 text-left">
                                                <button type="button" id="add_new_registrant_btn" data-event-id="{{ $event_id }}" class="btn btn-block btn-theme1"><i class="icon icon-plus" aria-hidden="true"></i> Add Another Registrant</button>
                                            </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-->

                                            @if ($event_id !=10)
                                            <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-->
                                            @endif


                                            <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