@extends('layouts.website')
@section('title','Membership Invoice Preview')
@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 Invoice Preview</h3>
                                </div>
                            </div>
                            <div class="col-10 offset-1">
                                <form method="POST" id="MembershipMemberInformation" action="javascript:void(0)">

                                    <input type="hidden" value="{{$membership->id}}" name="id" id="id">
                                    @csrf
                                    <div class="col-lg-12">
                                        <div class="quote-description mb-5">
                                            Please check the invoice preview and make sure all information is correct. A final copy of this invoice will be available under your administrator dashboard. If you have a promo code, you can enter it on the next page.
                                        </div>
                                    </div>

                                    <div class="border-radius-10 p-5  black-border-2">
                                        <div class="title text-color mb-5 mt-5">
                                            <h3>LabPair Membership Invoice</h3>
                                        </div>
                                        <div class="quote-title mb-4">
                                            Date: 1/31/2022 3:34 pm
                                        </div>
                                        <div class="quote-title mb-2">
                                            Prepared For: <span class="quote-sub-description">{{\Auth::user()->name}} {{\Auth::user()->last_name}}, {{\Auth::user()->email}}</span>
                                        </div>
                                        <div class="quote-title mb-4">
                                            Invoice Number: <span class="quote-sub-description">Not assigned yet</span>
                                        </div>
                                        <div class="quote-title mb-2">
                                            Description:
                                        </div>
                                        <div class="quote-sub-description mb-4">
                                            {{$quote['membershipUser']}} LabPair Membership(s) for {{$quote['membershipYear']}} year(s) at ${{$quote['monthlyFee']}}/user/month. <br>
                                            {{$quote['totalDiscount']}}% Discount Included
                                        </div>
                                        <div class="quote-title mb-4">
                                            User Information
                                        </div>
                                        <div class="row text-left mb-3">
                                            <label class="col-md-1 quote-title label">User</label>
                                            <label class="col-md-2 quote-title label">First Name</label>
                                            <label class="col-md-2 quote-title label">Last Name</label>
                                            <label class="col-md-4 quote-title label">Email Address</label>
                                            <label class="col-md-2 quote-title text-right label">Price Per User</label>
                                        </div>

                                        @for ($i = 0; $i < $membership->member; $i++)
                                            <div class="row text-left pb-4">
                                                <label class="col-md-1 quote-sub-description label">{{$i + 1}}.</label>
                                                <label class="col-md-2 quote-sub-description label">{{$membership->members[$i]->member_name ?? ''}}</label>
                                                <label class="col-md-2 quote-sub-description label">{{$membership->members[$i]->member_last_name ?? ''}}</label>
                                                <label class="col-md-4 quote-sub-description label">{{$membership->members[$i]->member_email ?? ''}}</label>
                                                <label class="col-md-2 quote-sub-description text-right label">$ {{number_format(($quote['grandDiscountYearlyFee'] / $quote['membershipUser']), 2)}}</label>
                                            </div>
                                        @endfor
                                        <div class="row text-right mb-3">
                                            <label class="col-md-4 quote-title label offset-5">Subtotal</label>
                                            <label class="col-md-2 quote-title label">$ {{number_format($quote['grandDiscountYearlyFee'], 2)}}</label>
                                        </div>
                                        <div class="row text-right mb-3">
                                            <label class="col-md-4 quote-title label offset-5">Tax</label>
                                            <label class="col-md-2 quote-title label">$ 0.00</label>
                                        </div>
                                        <div class="row text-right mb-3">
                                            <label class="col-md-4 quote-title label offset-5">Total</label>
                                            <label class="col-md-2 quote-title label">$ {{number_format($quote['grandDiscountYearlyFee'], 2)}}</label>
                                        </div>

                                    </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 disabled" 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">Approve</button>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 row mt-5 mb-5">
                                        <div class="col-lg-4 offset-4 text-center">
                                            <button type="button" class="btn btn-primary quote-button disabled" id="MembershipDisplaySendInvoice" value="Approve & Send Invoice for Payment">Approve & Send Invoice for Payment</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