@extends("website.layouts.layout")
@section('title', "My Account")
@section("body")
<!--Banner-->

<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="" />
</section>

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('homepage') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Account Security</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content" id="view-window">
                @if(isset($clientUpdate['success']['data']))
                                <div class="main-content-wrapper my-profile">
                    <div class="profile-info d-flex flex-column">
                        <div class="profile-info-header d-flex justify-content-between align-items-center">
                            <h3 class="font-size-24">Profile Info</h3>
                            <!-- <a href="my-profile-edit.html"> -->
                            <a onclick="showEditWindow(); return false;">
                                <img src="{{ asset('webAssets/assets/images/edit-icon.svg') }}" alt="edit-icon">
                            </a>
                        </div>
                        <div class="profile-icon user-profile-icon">
                            <img src="{{ $client['profile'] }}" alt="profile-img">
                        </div>
                        <div class="profile-name">
                            <h3 class="font-size-14">Name</h3>
                            <p class="name">{{ $client['first_name'] }} {{ $client['last_name'] }}</p>
                        </div>
                        <div class="profile-email">
                            <h3 class="font-size-14">Postal Code</h3>
                            <p class="name">{{ $client['postal_code'] }}</p>
                        </div>
                        <div class="profile-number">
                            <h3 class="font-size-14">Email</h3>
                            <p class="name">{{ $client['email'] }}</p>
                        </div>
                        <div class="profile-code">
                            <h3 class="font-size-14">Phone Number</h3>
                            <p class="name">{{ $client['phone'] }}</p>
                        </div>
                        <div class="profile-country">
                            <h3 class="font-size-14">Country</h3>
                            <p class="name">{{ $client['country'] }}</p>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <div class="main-content" id="edit-window" style="display: none;">
            <!-- <div class="main-content" id="edit-window"> -->
                <div class="main-content-wrapper my-profile">
                    <div class="profile-info d-flex flex-column">
                        <div class="edit-profile-form ">
                            <form class="d-flex flex-column forms" id="profileUpdateForm" enctype="multipart/form-data">
                                <div class="profile-upload-img">
                            <span class="file-upload-img user-profile-icon"> 
                                <input class="form-control" type="file" id="formFile" name="profile_image" accept="image/*" onchange="previewImage(event)">
                                <img id="previewImage" src="{{ $client['profile'] }}" alt="user" />
                            </span>
                        </div>
                        @csrf
                                <div class="edit-form-field d-flex">
                                    <div class="edit-form-field d-flex flex-column">
                                        <h3 class="font-size-14">First Name</h3>
                                        <input type="text" name="first_name" value="{{ $client['first_name'] }}">
                                    </div>
                                    <div class="edit-form-field d-flex flex-column">
                                        <h3 class="font-size-14">Last Name</h3>
                                        <input type="text" name="last_name" value="{{ $client['last_name'] }}">
                                    </div>
                                </div>
                                <div class="edit-form-field d-flex flex-column">
                                    <h3 class="font-size-14">Email</h3>
                                    <input readonly id="email" type="email" name="email" value="{{ $client['email'] }}">
                                </div>
                                <div class="edit-form-field d-flex flex-column">
                                    <h3 class="font-size-14">Phone Number</h3>
                                    <input type="text" name="phone" value="{{ $client['phone'] }}">
                                </div>
                                <div class="edit-form-field d-flex flex-column">
                                    <h3 class="font-size-14">Postal Code</h3>
                                    <input type="text" name="postal" value="{{ $client['postal_code'] }}">
                                </div>
                     
                                <div class="edit-form-field d-flex flex-column">
                                    <h3 class="font-size-14">Country</h3>
                                    <input type="text" name="country" value="{{ $client['country'] }}">
                                </div>
                                <div class="profile-action-btn d-flex">
                                    <button type="submit" class="btn btn-primary handleSubmit w-100" id="update_profile_btn">Save Details</button>
                                    <button type="submit" class="btn btn-primary handleSubmit w-100" disabled="disabled" id="update_profile_btn_processing" style="display:none"><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>Processing</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

<script>
    function showEditWindow() {
        // Hide the view-window
        document.getElementById('view-window').style.display = 'none';

        // Show the edit-window
        document.getElementById('edit-window').style.display = 'block';
    }

    function showViewWindow() {
        // Show the view-window
        document.getElementById('view-window').style.display = 'block';

        // Hide the edit-window
        document.getElementById('edit-window').style.display = 'none';
    }
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        /* 
        // OTP modal reset commented out
        $('#verifyOTPModal').on('hidden.bs.modal', function () {
            resetOTPInputFields();
        });

        function getOTP() {
            var otp = '';
            $('.otp-input-block input').each(function() {
                otp += $(this).val();
            });
            return otp;
        }
        */
        
        $('#profileUpdateForm').on('submit', function(event) {
            event.preventDefault(); 
            var email = $("#email").val();
            if (!email) {
                console.error('email not found');
                return;
            }
            $("#update_profile_btn_processing").show();
            $("#update_profile_btn").hide();

            /* 
            // OTP sending commented out
            $.ajax({
                url: '{{ route('client.profile.resendOtpClient') }}',
                type: 'POST',
                data: {
                        email: email,
                    },
                success: function(response) {
                    toastr.success(response.success.message);
                    $('#verifyOTPModal').modal('show');
                },
                error: function(xhr) {
                    console.log('Error: ' + xhr.responseJSON.error);
                    toastr.error('Error: ' + xhr.responseJSON.error);
                    $("#update_profile_btn_processing").hide();
                    $("#update_profile_btn").show();
                }
            });
            */
            
            // Directly call handleProfileUpdate instead of going through OTP
            handleProfileUpdate();
        });

        /*
        // OTP verification commented out
        $('#verifyOTPModal .btn-primary').off('click').on('click', function() {
        var fData = new FormData();
        fData.append('number', $('#number').text());
        fData.append('otp', getOTP());

        $.ajax({
            url: "{{ route('client.validateOTP') }}",
            method: 'POST',
            data: fData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    if(response.success.status == 200){
                        // START 
                        handleProfileUpdate();
                        // END 
                    }
                    else if(response.success.status == 401){
                        toastr.error('Invalid OTP entered');
                    }
                } else if (response.error) {
                }
            },
            error: function(xhr, status, error) {
                toastr.error('There was some problem while verifying OTP');
            }
        });
    });
    */
    });

    

    function handleProfileUpdate(){
        var form = $('#profileUpdateForm')[0];
        var formData = new FormData(form);
        
        // Check if an image file was selected
        var fileInput = $('#formFile')[0];
        if (fileInput.files.length > 0) {
            // Make sure the file is appended with the correct name
            // The server might be expecting "profile_image" instead of the default name
            formData.delete('profile_image'); // Remove any previous entry
            formData.append('profile_image', fileInput.files[0]);
            
            console.log('File selected:', fileInput.files[0].name);
        } else {
            console.log('No file selected');
        }
        
        // Log all form data for debugging
        for (var pair of formData.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }
        
        $.ajax({
            url: '/my-profile-update',
            method: 'POST',
            data: formData,
            contentType: false, // Important for file uploads
            processData: false, // Important for file uploads
            cache: false, // Prevent caching
            success: function(response) {
                console.log('Success response:', response);
                if(response.status == 200){
                    // Reload the view windows with updated data
                    $('#view-window').load(window.location.href + ' #view-window > * ');
                    $('#edit-window').load(window.location.href + ' #edit-window > * ');
                    showViewWindow();
                    //$('#verifyOTPModal').modal('hide'); // Commented out OTP modal hide
                    toastr.success(response.success.message);
                    //resetOTPInputFields(); // Commented out OTP field reset
                }
                else if(response.status == 401){
                    toastr.error(response.error.message);
                }
                // Reset the button states regardless of response
                $("#update_profile_btn_processing").hide();
                $("#update_profile_btn").show();
            },
            error: function(xhr, status, error) {
                console.error('Error details:', xhr.responseText);
                toastr.error('There was a problem updating your profile. Please try again.');
                // Reset the button states on error
                $("#update_profile_btn_processing").hide();
                $("#update_profile_btn").show();
            }
        });
    }
    
    /*
    // OTP reset function commented out
    function resetOTPInputFields() {
        $('.otp-input-block input').val('');
    }
    */

    function previewImage(event) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var output = document.getElementById('previewImage');
                output.src = e.target.result;
                console.log("Image preview updated");
            };
            reader.onerror = function(e) {
                console.error("Error reading file:", e);
            };
            reader.readAsDataURL(event.target.files[0]);
        } else {
            console.log("No file selected or file selection canceled");
        }
    }

    /*
    // Event listener for OTP modal close commented out
    document.addEventListener('DOMContentLoaded', function() {
        var closeButton = document.querySelector('#verifyOTPModal .btn-close');
        closeButton.addEventListener('click', function() {
            $("#update_profile_btn_processing").hide();
            $("#update_profile_btn").show();
        });
    });
    */
</script>


@section('footerItems')
@endsection