@extends('layouts.v2.frontend-user-backend')
@section('title', '| Edit Profile')
@section('content')
<div class="container">
    <div class="righ-multiple-area">
        <div class="multiple-form review-detailss payment-screen-section delivery-details">
            <h4>Profile</h4>
            <p>
                {{-- This information will be displayed publicly to consultants on your brand page. --}}
            </p>
                @if(isset($profile_show_data_error) || $profile_show_data_error = Session::get('profile_show_data_error'))
                <div class="alert alert-danger">
                    {{ $profile_show_data_error }}
                </div>
                @endif
            
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif
                @if(!isset($profile_edit_error))
                    <div class="form mt-4">
                        <div class="row">
                            <div class="col-12">
                                <form method="POST" id="edit_profile_form" action="{{ route('save-profileupdates') }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="full_name" class="form-label">Full Name</label>
                                                <input id="full_name" type="text"   class=" disabled-input" name="dob" placeholder="Ex.- John Doe" value="{{ old('dob', $user->name ?? '') }}" disabled>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">  
                                            <div class="form-group">   
                                                <label for="dob" class="form-label">Date of  Birth</label>
                                                <input id="dob" type="text"   class=" disabled-input" name="dob" placeholder="01-21-1984" value="{{ old('dob', $user->date_of_birth ?? '') }}" disabled>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">  
                                            <div class="form-group">
                                                <label for="email" class="form-label">Email Address</label>
                                                <input id="email" type="email"   name="email" placeholder="lloyd.montgomery@gmail.com" value="{{ old('email', $user->email ?? '') }}">
                                                @error('email')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                                <span class="invalid-feedback invalid-email d-block" role="alert">
                                                    <strong></strong>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">  
                                            <div class="form-group">
                                                <label for="phone" class="form-label">Phone Number</label>                                         
                                                <div class="row">
                
                                                    <div class="col-md-4 col-4">
                                                        <div class="d-flex gap-2">
                                                        <span class="input-group-text" style="height: 31.9px!important;">+</span>
                                                        <input style="text-align: center; height: 31.9px!important;" id="phone_country_code" type="text"  class=" modified-input number_validation @error('phone_country_code') is-invalid @enderror" name="phone_country_code" value="{{ isset($user->country_code) ? $user->country_code : '1' }}"  placeholder="CC" maxlength="10"  required readonly>
                                                        </div>
                                                    </div>
                            
                                                    <div class="col-md-8 col-8">
                                                        <input id="phone_number" type="text" oninput="formatPhoneNumber()" class=" modified-input number_validation @error('phone_number') is-invalid @enderror" name="phone_number"  value="{{ isset($user->phone) ? $user->phone : '' }}"  placeholder="Phone Number" maxlength="12"  required>
                                                    </div>
                                                    <div class="col-md-12">
                                                        @error('phone_country_code')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                        @error('phone_number')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                        <span class="invalid-feedback invalid-phone d-block" role="alert">
                                                            <strong></strong>
                                                        </span>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12"> 
                                            <div class="form-group">
                                                    <label for="street" class="form-label">Address Line 1</label>
                                                    <input id="street" type="text"    name="street" placeholder="Street address" value="{{ old('street', $user->street ?? '') }}">
                                                    @error('street')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-12"> 
                                            <div class="form-group">
                                                    <label for="street" class="form-label">Address Line 2</label>
                                                    <input id="street_2" type="text"    name="street_2" placeholder="Apt., suite, unit number, etc. (optional)" value="{{ old('street_2', $user->street_2 ?? '') }}">
                                                    @error('street_2')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                    @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-4"> 
                                            <div class="form-group">
                                                <label for="city" class="form-label">City</label>
                                                <input id="city" type="text"    name="city" placeholder="Enter your city" value="{{ old('city', $user->city ?? '') }}">
                                                @error('city')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-4"> 
                                            <div class="form-group">
                                                <label for="state" class="form-label">State</label>
                                                <input id="state" type="text"    name="state" placeholder="Enter your state" value="{{ old('state', $user->state ?? '') }}">
                                                <input id="state_abbreviation" type="hidden"  name="state_abbreviation" placeholder="State Abbreviation" value="{{ old('state_abbreviation', $user->state_abbreviation ?? '') }}">
                                                @error('state')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-4"> 
                                            <div class="form-group">
                                                <label for="zip" class="form-label">ZIP</label>
                                                <input id="zip" type="text"   name="zip" placeholder="Enter your Zip Code" value="{{ old('zip', $user->zip ?? '') }}" maxlength="5">  {{--Here number validtionis checking by public\fetch_complete_address_by_zipcode.js .Fror Future use number_validation class and validateInputNumber() to valid that user can enter only number. --}}
                                                @error('zip')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                                <span class="invalid-feedback invalid-zipcode d-block" role="alert">
                                                    <strong></strong>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-lg-12"> 
                                            <div class="form-group">
                                                <label for="country" class="form-label">Country</label>
                                                <!-- Display  complete country name-->
                                                <input id="country" type="text"  name="country" placeholder="Country" value="{{ !empty(old('country', $user->country)) ? old('country', $user->country) : 'United States' }}">
                                                <!-- Hidden country abbreviation (short name)-->
                                                <input id="country_abbreviation" type="hidden"  name="country_abbreviation" placeholder="State Abbreviation" value="{{ !empty(old('country_abbreviation', $user->country_abbreviation)) ? old('country_abbreviation', $user->country_abbreviation) : 'US' }}">
                                                @error('country')
                                                    <span class="invalid-feedback d-block" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div id="buttonsection" class="submit-button-multiple">
                                                <button onclick="window.location.href = '{{ route('profile') }}'" type="button">Cancel</button>
                                                <button type="button" id="update_profile" class="submit-btn">Update Profile</button>        
                                            </div>
                                        </div>
                                    
                                    </div>

                                </form>

                                @if(CmsHelper::getSetting('user_profile_edit_requests') == 1)
                                <div class="row mt-5">
                                    <div class="col-md-12">
                                        <p class="fw-bold opacity-100 d-block">*To modify name and date of birth please <a class="profile_edit_request_link" onclick="submitProfileUpdateForm()">Click Here</a> or reach out to us at (833) 723-3945.</p>
                                    </div>
                                </div>
                                <form id="profile-update-form" action="{{ route('user-profile-edit-request') }}" method="POST" style="display: none;">
                                    @csrf
                                </form>
                                @endif



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

<div class="row d-none">
    <div class="col-md-8">
        <div class="profile-view">
            <div class="profile-pic">
                @if(isset(auth()->user()->profile_pic))
                    <img src="{{ url('images/'.auth()->user()->profile_pic) }}"/>
                @else
                    <img src="{{ url('frontend/images/person-dark.png') }}"/>
                @endif
            </div>
            <div class="profile-pic-text d-flex justify-content-end align-items-center">
                <div class="profile-name">{{ $user->name }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4 d-flex justify-content-end align-items-center">
        <button type="button" class="btn btn-dark upload-btn" id="photo-upload-btn" data-target="photo-save-holder">Upload New Photo</button>
    </div>
</div>

<!-- START - Pop up for email change request -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mi-modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            
            <div class="modal-body text-center" id="editSubmitDisclaimerMessageModalBody">
                <div class="text-center mb-4 mt-4">
                    <h4 class="dislaimer-header"> <b> Warning </b></h4>
                </div>

                <!-- Disclaimer message content -->
                <p class="dislaimer-message text-center"><strong>It seems you want to update your email address.<br/> Your new email address will go under verification process. <br/>You can use your old email address for the login purpose until your new email gets verified. <br/>Please click on "Agree & Continue" if you want to proceed.</strong></p>

                <div class="submit-button-multiple text-center mt-4 mb-4">
                    <button type="button" class="payment-back-button" id="modal-btn-no" data-bs-dismiss="modal" >Cancel</button>
                    <button type="button" class="payment-total-price-button" id="modal-btn-si">Agree & Continue</button>
                </div>
            </div>
            
        </div>
    </div>
</div>
<!-- END - Pop up for email change request -->

<!-- START - Pop up for Mobile Number change request -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="mobile-number-request-modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            
            <div class="modal-body text-center" id="editSubmitDisclaimerMessageModalBody">
                <div class="text-center mb-4 mt-4">
                    <h4 class="dislaimer-header"> <b> Warning </b></h4>
                </div>

                <!-- Disclaimer message content -->
                <p class="dislaimer-message text-center"><strong>It seems you want to update your mobile number.<br/> Your new mobile number  immediately will receive verification code to verify it. <br/>After verifying that number, it will be updated on your profile. <br/>Please click on "Agree & Continue" if you want to proceed.</strong></p>

                <div class="submit-button-multiple text-center mt-4 mb-4">
                    <button type="button" class="payment-back-button" id="modal-btn-no-mobile-number-update" data-bs-dismiss="modal" >Cancel</button>
                    <button type="button" class="payment-total-price-button" id="modal-btn-mobile-number-update">Agree & Continue</button>
                </div>
            </div>
            
        </div>
    </div>
</div>
<!-- END - Pop up for Mobile Number change request -->

<!-- START - Pop up for Email and Mobile Number change request Together-->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="email-and-mobile-number-request-modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            
            <div class="modal-body text-center" id="editSubmitDisclaimerMessageModalBody">
                <div class="text-center mb-4 mt-4">
                    <h4 class="dislaimer-header"> <b> Warning </b></h4>
                </div>

                <!-- Disclaimer message content -->

                <p class="dislaimer-message text-center"><strong>It seems you want to update your email address and mobile number.<br/> Your new email address will go under verification process. <br/>You can use your old email address for the login purpose until your new email gets verified. <br/> And  Your new mobile number immediately  will receive verification code to verify it. <br/>Mobile number verification is mandatory to access the portal. <br/>Please click on "Agree & Continue" if you want to proceed.</strong></p>

                <div class="submit-button-multiple text-center mt-4 mb-4">
                    <button type="button" class="payment-back-button" id="modal-btn-no-email-and-mobile-number-update" data-bs-dismiss="modal" >Cancel</button>
                    <button type="button" class="payment-total-price-button" id="modal-btn-email-and-mobile-number-update">Agree & Continue</button>
                </div>
            </div>
            
        </div>
    </div>
</div>
<!-- END - Pop up for Email and Mobile Number change request Together -->
@endif {{-- end of profile_edit_error --}}
@endsection
@section('page-js')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ url('frontend/assets/js/common.js') }}"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var uploadBtn = document.getElementById('photo-upload-btn');
    
        // Add event listener to the upload button
        uploadBtn.addEventListener('click', function() {
            // Get the data-target attribute value
            var targetId = this.getAttribute('data-target');
    
            // Find the corresponding photo-save section
            var photoSave = document.getElementById(targetId);
    
            // Check if there's an error for the photo input
            var photoError = document.querySelector('[name="photo"] + .invalid-feedback');
    
            // Toggle the visibility of the photo-save section if it exists
            if (photoSave) {
                // Check if there's a photo error and show the photo-save section accordingly
                if (photoError) {
                    photoSave.style.display = 'block';
                } else {
                    photoSave.style.display = photoSave.style.display === 'none' ? 'block' : 'none';
                }
            }
        });
    
        // Trigger button click event
        uploadBtn.click();
    });

    /*
    * Author: Vidhi Shah
    * Company: Birbals Inc.
    * Added date: 06 Apr 2024
    * Description: Added script which is used for implemetation of email change request and showing disclaimer
    */
    $(document).ready (function () {

        function validateEmail(email, errorSelector) {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email regex pattern

            // Clear previous validation messages
            $(errorSelector).text('');

            // Check if email is valid
            if (!emailPattern.test(email)) {
                $(errorSelector).text('Please enter a valid email address.');
                return false; // Invalid email
            }

            return true; // Valid email
        }

        $('#email').on('input', function () {
            const email = $(this).val().trim();

             // Clear previous validation messages
             $('.invalid-email').text('');
            
            // Call the reusable function
            //validateEmail(email, '.invalid-email');
        });

        $('#phone_number').on('input', function () {
            const phone = $(this).val().trim();

             // Clear previous validation messages
             $('.invalid-phone').text('');
        });

        // Real-time validation for ZIP code
        $('#zip').on('input', function () {
            // Clear previous validation messages
            $('.invalid-zipcode').text('');

            var zipInput = $(this).val().trim();
            var zipPattern = /^\d{5}$/; // Ensure exactly 5 digits

            if (!zipPattern.test(zipInput) && zipInput.length > 0) {
                // Show error only if input is invalid and not empty
                $('.invalid-zipcode').text('ZIP code must be exactly 5 digits.');
            }
        });

        var ifEmailSame = false;
        var ifMobileNumberSame = false;
        var ifEmailAlreadyExit = false;
        var ifPhoneNoAlreadyExit = false;
        $('#update_profile').on('click', function(e){
            e.preventDefault();


            // Clear previous validation messages
            $('.invalid-zipcode').text('');

            // ZIP code validation
            var zipInput = $('#zip').val().trim();
            var zipPattern = /^\d{5}$/; // Ensure exactly 5 digits
            if (!zipPattern.test(zipInput)) {
                $('.invalid-zipcode').text('ZIP code must be exactly 5 digits.');
                return; // Stop further validation if ZIP is invalid
            }

            // Call the reusable function
            const email = $('#email').val().trim();
            var email_validation = validateEmail(email, '.invalid-email');
           
            if(!email_validation){
                return;
            }

            const countryCode = $('#phone_country_code').val().trim();
            const phoneNumber = $('#phone_number').val().trim();

            

            var ifEmailSame = checkEmail();
            var ifMobileNumberSame = checkMobileNumber();
            var ifEmailAlreadyExit = checkEmailAlreadyExist();
            var ifPhoneNoAlreadyExit = checkPhoneNoAlreadyExist();
            if(ifEmailAlreadyExit){
                $('.invalid-email').text('Email ID already exists.');
                return; // Stop further validation if the email is a duplicate record
            }else if (!countryCode) {
                $('.invalid-phone').text('Country code is required.');
                return; // Stop further validation
            } else if (!phoneNumber) {
                $('.invalid-phone').text('Phone number is required.');
                return; // Stop further validation
            }else if (countryCode && phoneNumber.length < 12) {
                $('.invalid-phone').text('The phone number entered is invalid.');
                return; // Stop further validation
            }else if(ifPhoneNoAlreadyExit){
                $('.invalid-phone').text('Phone No. already exists.');
                return; // Stop further validation if the phone is a duplicate record
            }else if(ifEmailSame && ifMobileNumberSame){
                //if both are same means no change
                /* Submit form */
                $("#edit_profile_form").submit();
            }else if(!ifEmailSame && ifMobileNumberSame){
                //if mobile number is same but email id is change
                /* Show disclaimer */
                modalConfirm(function(confirm){
                    if(confirm){
                        //If agreed and continue
                        $("#edit_profile_form").submit();
                    }else{
                        //if cancelled
                        window.location.reload();
                    }
                });    
            }else if(!ifMobileNumberSame && ifEmailSame){
                //if mobile number is change but email id is same

                 /* Show disclaimer */
                 modalConfirmToUpdateMobileNumber(function(confirm){
                    if(confirm){
                        //If agreed and continue
                        $("#edit_profile_form").submit();
                    }else{
                        //if cancelled
                        window.location.reload();
                    }
                });    
            }else if(!ifMobileNumberSame && !ifEmailSame){
                //if mobile number and email both are change
                 /* Show disclaimer */
                 modalConfirmToUpdateEmailAndMobileNumberBothTogether(function(confirm){
                    if(confirm){
                        //If agreed and continue
                        $("#edit_profile_form").submit();
                    }else{
                        //if cancelled
                        window.location.reload();
                    }
                });    
            }
            
        })
    });    

    /**
     * Ajax call to check if email id already is exist
     */
    function checkEmailAlreadyExist(){
        var isEmailDuplicate = false;
        $.ajax({
            type: "POST",
            url: 'check-email-is-already-exist',
            data: {email: $("#email").val()},
            async: false,
            headers: {
                "Accept": "application/json",
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) { 
                isEmailDuplicate = data.success;
                
            }
        });
        return isEmailDuplicate;
    }

     /**
     * Ajax call to check if phone id already is exist
     */
    function checkPhoneNoAlreadyExist(){
        var isPhoneDuplicate = false;
        $.ajax({
            type: "POST",
            url: 'check-phone-is-already-exist',
            data: {phone: $("#phone_country_code").val()+' '+$("#phone_number").val()},
            async: false,
            headers: {
                "Accept": "application/json",
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) { 
                isPhoneDuplicate = data.success;
                
            }
        });
        return isPhoneDuplicate;
    }

    /* Ajax call whether for checking whether requested email is same or not */
    function checkEmail(){
        var isSame = false;
        $.ajax({
            type: "POST",
            url: 'check-email-is-same',
            data: {email: $("#email").val()},
            async: false,
            headers: {
                "Accept": "application/json",
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) { 
                isSame = data.success;
                
            }
        });
        return isSame;
    }
    /* Hide/Show modal after email change requested */
    var modalConfirm = function(callback){
        $("#mi-modal").modal('show');
        
        $("#modal-btn-si").on("click", function(){
            //alert("1");
            callback(true);
            $("#mi-modal").modal('hide');
        });
        
        $("#modal-btn-no").on("click", function(){
            //alert("2");
            callback(false);
            $("#mi-modal").modal('hide');
        });
        };

        
    /* Email change request feature: Ends here */


    /**
     * START - Mobile Numer Change request feature
     * Author: Gurupriya Solanki
     * Created Date : 07 June 2024
     * Update Date : 07 June 2024
     */

    //Ajax call whether for checking whether requested mobile number is same or not
    function checkMobileNumber(){
        var isSame = false;
        $.ajax({
            type: "POST",
            url: 'check-mobile-number-is-same',
            data: {phone_number: $("#phone_country_code").val()+' '+$("#phone_number").val()},
            async: false,
            headers: {
                "Accept": "application/json",
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (data) { 
                isSame = data.success;
                
            }
        });
        return isSame;
    }

    /* Hide/Show modal after email change requested */
    var modalConfirmToUpdateMobileNumber = function(callback){
        $("#mobile-number-request-modal").modal('show');
        
        $("#modal-btn-mobile-number-update").on("click", function(){
            //alert("1");
            callback(true);
            $("#mobile-number-request-modal").modal('hide');
        });
        
        $("#modal-btn-no-mobile-number-update").on("click", function(){
            //alert("2");
            callback(false);
            $("#mobile-number-request-modal").modal('hide');
        });
    };
    /**END - Mobile Numer Change request feature */

    /**START - If Email and Mobile Number both update request want to send
     * Author: Gurupriya Solanki
     * Created Date : 07 June 2024
     * Update Date : 07 June 2024
     */
    /* Hide/Show modal after email change requested */
    var modalConfirmToUpdateEmailAndMobileNumberBothTogether = function(callback){
        $("#email-and-mobile-number-request-modal").modal('show');
        
        $("#modal-btn-email-and-mobile-number-update").on("click", function(){
            //alert("1");
            callback(true);
            $("#email-and-mobile-number-request-modal").modal('hide');
        });
        
        $("#modal-btn-no-email-and-mobile-number-update").on("click", function(){
            //alert("2");
            callback(false);
            $("#email-and-mobile-number-request-modal").modal('hide');
        });
    };
    /**END - Mobile Numer Change request feature */


    </script>

    <!--
        Author : Gurupriya Solanki
        Description : Removed this function  from the View Profile page and give here for text "Contact admin". funcionlity was done by Theshan.
        Updated Date:2 May 2025
    -->
    <script>
        function submitProfileUpdateForm() {
            document.getElementById('profile-update-form').submit();
        }
    </script>

    <!---
    START - Fetch and show US address on input field on profile edit page by enterd Zipcode
    Author : Gurupriya Solanki
    Update Date : 3 May 2024
    -->
    @if(request()->routeIs('profile-update'))
    <script src="{{ url('fetch_complete_address_by_zipcode.js') }}"></script>
    @endif
    <!--END -  Fetch and show US address on input field on profile edit page by enterd Zipcode-->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#phone_country_code').on('input', function(){
                this.value = this.value.replace(/[^\d]/g, ''); // Allow only digits
            });
        });
    </script>
@endsection