@extends('layouts.member-login')
@section('title', 'Account Settings')
@section('page_title', 'Account Settings')

@section('page_level_css')
<link href="{{ asset('assets/vendors/general/select2/dist/css/select2.css') }}" rel="stylesheet" type="text/css" />
<style>
    .delete_button_center {
        display: flex;
        align-items: center;
    }

    .font-15 {
        font-size: 15px;
    }

    .account-email {
        font-size: 15px;
        font-weight: 500;
    }
</style>

@section('content')
@php
$textLength = 250;
@endphp

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" 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">

                @include('member.include.user-info-box')

                <div class="mt-4">
                    <div class="my-profile-cms-content account-setting-page">
                        <form action="#" method="POST" id="myOwnProfile">
                            @csrf
                            <div class="row">


                                @include('member.include.2026-pn')

                                
                                <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12">
                                    <div class="grey-bg-wrap">
                                        <div class="post-right-wrapper">
                                            <div class="title-wrapper mb-4">
                                                <h2 class="secondary-title text-capitalize text-white mb-0">Account Settings</h2>
                                            </div>

                                            <div class="main-box-white custom-box AllEmailPassword">
                                                <div class="author-accordian ">
                                                    <div class="accordion" id="accordionExample1">
                                                        <div class="card">
                                                            <div class="card-header position-relative" id="headingOne">
                                                                <h2 class="mb-0">
                                                                    <button class="btn-user w-100 position-relative collapsed" type="button" data-toggle="collapse" data-target="#collapseEmail" aria-expanded="false" aria-controls="collapseEmail" style="font-size: 18px;">
                                                                        Email Addresses
                                                                    </button>
                                                                </h2>
                                                            </div>
                                                            <div id="collapseEmail" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample1" style="padding-left:20px">
                                                                <div class="card-body mb-4">
                                                                    <div class="row">
                                                                        <div class="col-md-5">
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <p><b>Primary Email</b></p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-md-5">
                                                                            <p class="account-email">{{ auth()->user()->email }}</p>
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <div class="form-check d-flex align-items-center ml-4">
                                                                                <input type="radio" id="WishlistPublic" name="make_primary" value="{{ auth()->user()->email }}" checked>
                                                                                <label for="WishlistPublic"></label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @if(!empty($emails))
                                                                    @foreach ($emails as $e)
                                                                    <div class="row mt-2">
                                                                        <div class="col-md-5">
                                                                            <p class="account-email">{{ $e->email }}</p>
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <div class="form-check d-flex align-items-center ml-4">
                                                                                <input type="radio" id="WishlistPublic" name="make_primary" value="{{ $e->email }}" data-verify="{{ $e->verify }}">
                                                                                <label for="WishlistPublic"></label>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-3">
                                                                            @if($e->verify == 0)
                                                                            <a class="text-decoration-underline account-email" onclick="resendVerificationEmail('{{ $e->email }}');" style="color: #1f4080;
                                                                       border-width: 2px;
                                                                       border-color: #1f4080;
                                                                       font-weight: bold;cursor: pointer;">Resend Verification Email</a>

                                                                            @endif
                                                                        </div>
                                                                        <div class="col-md-2">
                                                                            <a class="text-decoration-underline account-email" onclick="removeEmail('{{ $e->email }}');" style="color: #1f4080;
                                                                       border-width: 2px;
                                                                       border-color: #1f4080;
                                                                       font-weight: bold;cursor: pointer;">Remove Email</a>
                                                                        </div>
                                                                    </div>
                                                                    @endforeach
                                                                    @endif
                                                                    <div class="row mt-2">
                                                                        <div class="col-md-3">
                                                                            <a class="text-decoration-underline" onclick="showEmailForm();" style="color: #1f4080;
                                                                       border-width: 2px;
                                                                       border-color: #1f4080;
                                                                       font-weight: bold;cursor: pointer;">Add Email Address</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="author-accordian">
                                                    <div class="accordion" id="accordionExample2">
                                                        <div class="card">
                                                            <div class="card-header position-relative" id="headingOne">
                                                                <h2 class="mb-0">
                                                                    <button class="btn-user w-100 position-relative collapsed" type="button" onclick="showChangePasswordForm();" aria-expanded="false" aria-controls="collapseChangePassword" style="font-size: 18px;">
                                                                        Change Password
                                                                    </button>
                                                                </h2>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-danger ml-4" type="button" style="margin-top: 10%;border-radius:8px" onclick="deleteAccountStep1()">Delete Account</button>
                                            </div>

                                            <div class="bg-white">
                                                @include('member.account-settings.email-update')
                                            </div>
                                            <div class="bg-white">
                                                @include('member.account-settings.change-password')
                                            </div>
                                            <div class="bg-white">
                                                @include('member.account-settings.delete-account')
                                            </div>

                                        </div>
                                    </div>
                                </div>

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


<div class="modal fade" id="showDeleteEmailModel" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content dark-color">
            <div class="modal-header" style="background-color: #004d95">
                <h5 class="modal-title" id="modalDeleteHerderTitle">Remove Email</h5>
                <button type="button" class="close cancelDeleteTitle" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body gray-background">
                <div class="kt-section__body">
                    <form method="POST" action="{{ url('member-remove-email') }}">
                        @csrf
                        <input type="hidden" name="email" id="deleteEmail" value="" />
                        <div class="text-center max-width-560">
                            <p style="font-weight: 400">Are you sure want to remove</p>
                            <p id="memberEmail" style="font-weight: 700"></p>
                            <p style="font-weight: 400">from your account?</p>
                        </div>
                        <div class="btn-group d-flex text-right mt-4 mb-4 pull-right">
                            <div class="button mr-2 ml-2">
                                <button type="button" class="btn disabled btn-wide" style="border-radius:8px;font-weight: bold;" data-dismiss="modal" aria-label="Close">Cancel</button>
                            </div>
                            <div class="button mr-2 ml-2">
                                <button type="submit" class="btn primary-btn btn-wide">Remove Email </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="showVerificationEmailModel" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content dark-color">
            <div class="modal-header" style="background-color: #004d95">
                <h5 class="modal-title" id="modalDeleteHerderTitle">Unverified Email</h5>
                <button type="button" class="close cancelDeleteTitle" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body gray-background">
                <div class="kt-section__body">
                    <div class="text-center max-width-560">
                        <p style="font-weight: 400">An email must be verified in order to set it as your primary email. Click the button below to resend the verification email.</p>
                        <form method="POST" action="{{ url('member-resend-email') }}">
                            @csrf
                            <input type="hidden" name="email" id="resendEmail" value="" />
                            <button type="submit" class="btn primary-btn btn-wide"><i class="fa fa-envelope"></i> Resend Verification Email</button>
                        </form>
                    </div>
                    <div class="btn-group d-flex text-right mt-4 mb-4 pull-right">
                        <div class="button mr-2 ml-2">
                            <button type="button" class="btn disabled btn-wide" style="border-radius:8px;font-weight: bold;" data-dismiss="modal" aria-label="Close">Cancel</button>
                        </div>
                        <div class="button mr-2 ml-2">
                            <button type="button" class="btn primary-btn btn-wide" data-dismiss="modal" aria-label="Close">OK </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<form method="POST" action="{{ url('member-primary-email') }}" id="makePrimaryEmailForm">
    @csrf
    <input type="hidden" name="email" id="makePrimaryEmail" value="" />
</form>

@include('member.include.tooltip-modal-box')

@endsection

@section('page_level_js')
<script src="//cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<script src="{{ asset('assets/vendors/general/select2/dist/js/select2.full.js') }}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/js/vendors/bootstrap-datepicker.init.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/ion-rangeslider/js/ion.rangeSlider.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/nouislider/distribute/nouislider.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/owl.carousel/dist/owl.carousel.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script type="text/javascript">
    // Hide the extra content initially
    $('.read-more-content').addClass('hide');
    $('.read-more-show, .read-more-hide').removeClass('hide');

    $(function() {
        $('.password_error').html('');
        $('.password_incorrect').html('');

        $('input[name=make_primary]').click(function() {
            var email = $('input[name=make_primary]:checked').val();
            if ($(this).data('verify') == 0) {
                $('#resendEmail').val(email);
                $('#showVerificationEmailModel').modal('show')
            } else {
                $('#makePrimaryEmail').val(email);
                $('#makePrimaryEmailForm')[0].submit();
            }
        });
    });


    // Set up the toggle effect:
    $(document).on('click', '.read-more-show', function(e) {
        $(this).next('.read-more-content').removeClass('hide');
        $(this).addClass('hide');
        e.preventDefault();
    });

    function allCases(string) {

        var flag = true;
        if (string.length < 8) {
            $('.character8Letters').removeClass('text-success fa-check-circle');
            $('.character8Letters').addClass('text-danger fa-times-circle');
            flag = false;
        } else {
            $('.character8Letters').removeClass('text-danger fa-times-circle');
            $('.character8Letters').addClass('text-success fa-check-circle');
        }
        if ((string.match(/[A-Z]/g) || []).length == 0) {
            $('.character1Capital').removeClass('text-success fa-check-circle');
            $('.character1Capital').addClass('text-danger fa-times-circle');
            flag = false;
        } else {
            $('.character1Capital').addClass('text-success fa-check-circle');
            $('.character1Capital').removeClass('text-danger fa-times-circle');
        }
        if ((string.match(/[0-9]/g) || []).length <= 1) {
            $('.character2Digits').addClass('text-danger fa-times-circle');
            $('.character2Digits').removeClass('text-success fa-check-circle');
            flag = false;
        } else {
            $('.character2Digits').removeClass('text-danger fa-times-circle');
            $('.character2Digits').addClass('text-success fa-check-circle');
        }

        if (flag) {
            $('#saveNewPasswordButton').removeAttr('disabled');
        }
        return flag;
    }

    function removeEmail(email) {
        $('#memberEmail').html(email);
        $('#deleteEmail').val(email);
        $('#showDeleteEmailModel').modal('show')
    }

    function resendVerificationEmail(email) {
        $('#resendEmail').val(email);
        $('#showVerificationEmailModel').modal('show')
    }

    function showEmailForm() {
        $('.emailPasswordForm').show();
        $('.emailVerifyMessage').hide();
        $('.emailForm').show();
        $('.AllEmailPassword').hide();
    }

    function emailUpdate() {

        $('.email_password_error').html('');
        $('.labpair_password_error').html('');

        var new_email = $('input[name=new_email]').val();
        var re_enter_new_email = $('input[name=re_enter_new_email]').val();
        var labpair_password = $('input[name=labpair_password]').val();

        var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (testEmail.test(new_email) == false) {
            $('.email_password_error').html('Please Enter Valid Email Address.');
        } else if (new_email.trim() === '{{ \Illuminate\Support\Facades\Auth::user()->email }}') {
            $('.email_password_error').html('That email is already associated with LabPair account.');
        } else if (new_email.trim() != re_enter_new_email.trim()) {
            $('.email_password_error').html('Email addresses do not match.');
        } else {
            $.ajax({
                type: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ getMURL('update-email-address') }}",
                data: {
                    new_email: new_email,
                    labpair_password: labpair_password
                },
                dataType: 'json',
                success: function(data) {
                    if (data.status == 1) {
                        $('.emailVerifyMessage').show();
                        $('.emailForm').hide();
                        $('input[name=new_email]').val('');
                        $('input[name=re_enter_new_email]').val('');
                        $('input[name=labpair_password]').val('');
                        $('.emailAddressText').html(new_email);
                    } else if (data.status == 2) {
                        $('.labpair_password_error').html(data.message);
                    }
                }
            });
        }
    }

    function backToAll() {
        $('.AllEmailPassword').show();
        $('.emailPasswordForm').hide();
        $('.deleteAccountForm').hide();
        $('.changePasswordForm').hide();
    }

    function showChangePasswordForm() {
        $('.changePasswordForm').show();
        $('.AllEmailPassword').hide();
    }

    function checkPasswordText(this_value) {
        allCases(this_value);
    }

    function passwordChangeFormSubmit() {
        $('.password_error').html('');
        $('.password_incorrect').html('');
        var current_password = $('input[name=current_password]').val();
        var new_password = $('input[name=new_password]').val();
        var re_enter_password = $('input[name=re_enter_password]').val();
        if (allCases(new_password) == false) {
            $('.password_error').html('Password not met conditions.');
        } else if (new_password.length == 0) {

            $('.password_error').html('Password not met conditions.');
        } else if (new_password != re_enter_password) {
            $('.password_error').html('Password do not match.');
        } else {
            $.ajax({
                type: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ getMURL('update-password') }}",
                data: {
                    current_password: current_password,
                    new_password: new_password
                },
                dataType: 'json',
                success: function(data) {
                    if (data.status == 1) {
                        $('.changePasswordSuccess').show();
                        $('.changePasswordForm').hide();
                        $('input[name=current_password]').val('');
                        $('input[name=new_password]').val('');
                        $('input[name=re_enter_password]').val('');
                    } else if (data.status == 3) {
                        $('.password_incorrect').html(data.message);
                    } else if (data.status == 2) {
                        $('.password_error').html(data.message);
                    }
                }
            });
        }
    }

    function deleteAccountStep1() {
        $('.deleteAccountForm,.emailVerifyMessage').show();
        $('.AllEmailPassword').hide();
    }

    function submitDeleteAccount() {
        $.ajax({
            type: 'post',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ getMURL('ajax/delete-account') }}",
            // dataType: 'json',
            success: function(data) {
                console.log(data);
                if (data.status == 1) {
                    window.location.href = "{{ getMURL('login') }}";
                }
            }
        });
    }

    function redirection() {
        window.location = "{{ getMURL('login') }}";
    }
</script>
@endpush