@extends('layouts.website')
@section('title','Membership Member Information')
@section('page_title','')

@section('page_level_css')
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pb-0" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="kt-grid kt-grid--hor kt-grid--root">
                <div class="main-box-white mt-4 mb-4">
                    <div class="quote-website">
                        <div class="row">
                            <div class="col-12 mb-5">
                                <div class="title text-color text-center">
                                    <h3>LabPair Membership Purchase</h3>
                                </div>
                            </div>
                            <div class="col-10 offset-1">
                                <form method="POST" id="MembershipMemberInformation" action="{{ getURL('quote/membership-member-information') }}">

                                    <input type="hidden" value="{{$membership->id}}" name="id" id="id">
                                    @csrf
                                    <div class="col-lg-12">
                                        <div class="quote-title mb-4">
                                            Enter Member Information
                                        </div>
                                        <div class="quote-description mb-5">
                                            Please enter the names and email addresses of the individuals you are purchasing memberships for.
                                        </div>
                                    </div>

                                    <div class="gray-background border-radius-10 pt-5 pb-5">
                                        <div class="row text-left">
                                            <label class="col-md-1 label">&nbsp;</label>
                                            <label class="col-md-3 quote-title label">First Name</label>
                                            <label class="col-md-3 quote-title label">Last Name</label>
                                            <label class="col-md-4 quote-title label">Email Address</label>
                                        </div>

                                        @for ($i = 0; $i < $membership->member; $i++)
                                            @if($membership->full_membership == 'Yes' && $i == 0)
                                            <div class="row pb-4">
                                                <label class="col-md-1 quote-title text-center label">{{$i + 1}}.</label>
                                                <div class="form-detail col-md-3">
                                                    <input type="text" class="form-control user-info-disabled manageChangeEventNextButton" name="name[{{$i}}]" id="name_{{$i}}" value="{{\Auth::user()->name}}">
                                                </div>
                                                <div class="form-detail col-md-3">
                                                    <input type="text" class="form-control user-info-disabled manageChangeEventNextButton" name="last_name[{{$i}}]" id="last_name_{{$i}}" value="{{\Auth::user()->last_name}}">
                                                </div>
                                                <div class="form-detail col-md-4">
                                                    <input type="email" class="form-control user-info-disabled manageChangeEventNextButton" name="email[{{$i}}]" id="email_{{$i}}" value="{{\Auth::user()->email}}">
                                                </div>
                                            </div>
                                            @else
                                            <div class="row pb-4">
                                                <label class="col-md-1 quote-title text-center label">{{$i + 1}}.</label>
                                                <div class="form-detail col-md-3">
                                                    <input type="text" class="form-control manageChangeEventNextButton" name="name[{{$i}}]" id="name_{{$i}}" value="{{$membership->members[$i]->member_name ?? ''}}">
                                                </div>
                                                <div class="form-detail col-md-3">
                                                    <input type="text" class="form-control manageChangeEventNextButton" name="last_name[{{$i}}]" id="last_name_{{$i}}" value="{{$membership->members[$i]->member_last_name ?? ''}}">
                                                </div>
                                                <div class="form-detail col-md-4">
                                                    <input type="email" class="form-control manageChangeEventNextButton" name="email[{{$i}}]" id="email_{{$i}}" value="{{$membership->members[$i]->member_email ?? ''}}">
                                                </div>
                                            </div>
                                            @endif
                                            @endfor
                                    </div>

                                    @php
                                    $backURL = ($membership->member == 1 && $membership->full_membership == 'Yes') ? 'quote/membership-member-information' : 'quote/membership-admin-control';
                                    $backURL = getURL($backURL . '?id=' . $membership->id);
                                    @endphp
                                    <div class="col-lg-12 row mt-5 mb-5">
                                        <div class="col-lg-4 text-center">
                                            <button type="button" class="btn btn-primary quote-button" id="MembershipDisplayBack" value="Back">Back</button>
                                        </div>
                                        <div class="col-lg-4 text-center offset-4">
                                            <button type="submit" class="btn btn-primary quote-button disabled" id="MembershipDisplayNext" value="Next">Next</button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>

@endsection

@push('page_level_script')
@endpush


@push('footerscript')
<script>
    /** Click to Redirect */
    $(document).on('click', '#MembershipDisplayBack', function() {
        window.location.href = "{{$backURL}}";
    });


    /** Click to Redirect */


    $(document).on('blur', '.manageChangeEventNextButton', function() {
        manageChangeEventNextButton();
    });

    function manageChangeEventNextButton() {
        var checkButtonValidation = true;
        $(".manageChangeEventNextButton").each(function() {
            if ($(this).val() == undefined || $(this).val() == '') {
                checkButtonValidation = false;
                return false;
            }
            var inputType = $(this).attr('type');
            if (inputType.toLowerCase() == 'email') {
                if (!IsEmail($(this).val())) {
                    checkButtonValidation = false;
                    return false;
                }
            }

        });

        if (checkButtonValidation) {
            $('#MembershipDisplayNext').removeClass('disabled');
        } else {
            $('#MembershipDisplayNext').addClass('disabled');
        }
    }

    function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!regex.test(email)) {
            return false;
        } else {
            return true;
        }
    }

    $(document).ready(function() {
        @if(isset($membership->id) && !empty($membership->id))
        manageChangeEventNextButton();
        @endif
    });
</script>
@endpush