@extends('layouts.website')
@section('title','Membership Administrative Control')
@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="MembershipAdminControl" action="{{ getURL('quote/membership-admin-control') }}">

                                    <input type="hidden" value="{{$membership->id}}" name="id" id="id">
                                    @csrf
                                    <div class="col-lg-12">
                                        <div class="quote-title mb-4">
                                            Administrative Control
                                        </div>
                                        <div class="quote-title mb-4">
                                            Because you are purchasing LabPair memberships for others, you will have administrative control over these accounts.
                                        </div>
                                        <div class="quote-description mb-5 font-small">
                                            In the event of personnel changes, you can revoke or transfer these memberships to other laboratory members one time.
                                        </div>
                                    </div>

                                    <div class="col-lg-12 row mt-4">
                                        <div class="quote-title mb-3 col-lg-12">
                                            At this time do you want administrative access over these accounts?
                                        </div>
                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input type="hidden" name="AdminAccessLast" id="AdminAccessLast" value="Yes">
                                            <label for="AdminAccessYes" class="w-100 quote-title">
                                                <input class="displayAdminAccessClass" type="radio" name="admin_access" id="AdminAccessYes" value="Yes" {{isset($membership->admin_access) && $membership->admin_access == 'Yes' ? 'checked' : ''}}>&nbsp; Yes (default)
                                            </label>
                                            <label for="AdminAccessDifferent" class="w-100 quote-title">
                                                <input class="displayAdminAccessClass" type="radio" name="admin_access" id="AdminAccessDifferent" value="Different" {{isset($membership->admin_access) && $membership->admin_access == 'Different' ? 'checked' : ''}}>&nbsp; Designate a different account administrator
                                            </label>
                                            <label for="AdminAccessNo" class="w-100 quote-title">
                                                <input class="displayAdminAccessClass" type="radio" name="admin_access" id="AdminAccessNo" value="No" {{isset($membership->admin_access) && $membership->admin_access == 'No' ? 'checked' : ''}}>&nbsp; No
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-lg-12" id="BackUpAdminDetailBox">
                                        <div class="quote-title mb-3">
                                            Please enter the name and email address of a backup administrator in the event that you are unable to be reached.
                                        </div>

                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input class="form-control manageChangeEventNextButton" type="text" name="backup_admin_name" id="backup_admin_name" placeholder="First Name" value="{{$membership->backup_admin->member_name ?? ''}}">
                                        </div>
                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input class="form-control manageChangeEventNextButton" type="text" name="backup_admin_last_name" id="backup_admin_last_name" placeholder="Last Name" value="{{$membership->backup_admin->member_last_name ?? ''}}">
                                        </div>
                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input class="form-control manageChangeEventNextButton" type="email" name="backup_admin_email" id="backup_admin_email" placeholder="Email Address" value="{{$membership->backup_admin->member_email ?? ''}}">
                                        </div>
                                    </div>

                                    <div class="col-lg-12 hide" id="AdminDetailBox">
                                        <div class="quote-title mb-3">
                                            Please enter the name and email address of the person who will be the account administrator
                                        </div>

                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input class="form-control manageChangeEventNextButton" type="text" name="admin_name" id="admin_name" placeholder="First Name" value="{{$membership->admin->member_name ?? ''}}">
                                        </div>
                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input class="form-control manageChangeEventNextButton" type="text" name="admin_last_name" id="admin_last_name" placeholder="Last Name" value="{{$membership->admin->member_last_name ?? ''}}">
                                        </div>
                                        <div class="form-group mb-3 ml-4 col-lg-4">
                                            <input class="form-control manageChangeEventNextButton" type="email" name="admin_email" id="admin_email" placeholder="Email Address" value="{{$membership->admin->member_email ?? ''}}">
                                        </div>
                                    </div>


                                    <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>
<!-- start:: Modal -->
<div class="modal fade" id="AdminAccessModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title">Administrator Control</h5>
                <button type="button" class="close AdminAccessCancelButton" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-left">
                    <p>Are you sure you do not want administrative control?</p>
                    <p>This will make your memberships non-transferable.</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom font-weight-bold border-radius-8 disabled AdminAccessCancelButton" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-custom font-weight-bold border-radius-8" data-dismiss="modal" id="AdminAccessYesButton">Proceed</button>
            </div>
        </div>
    </div>
</div>
<!-- end:: Modal -->

@endsection

@push('page_level_script')
@endpush


@push('footerscript')
<script>
    /** Click to Redirect */
    $(document).on('click', '#MembershipDisplayBack', function() {
        window.location.href = "{{getURL('quote/membership-purchase-display?id=' . $membership->id)}}";
    });


    /** Click to Redirect */

    $(document).on('click', '#AdminAccessYesButton', function() {
        $('#AdminAccessLast').val('No');
        $('#AdminDetailBox,#BackUpAdminDetailBox').addClass('hide');
        manageChangeEventNextButton();
    });
    $(document).on('click', '.AdminAccessCancelButton', function() {
        var AdminAccessLast = $('#AdminAccessLast').val();
        if (AdminAccessLast == 'Different') {
            $('#AdminAccessDifferent').prop('checked', true);
            AdminAccessLast = 'Different';
        } else {
            $('#AdminAccessYes').prop('checked', true);
            AdminAccessLast = 'Yes';
        }
        $('#AdminAccessLast').val(AdminAccessLast);
        manageChangeEventNextButton();
    });
    $(document).on('click', '.displayAdminAccessClass', function() {
        showHideAdminBox();
    });

    function showHideAdminBox() {
        var displayAdminAccessClass = $("input[type='radio'][name='admin_access']:checked").val();
        var AdminAccessLast = $('#AdminAccessLast').val();

        if (displayAdminAccessClass != undefined && displayAdminAccessClass == 'Different') {
            $('#AdminDetailBox').removeClass('hide');
            $('#BackUpAdminDetailBox').removeClass('hide');
            AdminAccessLast = 'Different';
        } else if (displayAdminAccessClass != undefined && displayAdminAccessClass == 'Yes') {
            $('#AdminDetailBox').addClass('hide');
            $('#BackUpAdminDetailBox').removeClass('hide');
            AdminAccessLast = 'Yes';
        } else if (displayAdminAccessClass != undefined && displayAdminAccessClass == 'No') {
            $('#AdminAccessModal').modal('show');
        }
        $('#AdminAccessLast').val(AdminAccessLast);
    }

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

    function manageChangeEventNextButton() {
        var displayAdminAccessClass = $("input[type='radio'][name='admin_access']:checked").val();
        var adminName = $('#admin_name').val();
        var adminLastName = $('#admin_last_name').val();
        var adminEmail = $('#admin_email').val();
        var backupAdminName = $('#backup_admin_name').val();
        var backupAdminLastName = $('#backup_admin_last_name').val();
        var backupAdminEmail = $('#backup_admin_email').val();

        var checkButtonValidation = false;
        if (displayAdminAccessClass != undefined && displayAdminAccessClass == 'Yes' && backupAdminName != undefined && backupAdminName != '' &&
            backupAdminLastName != undefined && backupAdminLastName != '' && backupAdminEmail != undefined && backupAdminEmail != '') {
            checkButtonValidation = true;
        } else if (displayAdminAccessClass != undefined && displayAdminAccessClass == 'Different' && adminName != undefined && adminName != '' &&
            adminLastName != undefined && adminLastName != '' && adminEmail != undefined && adminEmail != '' &&
            backupAdminName != undefined && backupAdminName != '' && backupAdminLastName != undefined && backupAdminLastName != '' &&
            backupAdminEmail != undefined && backupAdminEmail != '') {
            checkButtonValidation = true;
        } else if (displayAdminAccessClass != undefined && displayAdminAccessClass == 'No') {
            checkButtonValidation = true;
        }

        if (checkButtonValidation) {
            $('#MembershipDisplayNext').removeClass('disabled');
        } else {
            $('#MembershipDisplayNext').addClass('disabled');
        }
    }
    $(document).ready(function() {
        @if(isset($membership->id) && !empty($membership->id))
        showHideAdminBox();
        manageChangeEventNextButton();
        @endif
    });
</script>
@endpush