{{--
|--------------------------------------------------------------------------
| user-profile is common Component (Can be shown in any screen)
|--------------------------------------------------------------------------
| you can show this component in any screen by referring to the following
| snippet:
|-----------
|
| @component('components.user-profile', [])|
| @endcomponent
|
|--------------------------------------------------------------------------
| NOTE: This component requires
|       1. resources\assets\js\blade-components\user_profile.js
|--------------------------------------------------------------------------
--}}

<style>
    body {
        background-color: #f8f9fa;
        font-family: Arial, sans-serif;
    }

    .profile-container {
        background: #ffffff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 20px;
        margin: 20px auto;
        max-width: 950px;
        width: 100%;
    }

    .profile-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .profile-header h2 {
        font-size: 1.75rem;
        color: #343a40;
    }

    .profile-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        /* Adjust spacing between rows */
    }

    .profile-item label {
        width: 200px;
        /* Adjust as per your preference for label width */
        font-weight: bold;
        /* Optional: Make labels stand out */
        /* text-align: right; */
        /* Align text to the right */
        margin-right: 10px;
        /* Add space between label and span */
    }

    .profile-item span {
        flex: 1;
        /* Ensures spans align well with the labels */
        text-align: left;
        /* Align text to the left */
    }

    .reset-password {
        text-align: center;
        margin-top: 20px;
    }

    .reset-password a {
        font-size: 0.875rem;
        text-decoration: none;
    }

    .edit-button {
        text-align: center;
        margin-top: 20px;
    }

 

    /* Mobile Responsiveness */
    @media (max-width: 576px) {
        .profile-header h2 {
            font-size: 1.5rem;
        }

        .profile-item label {
            font-size: 0.9rem;
        }

        .profile-item span {
            font-size: 0.9rem;
        }

        .reset-password a {
            font-size: 0.8rem;
        }
    }
</style>

<div class="profile-container">
    @if (Auth::guard('web')->check())
        <div class="profile-header">
            <h2>User Profile</h2>
        </div>
        <form method="POST" action="" id="user_profile_form">
            {{ csrf_field() }}
            <div class="profile-item">
                <label>Username:</label>
                <span id="pr_frm_username">{{ Auth::user()->email }}</span>
            </div>
            <div class="profile-item">
                <label>Name:</label>
                <span id="pr_frm_name">{{ Auth::user()->name }}</span>
            </div>
            <div class="profile-item">
                <label>Email:</label>
                <span id="pr_frm_email">{{ Auth::user()->email }}</span>
            </div>
            <div class="profile-item">
                <label>Country of Residence:</label>
                <span id="pr_frm_country">{{ Auth::user()->country_name }}</span>
            </div>
            <div class="profile-item">
                <label>Phone:</label>
                <span id="pr_frm_phone">{{ Auth::user()->phone }}</span>
            </div>
        </form>
        <div class="row">
            <div class="edit-button">
                <button class="btn btn-primary" onclick="toggleEditForm()">Edit Profile</button>
            </div>
            <div class="reset-password">
                <a href="{{ route('reset.password.request') . '?case=passwordResetRequest' }}"
                    class="btn btn-info">Reset Password</a>
            </div>
        </div>

        <!-- Edit Form -->
        <form method="POST" action="" id="edit_profile_form" style="display: none; margin-top: 20px;">
            {{ csrf_field() }}
            <div class="profile-item">
                <label for="edit_name">Name:</label>
                <input type="text" id="edit_name" name="name" class="form-control"
                    value="{{ Auth::user()->name }}">
            </div>
            <div class="profile-item">
                <label for="edit_email">Email:</label>
                <input type="email" readonly id="edit_email" name="email" class="form-control"
                    value="{{ Auth::user()->email }}">
            </div>
            <div class="profile-item">
                <label for="edit_country">Country of Residence:</label>
                {{-- <input type="text" id="edit_country" name="country_name" class="form-control"
                    value="{{ Auth::user()->country_name }}"> --}}
                    <select class="form-control" id="edit_country" name="country_id">
                        <option value="{{ Auth::user()->country_name }}">{{ Auth::user()->country_name }}</option>
                        @foreach (\App\Http\Controllers\PassportAPI\QuoteController::getCountries() as $country)
                            <option value="{{ $country['id'] }}" dial-code="{{ $country['dial_code'] }}"
                                country-code="{{ $country['country_code'] }}">{{ $country['name'] }}</option>
                        @endforeach
                    </select>
            </div>
            <div class="profile-item">
                <label for="edit_phone">Phone:</label>
                <input type="text" id="edit_phone" name="phone" class="form-control"
                    value="{{ Auth::user()->phone }}">
            </div>
            <div class="edit-button">
                <button type="submit" onclick="updateProfile
				()" class="btn btn-success">Save Changes</button>
                <button type="button" class="btn btn-secondary" onclick="toggleEditForm()">Cancel</button>
            </div>
        </form>
        <div id="message-container"></div>
    @else
        <div class="alert alert-danger text-center" role="alert">
            You are not authorized to see this page.
        </div>
    @endif
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    function toggleEditForm() {
        console.log('toggleEditForm triggered');
        const editForm = document.getElementById('edit_profile_form');
        const profileForm = document.getElementById('user_profile_form');
        console.log('Edit form display state:', editForm.style.display);
        console.log('Profile form display state:', profileForm.style.display);

        if (editForm.style.display === 'none') {
            console.log('Switching to edit form');
            editForm.style.display = 'block';
            profileForm.style.display = 'none';
        } else {
            console.log('Switching to profile form');
            editForm.style.display = 'none';
            profileForm.style.display = 'block';
        }
    }
</script>
<script>
    function updateProfile() {
        console.log('updateProfile triggered');
        const formData = new FormData(document.getElementById('edit_profile_form'));

        console.log('Form data collected:', {
            name: formData.get('name'),
            // email: formData.get('email'),
            country_name: formData.get('country_name'),
            phone: formData.get('phone'),
        });

        axios.post('/api/v1/patient-api/update-profile', {
                name: formData.get('name'),
                // email: formData.get('email'),
                country_name: formData.get('country_name'),
                phone: formData.get('phone'),
            }, {
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('p_u_a_b_t')
                },
            })
            .then(response => {
                console.log('Profile update successful:', response.data);
                showMessage('success', 'Profile updated successfully!');
                setTimeout(() => {
                    window.location.href = window.location.href;
                }, 2000);

            })
            .catch(error => {
                console.error('Error updating profile:', error.response ? error.response.data : error);
                showMessage('error', 'Failed to update profile. Please try again.');
            });
    }

    function showMessage(type, message) {
        const messageContainer = document.getElementById('message-container');
        messageContainer.innerHTML =
            `<div class="alert alert-${type === 'success' ? 'success' : 'danger'}" role="alert">${message}</div>`;
        messageContainer.style.display = 'block';
        setTimeout(() => {
            messageContainer.style.display = 'none';
        }, 3000);
    }
</script>

<style>
    #message-container {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 1050;
        display: none;
    }
</style>