@extends('layouts.website')
@section('title','Membership Quote Generator')
@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 Quote</h3>
                                </div>
                            </div>
                            @php $attributes = ''; @endphp
                            @if ((isset($request->user) && !empty($request->user) && isset($request->year) && !empty($request->year)) || (isset($_GET['user']) && !empty($_GET['user']) && isset($_GET['year']) && !empty($_GET['year'])))
                                @php $attributes = '?user=' . $_GET['user'] . '&year=' . $_GET['year']; @endphp
                            @elseif((isset($request->id) && !empty($request->id)) || (isset($_GET['id']) && !empty($_GET['id'])))
                                @php $attributes = '?id=' . $_GET['id']; @endphp
                                <input type="hidden" value="{{$_GET['id']}}" name="membership_id" id="membership_id">
                            @endif

                            <div class="col-10 offset-1">
                                <div class="col-lg-12">
                                    <div class="quote-description mb-5">
                                        Use our quote generator to receive discounts for multiple users and multi-year agreements. Email your quote to your lab manager or administrator for hassle-free payment.
                                    </div>
                                    <div class="quote-title mb-3">
                                        How many LabPair memberships would you like?
                                    </div>
                                    <div class="quote-description mb-5">
                                        We recommend one membership for each person in your laboratory that generates data or samples. <span class="bold underline cursor-pointer" id="HereWhy">Here's why.</span>
                                    </div>
                                    <div class="quote-description mb-5 hide" id="HereWhyDisplay">
                                        LabPair was designed to accommodate busy principal investigators (PIs) and laboratory leaders. Laboratory trainees and/or staff can use their own LabPair accounts to draft posts advertising the lab's resources and then send them to their PI for final editing and approval. This maximizes the lab's efficiency by facilitating task delegation while still allowing PIs to maintain control over their lab's resources. After a post is made public, potential collaborations may reach out with detailed questions that only the person generating the data/ samples may be able to answer. Laboratory workers can field these questions and report back to their PI.
                                    </div>
                                </div>
                                <div class="col-lg-12 row">
                                    <div class="quote-title mb-3 col-lg-12">
                                        Number of memberships
                                    </div>
                                    <div class="form-group mb-3 col-lg-4">
                                        <select class="form-control changeDiscountData" name="membership_user" id="membership_user">
                                            <option value="">-- Select Membership User --</option>
                                            @foreach ($dataUser as $data)
                                            <option value="{{$data['user']}}" id="membershipUserId{{$data['user']}}" data-discount="{{$data['discount']}}">{{$data['user']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="quote-description mb-5 col-lg-12">
                                        For 10 or more memberships, please contact our <a href="mailto:sales@labpair.com" class="bold underline cursor-pointer color-black">sales department.</a>
                                    </div>
                                </div>
                                <div class="col-lg-12 row">
                                    <div class="quote-title mb-3 col-lg-12">
                                        Number of years of membership
                                    </div>
                                    <div class="quote-description mb-3 col-lg-12">
                                        Simplify grant management by ordering multiple years at once and receive additional discounts.
                                    </div>
                                    <div class="quote-title mb-3 col-lg-12 color-blue">
                                        Memberships can be transferred one time in the event of laboratory personnel changes.
                                    </div>
                                    <div class="form-group mb-5 col-lg-4">
                                        <select class="form-control changeDiscountData" name="membership_year" id="membership_year">
                                            <option value="">-- Select Membership Year --</option>
                                            @foreach ($dataYear as $data)
                                            <option value="{{$data['year']}}" id="membershipYearId{{$data['year']}}" data-discount="{{$data['discount']}}">{{$data['year']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-12 row">
                                    <div class="quote-title mb-3 col-lg-12">
                                        Quote Price Details
                                    </div>
                                    <table class="w-100 text-center quote-user-table">
                                        <tr class="min-height">
                                            <td class="quote-title col-lg-2 border">
                                                Members
                                            </td>
                                            <td class="quote-title col-lg-2 border">
                                                Subscription Term (Years)
                                            </td>
                                            <td class="quote-title col-lg-2 border">
                                                Total Discount
                                            </td>
                                            <td class="quote-title col-lg-2 border">
                                                Monthly Fee Per Person
                                            </td>
                                            <td class="quote-title col-lg-2 border">
                                                Total Savings
                                            </td>
                                            <td class="quote-title col-lg-2 border">
                                                Sub-total
                                            </td>
                                        </tr>
                                        <tr class="min-height">
                                            <td class="quote-title col-lg-2 border" id="tableTotalMember">
                                                --
                                            </td>
                                            <td class="quote-title col-lg-2 border" id="tableTotalYear">
                                                --
                                            </td>
                                            <td class="quote-title col-lg-2 border" id="tableTotalDiscount">
                                                -- %
                                            </td>
                                            <td class="quote-title col-lg-2 border" id="tableMonthlyFee">
                                                $ 00.00
                                            </td>
                                            <td class="quote-title col-lg-2 border" id="tableTotalSaving">
                                                $ 00.00
                                            </td>
                                            <td class="quote-title col-lg-2 border" id="tableSubTotal">
                                                $ 00.00
                                            </td>
                                        </tr>
                                    </table>

                                </div>

                                <div class="col-lg-12 row mt-5 mb-5">
                                    <div class="col-lg-4 text-center">
                                        <input type="button" class="btn btn-primary quote-button" value="Email Quote" id="EmailQuoteButton">
                                    </div>
                                    <div class="col-lg-4 text-center offset-4">
                                        <button type="button" class="btn btn-primary quote-button" id="ContinueWithPaymentButton" value="Continue with Payment">Continue with Payment</button>
                                    </div>
                                </div>

                                <div class="col-lg-12 row mt-5 mb-5 hide" id="EmailQuoteDiv">
                                    <div class="quote-title mb-3 mt-3 col-lg-12">
                                        Email your quote to your lab manager or administrator
                                    </div>
                                    <div class="quote-title mb-3 col-lg-12">
                                        To complete payment, you or your admin will need the names and emails of the individuals for whom you are requesting memberships
                                    </div>
                                    <div class="inner-bg-grey radius-15 col-lg-12 row mt-5 mb-5">
                                        <form class="col-lg-8 offset-2 row" action="" method="POST" id="contactUsForm">
                                            @csrf
                                            <div class="quote-title mb-3 mt-3 col-lg-12">
                                                Enter your information
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group mb-3">
                                                    <input type="text" name="your_name" id="your_name" placeholder="First Name" class="form-control" />
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group mb-3">
                                                    <input type="text" name="your_last_name" id="your_last_name" placeholder="Last Name" class="form-control" />
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group mb-3">
                                                    <input type="text" name="your_email" id="your_email" placeholder="Your Email" class="form-control" />
                                                </div>
                                            </div>

                                            <div class="quote-title mb-3 mt-3 col-lg-12">
                                                Recipient Information
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group mb-3">
                                                    <input type="text" name="recipient_email" id="recipient_email" placeholder="Enter Recipient's Email Address" class="form-control" />
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group mb-3">
                                                    <textarea name="recipient_message" id="recipient_message" rows="5" placeholder="Enter personal message to recipient. If applicable, include the names and emails of the individuals you are requesting memberships for (Optional)." class="form-control" maxlength="100"></textarea>
                                                </div>
                                            </div>

                                            <div class="col-lg-6 mt-5 mb-5">
                                                <input type="button" class="btn btn-primary quote-button" value="Send Quote" id="SendQuoteEmailButton">
                                            </div>
                                        </form>
                                    </div>
                                </div>

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

<!-- Start:: Modal -->

<div class="modal fade" id="quoteSentModal" 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 showModelTitle">Quote Sent</h5>
                <button type="button" class="close redirect-dashboard" 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="">
                    <p class="showModelText">Success! Your quote has been sent!</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex">
                <button type="button" class="w-25 btn btn-custom btn-pill font-weight-bold border-radius-10 redirect-dashboard" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>


@endsection

@push('page_level_script')
@endpush


@push('footerscript')
<script>
    $("#contactUsForm").validate({
        rules: {
            your_name: {
                required: true,
            },
            your_last_name: {
                required: true,
            },
            your_email: {
                required: true,
                email: true,
                minlength: 10
            },
            recipient_email: {
                required: true,
                email: true,
                minlength: 10
            },
        },
        messages: {
            your_email: {
                required: "Please enter a valid email.",
                email: "Please enter a valid email.",
                minlength: "Please enter a valid email.",
            },
            recipient_email: {
                required: "Please enter a valid email.",
                email: "Please enter a valid email.",
                minlength: "Please enter a valid email.",
            },
        },
        invalidHandler: function(event, validator) {
            var alert = $('#kt_form_1_msg');
            alert.removeClass('kt--hide').show();
        },
    });
    $('#SendQuoteEmailButton').click(function() {
        var boolVar = $("#contactUsForm").valid();
        if (boolVar) {
            var membershipUser = $('#membership_user').val();
            var membershipYear = $('#membership_year').val();

            if (membershipUser != undefined && membershipUser != '' && membershipYear != undefined && membershipYear != '') {
                $.ajax({
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    url: "{{getURL('ajax/send-membership-quote-email')}}",
                    data: {
                        your_name: $('#your_name').val(),
                        your_last_name: $('#your_last_name').val(),
                        your_email: $('#your_email').val(),
                        recipient_email: $('#recipient_email').val(),
                        recipient_message: $('#recipient_message').val(),
                        membership_user: membershipUser,
                        membership_year: membershipYear,
                    },
                    success: function(data) {
                        if (data.status == 1) {
                            $("#quoteSentModal").modal("show");
                        } else {
                            alert(data.message);
                        }
                    }
                });
            } else {
                alert('Please select proper user or year required fields.');
            }
        }
    });

    var yearlyFee = parseInt("{{$dataAnnualFee->value ?? 0}}");
    var maxDiscount = parseInt("{{$dataMaxDiscount->value ?? 0}}");

    $(document).on('click', '#HereWhy', function() {
        $('#HereWhyDisplay').removeClass('hide');
    });
    $(document).on('click', '.redirect-dashboard', function() {
        window.location.href = "{{getURL('home')}}";
    });
    $(document).on('click', '#EmailQuoteButton', function() {
        $('#EmailQuoteDiv').removeClass('hide');
    });
    $(document).on('change', '.changeDiscountData', function() {
        var totalMember = $('#membership_user').val();
        var totalYear = $('#membership_year').val();
        onChangeEventForDiscount(totalMember, totalYear);
    });

    function onChangeEventForDiscount(user, year) {
        var totalMember = $('#membership_user').val();
        var totalMembershipDiscount = parseInt($('#membershipUserId' + totalMember).data('discount'));
        var totalYear = $('#membership_year').val();
        if (totalMember != undefined && totalMember != 0 && totalYear != undefined && totalYear != 0) {
            var totalYearDiscount = parseInt($('#membershipYearId' + totalYear).data('discount'));
            var totalDiscount = totalMembershipDiscount + totalYearDiscount;

            if (totalDiscount >= maxDiscount) {
                totalDiscount = maxDiscount;
            }
            console.log(totalMembershipDiscount, totalYearDiscount);

            var mainTotalAmount = (yearlyFee * totalMember * totalYear);

            var monthlyFee = parseFloat(yearlyFee / 12);
            var monthlyFeeDiscount = parseFloat((((yearlyFee / 12) * totalDiscount) / 100)).toFixed(2);
            var totalDiscountAmount = ((mainTotalAmount * totalDiscount) / 100).toFixed(2);
            if (totalDiscount == 0) {
                totalDiscountAmount = 0;
                monthlyFeeDiscount = parseFloat(((yearlyFee - totalDiscountAmount) / 12)).toFixed(2);
            }
            monthlyFee = (monthlyFee - monthlyFeeDiscount).toFixed(2);
            var subTotalAmount = (mainTotalAmount - totalDiscountAmount).toFixed(2);

        } else {
            totalMember = (totalMember != undefined && totalMember != 0) ? totalMember : '--';
            totalYear = (totalYear != undefined && totalYear != 0) ? totalYear : '--';
            totalDiscount = '--';
            monthlyFee = '00.00';
            totalDiscountAmount = '00.00';
            subTotalAmount = '00.00';
        }
        $('#tableTotalMember').html(totalMember);
        $('#tableTotalYear').html(totalYear);
        $('#tableTotalDiscount').html(totalDiscount + ' %');
        $('#tableMonthlyFee').html('$ ' + monthlyFee);
        $('#tableTotalSaving').html('$ ' + totalDiscountAmount);
        $('#tableSubTotal').html('$ ' + subTotalAmount);
    }


    /** Click to Redirect */
    $(document).on('click', '#ContinueWithPaymentButton', function() {
        var membershipUser = $('#membership_user').val();
        var membershipYear = $('#membership_year').val();
        var membershipId = $('#membership_id').val();

        if (membershipId != undefined && membershipId != '') {
            var attributes = '?id=' + membershipId;
            window.location.href = "{{getURL('quote/membership-continue-payment')}}" + attributes;
        } else if (membershipUser != undefined && membershipUser != '' && membershipYear != undefined && membershipYear != '') {
            var attributes = '?user=' + membershipUser + '&year=' + membershipYear;
            window.location.href = "{{getURL('quote/membership-continue-payment')}}" + attributes;
        } else {
            alert('Please select proper user or year required fields.');
        }
    });
    /** Click to Redirect */

    $(document).ready(function() {
        let searchParams = new URLSearchParams(window.location.search);
        
        if (searchParams.has('user') && searchParams.has('year')) {
            var totalMember = searchParams.get('user');
            var totalYear = searchParams.get('year');
            $('#membership_user').val(totalMember);
            $('#membership_year').val(totalYear);

            onChangeEventForDiscount(totalMember, totalYear);
        }

        /** When data already exists */
        @if(isset($membership->id) && !empty($membership->id))
        $('#membership_user').val({{$membership->member}});
        $('#membership_year').val({{$membership->year}});
        onChangeEventForDiscount({{$membership->member}}, {{$membership->year}});
        @endif
        /** When data already exists */
    });

</script>
@endpush